/Design

voltar
/Design

Integração e movimentos com o Image Ready

PorFabio Lody em

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 400×400 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!

Deixe um comentário! 25

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

Comentando como Anônimo

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

  2. 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…

  3. 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 !!!!!

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

  5. 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!!!

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

  7. 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!! :(((

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

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

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

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

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

  13. 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!

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

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

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

  17. 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!!!

  18. 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!

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

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

leia mais