quarta-feira, setembro 02, 2009

GIFs transparentes com Photoshop

Com o recurso de salvamento para a web é fácil produzir imagens translúcidas para usar em sites

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.
Com o recurso de salvamento para a web é fácil produzir imagens translúcidas para usar em sites


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.

Com o recurso de salvamento para a web é fácil produzir imagens translúcidas para usar em sites


5. Sem halo
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.