Muitas vezes é necessário aplicar uma imagem sobre um fundo ou textura colorida, onde é necessário que essa imagem seja recortada. Imagens em JPG, por exemplo, mesmo que seu fundo seja branco, este aparecerá no arquivo ao ser importado, seja no InDesign, ou no Power Point, como mostrado abaixo:
Saber trabalhar com o ‘modo de cores’ de uma imagem é tão importante quanto saber utilizar a resolução correta. Existem vários ‘modos de cores’ para se usar em uma imagem, vamos aos mais conhecidos:
Cores em CMYK
São as 4 cores de escala de gráfica. Toda imagem colorida a ser impressa em off-set deve estar com cores em CMYK.
[DICA: não apenas as imagens, mas todas as cores usadas no documento que não serão "especiais" devem estar em CMYK].
CMYK é a sigla em inglês para as 4 cores: Cyan (azul), Magenta, Yellow (amarelo) e Black (preto). Você pode estar se perguntando o por quê do preto (em inglês black) ser representado pelo K em vez do B. Um dos motivos é porque o preto é considerado a cor chave (Key), onde as demais cores são alinhadas a partir dela. Já ouvi falar também que se fosse usado “B” para o preto, poderia ser confundido com Blue (azul). Estas 4 cores formam todas as outras cores, a partir da porcentagem de cada uma. Por exemplo, o vermelho vivo possui 100% de magenta e 100% de amarelo (0% das demais cores). 0% de todas as cores formam o branco (ou a cor do papel) e 100% de todas as cores formam um preto total (que acaba sendo até mais forte que apenas o 100% preto, por estar “calçado” pelas outras cores).
Cores em RGB
Tons de Cinza (grayscale)
Os tons de cinza são as porcentagens do preto, que variam de 0% (branco) até o 100% (preto). Basicamente, uma imagem em garyscale possui apenas uma cor, com variações desta mesma cor, que no seu monitor aparecerá como preto. Mas se esta mesma imagem for importada em um software como Illustrator ou InnDesign, você pode aplicar uma cor a ela, e a imagem terá apenas os tons da cor aplicada. Esta é uma tática usada quando o material produzido possui apenas uma cor, que pode não ser o preto.
Bitmap
Ao contrário dos tons de cinza, uma imagem com modo bitmap não tem variações (porcentagens) da cor. A imagem é representada apenas com preto e branco, ou seja, pixel COM cor, pixel SEM cor. A quantidade de pixels próximos e/ou afastados é que formam as tons da imagem. Uma boa analogia é um desenho feito com “pontilismo”, onde usa-se apenas o ponto preto para representá-la.
Duotone
Quando uma imagem está com tons de cinza, no photoshop é possível se usar “duotone”. Com o duotone, você pode utilizar de 2 a 4 cores para representar uma imagem, criando imagens duotônicas (duas cores), tritônicas (três cores) e quadritônicas (quatro cores). Se a saída for em off-set, e não possuir cores especiais, você deve converter a imagem finalizada para CMYK. Além disso, imagens com modo de cor duotone só podem ser salvas como PDF, PSD e EPS, então talvez você precise converter o final para RGB se desejar usá-las como JPG ou PNG.
Index color (cores indexadas)
Antigamente, quando a maioria das pessoas usavam internet por acesso discado, era essencial que as imagens tivessem o menor peso possível em termos de memória. Uma imagem colorida com cores indexadas deixa o arquivo menor, sendo mais rápida sua visualização e com menos bits para transferência e carregamento. Um arquivo com cores indexadas possui uma tabela de cores, onde é armazenada apenas as cores presentes na imagem.
[DICA FINAL: Imagens coloridas devem estar em CMYK para impressão em off-set; e em RGB (ou Index) para uso em internet ou outros veículos digitais.]
Saber a resolução certa de uma imagem para um trabalho é muito importante para garantir boa qualidade nos seus projetos. Para internet é preciso adequar qualidade com otimização, ou seja, a imagem deve ser leve e ter boa resolução. Para impressão em gráfica, a qualidade também é relacionada a uma unidade de medida específica, que se muito elevada pode ser desnecessária e “atolar” seu HD, e muito abaixo gera uma impressão ruim.
Quando falamos em resolução de imagem, estamos falando de imagens bitmap. Este tipo de imagem é formada por um conjunto de pixels (o menor ponto de um monitor). Arquivos como JPG, GIF, TIF, PNG, entre outros, contém este “mapeamento de bits”.
Há uma diferença sutil, mas importante entre pixel e ponto. Pixel é a menor unidade de um monitor, seu tamanho é fixo*. Um ponto (dot) é a menor unidade usada na impressão de uma imagem, e seu tamanho é relativo. De modo geral, vemos uma foto no computador através do conjunto de seus pixels e vemos uma foto impressa através do conjunto de seus pontos. Por esta razão, uma foto com muitos pixels pode ficar ruim se a saída for em uma impressora com poucos DPI.
* A visualização do pixel pode ser alterada nas configurações do monitor, onde você escolhe quantos pixels de altura e largura quer que o monitor apresente, mas o pixel continuará tendo o mesmo tamanho para qualquer imagem do seu computador.
DPI (sigla em inglês para ‘dots per inch‘) significa “pontos por polegada”. Toda imagem impressa é composta por pontos, e é a quantidade destes em uma polegada que define sua qualidade final. Por exemplo, quando temos uma imagem com 100 DPI, significa que em uma polegada existem 100 pontos. Em termos gráficos, quanto maior o número de pontos nesta polegada, menor deverá ser o tamanho deste ponto e consequentemente, a imagem será impressa com uma melhor definição. É possível também medirmos a resolução por centímetro (pontos por centímetro), mas DPI é o mais comum.
[Geralmente associamos DPI (pontos por polegada) e PPI (pixels por polegada) como sendo sinônimos. No ramo gráfico não há mesmo muita distinção entre as 2 nomenclaturas, o que podemos relacionar é DPI a impressão em papel (um ponto de tinta) e PPI a resolução em monitores (um ponto de luz)]
Para internet, uma imagem de boa qualidade terá um mínimo de 72 DPI. Para impressão em gráfica, uma imagem deve ter um mínimo de 300 DPI (há casos onde 250 DPI é possível). Para impressão em plotter (como um banner), 150 DPI é aceitável, mas sempre confirme com seu fornecedor a resolução desejada.
No ramo gráfico, também usamos LPI (‘lines per inch‘), conhecido como “lineatura”. Esta medida indica o número de linhas (com pontos) presentes em uma polegada. Assim como o DPI, quanto maior o número, maior será a resolução. Esta medida geralmente é usada na saída de um trabalho, ao fechá-lo para impressão, muitas vezes é adicionado automaticamente, conforme o ‘drive‘ usado. Hoje em dia, com envio de arquivos fechados em PDF para gráficas, acabamos deixamos o controle do LPI para o “impressor”.
É importante também saber sobre a relação entre DPI e as dimensões de uma imagem. O DPI é SEMPRE inversamente proporcional às dimensões da imagem. Ou seja, se você amplia uma figura, sua resolução cai, assim como reduzindo suas medidas, o DPI aumenta. Veja o exemplo abaixo, como funciona esta relação:
Note que uma imagem 10 x 10 cm com 300 DPI é exatamente igual a uma imagem 20 x 20 com 150 DPI. DPI e dimensões sempre devem ser observados juntamente. Você pode receber uma imagem com 300 DPI e perceber que ela está em baixa, se ela tiver 10 x 10 cm e você precisar utilizá-la com 30 x 30 cm. Da mesma forma, você pode receber uma imagem com 72 DPI e, antes de reclamar com seu fotógrafo ou fornecedor de imagens dizendo que ela está com pouca resolução, irá perceber que ela está com 125 x 125 cm, ideal para se usar com 30 x 30 cm.
Um dos erros mais comuns quando se trata de resolução é aumentar o DPI via software, sem alterar as dimensões da imagem. Isso não a deixa com mais definição, pois o ponto dela já está desenhado e será ampliado sem alterar as imperfeições. Há softwares no mercado que tentam corrigir estas perdas dos pontos ao ampliar a resolução via software. Mas recorra sempre a uma imagem feita originalmente com uma resolução maior.
Isso não significa que você nunca possa ampliar a resolução de uma imagem via software. (No Photoshop, basta marcar a opção “Resample Image” na caixa de diálogo “Image Size”). Quando eu faço uma ilustração, primeiramente a desenho a lápis, digitalizo a 150 DPI e envio para o cliente aprovar. Com 150 DPI, a imagem fica com boa visualização e leve para envio via e-mail (grayscale em JPG). Se o cliente a imprimir, estará com qualidade razoável para impressoras a jato de tinta. Com o lápis aprovado, é hora de finalizá-la, através de uma mesa digitalizadora, com o traçado feito digitalmente. Para isso, eu não preciso digitalizar novamente a imagem com 300 DPI. Posso alterá-la via software, aumentando a resolução (e até as dimensões). Em uma nova camada, eu inicio a finalização, que será criada com o arquivo já contendo 300 DPI e o tamanho final desejado. A camada do lápis depois é descartada. Mas lembre-se, a resolução é alterada antes de iniciar a finalização a traço.
Para terminar, podemos também descobrir qual a resolução de uma imagem olhando apenas para suas dimensões, desde que sejam expressas em pixels. Esta não é uma maneira comum no ramo gráfico, sendo mais usual para profissionais que trabalham com imagens digitais, como fotógrafos. Note que monitores e televisores tem sua resolução expressa apenas em pixels. No exemplo mostrado anteriormente, veja que mesmo alterando os DPI e dimensões em cm (mantendo a proporcionalidade), as dimensões em pixels não sofreram alteração.
Este é o mesmo modo que uma câmera digital trabalha com resolução. E se você criar uma imagem nova no Photoshop, usando as dimensões em pixels, perceberá que não importa o valor que será colocado em ‘pixels/inch‘. Depois ele ajusta as medidas em outra unidade de medida conforme o DPI digitado (que você pode conferir posteriormente em Image Size), mas ao criar o arquivo novo em pixels, não é necessário se preocupar com DPI.
Thumbnails são versões reduzidas de imagens (miniaturas) usadas para facilitar a busca ou o reconhecimento de uma fonte. O Facebook, por exemplo, utiliza thumbnails quando compartilhamos um site ou blog. Geralmente escolhe as imagens presentes no link compartilhado para usar como thumbnail. Se um link tiver mais de uma imagem, você pode escolher qual deseja para thumbnail, ou optar por nenhuma.
Mas nem sempre as imagens que aparecem são as que gostaríamos que fossem visualizadas. Uma vez compartilhei um link de texto do meu site e a única imagem disponível foi a de um botão, que nada representava. Foi então que pesquisei e aprendi como colocar um código para um thumbnail padrão, para quando isso acontecer.
Crie sua imagem padrão e faça o upload dela. Em seu site ou blog, insira entre as tags <head></head> o comando:
<link rel=”image_src” href=”caminho da imagem/nome da imagem.gif” />
Favicon é um um pequeno ícone, com 16 x 16 pixels, no formato “ico“, e podem ser visualizados na barra de endereços e nas abas dos navegadores. Isso dá mais acessibilidade ao internauta na busca de um site em uma lista ou barra de abas. Se você ainda não entrou em um site (que está em seu bookmarks) ou se ele não possuir um favicon, o navegador exibe um imagem padrão.
Para adicionar um favicon no seu site ou blog, a primeira coisa a se fazer é ter a imagem “.ico”. Geralmente é usado o logotipo da empresa (ou partes reconhecíveis dele), ou outra imagem característica. Lembre-se que é uma imagem muito pequena, e muitos detalhes podem ser perdidos. Alguns navegadores aceitam imagens GIF, PNG ou JPG, mas para ter uma visualização em qualquer navegador, use sempre uma imagem “ICO”. Com a imagem criada, você precisa gerar o arquivo “.ico”. Existem softwares gratuitos na internet que podem fazer isso, como o Logaster. Eu prefiro usar o próprio Photoshop, mas é preciso instalar o plugin “ICOFormat“, que você também encontra download gratuito. Então, em ‘Salvar Como’ (Save as), escolha o formato ‘ICO (Windows Icon)‘.
Nos seus arquivos do site, ou do blog (header), insira dentro das tags <head></head> o comando:
<link rel=”shortcut icon” href=”caminho da imagem/sua imagem.ico”/>
A imagem favicon não aparecerá se você estiver trabalhando off-line, visualizando no navegador os arquivos do seu computador. Faça o upload dos arquivos e seu favicon criado será visualizado.