Photoshop

Como criar um banner em GIF animado no Photoshop

Crie GIFs complexos facilmente usando o Photoshop. Baixe o modelo grátis para estudo.
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Animações são uma ferramenta importante no web design, especialmente no desenvolvimento de peças de publicidade e banners. Imagens em movimento chamam mais atenção do visitante do que estáticas, mesmo que estas tenham cores vibrantes ou estejam em posições ditas estratégicas.

Quando surge a necessidade, muitos se apegam à primeira opção que vem à mente: Flash. Mas a minoria sabe usar o programa para criar animações e exportá-las, recorrendo a sites e softwares que automatizam a criação. São soluções parciais, pois oferecem poucas opções de personalização no produto final.

É possível criar um GIF animado no Photoshop, que será empregado como qualquer outra imagem, com o mesmo tamanho ou até menor que um SWF (shockwave flash). E melhor: o GIF não depende de plugins para funcionar.

Veremos neste tutorial como criar um banner em GIF animado, usando a janela de animações nos modos Frames e Timeline. Ao final, verá também o processo de salvamento do arquivo concluído no formato GIF. Se não conseguir acompanhar, baixe o arquivo gerado para estudo.

Legenda

Antes de começar, uma explicação sobre alguns termos:

  • Frame: ou quadro, é cada uma das imagens que, exibidas em sequência, formam a ilusão de movimento. Para entender melhor, leia Como renderizar vídeos a 60 FPS no Camtasia, que vai mais fundo no tema.
  • Keyframe: ou quadro-chave, representa um ponto da animação em que algo ocorre, seja o início ou fim de um movimento, ou modificação qualquer em elementos da cena.
  • Timeline: linha do tempo, é a janela do Photoshop em que você pode controlar as alterações na imagem baseando-se no tempo de execução da animação.
  • Frame Animation: Animação por Quadros, janela do Photoshop em que você modifica a animação quadro por quadro.

Este é o banner que vamos criar:

Banner que será feito neste tutorial

Elementos básicos

Antes de começar a animar, vamos criar os elementos componentes do banner. Entre eles estão textos, logotipos e o fundo da imagem, além de outros detalhes.

Crie um novo arquivo do Photoshop, tamanho 250 x 250.

Tamanho do documento: 250 x 250, 72 dpi

Para o fundo, use um degradê linear, com a Gradient Tool, usando as cores #CC6633 e #CC9966.

Cores usada no degradê de fundo

Em seguida, adicione os elementos principais que farão parte da composição. Nesse caso, adicionei a nuvem com o logo, a barra preta, e uma camada preta que receberá um filtro Lens Flare – Reflexo de Flash.

Inserindo os elementos que farão parte do banner

A barra preta recebeu um degradê linear, de preto para cinza, e um estilo de camada Drop Shadow. Configure a sua como achar melhor. Na camada toda em preto, aplique um Lens Flare similar ao visto abaixo (ele será um tipo de sol nascendo por detrás da nuvem), e depois mude a mesclagem da camada para o modo Screen.

Configuração do Reflexo de Flash

Após mudar a mesclagem da camada com o Flash para Screen

Na parte vazia entre a nuvem e a barra inferior, digite o primeiro texto do banner. Usei a fonte Chunk Five, tamanho 36. Esse texto fica acima de todas as demais camadas.

Começando a inserir os textos

Animação

Menu Window > Animation. Será aberta, na parte inferior da tela, a janela para controle da animação. Se ela estiver como visto abaixo, estará no modo Timeline, então clique no botão do canto inferior direito para alternar ao modo Frames, no qual vamos começar.

Mudando para o modo Frames Animation, em vez de Timeline

Vamos criar a animação do texto, que rapidamente desaparece e dá lugar a uma nova mensagem. Note na janela de animação, que há apenas um quadro (frame).

Frame único

Para gerar a animação, você deverá duplicar o frame atual, e nele aplicar as alterações. Para isso, clique no botão Duplicate Selected Frames, logo abaixo das miniaturas dos frames. Isso duplicará o frame.

Frame duplicado

