Icones: OFF: http://www.merrypic.com/files/jlvjequcwpg0s8lzcljr.ico http://www.iconj.com/ico/8/g/8gulktd3sd.ico OFF: http://www.imageboo.com/files/7jrisja3pe8b18nbdcsj.ico Circuito Rede Cerebral: Banner de GIF Animado com Photoshop - ImageReady
terça-feira, 3 de novembro de 2009

Banner de GIF Animado com Photoshop - ImageReady


Sabemos que um Banner animado, diferente do estático, chama muito mais a atenção dos visitantes. Mas só a animação não serve sem a Qualidade. Na web encontraremos muitos site e tutoriais que ensinam passo a passo como montar um Banner Animado (GIF).

Porém, nem sempre estará completa com editor de imagens, fácil manuseio, boa qualidade de saída e várias ferramentas, sendo que para montar alguns dos banners expostos requer programas/softwares que acabam poluindo e ocupando espaço no Hard Disk (HD - Disco Rígido) e não prestando para mais nada. Então eis que aparece Photoshop (Oficina de Fotos) com interação ao seu editor dinâmico, o ImageReady (Acabamento de Imagens).

Quando a instalação do PhotoShop é feita, na maoioria das vezes o ImageReady (Finalização de Imagens) e Reader (Para leitor de PDF) são instalados juntos por fazerem parte do pacote de softwares Adobe.

Chega de mais delongas, e vamos para o que realmente nos interessa.
Primeiramente, em qualquer versão de PhotoShop que possua ligação ao ImageReady poderá ser usada!

1º Passo
Em sua versão de PhotoShop crie um Novo Arquivo de dimensões 120x60 pixels com fundo transparente.

2º Passo
Agora vai depender da sua criatividade. Nesta parte que serão criados elementos de animação - texto, imagem de fundo e imagens para animação – compondo o que futuramente se tornará seu Banner Animado em GIF. Atenção: Para cada elemento gráfico, deve-se criar uma nova camada.


3º Passo
Transfira o arquivo para o ImageReady clicando no botão de Saltar para o ImageReady ou pressionado Ctrl + Shift + M.

4º Passo
No ImageReady, as janelas mais importantes são:

Janela de Camadas
Esta janela exibe as camadas com os elementos gráficos da animação. Caso não esteja visualizando essa janela, na barra de menu encontre JANELA e selecione CAMADAS.

Janela de Animação
Esta janela exibe as senas por espaço de tempo da animação. Caso não esteja visualizando essa janela, na barra de menu encontre JANELA e selecione ANIMAÇÃO.

5º Passo
A animação da imagem é simples!
- Clique na camada onde está o elemento desejado para o movimento.
- Encontre o botão DUPLICAR O QUADRO ATUAL

- Duplique o quadro (sena) e mova o elemento. Atenção: Quanto mais quadros, mais suave será o movimento. A cada quadro o elemento selecionado deve se mover pouco, quanto maior o espaço entre o ponto anterior e o ponto do quadro atual do elemento, mais rápido será o movimento.
- Use os botões de ação para visualizar a sequência de movimentos.

6º Passo
Ao termino do Banner, na barra de menu, clique em ARQUIVO, em seguida, SALVAR OTIMIZADO.
Ou use o atalho: Ctrl + Alt + S. Dê um nome ao Banner e clique em SALVAR.

4 comentários:

1 Lênin 1 Blog! disse...

muito bom o tutorial!

PS: Já foi feita a troca do banner.

abraço

Guilherme Chicalé disse...

Então o Blog está 100% ativo é que como ele está meio pesado por conta de muitos banners de parceria ele fica meio lento e alguns navegadores não aguentam mais vou falar com o Renne e ele vai cuidar disso. Valeu pelo tock.

Abrass... =D

Guilherme Chicalé disse...

Eu falei com o Renne ele não me respondeu até agora...Acho que ele está na praia...kkkkkkkkkkkkkk...

Wagner Lopes disse...

Realmente, o surrealismo combinaria com o tema "xadrez" que estou usando. Vou pensar sobre isso.

Postar um comentário

 
Subir