/Design

voltar
/Design

Banners – Adobe ImageReady

PorFabio Lody em

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 "
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.

Deixe um comentário! 21

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Comentando como Anônimo

  1. Agradeço muito pela matéria, o imasters caiu muito em relação a matérias. Principalmente no Dreamweaver e Photoshop, muito não se fala em Image Ready, que é muito melhor que o Fireworks.
    Espero que tenha mais tutoriais como esse no Imasters, que é sem dúvida o melhor site de desenvolvimento do Brasil.

    Abraços

  2. Cara eu não sabia que este adobe fazia tanta coisa.Bicho parabéns estou aprendento muito. Continue assim. Quero comprar o livro.

  3. Caro amigo Fabio, fico grato em saber que uma pessoa com tanto conhecimento se dispoe a nos ajudar e volto a repedir principalmente pq nao tenho dinheiro para cursos e vc nos da esse prazer a cada semana
    continue assim com sua ajuda estou aprendendo muita coisa no Photoshop e agora no ImageReady. Meus parabens meu amigo!

  4. Ai parabén mesmo. Super massa ver como funciona as coisinhas no ImageReady. Mas uma duvida, eu lhe escrevi pedindo uma solução para aplicar o logo do meu site em um lote de fotos. Jah tentei com o Action, Mas num consigo porque meu logo é aplicado com o Brush e o Action não grava o click.

  5. Adorei a matéria ficou show como sempre vc mandou muito bem. Eu sou bem iniciante no PS, por isso queria pedir uma ajuda tua sobre efeito de fontes. Gostei muito daquele efeito da fonte do banner desta materia, sei que é muito ocupado, mas se puder me ajudar ficarei muito grato. Abraços.

  6. Fala mestre, gostaria de saber se vc ja publicou alguma coisa sobre FAZER BAIXO RELEVO no nome por exemplo, vc esta de parabens, continue sempre assim, abraços.

  7. Fiz um banner no ImageReady que ficou com mais de 100 k (salvei otimizado como gif), porém para eu colocar no site é necessário ser menor que 50 k. Seria possível ser menor que 50 k???

  8. Prezado Fabio lody, vi sua aula do dia Quinta-feira, 29 de julho de 2004 sobre a produção de gifs animados, gif eu consegui fazer, mas o banner não. dá para vc ser mais detalhado ou explicar de outra maneira? PARABENS PELO TRABALHO!!! PIERRE

  9. cara, valew!!! primeira vez que faço um negócio desse,
    gostei pra karamba, só queria aprender como fazer essas imagens ficar em movimento,
    como um desenho de uma pessoa em movimento, se puder me ajudar nisso,
    fico grato!!! xau!!!

leia mais