Duplique então a camada do texto Tutoriais (atenção, duplique a camada, não o frame de novo!) e nele aplique um filtro de Desfoque de Movimento, com força 30. Desligue a visibilidade da camada com o texto original.

Organização das camadas

Clique sobre a miniatura do frame 1. Note que o texto original (sem blur) vai reaparecer; então, desligue neste frame a visibilidade da camada de texto com o blur.

Frame 2: desligue a visibilidade do texto com blur, mantendo o texto original

Esse é o básico para criar um GIF animado no Photoshop (e outros softwares). Nosso primeiro quadro terá o texto original visível e o que recebeu Blur invisível; e o segundo quadro na situação inversa.

Frames 1 e 2, com respectivas camadas de texto visíveis ou não

Para controlar quanto tempo cada quadro será exibido, clique na seta abaixo da miniatura do frame, e selecione o tempo. Para mim, dois segundos no texto normal é o suficiente.

Definindo o tempo de duração de cada frame: 2 segundos

Já o texto borrado vai aparecer por uma fração de segundo, só durante a mudança entre um texto e outro. Da mesma maneira que antes, ajuste seu tempo para 0.2 segundo.

Absorveu isso?

Então você já pode criar os outros textos do seu banner, que no meu caso foram: “Photoshop”, “WordPress”, “Plugins”, “Templates”, ‘Dicas”, “Galerias”, “Downloads” e  “e muito mais”. Para cada texto, repita o processo: crie camadas, aplique Blur na cópia, crie os frame, ajuste o tempo, etc.

Não é difícil, mas exige atenção. É fácil esquecer de adicionar um frame e modificar o mesmo frame que acabou de editar! Ao terminar, clique no botão Play Animation, para testá-la.

Após criar os textos e ajustar as visibilidade de acordo com os frames, teste clicando em Play Animation

Para que a animação rode sem parar ao chegar no último frame, clique na seta ao lado da palavra ONCE (UMA VEZ na versão em português), logo abaixo da janela de frames, e selecione a opção Forever (SEMPRE). Assim a animação rodará num looping infinito.

Selecione a opção Forever para rodar a animação indefinidamente

Modo Timeline

Para criar a segunda parte da animação (texto inferior, na barra preta), clique no botão no canto inferior direita da janela de Animation, alternando para o modo de edição em Timeline.

Voltando para o modo de edição em Timeline

Nessa janela nova, já estão todas as linhas relativas às animações que você criou antes. Arraste o botão azul (Current Time Indicator) de volta para o primeiro quadro, se não estiver.

Volte a animação para o início, arrastando a guia

Digite o texto “Visite o Tutoriart – Clique Aqui“, em branco, sobre a barra preta. Sua camada deve ficar acima de todas as demais. Usei a fonte Arial Black, tamanho 14.

Vamos criar o primeiro movimento da frase: da direita para a esquerda, como nas legendas de noticiários de TV. Clique na guia da camada do texto, no menu lateral da janela de animações.

Abrindo as opções de animação da camada de texto que acabou de criar

Note que, para transformação possível de usar na animação, há uma opção e um relógio (Position para posição, Opacity para opacidade, Style para estilos de camada e Text Warp para distorções no texto).

Clique sobre o relógio da opção Position, pois queremos mudar a posição do texto. Surgirá um losango no começo da timeline, indicando que ali foi inserido um keyframe, ou seja, que algo vai acontecer com o texto a partir dali.

Keyframe criado no início da animação, relativo à camada de texto

Com a ferramenta Mover (tecle V), leve o texto para fora da área de visão do papel, à direita. Será a posição inicial de seu futuro movimento. Segure Shift enquanto arrasta para manter o deslocamento perfeitamente horizontal.

Arraste o texto para fora do papel, no frame inicial

Arraste então a guia (a linha vermelha indicada pelo ponteiro azul) do Current Time Indicator para a posição 0:00:03:00. Se não conseguir arrastar direito, dê duplo-clique sobre o tempo e insira o valor. Isso vai marcar o próximo keyframe na posição de 3 segundos na animação (equivalente ao frame 90, pois nossa animação vai rodar a 30 frames por segundo).

