Surpreenda seus clientes ou amigos!
Aprenda de uma maneira profissional, a fazer um GIF animado profissional a partir do nada. Um passo a passo como esse você só encontra no Programando Fácil!

Se você acha que tem que saber muito sobre designer gráfico ou motion designer, para conseguir fazer uma animação com qualidade, está enganado.
Nessa vídeo dica você aprenderá vários conceitos de animação que poderão ser usados conforme sua criatividade.

Faça a diferença!

Baixe a “Imagem Roda” aqui

Baixe o GIF Animado já Pronto aqui

___________________________________________________________________________________________________________________

CONTEÚDO DO VÍDEO:

Olá a todos!

Meu nome é Daniel Moreira, e sou motion designer aqui do Programando Fácil.

Muita gente acha, que para poder criar animações para colocar em sites ou e-mails,

é necessário dominar algum software específico, como o Adobe Flash, ou after effects.

 

Nessa vídeo dica, você entenderá o conceito básico de animação, dentro do próprio

photoshop.

A versão usada para essa aula é a CS5, mas as técnicas são as mesmas para versões CS anteriores.

 

Vamos lá?

 

Crie uma nova composição:

Para isso vá ao menu, “File” e clique em “New” (ou pressione ctrl+n).

Nomeie a composição da maneira que quiser

Configure com a largura (width) de 400 px e 200 px de altura (Heigth)

Escolha o modo de cor (Collor Mode) como RGB e 8 bit

Selecione branco (white) para background e clique em “Ok”.

 

Exporte agora uma imagem com algo redondo, no nosso caso, uma roda.

Clique em “file” em seguida “place”

Navegue até a pasta onde está sua imagem, selecione e clique no botão “Place”.

Pressione “enter”.

 

Em layers, localize e clique na imagem que acabou de buscar.

Pressione (ctrl+j) para duplicar a layer e repita o processo mais 22 vezes

Clicando duas vezes no nome das layers, renomeie numericamente de cima para baixo a partir de “00″.

Feito isso, você terá 24 layer, numeradas de 00 à 23.

Selecione o layer 01 e clique em “Edit” e a seguir “free transform” ou pressione (ctrl+t).

Pressionando “shift” aproxime o cursor do mouse até um dos cantos da imagem e rotacione

em “1 ponto” no sentido horário, e tecle “enter”

Faça o mesmo com o layer 02, porém rotacione em “2 pontos”.

Layer 3 “3 pontos”, layer 4 “4pontos e assim sucessivamente até ter chegado na layer 23, com o total de “23 pontos”

 

Lembre sempre de salvar seu projeto. Para isso, vá no menu “file” e clique em “save”, ou pressione (ctrl+s) e

escolha uma pasta para salva-lo.

 

Agora vá até o menu “window” e marque “animation”, e você verá que logo abaixo surge uma

nova janela contendo todas as suas layers representadas por barras.

 

Clique no final da barra 1 e arraste até os primeiros “15f” (quinze frames).

Dica importante:

Pressionar “shift” enquanto se arrasta um objeto qualquer.

Faça o mesmo para as outras.

 

Arraste para “3:00f” (três segundos) o item “Work area end”

Feito isso, aumente o zoom afim de alongar a área de “15f” ao máximo da tela.

Agora repita a tarefa de arrastar as barras, mas desta vez até “1f”.

Clique no meio da barra 01 arraste até o final da barra 00. Faça o mesmo com barra 02,

levando até o final da barra 03. Repita esse processo para todas as outras barras.

Quando já não tiver mais espaço para arrastar, diminua o zoom.

 

Ao terminar esse processo, você terá um gráfico em forma de escada.

 

Com a layer “00″ Selecionada, vá ao menu da direita e selecione “horizontal text tool” e

escreva “Super”.

Clique em “move tool” em seguida. Para redimensionar o tamanho do texto, basta clicar “window” e marcar “character”. Em

seguida localize “Set the font size” e altere o valor para um do seu gosto, confirmando

com “enter”.

Caso queira mudar a cor, clique na caixa ao lado de “Collor” e troque a cor como desejar.

Pra fechar a caixa “character” basta clicas nas duas setas ao seu lado.

Repita esse passo mais uma vez escrevendo “Rodas”

Com a ferra menta “move tolls” selecionada, organize o texto como quiser.

 

Caso necessário, organize as layers na ordem de leitura arrastado e soltando.

 

Vamos voltar para a janela de animação.

Como você deve percebido, nossa primeira seqüência de layers

que são referente as rodas, vão somente até “24f”.

 

Vamos agora resolver esse problema:

 

Volte ao menu de layers e pressionado “shift” clique na layer 00 e em seguida na layer 23.

Com o botão direito do mouse marque a opção “Convert to smart object” e renomeie em seguida

para “Roda 01″.

 

Nosso objetivo é fazer com que a layer “roda 01 chegue em até “3:00f”, para isso selecione a

layer “roda 01″ e pressione (ctrl+j) três vezes.

