Olá pessoal.
Vou ensinar a criar um banner animado usando Photoshop e ImageReady.
Todo site, seja de empresa, loja etc precisa anunciar na internet. Eles usam o meio de banners, assim recebem muitas visitas.
Alguns banners são feitos em flash, mas o Photoshop juntamente com o ImageReady podem criar um banner no formato gif muito bom.
Vamos começar?
Abra um novo arquivo do tamanho 468×60 pixels.


Vamos ter uma noção básica de como criar um banner:
- Você precisa tem o logotipo do seu site;
- O nome do site é bom sempre vir no final da animação que você fizer (a introdução);
- Você precisa de um slogan;
No decorrer desse tutorial vamos entender melhor tudo isso.
Para continuar, vamos colocar um fundo legal no nosso banner.
Se preferir, use o Gradient Tool (G), fica bem legal:


Criado o fundo, vamos colocar o logotipo.
Faça o logotipo com fundo transparente, se você já tiver um desenhado, coloque-o no banner com um tamanho proporcional.
Para esse exemplo, coloquei o logotipo MxStudio (já possui o nome).


Agora vamos começar a fazer a propaganda do site, devemos separar todas as frases em camadas.
Nesse exemplo, irei escrever 3 frases:
- Tutoriais de Photoshop?
- O que você precisa está aqui!
- Clique e conheça o MXstudio.
Aqui vai como escrevi e a organização das camadas:


Obs: Deixe visível apenas uma camada de texto por enquanto, para não haver confusão:

Criamos tudo o que precisamos para o banner, agora vamos passar para o ImageReady.
Aperte CTRL+SHIFT+M.
Na tela do ImageReady, deixe abertas as janelas mais importantes: Animation e Layers (Animação e Camadas).
Deixe visível nas camadas o fundo, o logotipo e a primeira frase que você quer que apareça (no meu caso, a frase “tutoriais de photoshop”).
Logo após, clique em Duplicates Current Frame.


Clicando nesse botão, aparecerá outro quadro na janela Animação.
Nesse quadro, tire a visibilidade da camada do primeiro texto (clicando no Olho ao lado da camada).
Agora deixe visível a camada do próximo texto.
Temos 2 quadros:


Do mesmo modo que você fez o segundo quadro e trocando as camadas de texto, faça a mesma coisa até terminar todos os textos.
Estamos chegando ao final, vamos dar um toque de animação melhor para você aprender a movimentar objetos.
Crie mais um quadro na janela Animação (Duplicates Current Frame) e deixe somente o fundo e o logotipo aparecendo.
Duplique esse quadro. Agora arraste o logotipo até o outro lado do banner (aqui seria para o lado direito).
Você tem 2 quadros quase iguais. Selecione-os e clique em Tween…


Na janela tween, configure assim:


Explicação:
Tween with selection = anima a seleção que fizemos dos 2 quadros;
Frames to add = quantos quadros irá usar para animar (não passe de 5 para seu banner não ficar pesado);
Note que ele fez uma transição do logotipo, ele agora está animado!
Agora crie uma camada de texto na janela Layers e escreva seu slogan:


Obs: O slogan que usei é apenas para exemplo, não é o slogan do MXStudio.
Vamos agora configurar os tempos.
Para cada quadro de texto use 3 segundos.
Para os quadros da animação do logotipo use 0 segundos.
Para o quadro final com o slogan use 5 segundos.
Para mecher no tempo, clique na marcação em baixo do quadro na janela Animation.
Selecione um dos tempos que ele mostra ou clique em Other para por o seu.


Agora é só salvar.
File (Arquivo), Save Optimized (Salvar otimizado).
Preview:
Pronto, você aprendeu a criar banner no ImageReady.
Agora é só usar a criatividade e fazer seus banners.
É isso aí pessoal, um abraço.
Autor: Eduardo Antunes.]