[Tutorial]Como fazer um Gif Animado com Photoshop

A partir da versão 5.5 de Photoshop temos a nossa disposição um
programa muito interessante para realizar, entre outras coisas,
trabalhos específicos para o web, como podem ser a criação de GIFs
animados ou imagens que mudem ao passar o mouse por cima (Rollover). O
produto em concreto é Image Ready e vamos estudar a maneira de trabalhar com ele para realizar um GIF animado.

Criar um arquivo .psd com os diferentes fotogramas

A primeira tarefa para realizar um GIF animado com Photoshop eé criar um
arquivo .psd, que é o formato próprio de Photoshop onde podemos manter
as "layers", ou seja, as camadas que serão necessárias para realizar o
GIF animado.

Nota: As camadas são próprias de Photoshop e de outros
programas de desenho gráfico e permitem editar partes do gráfico de
maneira independente. Quem quiser dominar Photoshop e similares deverá
familiarizar-se com o trabalho com camadas.

Cada camada criada com Photoshop pode ser um fotograma do GIF animado,
por isso podemos criar tantas camadas de acordo com quantas imagens
quisermos que tenha na animação. Logo com Image Ready poderemos
intercalar essas camadas na ordem que quisermos e atribuir-lhes um tempo
de visualização a cada uma.

Uma vez criada a imagem com as diferentes camadas com Photoshop, podemos
salvá-la com extensão .psd, para que salve toda a informação das
camadas. Uma vez salvas podemos passar o arquivo a Image Ready, que é o
programa que utilizaremos para animar as camadas em um GIF animado.

Para passar o arquivo do Photoshop a Image Ready comodamente, podemos
utilizar um botão que existe na parte debaixo da barra de ferramentas. O
botÃO se encontra nos dois programas e podemos vê-lo remarcado na
imagem à direita.

Nota: A ação de passar de um programa a outro será muito repetida
durante o trabalho com Photoshop e Image Ready, visto que cada programa
tem capacidades distintas e as ações que se fazem com um programa não
costumam estar disponíveis no outro. Por exemplo, se quisermos editar
uma camada, temos que fazer a partir do Photoshop e se quisermos criar
fotogramas e selecionar as camadas que devem ser visualizadas em cada
um, teremos que fazer com Image Ready. É aconselhável salvar o arquivo
.psd antes de passar de uma aplicação a outra.

Trabalho com Image Ready

Para definir cada um dos fotogramas da animação e suas propriedades
temos uma janela chamada Animação. Se não a vemos ao abrir Image Ready
podemos mostrá-la no menu da janela > Mostrar animação.

A janela de animação contem um botão para adicionar fotogramas que tem
forma de documento novo. Em cada fotograma podemos selecionar de maneira
independente as camadas que se desejam visualizar, de modo que devemos
criar os distintos fotogramas da nossa animação e indicar que camadas
devem ser visualizadas em cada um deles. Aliás, as camadas se podem
fazer visíveis ou invisíveis pela janela de camadas com o olho que
aparece do lado de cada uma das camadas. Quando se pode ver o olho, a
camada está visível e quando não aparece o olho é porque está invisível.

Para atribuir o tempo de visualização de cada um dos fotogramas temos um
registro dos segundos de visualização exatamente embaixo da miniatura
do fotograma. Ao clicar sobre esse registro de segundos, aparecerá uma
janela para selecionar qualquer duração, em segundos.

Quando tivermos a animação tal como desejarmos que apareça em nossa
página web selecionamos no menu Arquivo, a opção "Salvar otimizada
como..." e aparecerá a janela típica para selecionar o diretório e o
nome de arquivo que queremos atribuir-lhe.

Otimizar a imagem com Image Ready

Podemos modificar as propiedades da imagem GIF, como número de cores ou o
tipo de paleta para otimizar a imagem, com o objeto que ocupe o menor
espaço possível em bytes e que seja rápida para baixar. A otimização se
deve realizar respeitando a qualidade da imagem tanto como sejamos
capazes. Para realizar estas ações Image Ready dispõe de uma janela
chamada Otimizar, que se não aparece poderemos mostrá-la pelo menu
Janela > Mostrar otimizar.

A característica mais interessante para otimizar em um arquivo GIF é o
número de cores. Em geral, ao menor número de cores, menor o tamanho do
arquivo. Na janela do documento podemos encontrar opções que nos
permitenm selecionar a versão da imagem que queremos visualizar: a
versão Original ou a Otimizada. As opções 2 cópias ou 4 coópias permitem
comparar entre a versão original e algum tipo de otimização.

Resultado obtido

Para realizar este artigo criamos um GIF animado que pode ser visto a
seguir. Não é muito atraente, mas será interessante ver o resultado
conseguido.

[Tutorial]Como fazer um Gif Animado com Photoshop Gif-animado

» [Tutorial]Como criar um gif com Photoshop II
» Setores de Photoshop
» 30 Dicas de Photoshop
» [Tutorial] Lote com photoshop para executar uma ação sobre os arquivos de um dirétorio
» [TUTORIAL] Tratamento