iMasters | Por uma internet mais criativa e dinâmica

Quinta-feira, 29/07/2004 - 01:59 - Por Fabio Lody
Seções relacionadas:

• Photoshop

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 17 comentários

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.

Todos os artigos de Fabio Lody

16/07/2008 - Manipulando o fogo com o Photoshop 06/06/2008 - Desenhando um iPhone pelo Photoshop CS3 - Conclusão 20/03/2008 - Desenhando um iPhone pelo Photoshop CS3 - Parte 02 28/01/2008 - Desenhando um iPhone pelo Photoshop CS3 - Parte 01 27/11/2007 - Illustrator + Photoshop CS3 13/09/2007 - Atualização - Truques para Tratamento de Imagens 12/09/2007 - Atualização: Truques para tratamento de imagens 02/07/2007 - Monitores LCD, configurações e impressão 03/04/2007 - Trabalhando com Actions 19/01/2007 - Workspace e Smart Objects 06/12/2006 - Novas técnicas para pincéis e Layer Comps 16/10/2006 - Conhecendo a Color Swatches 18/08/2006 - Manipulação e tratamento de foto profissional 24/07/2006 - Explorando o Adobe Bridge 14/06/2006 - Bandeira Brasileira 23/05/2006 - Lunatic Art 26/04/2006 - Quebra cabeça 28/03/2006 - Jumping Out 15/03/2006 - Tornando as pessoas invisíveis 22/02/2006 - Box 3D 24/01/2006 - Efeito CD-ROM 09/01/2006 - Reflexo 20/12/2005 - Feliz Natal! 08/12/2005 - Post it 21/11/2005 - Bordas arredondadas 03/11/2005 - Scripts para Photoshop 06/10/2005 - Dicas e dúvidas 22/09/2005 - Jogando água no Photoshop 06/09/2005 - Criando estilos - Parte 02 01/08/2005 - Back Fire 04/07/2005 - Dicas para criação web no Photoshop 15/06/2005 - Web no Photoshop - Parte Final 31/05/2005 - Web no Photoshop - Parte 03 (Com Galeria) 18/05/2005 - Web no Photoshop - Parte 02 05/05/2005 - Web no Photoshop - Parte 01 18/04/2005 - Arte abstrata - Parte 03 30/03/2005 - Criando Luz Neon - II 14/03/2005 - Criando Luz Neon 02/03/2005 - Criando Estilos 18/02/2005 - Criando shapes 04/02/2005 - Olhos vermelhos e galeria de imagens 27/01/2005 - Abstract Art - Parte 02 26/01/2005 - Texto Grunge - Atualização 14/01/2005 - Abstract Art - Parte 01 06/01/2005 - Entrando no mundo Hitech 22/12/2004 - Enfeite de natal 10/12/2004 - Trabalhando com Fotos 30/11/2004 - Buraco negro 19/11/2004 - Galeria de imagens 10/11/2004 - Cabelos rebeldes - Parte 02 27/10/2004 - Trabalhando com garrafas no Illustrator 26/10/2004 - Papel envelhecido 15/10/2004 - Fundo abstrato - Parte 02 08/10/2004 - Fundo abstrato 30/09/2004 - Half Tone em Texto 23/09/2004 - Efeito Gel 15/09/2004 - Texto Grunge 10/09/2004 - Preparando o Photoshop para web - Final 03/09/2004 - Preparando o Photoshop para web - Parte 03 27/08/2004 - Preparando o Photoshop para web - Parte 02 19/08/2004 - Preparando o Photoshop para web 13/08/2004 - Os blends do Photoshop 04/08/2004 - Gotas em lata de refrigerante 29/07/2004 - Banners - Adobe ImageReady 21/07/2004 - Banners - Parte 02 13/07/2004 - Banners 07/07/2004 - Pixel Art 3D - Atualização 01/07/2004 - Integração e movimentos com o Image Ready - Atualização 28/06/2004 - Efeitos de luz 18/06/2004 - Cabelos rebeldes 08/06/2004 - Especial - Dia dos Namorados 25/05/2004 - Criando uma bola de vidro e trabalhando com relfexo 11/05/2004 - Trabalhando com pedras 27/04/2004 - Trabalhando com madeira 13/04/2004 - Preparando o Photoshop para impressão 29/03/2004 - Integração e movimentos com o Image Ready 15/03/2004 - Perfis de monitores ICC 01/03/2004 - Tratamento de Fotos 16/02/2004 - Máscaras e canais 03/02/2004 - Criando Curvas 22/01/2004 - Pixel Art 3D 12/01/2004 - Pixel Art 31/12/2003 - Congele sua vida 12/12/2003 - Brincando com fogo 04/12/2003 - Adobe Creative Suite: o novo Photoshop CS 25/11/2003 - Recuperando Ferramenta Pincel (Healing Brush Tool) 13/11/2003 - Colorização de Fotos 31/10/2003 - Efeito metálico 21/10/2003 - Efeito Fundo Abstrato 07/10/2003 - Carimbo ou Processamento em Lote 17/09/2003 - Scan Line (Efeito TV) 02/09/2003 - Pen Tool 22/08/2003 - Pincel Brush - Parte 02 04/08/2003 - Pincel Brush 16/07/2003 - Efeitos de fundo 30/06/2003 - Efeitos para banners 17/06/2003 - Efeito máscara (Fade IN) 10/06/2003 - Rádio - 3º Parte 27/05/2003 - Splash Texture 13/05/2003 - Efeito Matrix 05/05/2003 - Textura Aço 25/04/2003 - Texturas 14/04/2003 - Blue Steel 07/04/2003 - Alien Style 29/03/2003 - Textos cromados 14/03/2003 - Botões de plástico ou gel 11/03/2003 - Agora usando a ferramenta Liquify 28/02/2003 - Fatiamento de Imagens 20/02/2003 - Teclas de atalho do Photoshop 06/02/2003 - Efeitos de texto 20/01/2003 - Rádio - 2ª parte 08/01/2003 - Rádio 18/12/2002 - Efeito de luzes

