iMasters | Por uma internet mais criativa e dinâmica

Segunda-feira, 29/03/2004 - 02:59 - Por Fabio Lody
Seções relacionadas:

• Photoshop

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

Olá meus amigos! Hoje iremos trabalhar com a interação entre o Photoshop e o Image Ready, aplicando movimento às imagens criadas.

Aplicando Movimento

Descrição: Movimento utilizando Image Ready
Software ultilizado: Photoshop em Inglês (funciona em qualquer versão)
Grau de Dificuldade: 8,5
Ao som de: Rolling Stones - It's Only Rock n' Roll

1º Passo: Crie uma imagem de 400x400 pixels com preenchimento de fundo na cor branca.

2º Passo: Deixe a cor de primeiro plano como um cinza escuro (#6C6C6C)

3º Passo: Escreva suas iniciais usando um corpo de fonte largo e legível (usei: Arial Black, 150pt, Sharp). Sua cor é idependente nesse passo, já que colocaremos uma textura.

4º Passo: Nesse momento iremos adicionar um estilo de camada.

Siga os passo a seguir:

Outer Glow (Brilho Externo)

Bevel and Emboss (Chanfro e Entalhe)

Color Overlay (Sobreposição de cor)

Gradient Overlay (Sobre posição de Gradiente)

Pattern Overlay (Sobreposição de Padrão)

Stroke (Traçado)

Este será seu resultado:

5º Passo: Crie uma nova camada e pressione a ferramenta de Degradé (Gradiente Tool (G)) na barra de opções:

6ºPasso: Pressione "D" e em seguida "X" para voltar ao padrão de cores e as alternar. Logo depois, vá nas opções de degradé e escolha a de brando para transparente.

7º Passo: Segure a tecla "SHIFT" e, no meio das iniciais, e faça um pequeno caminho onde seu degrade ficara, como na imagem abaixo.

8º Passo: Crie uma nova camada (CAMADA_GUIA), deixe acima da camada do seu texto e em seguida selecione a "corrente" para unir as duas camadas.

Em seguida, pressione "CTRL+E". Suas camadas ficaram assim:

9º Passo: Com a ferramenta "Move Tool (V)", escolha a camada "TRAÇO" e pressione "CTRL + G".

Sua imagem ficará assim:

10º Passo: Nesse momento abriremos o Image Ready, pressionando "SHIFT+CTRL+M" (instalado juntamente com Photoshop)

11º Passo: Agora nosso ambiente será iMage Ready. Mova a camada do nosso "reflexo" para o canto superior esquerdo até quase não aparecer na letra.

Vá em "WINDOW" (Janela) > "ANIMATION" (Animação).

12º Passo: Com a janela de animação aberta, duplique seu frame e clique sobre ele. Nesse momento, na imagem principal (ORIGINAL), segure o SHIFT e mova o reflexo até o canto inferior direito.

13º Passo: Agora pressionando "SHIFT", selecione os dois frames e clique sobre o botão "Tweens animation frames".

14º Passo: Altere sua sequência para 8 frames.

15º Passo: Pressione "Play Animation" e veja um preview de como ficará sua arte. Caso seja preciso, diminua a quantidade de frames em "Tweens Animation frames". Se o resultado for satisfatorio, vá em "FILE" (Arquivo) > "Save Optimized As.." ( Salvar Otimizado Como..) e selecione o nome e local de seu gif.

Ufa! Espero que tenham gostado de nossa textura e interação com iMage Ready. Fiquem com Deus e até a próxima!

Todos os artigos de Fabio Lody

18/05/2009 - Como manipular gelo no Photoshop 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

25 comentários publicados

• 1. Show

  Terça-feira, 30/03/2004, por Rodrigo do Carmo Bento
  

  Este efeito é muito legal... eu não imagina que tinha como fazer gif animado pelo Photoshop... muito legal mesmo!!! Como sempre aprendo muito com suas matérias... parabéns.

  Responder comentário

• 2. Brilhante

  Terça-feira, 30/03/2004, por Luciano Honorato
  

  Acabei de fazer o trabalho no meu Photoshop 7 em português e ficou muito boa a técnica. Ném só de Flash vive o homem, mas de Image Ready também. Parabéns...

  Responder comentário

• 3. Valeu amigos!

  Quinta-feira, 01/04/2004, por Maurício J. Fávaro
  

  Obrigado meus amigos, espero sempre que possivel ajudar a todos. Aguardem que esse ano promete!
  Abraço irmãos

  Responder comentário

• 4. show

  Domingo, 04/04/2004, por José Cláudio Medeiros de Lima
  

  fantastico, não só este, mas todos os tutoriais que voces colocam a disposição, nunca copiando, mas sempre criando, parabens, ele nos ajudam a ousar mais, uma necessidade do ser humano, como picasso !!!!!

  Responder comentário

• 5. Photoshop

  Segunda-feira, 05/04/2004, por Douglas Brito de Meeiros
  

  Parabéns, Fábio, visito toda semana a sua coluna, pois a sua dedicação para o Photoshop é muito gratificante e a sua forma de ensinar-nos é, como sempre, muito esclarecido. Como estudante de Web Master, admiro muito a sua coluna.

  Responder comentário

• 6. Duvida

  Terça-feira, 06/04/2004, por Bruno Cabral
  

  Fábio, eu mandei um e-mail pra ti ontem, pedindo pra tirar uma ´dúvida pra mim referente a esse efeito que você fez (Integração e movimentos com o Image Ready). Please, me responde!!!

  Responder comentário

• 7. re:Isabele Ponte

  Quarta-feira, 07/04/2004, por Maurício J. Fávaro
  

  Ola meus amigos ! obrigado pela força!
  Isabele, nao recebi seu email se puder por favor mande em meu outro email ( fabio@tribal.com.br ) q assim q possivel te ajudarei
  abraço
  

  Responder comentário

• 8. Congratulatios

  Sexta-feira, 09/04/2004, por Bruno
  

  Parabéns pelo desenvolvimento do seu dom artístico, que vc estendeu a sua didática. Desda época em que ministrávamos aulas de Informática em Santos sempre te achei um ótimo instrutor.
  
  BOA PÁSCOA
  Prof. Vinícius Eduardo

  Responder comentário

• 9. duvida

  Sábado, 10/04/2004, por Luiz Henrique Borges dos Santo
  

  eu uso o adobe photoshop 6.0, pq eh em portugues, e tive dificuldade a partir do 5º passo.. demorei pra achar como fazer o degrade, qnd achei, nada mudou qnd apertei "d" e "x".. nao consegui fazer o traço, e tenho duvidas em q tipo de camada criar!! :(((

  Responder comentário

• 10. duvida como animar no msn

  Segunda-feira, 12/04/2004, por Alberto Hacker
  

  Como posso deixar esse gif animado na imagem de exibição do msn?

  Responder comentário

• 11. Re: Priscilla Moreira

  Quarta-feira, 14/04/2004, por Maurício J. Fávaro
  

  Olá Priscilla Moreira, repare que ao pressionar " d " as cores de foreground e background voltam ao padrão e ao pressionar " x " elas se invertem, ja sua duvida com o traço talvez não tenha clicado na opção de degrade correta.
  Qualquer coisa entre em contato
  icq: 57510830
  msn : fabiolody@hotmail.com
  q ajudarei a todos com prazer
  abraço meus amigos

  Responder comentário

• 12. Re: Vanessa

  Quarta-feira, 14/04/2004, por Maurício J. Fávaro
  

  Olá Vanessa, tente deixar a imagem de um tamanho relativamente pequeno para que se encaixe no espaço do avatar no MSN so acho q msn nao tem suporte para gif animado, pelo menos nao na minha versão.
  qqer coisa me mande um email
  
  abraço

  Responder comentário

• 13. Duvida

  Quinta-feira, 10/06/2004, por Félix Ferreira
  

  Oi Fábio, não consegui fazer. Pra falar a verdade, fiz aré o 5º passo e depois não consegui mais fazer. Não consigo adicionar uma nova camada e nem mesmocolocar o traço. Gostaria da sua ajuda, pois achei o efeito muito legal.
  Obrigada e parabéns pela sua coluna, sempre tem bastante coisa legal.

  Responder comentário

• 14. Ola Andrea

  Segunda-feira, 14/06/2004, por Maurício J. Fávaro
  

  ola andrea como vai?
  faz assim me escreva um email dizendo sua versao de photoshop e lingua
  q dai eu te ajudo passo a passo ok?
  abraço e obrigado pelos elogios!
  fica com Deus

  Responder comentário

• 15. não entendi 1 coisa

  Terça-feira, 13/07/2004, por Patryk Rose
  

  e ae fabio eu curto pr acaramba seus tutoriais
  vc é o kara parabéns, mais ae vai a minha indagação qua a diferença da mateira
  "29/03/2004Integração e movimentos com o Image Ready" e a materia
  "01/07/2004Integração e movimentos com o Image Ready - Atualização"
  
  ah eu gostaria também que vc coloca-se uma mateia ensinando a fazer gifs animados no image ready, pois no photo eu utilizo legal mais no image eu sou um 0 aeskerda
  aguadro resposta

  Responder comentário

• 16. Fala Fabão, tudo jóia?

  Quarta-feira, 28/07/2004, por Carlos henrique Aguiar
  

  Brother, você explicou de um jeito muito tranquilo. Com este conteudo, brincar com estes efeitos no PhotoShop foi mamão com açúcar, valeu. Agora umas coisitas básica que eu gostaria que vc me falasse:
  
  "Porque criarmos uma camada guia e em seguida, usarmos a corrente? Pelo que notei, é uma função e tanta, mas gostaria, tecnicamente falando, qual fora este motivo, sei lá, que vc explicasse quanto ao uso, a essencia desse manuseio entendeu?" Um grande abraço. Valeu, gostei mesmo!

  Responder comentário

• 17.

  Sábado, 07/08/2004, por angelica yuri kobayashi
  

  ola td bom??nossa vc eh muito bom nisso,mas n consegui colocar uma outra camada com o traço vc pode me ajudar??aguardo resposta!!brigada..

  Responder comentário

• 18. show de bola

  Quinta-feira, 23/09/2004, por Leo
  

  pow fabio........... fiko muito show....
  eu acompanhei os passos e consegui...
  mas tenhu uma duvida....
  nao consegui salva em outro formato....
  se vc poder me ajuda!!!!!!
  parabens pela sua coluna....
  tem bastante coisa massa...
  um abraço
  

  Responder comentário

• 19. Muito maneiro !!!

  Sexta-feira, 03/12/2004, por Vinicius Ramos
  

  Comecei a visitar, sua coluna no site a poucos dias, mas foi suficiente para me tornar um admirador do seu trabalho, parabéns os trabalhos são muito bons.
  Que Deus te abençõe

  Responder comentário

• 20. nao funciona salvo!

  Quinta-feira, 16/03/2006, por Douglas Osbourne
  

  Caro Fabão,fiz todos os procecimentos e o resultado deu perfeito,mas quando salvo,nao funciona como deveria!Qual o pro??
  Um abraço vc é um gênio!!!

  Responder comentário

• 21. NAUM TO CONSEGUINDO FAZER O 9° PASSO

  Quarta-feira, 28/02/2007, por RODRIGO TRIGO
  

  EU NÃO TO CONSEGUINDO FAZER UMA MATERIA SUA DO IMASTERS (Integração e movimentos com o Image Ready)
  http://www.imasters.com.br/artigo/1914/photoshop/integracao_e_movimentos_com_o_image_ready/
  NÃO CONSIGO FAZER O 9° PASSO
  QUANDO EU APERTO CTRL G APARECE UM NOVO GRUPO
  AGUARDO RESPOSTA
  
  

  Responder comentário

• 22. Problemas no 9º passo

  Quarta-feira, 05/12/2007, por Gustavo Falavigna
  

  E ai Fábio td bem?Primeiramente gostaria de deixar os parabéns pelo seu excelente trabalho como colunista.Mas, eu gostaria de saber se tem como vc me ajudar com o 9° passo no artigo de integração e movimentos com o image ready, até ai deu td certo porém qd faço os comando (v escolha da camada ctrl G) a imagem nao fica como devereia, gostaria de saber oq pode estar acontecendo de errado, eu uso o Photoshop CS2 Inglês.Fico no aguardo da resposta.
  Mais uma vez parabéns pelo seu trabalho
  
  abraços!

  Responder comentário

• 23. Problema no passo N° 7

  Segunda-feira, 07/04/2008, por Geovanne Matheus
  

  n tow conseguindo fazer com que o degradê fique do tamanho correto, ou seja, está alémdo normal o tamanho, não está do tamanho do que você fez no tutorial.
  
  Queria que você me ajudasse. Pode ser?!
  
  ABRAÇO

  Responder comentário

• 24. Não precisa mais

  Segunda-feira, 07/04/2008, por Geovanne Matheus
  

  Eu consegui. É que estava fazendo o traço muito grande.
  
  Abraço.

  Responder comentário

• 25. Dúvida

  Sábado, 18/10/2008, por Simone Fahl de Oliveira
  

  Estou amando aprender com vc a lidar com o Image Ready, sou iniciante. Uma dúvida: Como passo a publicar esses gifs, como é que eles vão agora pros emails, páginas do orkut, sites, etc?

  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

iphone google apple yahoo 3g php mercado web android desenvolvimento internet seguranca twitter lançamento celular microsoft youtube firefox criação linux crescimento mobile brasil windows ti tecnologia

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!