Clique então sobre o botão Add or Remove Keyframe (veja abaixo). É um losango entre as setas de navegação da timeline.

Adicionando o keyframe na posição 3 segundos

Agora arraste o texto para o centro da barra. Essa será sua próxima posição, após vir da direita, entrando na tela. Se você arrastar o indicador do tempo ou clicar no botão Play, o texto deslizará do ponto inicial para o centro da imagem.

Ele deve ficar nesta posição até faltarem três segundos para o fim da animação, então sairá à direita.

Como fazer isso? A animação completa tem cerca de 19 segundos; se quiser comprovar, arraste o marcador de tempo até o fim da linha e veja — para ser mais exato, tem 19 segundos + 23 frames). Quero que o texto, que levou três segundos para chegar ao centro, fique ali até faltarem três segundos, e então saia para a esquerda.

Então, 19 (segundos totais) – 3 (segundos que o texto levou para chegar ao centro do banner) = 16 segundos (mais os 23 frames restantes, que vou ignorar nesta animação);

16 – 3 (segundos que quero gastar para o texto sair da tela) = 13. Portanto, ele precisa ficar por 13 segundos no centro da tela. A posição central do texto vai dos 3 segundos até 16 segundos. Acompanhou?

Então, já sabe: arraste o marcador de tempo até a posição 0:00:16:00, insira um novo keyframe lá. Este vai determinar o fim da posição “parada” e início do movimento “saia para a esquerda”. Mas não mova o texto ainda, porque este frame marca o fim da posição “parada”.

Arraste a guia do tempo para a posição final, crie outro frame e agora sim arraste o texto, que está no centro, para fora do papel, à esquerda.

Posição dos keyframes: determinando onde o texto deixa de ser estático

Keyframes no fim da timeline: mova o texto para fora do papel

Criei depois o efeito de aparição e sumiço da nuvem-logo. Use a opção Opacity no menu de efeitos da janela de animação, na camada do logo. No começo da animação, crie um keyframe; crie outro na posição de 1.5 segundos (ou seja, 0:00:01:15, equivalente a 1 segundo + 15 frames).

No primeiro frame, reduza a opacidade da camada da nuvem-logo para 0% (na janela de camadas). Isso fará com que ele vá aparecendo conforme a animação corre, surgindo totalmente na posição 1.5 segundos (ou seja, 45 frames depois do início).

Como quero que o banner fique invisível por três segundos, entre o início e fim da animação, e ele já está invisível por um segundo e meio no início, preciso de apenas mais um segundo e meio no final, ou seja, 45 frames (sempre contando que nossa animação corre a 30 frames por segundo).

Como a animação total tem 19 segundos e 23 frames, então 45 – 23 (aqueles excedentes do final) = 22. Volte da posição final até o segundo 19 e você já terá 23 quadros. Volte mais 22 frames (ou seja, até a posição 0:00:18:08) e estará exatamente a 1.5 segundo do final.

Veja como fica a timeline do logo abaixo:

Keyframes para efeito de fade no logotipo

Salvamento

Para salvar sua animação em GIF, siga ao menu File > Save for Web & Devices (atalho: Ctrl + Alt + Shift + S).

Use as opções: GIF, e em Looping Options, deixe em Forever (se estiver em outra opção, mude para Forever, senão a animação só rodará uma vez). Se quiser testar a animação, clique no botão Play. Quando estiver pronto, clique em Save.

Janela de Save for Web & Devices

Use as opções padrão para salvar (ou seja, Format: Images Only / Settings: Default Settings).

Salve a imagem no local desejado

Finalizado

Banner animado finalizado

O arquivo fonte (no formato do Photoshop) criado neste tutorial está disponível para download (cerca de 1Mb), apenas para com fins de estudo. Para baixar, clique no botão abaixo.

via Mediafire

 

Tentei mostrar aqui o princípio de uso das duas formas de animar no Photoshop: por Frames e por Timeline. Lembre-se de que foi apenas um exemplo simples: você pode criar peças muito mais complexas quando assimilar o uso das ferramentas de animação.

Se tiver dúvida, comente.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Pin