GIFs transparentes com Photoshop

Por Carlos Machado

2 de setembro de 2009

Quer preparar um GIF transparente para seu site? Essa não é uma das tarefas mais complexas do Photoshop. O recurso Save for Web (Salve Para a Web e Dispositivos ou Save for Web & Devices, nas versões CS3 e CS4)) facilita o trabalho. Acompanhe os passos para a criação de um GIF transparente.

1. Prepare a figura
Abra a imagem que contém a figura que você deseja transformar em GIF transparente. Em nosso exemplo, vamos literalmente colher uma fruta no pé. O objetivo é isolar um abacate numa foto em que ele está na árvore. Dê um zoom na imagem para facilitar o trabalho. Acione a Pen Tool (Ferramenta Caneta) e trace com cuidado o contorno da fruta. Comece num ponto e vá circundando o abacate até fechar a marcação no mesmo ponto de partida.

2. Defina a selação

Clique com o botão direito do mouse no abacate marcado e, no menu de contexto, escolha a opção Make Selection (Criar Seleção). Na janela que surgirá, indique o valor zero no campo Feather Radius (Raio de Difusão). Dê OK. Agora o abacate é uma seleção. Acione o comando Edit > Copy (Editar > Copiar Mesclado ou Shift + Ctrl + C no CS3) a fim de copiá-lo para a área de transferência. Agora, crie nova imagem (File > New). Como há uma imagem na memória, já mostra uma caixa New ajustada para o tamanho e padrão dessa imagem. Dê OK. Cole (Edit > Paste, ou Ctrl + C) o abacate na nova imagem em branco.
|quebra|
3. Prepare o GIF

Acione o comando Filter > Blur > Gaussian Blur (Filtro > Desfoque > Desfoque Gaussiano) e aplique um filtro leve, com raio (caixa Radius) de apenas 0,5 pixel. Vamos agora salvar a imagem como GIF transparente. Dê o comando File > Save for Web (Arquivo > Salvar para a Web e Dispositivos ou Save for Web & Devices, nas versões CS3 e CS4). Na caixa de diálogo que surgirá, selecione a ferramenta de zoom, na barra de ferramentas à esquerda e clique uma ou duas vezes na imagem para torná-la mais fácil de visualizar. No conjunto de controles à direita da tela, assegure-se de que esteja selecionada a opção GIF e marcada a caixa Transparency (Transparência).

4. Ligue a transparência

Agora, observe a paleta de cores. Nela, você precisa indicar qual cor da imagem será transformada em transparência. Em nossa imagem, é a cor branca, que corresponde aos contornos do retângulo que contém o abacate. Portanto, essa cor corresponde ao último quadradinho no canto direito inferior da paleta. Clique nela. Em seguida, clique no botãozinho quadriculado, abaixo da paleta. Ao fazer isso, note que as áreas brancas da figura passam a exibir um fundo quadriculado – o indicador de transparência. Missão cumprida. Clique no botão Save (Salvar) e dê um nome ao seu GIF transparente. Para tirar a prova dos nove, inclua esse GIF numa página HTML cujo fundo não seja branco.
|quebra|
5. Sem halo

Os passos dados acima produzem um GIF transparente perfeito, mas somente se for branca a página web na qual essa imagem vai ser usada. Se você criar uma página com um fundo de qualquer outra cor, notará um halo branco ao redor da figura. Há uma forma de evitar isso. Mas para tanto você precisa saber de antemão qual será a cor de fundo da página onde o GIF será utilizado. A solução está no passo 3, acima. Na janela em que salvará para a web, clique na caixa Matte (ou Fosco) e escolha a cor que será usada na página web.

>> Baixe a versão de avaliação do Photoshop CS4 Extended no Downloads INFO.

>> Troque dicas e informações e esclareça dúvidas sobre Photoshop no Fórum INFO.

>> Confira testes de programas gráficos no Reviews INFO.