Como Criar um Banner Animado em GIF no Photoshop


Animações são uma ferramenta importante em web design, especialmente no desenvolvimento de peças de publicidade, como banners e botões. Imagens em movimento chamam mais a atenção do visitante do que uma figura estática, ainda que esta tenha cores vibrantes ou esteja em posições estratégicas.

Porém, quando surge a necessidade, muitos acabam se prendendo na primeira opção que vem à mente: Flash. O problema é que muitos blogueiros e designers não tem conhecimento suficiente do programa para criar animações e exportá-las, ou até mesmo nunca tiveram qualquer contato com ele, recorrendo a sites e programas que criam animações automaticamente. Isso seria uma solução, não fossem as poucas opções para realizar alterações significativas no produto final.

O que muitos usuários esquecem é que com o Photoshop, é sim possível criar animações razoáveis, que depois poderão ser salvas no formato GIF e empregadas como qualquer outro tipo de imagem em seus blogs e sites, praticamente com o mesmo tamanho, ou até menor, que um arquivo SWF (formato exportado pelo Flash), e melhor: não dependendo de nenhum plugin para funcionar.

Neste tutorial, você verá como criar um banner com animação, 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 animado. Se absorver o conteúdo, estará apto a fazer inúmeros outros tipos de animação.

Legenda

Antes de começar, uma rápida explicação sobre alguns termos usados no tutorial:

  • Frame – ou quadro, é cada uma das imagens que, juntas e exibidas em sequência, formam a animação.
  • 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 imagem.
  • 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.

Não se assuste com esses termos, durante o tutorial verá que não são tão complicados quanto parece.

Este será o banner que vamos criar no tutorial.

Banner que será feito neste tutorial

1ª Etapa: Criação dos Elementos

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

Antes de mais nada, 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; fique livre para usar outras que quiser. Esse texto vai ficar acima de todas as demais camadas.

Começando a inserir os textos

2ª Etapa: 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 Motion Blur (menu Filter > Blur > Motion Blur), com força 30. Desligue a visibilidade da camada com o texto original.

Texto com Blur e texto original com visibilidade desligada, tudo isso no frame 2

Clique sobre a miniatura do frame 1. Note que o texto original (sem blur) vai reaparecer, já que este é o estado do primeiro frame; 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 princípio para entender como criar as animações: o primeiro quadro será o primeiro a aparecer, seguindo adiante. As modificações que você fizer na imagem, de quadro para quadro, definem a animação.

Neste caso, então, deveremos ter o primeiro quadro com 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 mensagem será exibida, clique na seta abaixo da miniatura do frame, e selecione o tempo. Para mim, dois segundos em cada texto é 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, apenas durante a mudança entre um texto e outro. Da mesma maneira que antes, ajuste seu tempo para 0.2 segundo.

Com esse procedimento compreendido, você já pode criar os outros textos do seu banner, que no meu caso foram: “Photoshop, WordPress, Plugins, Templates, Dicas, Galerias, Downloads, e muito mais“. Para cada texto, repita o processo. Certifique-se de que cada frame, ao final, tem seu conteúdo certo: texto normal ou texto com Motion Blur. Se estiver errado, selecione o frame e ajuste a visibilidade das camadas conforme a necessidade.

Não é difícil, mas exige atenção. É fácil esquecer de adicionar um novo 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, logo abaixo da janela de frames, e selecione a opção Forever. Assim, ao chegar no último frame, a animação voltará automaticamente ao início, num looping infinito.

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

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 cada tipo de 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 linha do tempo (timeline) indicando que ali foi inserido um keyframe (quadro-chave).

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

Arraste então o texto para fora da área de visão do papel, à direita, ou seja, para 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 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, já que 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

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

Ele deverá 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, então, que 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 deverá ficar cerca de 13 segundos no centro da tela, ou seja, a posição central do texto vai dos 3 segundos até 16 segundos. Então, já sabe: arraste o marcador de tempo até a posição 0:00:16:00, insira um novo keyframe lá (esse vai determinar o fim da posição “parada” e início do “movimento para a esquerda”); não mova o texto ainda. Então arraste o marcador de tempo para a posição final, crie outro frame e agora sim arraste o texto, que está no centro, para fora do papel, à esquerda. Essa será sua posição final, após se deslocar vindo do centro da imagem.

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

Seguindo o mesmo processo, criei 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

Banner Animado 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, divulgando este artigo em uma rede social de sua preferência.

Lembre-se de que todo nosso conteúdo é gratuito; divulgando o Tutoriart você estará retribuindo e ajudando outros leitores a descobrir o blog.

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

Deixe uma resposta

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s