Grandes amigos! Hoje vamos ver algo bem interessante. Dando sequencia às matérias sobre banners, estudaremos diversos recursos sobre o Adobe Image Ready CS.

Banners - Parte 03 (Adobe ImageReady®)

Descrição: Estudo sobre software ImageReady e a criação de banners.
Software ultilizado: Adobe Image Ready CS em Inglês (Funciona em qualquer versão)
Grau de Dificuldade: 8,5
Ao som de: A Litte Less Conversation- Elvis vs jxl

Antes de mais nada, vamos ver um pouco mais sobre esse programa ok?

No Adobe ImageReady criaremos animações com base em uma única imagem, por meio de arquivos GIF animados.

Um GIF animado é uma sequência de imagens, ou quadros. Cada quadro varia ligeiramente em relação ao quadro precedente, criando a ilusão de movimento quando seus quadros são visualizados em sucessão rápida. É possível criar animações de várias maneiras:

1º maneira: Utilizando o botão "Duplica", o quadro atual da paleta "Animação" para criar quadros de animação e, em seguida, usando a paleta "Camadas" para definir o estado de imagem associado a cada quadro.

2º maneira: O recurso Entremeio é utilizado para criar rapidamente novos quadros que deformam textos ou promovem uma variação na opacidade, posição ou efeito de uma camada. Isso criará a ilusão de um elemento em um quadro que se move ou gradualmente se acende ou apaga.

3º maneira: Abrindo um arquivo de várias camadas do Adobe Photoshop ou Adobe Illustrator para criar uma animação, transformando cada camada em um quadro.

Dicas:

Ao criar uma sequência de animação, é melhor permanecer na visualização de imagem Original. Isso evita que o ImageReady tenha de reotimizar a imagem à medida que o conteúdo dos quadros é editado. Arquivos de animação resultam tanto em arquivos GIF quanto em filmes de QuickTime. Não é possível CRIAR uma animação JPEG ou PNG. (Inspirado do Livro : Guia Autorizado Adobe)

Agora retirei um trecho do Help do próprio Adobe Photoshop.

WEB - Sobre trabalhar com camadas em animações

Trabalhar com camadas é uma parte essesncial da criação de animações no ImageReady. Dispor cada elemento de uma animação em uma camada própria permite alterar a posição e a aparência do elemento por uma série de quadros.

Alteraões específicas ao quadro: Algumas alterações efetuadas às camadas afetam somente o quadro de animação ativo. Por padrão, as alterações feitas por meio dos comandos e opções da paleta Camadas - Inclusive em opacidade de camada, modo de mesclagem, visibilidade, posição e estilo - são específicas ao quadro. Contudo é possivel aplicar alterações de camada a todos os quadros de uma animação por meio de botões da paleta Camadas.

Alterações globais: Algumas alterações afetam todos os quadros nos quais a camada está incluída.

Alterações efetuadas a valores de pixel da camada, por meio de ferramentas de pintura e edição, comandos de ajuste de cor e tom, filtros, textos e outros comandos de ediçaõ de imagem, são globais.

Cada novo quadro é iniciado como duplicata do quadro anterior - o quadro é editado pelo ajuste de suas camadas. É possível aplicar alterações de camada a um único quadro, a um grupo de quadros ou à animação inteira.

Bem amigos, vamos lá!

Primeiramente vamos explicar as ferramentas mais usadas no Adobe ImageReady e iremos criar uma pequena animação, bem simples, como exemplo, pois gosto de explicar em detalhes para aqueles leitores iniciantes ou que não tem condições de comprar livros. Por isso, caso precisem de alguma coisa, mande-me um email.

1º Passo: Abra uma imagem qualquer no ImageReady

2º Passo: Duplique a camada clicando sobre o botão "Duplicates current frame" como abaixo:

Agora acompanhe a explicação de cada botão:

A: Menu suspenso: Opções de looping
B: Botão seleciona o primeiro quadro
C: Botão seleciona o quadro anterior
D: Botão Executa/Interrompe a animação
E: Botão seleciona o próximo quadro
F: Botão interpõe quadros de animação
G: Botão duplica o quadro atual
H: Exclui quadros selecionados
I: Quadro selecionado

3º Passo: Duplique a camada na paleta de camadas, clicando com o botão direito e clicando sobre "Duplicate Layer"

4º Passo: Com a cópia da camada selecionada, pressione "CTRL+U" e hablite o "colorize"

Hue: 214
Saturation: 70
Lightness: -18

5º Passo: Em seguida, desabilite a opção de visualização clicando sobre o olho (veja abaixo) e repare, no lado esquerdo, que seus frames foram alterados.

6º Passo: Segure o "SHIFT" e clique sobre o outro frame. Em seguida clique na seta "0 sec." e altere para 0.1 segundo.

7º Passo: Clique sobre o botão de interpolação de quadros (ver F) e deixe como abaixo:

8º Passo: Vá em File > Save Optmized As.. ("Ctrl+Shift+Alt+S").

Imagem retirada da pasta "Samples" do Adobe Photoshop 7.0

Está e nossa imagem final. Claro que o resultado vai variar com o número de interpolações de cada leitor.

Bom, agora que já sabemos algumas informações importantes do Adobe ImageReady e suficientes para criarmos um banner, criaremos um exemplo para o iMasters!

9º Passo: Abra o .psd no Adobe ImageReady de seu banner que criamos nas duas últimas matérias.

Com as fontes e imagens já definidas e posicionadas, use da técnica passada na matéria de hoje para dar movimento ao seu banner.

Como podemos ver, usando o "5º Passo", cliquei sobre o frame 1 e desabilitei o modo de visualização da camada do texto em um frame.

E clicando sobre o frame 2 hablitei novamente:

A diferença é que no " 7º Passo " coloquei apenas 4 quadros e adicionei um frame sem texto com delay de 0,2 segundos. Logo em seguida outro frame com o texto novamente e um delay de 0,5. O resultado está abaixo:

Agora adicionei frames ao logo esquerdo, com espaço de tempo, dando a impressão de piscar, e ao texto "iMasters", do lado direito, adicionei um frame posicionando por fora da aréa visualizada. Fiz uma ilustração apenas para imaginarmos a posição onde coloquei o iMasters e adicionei a interpolação com espaço de tempo curto.

(Claro que iMasters não irá aparecer. Eu apenas fiz uma ilustração para imaginarmos onde eu posicionei nossa camada de texto)

Meu resultado final é este:

Bem amigo, é claro que o iMageReady possui muito mais recursos, mas por hoje escolhi apenas alguns onde criariamos um banner simples. Quando voltar a escrever sobre iMageReady, falarei a respeito de seus filtros.

Semana que vem aguardem a matéria "Gotas em lata de refrigerante!"

Espero que tenham gostado. Dúvidas, mandem-me via email. Um abraço a todos e fiquem com Deus.