Canais iMasters

Photoshop

Integração e movimentos com o Image Ready

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!


Comente também

25 Comentários

Rodrigo do Carmo Bento
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.

Luciano Honorato
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...

Maurício J. Fávaro
Maurício J. Fávaro

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

José Cláudio Medeiros de Lima
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 !!!!!

Douglas Brito de Meeiros
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.

Bruno Cabral
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!!!

Maurício J. Fávaro
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

Bruno
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

Luiz Henrique Borges dos Santo
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!! :(((

Alberto Hacker
Alberto Hacker

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

Maurício J. Fávaro
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

Maurício J. Fávaro
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

Félix Ferreira
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.

Maurício J. Fávaro
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

Patryk Rose
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

Carlos henrique Aguiar
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!

angelica yuri kobayashi
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..

Leo
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

Vinicius Ramos
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

Douglas Osbourne
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!!!

RODRIGO TRIGO
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

Gustavo Falavigna
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!

Geovanne Matheus
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

Geovanne Matheus
Geovanne Matheus

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

Abraço.

Simone  Fahl de Oliveira
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?

Qual a sua opinião?

Comentários considerados ofensivos serão moderados.

Parceiros

IBM
PagSeguro
Internet Innovation
Dialhost
HostNet
Tecla
KingHost
DotStore
Dinamize