17 comentários publicados

• 1. MATÉRIA RECORDE

  Quinta-feira, 29/07/2004, por Paulo

  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

  Responder comentário

• 2. è isso ai

  Quinta-feira, 29/07/2004, por Glauber Lucio

  Fala fabio blz é o coelho... parabéns meu otima matéria...

  Responder comentário

• 3. Muito fera

  Sexta-feira, 30/07/2004, por Valdinei

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

  Responder comentário

• 4. FANTASTICO!!

  Sexta-feira, 30/07/2004, por Marco

  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!

  Responder comentário

• 5. Mandou Bem

  Sexta-feira, 30/07/2004, por Lucas

  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.

  Responder comentário

• 6. Fontes

  Quarta-feira, 11/08/2004, por Almir Gomes do Nascimento

  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.

  Responder comentário

• 7. baixo relevo??

  Sexta-feira, 07/01/2005, por Salvino

  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.

  Responder comentário

• 8. banners adobe imagem ready

  Domingo, 16/01/2005, por Ivan Weber Barbosa

  COMO É QUE EU FAÇO PRA EXPORTA COMO GIF????
  
  CERTO DE SER ATENDIDO , AGRADEÇO ANTECIRPADAMENTE....

  Responder comentário

• 9. Banner

  Quinta-feira, 27/01/2005, por wallace souza

  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???

  Responder comentário

• 10. 231285

  Sexta-feira, 25/02/2005, por Lucas Paulo Zukovski

  Oi tudo bem com vc adorei essa materia sobre imagem eu quero muito aprender tudo sobre este assunto um Beijo no Coração. Sol

  Responder comentário

• 11. como salvar em GIF?

  Sábado, 13/08/2005, por joao

  tudo muito bom tudo muito bem explicadinhu mas como faço pra salvar em GIF?
  obrigado
  joão

  Responder comentário

• 12. Redimensionar

  Terça-feira, 27/09/2005, por Daniel Canton

  Como eu redimensiono uma imagem ou texto em um frame sem que afete os outros frames?

  Responder comentário

• 13. Gifs

  Terça-feira, 27/09/2005, por Carlos Henrique Duarte

  Quero saber tabém como salva os banners animados , em Gifs que é o q queremos!

  Responder comentário

• 14. salver em gif

  Terça-feira, 21/02/2006, por Paulo Rogerio A. de Souza
  Responder comentário

• 15. Como salvar em GIF

  Terça-feira, 21/02/2006, por Paulo Rogerio A. de Souza

  consegui fazer igual ao modelo postado, mas naumc consigo salvar em gif, soh posso visualizar no ImageReady

  Responder comentário

• 16. Produçao gifs

  Domingo, 26/03/2006, por Pierre

  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
  
  

  Responder comentário

• 17. GIF

  Terça-feira, 23/05/2006, por Carlos Eduardo Hara

  Como salva em gif? Parabens pelos otimos tutoriais :)

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Fabio Lody é um dos colunistas mais lidos do Brasil. Desenvolveu trabalhos para a Johnson&Johnson, Chevrolet, Kawasaki Motors, grupo SBT, Ethos, HopiHari entre outros pela Tribal Interativa. Foi instrutor da WOC (Centro de Treinamento Adobe) e já trabalhou nas áreas de produção de vários webstudios. Escreve para duas revistas de circulação nacional além de desenvolver layouts de cartões para uma empresa do japão. Foi aluno de Alexandre Wollner e há 9 anos trabalha como Designer Gráfico. Blog: (http://www.fabiolody.com.br).

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

desenvolvimento seguranca iphone photoshop crescimento ti google internet tendência design celular yahoo microsoft criação empresa brasil mobile lançamento gerência 3g apple tecnologia linux mercado php web

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!