Como criar Gif animado (imagens em transição) no Photoshop

Criaremos uma animação como esta, bem rápido.

O Photoshop tem uma opção de criar animações básicas que pode ser útil quando estamos sem o Fireworks ou Flash (programas voltados para animação) e necessitamos de uma imagem animada simples, ou seja, que mude de frames.
Por exemplo, quando estamos fazendo um trabalho de um cliente e necessitamos de fazer uma imagem de um produto com preço, apresentação do produto e nome da loja, pode tomar muito espaço na sidebar de qualquer site. Mas podemos fazer uma imagem de 140px x 140px e colocar as informações para alternar como um slide show economizando espaço na área do site. Isso é bem fácil de fazer no Photoshop.

1. Primeiro você tem que criar um arquivo PSD com as imagens. Cada uma tem que ficar em suas respectivas layers. No caso eu criei 3 imagens de 140px por 140px do meu encurtador de URLs (http://vej.am) e abri no Photoshop colocando cada uma em sua layer.

2. Abra o painel “Animation” selecione o menu “Window” e depois clique em “Animation”.



3. Agora vamos tornar cada Layer correspondente a seu frame no painel Animation. Como nós temos três layers, criamos mais duas frames, pois quando abrimos o painel Animation, já veio com um frame. Clique duas vezes em “Duplicate select frames” para triplicar a frame existente.

4. O primeiro frame não vamos mexer pois ele já está selecionado com a imagem que queremos, então vamos selecionar o segundo frame e no painel layer deixamos ativado (observe o olhinho) somente a imagem do endereço do encurtador para que a segundo frame fique interligado à layer de endereço.

5. Depois repetimos o processo para o terceiro frame selecionando a terceira layer pra ele. Não se esqueça de desativar o olho da primeira layer (preta / Link’s) com o primeiro frame selecionado.

6. A imagem já fica assim, se dermos play no painel Animation.

7. Vamos mudar a duração das layer’s. Para isso, selecionamos ela segurando Shift e clicando a setinha para baixo de uma delas e escolhemos a duração de 5 segundos.

8. Na parte de baixo à esquerda clicamos a setinha para baixo e escolhemos “Forever” que é para a animação ficar se repetindo quando acabar os 15 segundos (5 de cada). Você também pode escolher Once (repete uma vez), 3 times (repete três vezes) e other (aparecerá uma janela para você especificar quantas vezes você quer que toda a animação dure).

* Você também pode apagar um frame clicando na lixeira abaixo no painel e também pode mudar a ordem delas se quiser, clicando, segurando o clique e arrastando. *

// A animação já está assim //

9. Agora vamos acrescentar transição entre os nossos frames. Selecionamos a primeira layer e clicamos o botão “Tweens animation frames” na parte de baixo do painel, (um ícone com vários quadrados de cima para baixo). Aparecerá a janela abaixo.

10. Na janela selecionamos “Next frame” na opção “Tween with” que é para que a transição da layer selecionada seja sincronizada com a proxima layer. Em “Layer” deixamos como está (all layers), e em “Frames to add” deixamos o valor “5”, que é para o Photoshop criar 5 novos frames.
Em “parameters” deixamos só o Opacity marcado, que é para o Photoshop colocar o efeito de transição entre o primeiro frame e o segundo como se ele fosse se apagando e acendendo uma nova imagem. A opção “position” serve para criar um efeito de mudança de posição da imagem (imagem andando) e Efects, para adicionar outros efeitos, mas no nosso caso usaremos o comando Opacity.
Clique OK.

11. Note que foram criadas 5 novos frames e já dá pra notar o efeito de transição entre os frames. Agora em cada novo frame com o efeito da opacidade, clicamos a seta abaixo e mudamos a duração para 0,5 sec (só nas layers opacas).
*Você também pode fazer isso selecionando todas as frames que quer mudar a duração clicando na seta abaixo e escolhendo a opção. Todas serão mudadas de uma só vez.*

12. Repetimos o processo com o frame do endereço do encurtador selecionado, e depois para o da mão.

13. Quando for fazer o efeito no frame da mão, atente para escolher “First frame”, como na imagem abaixo, para que o frame faça a sincronização com a Primeira imagem para começar tudo de novo.

14. Escolha a duração de 0.5 para os 5 frames criadas.

15. Tudo pronto, agora vamos no menu “File” e ecolhemos a opção “save for web and devices”, (salvar para Web e dispositivos).

16. Na janela que aparecer, escolha “Gif” no menu acima e salve o Arquivo.

Siga-me no Facebook

Comments

comments

Comments

Deixe uma resposta

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