Imagens para o manual ¶

Este é uma pequena extensão de Salvando para a Web. Em particular, aborda a criação de imagens para o manual e como otimizá-las.

Ferramentas para fazer capturas de tela ¶

Agora, se você deseja criar uma imagem da tela com todos os painéis e ferramentas, então Salvando para a Web não será muito útil: afinal, ele só salva o conteúdo da tela!

Então, em vez disso, faremos uma captura de tela. Dependendo do seu sistema operacional, existem vários utilitários de captura de tela disponíveis.

Windows ¶

O Windows possui uma ferramenta de captura de tela integrada. Por padrão, ela está localizada na tecla Print Screen. Em laptops, às vezes, você precisará usar a tecla Fn.

Tanto o Gnome quanto o KDE possuem ferramentas de captura de tela decentes, que aparecem por padrão ao usar a tecla Print Screen, assim como outros ambientes de desktop populares. Se, por algum motivo, você não tiver

ImageMagick

Com o imagemagick, você pode usar o seguinte comando:

import -depth 8 -dither <nomearquivo.png>

Embora devêssemos minimizar a quantidade de GIFs no manual por diversos motivos de acessibilidade, às vezes ainda é necessário criar GIFs e vídeos curtos. Além disso, GIFs são ótimos para exibir recursos em notas de lançamento.

Para criar GIFs curtos, você pode usar os seguintes programas:

Peek – Possui um AppImage e uma interface de usuário muito fácil de usar. Como muitos programas de gravação de tela, ele apresenta problemas no Wayland.

macOS ¶

A tecla de atalho para captura de tela no macOS é Shift + Command + 3, de acordo com a documentação oficial da Apple.

O formato de arquivo apropriado para o trabalho ¶

Diferentes formatos de arquivo são melhores para certos tipos de imagens. No final, queremos imagens que tenham boa aparência e tamanho reduzido, pois isso facilita o download ou a navegação do manual na internet.

Capturas de tela da interface: Deve ser usado PNG e, se possível, GIF.
Imagens com muitas cores planas.: Deve ser usado o PNG.
Imagens em tons de cinza: Devem ser GIF ou PNG.
Imagens com muitos gradientes: Deve ser JPG.
Imagens com muita transparência.: Deve ser usado PNG.

A lógica é a maneira como cada um deles salva as cores. JPEG é ideal para fotos e imagens com muitos gradientes porque comprime de forma diferente. No entanto, contrastes não funcionam bem em JPEG. PNG se sai muito melhor com imagens com contrastes acentuados, enquanto em alguns casos podemos até ter menos de 256 cores, então GIF pode ser melhor.

Imagens em tons de cinza, mesmo quando apresentam muita variação de gradiente, devem ser PNG. Isso ocorre porque, quando usamos imagens coloridas, estamos, dependendo da imagem, usando de 3 a 5 números para descrever esses valores, com cada um deles podendo conter qualquer um dos 256 valores. JPEG e outros formatos de arquivo com perdas usam truques psicológicos inteligentes para reduzir a quantidade de valores que uma imagem precisa para exibir seu conteúdo. No entanto, quando criamos imagens em tons de cinza, levamos em conta apenas a luminosidade. A luminosidade é apenas um número, que pode ter 256 valores, tornando muito mais fácil usar apenas GIF ou PNG em vez de JPEG, que pode apresentar artefatos desagradáveis. (E também é um pouco menor.)

Quando em dúvida, use PNG.

Otimizando imagens em qualidade e tamanho ¶

Agora, enquanto a maioria dos editores de imagem tenta fornecer bons padrões para os tamanhos de imagem, muitas vezes podemos torná-los ainda menores usando certas ferramentas.

Windows ¶

A ferramenta mais comumente recomendada para isso no Windows é IrfranView, mas o caro autor deste documento não tem ideia de como usá-la exatamente.

A outra opção é usar o PNGCrush, conforme mencionado na seção sobre Linux.

Linux ¶

Otimizando o PNG ¶

Existe uma extensa lista de ferramentas de otimização de PNG disponíveis no Linux. Elas se dividem em duas categorias: Com perdas (que usam truques psicológicos) e Sem perdas (que tentam compactar os dados de forma mais convencional). No entanto, as mais recomendadas são:

PNGQuant

Um compressor PNG que usa técnicas com perdas para reduzir a quantidade de cores usadas de forma inteligente.

Para usar o PNGquant, vá até a pasta de sua escolha e digite:

pngquant --quality=80-100 imagem.png

Onde imagem é substituído pelo nome do arquivo de imagem. Ao pressionar a tecla Enter, uma nova imagem aparecerá na pasta com os resultados compactados. O PNGQuant funciona para a maioria das imagens, mas algumas, como os seletores de cor, não funcionam bem com ele. Portanto, sempre verifique se a imagem resultante está boa. Caso contrário, tente uma das seguintes opções:

PNGCrush

Um compressor PNG sem perdas. Uso:

pngcrush imagem.png imagemsaida.png

Isto testará os métodos mais comuns. Adicione -brute para testar todos os métodos.

Optipng

Outro compressor PNG sem perdas que pode ser executado após usar o PNGQuant. Aparentemente, é originalmente uma bifurcação do png crush. Uso:

optipng imagem.png

onde imagem é o nome do arquivo. O OptiPNG testará vários algoritmos de compressão e sobrescreverá o arquivo imagem.png pela versão otimizada. Você pode evitar a sobreposição com o comando --out imagemsaida.png.

Otimizando o GIF ¶

