Como fazer um gif animado com Photoshop

Descrição passo a passo de como fazer um gif animado com Photoshop e Image Ready.

Por Juliana Monteiro Lázaro


Publicado em: 08/6/04
Valorize este artigo:
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.

Imagem das camadas criadas para fazer a animação


Botão para passar entre Photoshop e Image Ready 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.

Janela de animação de Image Ready


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.

Escolher o tempo de cada fotograma


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.

Janela para otimizar a imagem

Selecionar o modo de visualização do documento


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.

GIF animado resultado do exercício





Comentários do artigo
Foram enviados 63 comentários ao artigo
4 comentários não revisados
59 comentários revisados:
Por: Stephanie
09/12/05
Oie
Eu fiz a gif... fico super fofs...
acontece q vcs naum ensinaram como salvar hehehehehe
eu jah tentei mas num dah
M respondam por e-mail por favor!
bjs
Por: mayy
11/1/06
oii...eu tenho esses 2 programas e esse seu tutorial ta me ajudando muito.
so que eu nao to conseguindo colacar outras camadas diferentes do ImageReady.pode me ajudar?
eu estou utilizando gifs dolls serve? so pra testa.
obrigadinha
Por: Flavia
28/3/06
Oi!
Essa explicação esta muito boa, mas eu não consegui entender a qual é a janela animação...
se puder me ajudar to ai
Obrigada!
Por: Flavia
29/3/06
Olá!
consegui fazer o gif!
quando eu fazia em outros programas, o gif ficava meio "defeitoso" nas cores, mas quando eu fiz do geito que você me ensinou, ficou perfeito!
Muito Obrigada!
Beijos!
Por: barbara
03/4/06
olá,tentei fazer como vc ensina,mais não tô conseguindo,poderia mostrar detalhadamente?mostrar onde e como começar,quais os botões a serem usados.como iniciar e terminar,na sua explicação vc apenas resumiu tudo...e não deu pra entender quase nada.
desde ja fico muito agradecida..
obrigada
Por: julia
08/12/06
nem é! esse tutorial até está explicado, mas tem mané que espera que o tutorial crie mãos e segure o mouse pelo manezão, que milagrosamente consegue abrir o programa sem achar que trabou ou algo assim, e faça as coisas por si só.
além de aprender a ler, interpretar texto, e entender, quando se procura um tutorial, de preferência esteja disposto a dar uma olhada no programa... ver onde ficam as coisas... não só olhar os 'print screen'.
Por: José Eduardo
09/12/06
Só pelo fato de você ter se disponibilizado a escrever um tutorial, isso já é louvavel, mas vamos acrescentar algumas informações utéis para quem esta tendo dificuldade.
Depois de exportar seu arquivo com diversas camadas para o Image Ready, e visualizar a linha de animação de acordo com o ensiamento do tutorial adicione a quantidade de frames que desejar, observe que todos serão iguais ao primeiro, basta selecionar o frame numero dois e ir a barra de layers e clicar no olhinho que esta ao lado de cada camada e ir retirando o olhinho que significa visualizar camada de camada quadro, deixando apenas a imagem da camada que deseja exinir em sua animação. espero ter ajudado...
Por: edi
11/12/06
oi sou loukjo pra aprender , mas nao tenho os programas qual seria a sua indicacao , mas tipo phothop que possa ser baixado em algum site e o outro programa o ready tb posso baixalo em algum site ??
Por: Ana Lígia
06/1/07
Olá, consegui fazer! As indicações de onde estavam os menus foram bem precisos. Só achei q poderia ter 1 passo a passo na hora do ImageReady, mas isso não torna impossívem e nem mesmo difícil aprender. é só ter um pouco de paciência. Valew!!! :)
Por: fernanda
20/1/07
Bom a explicação esta boa.
Mas é preciso + informações; como do tipo como salvar, como se chegar as tais janelas.
Mas ficou bom ... =]
Origada
Por: Nilton Castro
01/2/07
Muito bom o seu artigo, parabens amigo pelo seu artigo, ele é bem simples e prático de se aprender a criar gifs animados.