Em seguida, renomeie para a seqüência numérica.

 

Na janela de animação, retire todo o zoom.

Selecione “roda 01″ e clique no meio de sua barra, arrastando para a esquerda, afim de ver onde está seu final.

Quando o mesmo aparecer, arraste para encurtá-la, como já foi feito antes.

Feito isto, clique novamente no meio da barra e volte seu início para “0f”.

Termine o ajuste de encurtamento, ajustando para “24f”

Repita os passos para as barras restantes.

O próximo passo é alinhar uma barra ao final da outra, como já foi feito.

Isso deverá nos fornecer material para chegar até os “3:00f”

 

Novamente selecione todas as layer referentes a roda e com o botão direito clique novamente em

“Convert to smart object” e renomeie em seguida para “Imagem Roda”

 

Pressione “ctrl+t” e posicione o mouse em um dos cantos da imagem, e com “shift” pressionado, clique e arraste rumo

ao centro da imagem para redimensioná-la.

 

Em animação, posicione o cursor em “5f” e clique na seta à extrema esquerda da barra “super” e marque

o ícone com um relógio em “opacity”. A seguir, em layers, marque a opção “opacity” para “0%”.

Posicione a barra de progresso agora em “15f” e defina “opacity” para 100%.

Repita os passos para a barra “Roda”, porém inicie em “15f” e termine em “25f”.

 

 

Agora clique na barra “Imagem Roda” e selecione a ferramenta “move tool”. Clique na imagem da Roda em sua

composição, e pressionando “shift”, e arraste-a para a esquerda até desaparecer.

Volte a barra de status para “0f” e clique na seta à extrema esquerda da barra “Imagem Roda” e marque o ícone com um relógio em “position”.

Posicione a barra de progresso em “1:00,5f” e repita os passos para arrastar a “imagem Roda” até

desaparecer à direita.

Mova a barra de progresso para “1:00,6f” e mova novamente a “imagem roda” para a esquerda.

Avance a barra de progresso para “1:00,15f” e clique em “add or remove keyframe at current time” ao lado

do ícone do relógio em “position”. Mova a barra de progresso para “2:00,15f” e mova a “Imagem Roda” até desaparecer

no lado direito.

 

Pronto pessoal, basta agora salvarmos nossa animação, e para isso pressione (ctrl+shift+alt+s).

Na janela que se abre selecione na direita superior a opção “GIF”, em Collor, 256. Desmarque a opção

transparência.

Mais abaixo, em “Qualit” escola “bicubic Smother” e em “animation“, selecione “forever”.

 

Clique agora em “save”, selecione uma pasta e renomeie se necessário, marque a opção “images only” em “format”

e clique em salvar.

Caso apareça alguma mensagem, clique em “ok”.”

 

Olá a todos!

 

Meu nome é Daniel Moreira, e sou motion designer aqui do programando fácil

 

Muita gente acha, que para poder criar animações para colocar em sites ou e-mails,

é necessário dominar algum software específico, como o Adobe Flash, ou after effects.

 

Nessa vídeo dica, você entenderá o conceito básico de animação, dentro do próprio

photoshop.

 

A versão usada para essa aula é a CS5, mas as técnicas são as mesmas para versões CS anteriores.

 

Vamos lá?

 

Crie uma nova composição:

 

Para isso vá ao menu, “File” e clique em “New” (ou pressione ctrl+n).

Nomeie a composição da maneira que quiser

Configure com a largura (width) de 400 px e 200 px de altura (Heigth)

Escolha o modo de cor ( Collor Mode) como RGB e 8 bit

Selecione branco (white) para background e clique em “Ok”.

 

Na aba “layer”, clique em “background” e em seguida clique em “create a new layer”

no canto direito inferior (ou pressione ctrl+shift+alt+n) para criar uma nova layer em branco.

 

Exporte agora uma imagem com algo redondo, no nosso caso, uma roda.

 

Clique em “file” em seguida “place”

 

Navegue até a pasta onde está sua imagem, selecione e clique no botão “Place”.

Pressione “enter”.

 

Em layers, localize e clique na imagem que acabou de buscar.

Pressione (ctrl+j) para duplicar a layer e repita o processo mais 22 vezes

Clicando duas vezes no nome das layers, renomeie numericamente de cima para baixo a partir de “00″.

Feito isso, você terá 24 layer, numeradas de 00 à 23.

Selecione o layer 01 e clique em “Edit” e a seguir “free transform” ou pressione (ctrl+t).

Pressionando “shift” aproxime o cursor do mouse até um dos cantos da imagem e rotacione

em “1 ponto” no sentido horário, e tecle “enter”

Faça o mesmo com o layer 02, porém rotacione em “2 pontos”.

Layer 3 “3 pontos”, layer 4 “4pontos e assim sucessivamente até ter chegado na layer 23, com o total de “23 pontos”

 

Lembre sempre de salvar seu projeto. Para isso, vá no menu “file” e clique em “save”, ou pressione (ctrl+s) e

escolha uma pasta para salva-lo.

 