Otimizando o JPEG ¶

O JPEG é realmente complicado de otimizar corretamente. Isso ocorre porque é um formato de arquivo com perdas, o que significa que ele usa truques psicológicos para armazenar seus dados.

No entanto, truques como esses se tornam muito óbvios quando a imagem tem muito contraste, como texto. Além disso, arquivos JPEG não funcionam bem quando salvos repetidamente. Portanto, certifique-se de que haja uma versão sem perdas da imagem em algum lugar que você possa editar e que apenas o resultado final esteja em JPEG e seja compactado ainda mais.

macOS ¶

ImageOptim – Um wrapper de interface gráfica de usuário em torno de ferramentas de linha de comando como PNGquant e gifski.

Editando os metadados de um arquivo ¶

Às vezes, informações pessoais são incorporadas a um arquivo de imagem. Outras vezes, queremos embutir informações a um arquivo para melhor documentá-lo.

Existem não menos que 3 a 4 maneiras diferentes de lidar com metadados, e os metadados têm maneiras diferentes de lidar com certos arquivos.

A ferramenta mais comumente usada para editar metadados é o ExifTool, outra é usar o ImageMagick.

Windows e macOS ¶

Para obter o exiftool, basta obtê-lo no site.

Linux ¶

No Linux, você também pode instalar o exiftool.

Debian/Ubuntu: sudo apt-get install libimage-exiftool-perl

Exibindo metadados ¶

Mude o diretório para a pasta onde a imagem está localizada e digite:

exiftool imagem

onde imagem é o arquivo que você deseja examinar. Se você simplesmente digitar exiftool em qualquer pasta, ele exibirá todas as informações possíveis sobre qualquer arquivo encontrado. Se você observar atentamente algumas imagens, verá que elas contêm metadados de autor ou local. Isso pode ser um problema às vezes quando se trata de privacidade e também o principal motivo pelo qual todos os metadados são removidos.

Você também pode usar o identify do ImageMagick:

identify -verbose imagem

Removendo metadados ¶

A remoção de metadados da imagem.png de exemplo pode ser feita da seguinte maneira:

ExifTool

exiftool -all= imagem.png

Isso esvazia todas as etiquetas que o exiftool pode acessar. Você também pode ser específico e remover apenas uma etiqueta: exiftool -author= imagem.png

OptiPNG

optipng -strip imagem.png Isso removerá e compactará o arquivo png.

ImageMagick

convert imagem.png –strip

Extraindo metadados ¶

Às vezes, queremos extrair metadados, como um perfil ICC, antes de remover tudo. Isso é feito convertendo a imagem para o tipo de perfil:

Convert do ImageMagick

Primeiro extraia os metadados para um perfil convertendo:

convert imagem.png imagem_ferfil.icc

Em seguida, retire os metadados do arquivo e leia as informações do perfil:

convert -profile imagem_perfil.icc imagem.png

Embutindo metadados de descrição ¶

Metadados de descrição são realmente úteis para auxiliar usuários de leitores de tela. Navegadores da web frequentemente tentam usar os metadados de descrição se não houver texto alternativo para gerar o texto alternativo. Outra coisa que você pode querer incorporar são dados como espaço de cor.

ExifTool

ImageMagick

Definindo um valor exif:

convert -set exif:ImageDescription "Uma descrição da imagem" imagem.png imagem_modificada.png

Configurando o trecho PNG para descrição:

convert -set Description "Uma descrição da imagem" imagem.png imagem_modificada.png

Embutindo metadados de licença ¶

De certa forma, embutir metadados de licença é muito bom porque permite marcar permanentemente a imagem como tal. No entanto, se alguém a enviar para outro site, é muito provável que os metadados sejam removidos com o Imagemagick.

Usando as propriedades ¶

Você pode usar dcterms:license para definir o documento onde a licença é definida.

ImageMagick

Para a GDPL:

convert -set dcterms:license "GDPL 1.3+ https://www.gnu.org/licenses/fdl-1.3.txt" imagem.png

Isso define um nome abreviado e, em seguida, o texto da licença.

Para a Creative Commons BY-SA 4.0:

convert -set dcterms:license "CC-BY-SA-4.0 https://creativecommons.org/licenses/by-sa/4.0/" imagem.png

O problema de usar propriedades é que elas são uma forma não padronizada de definir uma licença, o que significa que as máquinas não podem fazer muita coisa com elas.

Usando o XMP ¶

O site Creative Commons sugere que usemos XMP para isso. Você pode solicitar que a Licença Creative Commons gere um arquivo XMP apropriado para você ao escolher uma licença.

Precisaremos usar as etiquetas XMP do exiftool.

Então ficaria algo assim:

exiftool -Marked=true -License="https://creativecommons.org/licenses/by-sa/4.0" -UsageTerms="Este trabalho é licenciado sob a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>." -Copyright="CC-BY-SA-NC 4.0" imagem.png

Outra maneira de fazer a marcação é:

exiftool -Marked=true -License="https://creativecommons.org/licenses/by-sa/4.0" -attributionURL="docs.krita.org" attributionName="kritaManual" imagem.png

Com o imagemagick você pode usar a opção de perfil novamente.

Primeiro extraia os dados (se houver):

convert imagem.png imagem_meta.xmp

Em seguida, modifique o arquivo resultante e incorpore os dados da imagem:

convert -profile imagem_meta.xmp imagem.png

As definições XMP por licença. Você pode gerar um arquivo XMP para os metadados no site do Creative Commons.