Se você costuma passar algum tempo na internet, provavelmente já viu um GIF animado. Trata-se de um arquivo que exibe uma sequência de imagens para dar a ideia de movimento. O que você talvez ainda não saiba é como fazer GIFs, não é mesmo?
Incluir esse formato de imagem no seu portfólio pode ajudá-lo a se destacar. Afinal, que outro recurso evidencia com tanta clareza as interações em um layout ou a lógica por trás de um vídeo?
Seus recursos são fáceis de serem consumidos, capturam como nenhum outro a atenção dos espectadores e têm um grande impacto emocional. Além disso, GIFs são altamente compartilháveis e podem elevar o nível de seu trabalho.
O formato para intercâmbio de gráficos (GIF) é um instrumento poderoso na mão de designers, e é por isso que vamos explorar, no artigo de hoje, como fazê-lo no Photoshop. Pronto? Então, mãos à obra!
O que são GIFs?
Antes, vamos contemplar um pouco da história desse formato gráfico tão bem-sucedido na internet. Originalmente chamado de 87a, o acrônimo GIF representa o “formato para intercâmbio de gráficos” ou Graphics Interchange Format. Mas o que há de tão diferente nele para receber um nome tão especial?
O GIF é comparável aos arquivos JPEG, TIFF e PNG na medida em que é uma maneira de comprimir imagens, mas vai além de seus pares, pois permite que você armazene mais de um único frame em um arquivo. Isso significa que salvar animações de alguns segundos como imagem (e não como vídeo) é possível graças a esse formato, o que motivou uma verdadeira revolução.
Afinal, com poucos kbs de tamanho, o GIF cabe em quase qualquer página da web e pode ser carregado por dispositivos mobile com velocidade. E é por esse motivo que, em 2012, ele se torna um verbo na língua inglesa: to gif, ou criar um GIF. Nesse mesmo ano, é eleito como palavra do ano e ocorre a explosão do GIF animado.
Um GIF é, de forma simples, um ciclo sem fim de imagens ou videoclipes que pode ser utilizado para descrever uma ideia, evidenciar uma interação ou recortar um trecho particularmente relevante de um filme. Assim, ele pode levar a divulgação de seus designs para o próximo nível.
Como fazer GIFs no Photoshop?
Vamos considerar, para o tutorial abaixo, que você já tem as sequências de imagens que gostaria de incluir em seu GIF, ok? Assim, podemos dedicar nosso post a cobrir em detalhes o funcionamento da animação em si e as opções que o Photoshop disponibiliza para exportar seu arquivo. Dito isso, vamos ao primeiro passo:
Faça upload das suas imagens para o Photoshop
Em Files > Script > Load files into stack, é possível carregar uma sequência de arquivos e empilhá-los. O ideal é que, antes de fazer isso, você reúna todos os arquivos do seu GIF em uma única pasta, para ficar mais fácil encontrá-los.
O Photoshop vai criar uma camada separada para cada imagem selecionada. Se você quiser combinar camadas para que elas apareçam em um único frame no seu GIF, torne-as visíveis e, em seguida, pressione Shift + Ctrl + ALT + E. O programa adicionará uma nova camada contendo o conteúdo mesclado que você deve, então, renomear.
Abra a janela Timeline
Agora, é preciso abrir a janela Timeline, clicando em Window > Timeline. Essa seção permitirá que você ative e desative camadas por diferentes períodos de tempo, transformando o que normalmente seria uma imagem estática em GIF. Ela aparecerá na parte inferior da sua tela.
Clique em “create frame animation”
Para começar seu GIF, vá até a janela timeline e clique em “create frame animation“. Em seguida, você deverá criar uma camada para cada novo quadro, selecionando todas as suas layers. Depois de fazer isso, clique no ícone do menu à direita da tela Timeline e selecione “create new layer for each new frame”.
Determine o tempo de cada frame
Em cada quadro, selecione por quanto tempo ele deverá aparecer em sua animação antes de mudar para o próximo frame. Para fazer isso, clique no tempo abaixo de cada imagem e escolha a duração ideal. O padrão é 0,5 segundos por quadro.
Escolha o número de repetições
Na parte inferior da barra de ferramentas da janela Timeline, selecione quantas vezes você quer que o GIF se encaixe. O padrão dirá “once”, que significa “uma vez”, mas você pode fazer o loop durar o quanto quiser, incluindo “forever” (ou “para sempre”). Clique em “other” para especificar um número distinto de repetições, como três ou quatro.
Visualize seu GIF
Clique no botão de play para verificar o funcionamento do seu GIF.
Exporte-o
Caso esteja satisfeito, é hora de salvar seu GIF para usar na web. Faça isso indo até a barra de navegação e clicando em File > Export > Save for web
Escolha o tipo de GIF que deseja salvar no menu suspenso. “GIF Dithered”, por exemplo, é o que você deve selecionar caso tenha gradientes em sua imagem. Clique em salvar, na parte inferior, e exporte o arquivo para o seu computador. Pronto!
Por que usar esse formato na divulgação de seus projetos?
Introduzir, com movimento, desenhos e diagramas é uma excelente estratégia para mostrar o progresso de ideias em um projeto. E os GIFs animados podem ser uma ferramenta útil para melhorar a apresentação de seus trabalhos, explicando de forma enxuta uma grande quantidade de informações.
Mostrar características específicas em um desenho, por exemplo, pode ser uma tarefa complexa e, mesmo que você consiga colocar em uma imagem toda a informação necessária, o resultado pode ficar confuso e saturado. Os GIFs são ótimas ferramentas para esses momentos, mostrando informações de contexto de forma muito mais limpa.
Para explicar graficamente a ideia por trás de um projeto, os GIFs fornecem uma sequência coerente e comunicam sua abordagem com clareza aos clientes. Além disso, eles naturalmente chamam muito mais atenção do que uma imagem estática e, por isso, são as grandes estrelas em websites de portfólio, como o Dribbble.
Agora você concorda que saber como fazer GIFs pode deixar seus projetos muito mais legais? Se gostou deste post, curta a nossa página no Facebook e veja mais dicas que vão alavancar seu trabalho!
