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.
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.
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.
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.
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.
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.
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
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
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!
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!
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
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...
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 ??
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!!! :)
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.
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!
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 ¬¬
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!
muito bom esse site!!!
gostei..
fez a giff sem nenhum problema!
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...
Cara Muito obrigado , legal ver gente se importando em ajudar e ensinar !!!!
Parabéns pelo tuto e tbm as dicas de como enxergar os frames. Muito bom, até que enfim acertei um ótimo tudo.
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.
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.
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
Muito obrigado pela dica, as instruções passo a passo possibilitam até um leigo como eu a fazer gifs. Daqui pra frente é só treino.
Legal!! deu certinho, fiquei empolgado com o resultado. Valeu!!
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?
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!
Muito bom o tutorial, eu não tenho paciencia para ler muito, mas achei esse artigo perfeito, objetivo e eficaz. Parabéns.
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]
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!
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.
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!
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)
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 !!
 | 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/
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.