Abraço e sucesso.
Por: Hugo
04/2/07
OBRIGADOOOOO³³³³³³³³
Caramba, a um tempo atras eu já tinha utilizado isso com certa facilidade, mas agora sem pratica fui pegar pra fazer, e não sabia mais,... graças a vocês eu consegui fazer meu gif huahuahuah muito obrigado, muito obrigado também ao José Eduardo, o problema que eu estava tendo, que não lembrava como solucionar, era exatameeeente o que vocÊ me disse. Parabéns... realmente, só de você terem o bom coração de escreverem um tutorial aqui, já é louvavel!
Por: Milena
09/2/07
Pelo amor de Deus, o cara ensina passo a passo e ensina como salvar, e todo mundo reclamando que não consegue salvar, leiam até o fim!!!
E se vocês quiserem mesmo aprender, é só fuçar um pouquinho ¬¬
Por: Danielle
12/2/07
oieee
achei muito bacana a sua iniciativa, parabéns!
é raro de se ver alguém expor o q sabe sobre photoshop assim, de graça xD
ajuda bastante sim! é só mexer mesmo, como já disse alguém aki.
eu não sabia dessas paradas, fui mexendo e fui aprendendo, achava muito difícil e depois me dei conta q era muito fácil...
mas, tenho ainda uma dificuldade...
a mesma q muita gente anda se queixando ^^
não sei criar gifs animados no image ready...
tipo, os frames todos eu trabalho com eles, mas na hora de salvar o arquivo, só tem a opção de "psd" e pra onde eu quero usar o arquivo, não é permitido esse formato, tem q ser gif mesmo :(
como faço?
desde ja, obrigada!
Por: cleverton
24/3/07
muito bom esse site!!!
gostei..
fez a giff sem nenhum problema!
Por: ricardo
26/4/07
Funcionou perfeitamente o passo-a-passo do tutorial. Nunca tinha feito e ficou perfeito, veja o resultado em
http://www.expedicaomochila.com.br/imagens/capa/em_animado.gif

Valeu, obrigado...
Por: Alexchaivike
08/5/07
Cara Muito obrigado , legal ver gente se importando em ajudar e ensinar !!!!
Por: João
02/8/07
Parabéns pelo tuto e tbm as dicas de como enxergar os frames. Muito bom, até que enfim acertei um ótimo tudo.
Por: Cida
26/9/07
Consegui fazer como no tutorial mas não consigo salvar como gif animada.O que faço?Parabéns pelo tutorial e agradeço a resposta.
Por: Ulysses
08/11/07
Estou tentando animar um Logotipo para inserir dentro de um programa de edição de vídeo (Avid Liquid Edition da Pinnacle) só que após criar o arquivo em PSD com todos os layers e abrir no Image Ready, na tela "Animation" não aparecem os layers, só aparece um quadro (quadro_1). Como faço para inserir os diversos layers na tela "Animation", para poder temporizar e depois rodar? Se alguém puder me ajudar agradeço.
Por: Ivanildo
12/11/07
Boa tarde Legal sua explicação, porém esta faltando você dizer como devemos salvar em gif animado.
Pois eu criei algumas mala diretas e preciso enviar por e-mail. No qual tem que ser animado entendeu...
um forte Abraço.

Ivanildo
Por: Vitor
16/11/07
Muito obrigado pela dica, as instruções passo a passo possibilitam até um leigo como eu a fazer gifs. Daqui pra frente é só treino.
Por: Paulo
26/2/08
Legal!! deu certinho, fiquei empolgado com o resultado. Valeu!!
Por: Andrea
11/3/08
Ola! estou em apuros juntei varios gifs animados em uma apresentação power point, salvei como um gif mas quando é salvo assim as imagens não se movem mais, vc pode me ajudar?
Por: Cynthia
02/4/08
Ola! Adorei o tutorial,muito obrigada mas estou com dificuldades na hora de salvar. Será que alguém poderia me ajudar e dizer como eu salvo sem perder as animacoes?? Obrigada!!

RESPOSTA A COMO SALVAR UM GIF ANIMADO EM IMAGE READY

Você tem que fazê-lo com o menu Arquivo/Salvar otimizada como...

Então lhe salvará o arquivo no formato que tiver configurado como otimizado.
Para variar o formato da imagem otimizada você tem que ir ao menu
Janela/Otimizar.

Isso lhe mostrará uma janela com as características da
imagem otimizada, incluindo o formato, que para gifs animados deve ser GIF,
logicamente.

Salvar um GIF é igual que salvar um GIF animado. Supõe-se que em Image Ready você fez uma animação, então lhe salvará o Gif animado.

Espero que tenha ficado mais claro agora!
Por: ZENETTO
03/4/08
Muito bom o tutorial, eu não tenho paciencia para ler muito, mas achei esse artigo perfeito, objetivo e eficaz. Parabéns.
Por: Bonomo - Kun
03/5/08
Muito obrigado, fiz meu primeiro gif com sucesso. Até que fim que eu achei uma utilidade para o image Reader...

[img]http://br.geocities.com/gleiciano_rock/sombrinha.gif[/img]
Por: EDSON
05/5/08
Bom dia, foi muito esclarecedor nao tenho muita experiencia nessa area mas estou tentando fazer um plano de fundo com animação, quando eu enviar um e-mail acrescentar esse efeito para apresentação da minha empresa uma coisa nao muito pesada nem assustadora, simples pratica e original, se pudessem me ajudar seria otimo obrigado
Por: Henrique Davanso
14/5/08
caro amigo, muito grato pela ajuda..
Uso o bom e velhio PHTOSHO desde a sxua criação e venho acompanhando o seu crescimento.. porem nem imaginava como se fazi esse tal gif animado. UMA abençoada ferramenta.
Obrigado pela simplicidade das explicações.
Rik
Por: karoliny americo
21/5/08
obg, muito pratico o tutorial aprendi rapidinho , beijão!
Por: Alison
29/5/08
Oi muito legal seu artigo.

ótimo pra quem nunca abril o Imagem Reader pela primeira vez, como eu.

Muito bom que ja sai criando varias animações.

Obrigado.

Post Sempre dicas assim.

Abraço.
Por: Tha
02/6/08
Queria avisar pra quem não consegue salvar o gif animado ir em FILE e de lá procurar save as :D
Para salvar o gif, espero ter ajudado!
Por: Denise
04/7/08
Para quem não está conseguindo salvar o seu gif animado:
File> Save Optmized
ou pra quem quer escolher um novo nome pro seu gif e escolher a pasta:
File> Save Optmized As (escolhendo a opção gif)
Por: samuel
05/8/08
muito interesante este artigo legal valeu! teria alguma coisa relacionada com flash neste estilo p/ a criaçao de baner e templates com flash se respondern e agradeço!
obrigado!
samuel
Elogio
Por: maycon
05/11/08
pow kara !!
muito obrigado , eu estava com muita vontade aprender faser imagens em gif !!
so falta agora eu saber mexer no photoshop kk
muito obrigado !!
publicar o gif
Por: Kau
17/12/08
Muito bom esse artigo! Parabéns pela iniciativa!
Como faço para publicar o gif criado no adobe image ready no orkut?
pasta images...
Por: kelly
10/1/09
eu salvei, o tutorial foi todo otimo! mas pq q qd eu salvo como gif ele cria uma pasta 'images' e divide todo o desenho lá dentro?? corta ele em varias partes, o que é isso?
Salvando...
Por: thaisy
16/1/09
Para salvar, clique em arquivo - salvar otimizado!
Muito bom o tutorial
Por: Jolimar
30/1/09
Tive uns trabalhos no inicio, mas consegui resolver logo, usei meus instintos e consegui salvar como GIF.
GIF
Por: Guilherme
06/4/09
Exelente cara, bem simples e eficaz de usar
atenção pessoal
Por: Josimar
09/5/09
Pra vcs que tem duvida como salvar..creio eu que possa achar a area (arquivo) depois vá na opção (exportar) certifique-se que o nome do arquivo seje mudado para (animated gif...)isto mesmo animated gif e mais algo que não me recordo neste momento....
mas é isto aí pessoal nos programas que utilizo...caso estou sem meu flash em casa...estou brincando com o meu firework...não tenho muitas opçoes mas dá para me divertir...espero ter ajudado naum tenho certeza pq nunca utilizei o fotoshop para criar gifs...mas vou tentar qualquer dia no meu fotoshop CS4 não é o 5.5 mas....me ajuda em meu trabalho...espero ter ajudado xau pessoal.
Link no gif animado
Por: William
22/5/09
Olá, gostaria de saber se4 tem como colocar um link nesse gif animado?

Desde já obrigado pela atenção
imagem gif
Por: marciabispo
04/6/09
Adorei o artigo. Mas meu problema é editar uam imagem existente aumentar largura e diminuir altura. Fazendo só isso é facil, o problema é que a animação não funciona mais. O que posso fazer/
Sobre programas gif animado
Por: andreza
26/6/09
Gostaria de saber se há um programa para baixar no meu computador que possa criar gif animaado iguais aos que são enviados para o orkut?
Estou procurando mas ñ sei como encontrar
gifs animados
Por: Sol
05/8/09
Parabéns achei fantática a explicação.
Valeu
Sol
Não consigo enviar meus gifs criados para Orkut
Por: verdinhos
08/9/09
Criei gifs lindos, mais não funciona como adiciono no orkut. fica só a imagem sem animação.Porque?
MUITO BOM!!!
Por: netotjb
10/9/09
Muito bom! PARABÉNS! Excelente dica!!! Funcionou muito bem!!
Respondendo
Por: Rodrigo
11/9/09
marciabispo, pra vc mudar a altura e a largura da imagem, vá em "Imagem" e "Tamanho da Imagem" e altere.. Pra editar, vc pode mudar no Photoshop e depois alterar no ImageReady os quadros que desejar. E mandar compilar de novo. "Arquivo" e "Salvar Otimizado"...

verdinhos, pra vc colocar uma imagem na web, no orkut ou em qualquer site, vc deve hospedar a imagem primeiro. Você pode usar o imageshack.. O endereço é http://www.imageshack.us/.. vc carrega a foto, copia o link pra onde vc quer colocar...

Bom, não sei se as dicas ajudaram. Eu faço assim e dá certo... Um abraço.
GIF ANIMADO
Por: helenice
26/11/09
Como posso fazer gif animado no cs4?
Como Salvar o GIF.
Por: Naedson
07/12/09
Bem vi que algumas pessoas tambémt tiveram dificuldades em salvar. Bem, eu fiz assim: Criei o GIF, fui em Arquivo, opção "SAVE FOR WEB..." ocnsegui fazer um com apenas duas imagens e o Gif e o resultado ficou muito bacana.

Muito obrigado por esse tópico e um abraço a todos.
gifs animados
Por: marlam
14/1/10
Voces poderiam me responder por email?
Queria saber como eu coloco, um gif animado dentro de outro animado tambem.

Por ex: uma havaiana dançando e o outro gif, é uma praia com ondas.,
Queria colocar a havaiana na areia, entende?
Obrigada
beijos
Criar animação
Por: Neli
04/2/10
Foi muito claro e explicativo, já inseri no site ficou muito legal tks.
SALVAR
Por: ivanalex
11/2/10
Muitos estão com a mesma duvida, mas ele disse como salvar sim, veja

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.
SITE
Por: jomarioteixeira
03/3/10
ei cara como faço pra baixar esse photoshop ai na net? pode me add no msn pra me da umas dicas? meu pai n paga nem a pau um curso p/ mim, vou fazer um site na cara e na coragem p/ provar pra todos q tenho capacidade ... abração!.
Agradecimento
Por: July
05/3/10
Muito obrigado pela explicação e pela sua disponibilidade em dar a devida atenção.
Ótimo Tutorial!
Por: Junior
17/3/10
Muito obrigado Juliana! você foi uma ótima professora!!!
Peguei os passos num piscar de olhos e olha o resultado do meu primeiro trabalho para um blog:

http://img62.imageshack.us/img62/9612/whatdoyouwantherebanner.gif

parabéns! E continue criando tutoriais legais como esse!

Muito obrigado!

Junior
http://rmajunior.blogspot.com
Não consigo salvar um GIF animado no Photoshop 7.0
Por: Valéria Reis
17/4/10
Faço tudo certinho como vc ensinou, faço o arquivo salvo em seguida vou para o Image Ready faço animação, fica certinha do jeito que eu quero, salvo no Image Ready na opção do arquivo salvar otimizado ou salvar como otimizado, salvo como GIF, até aí tudo certo. O problema é que ela fica estática, será que o photoshop 7 não faz GIF animado? E olha que não sou muito leiga, já tentei de tudo e nada...
Se puder me ajudar eu agradeço.
Obrigada!
Valéria Reis.
problemita
Por: yui
05/11/11
então pessoal, como a Mayy disse, vocês não ensinaram a salvar, que é o mais importante '--' de que adianta vocês ensinarem a fazer, se não terminam de explicar? Yui fez mas ele não fica em gif. ;3;
banner
Por: hexpress
18/2/13
Alguém me sabe dizer se o banner do site <a href=?http://www.euroclinix.com.pt/?>euroClinix</a> também foi feito em photoshop?

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor
Juliana Monteiro Lázaro
Diretora de Criarweb

Home | Sobre nós | Copyright | Anuncie | Entrar em contato