Agora vá até o menu “window” e marque “animation”, e você verá que logo abaixo surge uma

nova janela contendo todas as suas layers representadas por barras.

 

Clique no final da barra 1 e arraste até os primeiros “15f” (quinze frames).

Dica importante:

Pressionar “shift” enquanto se arrasta um objeto qualquer.

Faça o mesmo para as outras.

 

Arraste para “3:00f” (três segundos) o item “Work area end”

 

Feito isso, aumente o zoom afim de alongar a área de “15f” ao máximo da tela.

 

Agora repita a tarefa de arrastar as barras, mas desta vez até “1f”.

 

Clique no meio da barra 01 arraste até o final da barra 00. Faça o mesmo com barra 02,

levando até o final da barra 03. Repita esse processo para todas as outras barras.

Quando já não tiver mais espaço para arrastar, diminua o zoom.

 

Ao terminar esse processo, você terá um gráfico em forma de escada.

 

 

 

Com a layer “00″ Selecionada, vá ao menu da direita e selecione “horizontal text tool” e

escreva “Super”.

Clique em “move tool” em seguida. Para redimensionar o tamanho do texto, basta clicar “window” e marcar “character”. Em

seguida localize “Set the font size” e altere o valor para um do seu gosto, confirmando

com “enter”.

Caso queira mudar a cor, clique na caixa ao lado de “Collor” e troque a cor como desejar.

Pra fechar a caixa “character” basta clicas nas duas setas ao seu lado.

Repita esse passo mais uma vez escrevendo “Rodas”

Com a ferra menta “move tolls” selecionada, organize o texto como quiser.

 

Caso necessário, organize as layers na ordem de leitura arrastado e soltando.

 

Vamos voltar para a janela de animação.

Como você deve percebido, nossa primeira seqüência de layers

que são referente as rodas, vão somente até “24f”.

 

Vamos agora resolver esse problema:

 

Volte ao menu de layers e pressionado “shift” clique na layer 00 e em seguida na layer 23.

Com o botão direito do mouse marque a opção “Convert to smart object” e renomeie em seguida

para “Roda 01″.

 

Nosso objetivo é fazer com que a layer “roda 01 chegue em até “3:00f”, para isso selecione a

layer “roda 01″ e pressione (ctrl+j) três vezes.

Em seguida, renomeie para a seqüência numérica.

 

Na janela de animação, retire todo o zoom.

Selecione “roda 01″ e clique no meio de sua barra, arrastando para a esquerda, afim de ver onde está seu final.

Quando o mesmo aparecer, arraste para encurtá-la, como já foi feito antes.

Feito isto, clique novamente no meio da barra e volte seu início para “0f”.

Termine o ajuste de encurtamento, ajustando para “24f”

Repita os passos para as barras restantes.

O próximo passo é alinhar uma barra ao final da outra, como já foi feito.

Isso deverá nos fornecer material para chegar até os “3:00f”

 

Novamente selecione todas as layer referentes a roda e com o botão direito clique novamente em

“Convert to smart object” e renomeie em seguida para “Imagem Roda”

 

Pressione “ctrl+t” e posicione o mouse em um dos cantos da imagem, e com “shift” pressionado, clique e arraste rumo

ao centro da imagem para redimensioná-la.

 

Em animação, posicione o cursor em “5f” e clique na seta à extrema esquerda da barra “super” e marque

o ícone com um relógio em “opacity”. A seguir, em layers, marque a opção “opacity” para “0%”.

Posicione a barra de progresso agora em “15f” e defina “opacity” para 100%.

Repita os passos para a barra “Roda”, porém inicie em “15f” e termine em “25f”.

 

 

Agora clique na barra “Imagem Roda” e selecione a ferramenta “move tool”. Clique na imagem da Roda em sua

composição, e pressionando “shift”, e arraste-a para a esquerda até desaparecer.

Volte a barra de status para “0f” e clique na seta à extrema esquerda da barra “Imagem Roda” e marque o ícone com um relógio em “position”.

Posicione a barra de progresso em “1:00,5f” e repita os passos para arrastar a “imagem Roda” até

desaparecer à direita.

Mova a barra de progresso para “1:00,6f” e mova novamente a “imagem roda” para a esquerda.

Avance a barra de progresso para “1:00,15f” e clique em “add or remove keyframe at current time” ao lado

do ícone do relógio em “position”. Mova a barra de progresso para “2:00,15f” e mova a “Imagem Roda” até desaparecer

no lado direito.

 

Pronto pessoal, basta agora salvarmos nossa animação, e para isso pressione (ctrl+shift+alt+s).

Na janela que se abre selecione na direita superior a opção “GIF”, em Collor, 256. Desmarque a opção

transparência.

Mais abaixo, em “Qualit” escola “bicubic Smother” e em “animation”, selecione “forever”.

 

Clique agora em “save”, selecione uma pasta e renomeie se necessário, marque a opção “images only” em “format”

e clique em salvar.

 

Caso apareça alguma mensagem, clique em “ok”.