Na última semana, tenho-me divertido imenso a criar GIFs animados. Em 2015, mesmo com banda larga e todo o tipo de tecnologias, é impressionante como os GIFs ainda são altamente relevantes na internet (o Tumblr ou o Twitter que o digam). Até a hulu aproveitou para criar uma página de GIFs com algumas das suas séries.
Mas não é só para “brincar” nas redes sociais que criar GIFs animados é uma boa ideia. Estas animações podem ser úteis para mostrar como um produto funciona, para embelezar um site sem recorrer a código complicado ou simplesmente para ter um conteúdo que sobressaia na página.
Um dos pontos mais apelativos dos GIFs é o seu enorme suporte: qualquer browser ou smartphone suporta este formato sem necessidade de qualquer app, extensão ou plugin, tornando-o mais apelativo para algumas ocasiões do que a criação de um vídeo, assumindo que não precisamos de ter som na nossa animação.
É também verdade que os GIFs animados são mais recomendados para animações curtas (de 3–5 segundos) e muito populares pelo facto de serem loopable, ou seja, uma vez terminada a reprodução de uma animação, a mesma recomeça de imediato, sem necessitar de qualquer interacção do utilizador. Como este exemplo:
Uma desvantagem deste formato é o tamanho dos ficheiros. Se não tivermos cuidado, uma simples animação de alguns segundos pode ocupar vários MBs. No entanto, neste artigo darei algumas dicas para garantir que alcançamos a melhor qualidade possível num ficheiro relativamente pequeno.
Vamos começar por ver que programas podemos utilizar para criar os melhores GIFs possíveis.
O software
A melhor forma de criar GIFs é a partir de vídeos. Se já tiveres o vídeo no teu computador, podes editá-lo com o Adobe Premiere, o iMovie ou até o Windows Movie Maker primeiro, se necessário, ou importá-lo directamente num dos programas que criam GIFs que vou referir de seguida.
Também podes criar vídeos facilmente, recorrendo a software que se calhar até já tens instalado no teu computador. Eis alguns exemplos:
Podes gravar acções no teu ecrã com um programa de screencasting como o brilhante Screenflow, ou o Camtasia. Esta é uma excelente solução para tutoriais ou para apresentar funcionalidades de um programa na landing page do produto, por exemplo. Utilizei este método neste artigo.
Podes criar animações de texto (e não só) em programas de apresentação como o Powerpoint ou o Keynote, que são muito intuitivos, e exportar o produto final como vídeo. Esta técnica é óptima para animar texto ou alguns gráficos simples. A imagem de destaque deste artigo utilizou este método.
Feito o vídeo, é tempo então de o importar num programa que converta esse ficheiro num GIF animado. Tens vários à escolha.
Adobe Photoshop (Mac e Windows)
Se utilizares o famoso editor de imagem da Adobe, podes importar o vídeo indo a File > Import > Video Frames To Layers. No ecrã seguinte poderás definir o excerto do vídeo que pretendes converter para GIF.
Sem surpresa, este programa é óptimo para criar GIFs, porque não só permite seleccionar os frames que queremos eliminar (o que será importante para garantir que não colocamos frames desnecessários na animação final, que impactará o tamanho final do ficheiro) como nos possibilita controlar o número de cores que queremos utilizar.
Ainda assim, não sendo este um software acessível a todas as carteiras, não será a minha recomendação para esta tarefa.
Video to GIF, da imgur (Web)
Se o nosso vídeo já está online (no YouTube, por exemplo), podemos criar um GIF com o máximo de 15 segundos com esta aplicação do conhecido serviço imgur.
Para tal, basta copiar e colar o link, definir o intervalo do vídeo que queremos converter e clicar em “Create GIF”. Podemos ainda inserir algum texto adicional, se desejarmos.
RecordIt (Mac e Windows) e GifGrabber (Mac)
Estas 2 apps são excelentes para aqueles momentos em que só queremos capturar um clip curto no nosso ecrã e partilhá-lo com alguém.
São aplicações muito básicas, que funcionam de forma muito semelhante: definimos a área de captura, clicamos em “Record” e uma vez finalizada, temos a possibilidade de realizar o upload para a web de imediato.
VideoGIF (Mac) e GIF Brewery (Mac)
Estas 2 aplicações, exclusivas para OSX, são bastante similares nas funcionalidades e o VideoGIF até tem uma versão gratuita na App Store.
A minha recomendação vai, porém, para o GIF Brewery, que apesar de custar 5 euros, tem a novíssima versão beta disponível de forma gratuita no site oficial e tem um enorme leque de funcionalidades.
Com o GIF Brewery, para além de podermos inserir texto nos nossos GIFs ou aplicar filtros a la Instagram, podemos gravar o ecrã, definir os frames que pretendemos remover e o número de cores a utilizar (como no já referido Photoshop) e redimensionar/ampliar o que pretendemos exibir com grande facilidade.
A versão 3 ainda está a ser afinada, mas do que tenho visto, sem dúvida que promete.
Algumas dicas
Conhecidas as várias aplicações que temos ao nosso dispor, vou agora partilhar contigo algumas dicas para criares os melhores GIFs possíveis.
Aqui, o mais importante é sem dúvida o tamanho do ficheiro final, porque se quiseres colocar o GIF no Tumblr, por exemplo, tens de ter um ficheiro de 2 MB (no máximo), e se colocares vários GIFs numa página do teu site, é possível que fique bastante pesada.
Cria vídeos com poucas cores
A melhor forma de garantir que não acabas com um GIF gigante é uma boa gestão de cores. Se estiveres a criar um novo vídeo, procura não utilizar muitas cores diferentes ou gradientes, especialmente se tudo o que precisas é de animar algum texto.
Seguindo esta linha de raciocínio, quando chegar a altura de exportar o GIF, certifica-te que não estás a exportar uma versão com 128 ou 256 cores se na realidade só utilizaste uma palete de 5 ou 6 cores.
Quanto menos frames, melhor
Podes definir quantos frames (ou imagens) por segundo queres nos teus GIFs – quanto menos imagens, mais leve o GIF será.
Mais frames garantirão maior fluidez na reprodução (o que é bom para algo com muito movimento, como uma sequência de desporto), mas se se tratar de uma animação simples em que um par de frames por segundo chegarão, deves optar por este caminho.
Deves também remover todos os frames desnecessários. É uma tarefa algo aborrecida, mas não há dúvida que quem visualizar os teus GIFs agradecerá.
Ao importar os vídeos, os programas de GIFs vão muitas vezes encontrar frames repetidos – no entanto, se a imagem é idêntica à anterior (ou muito aproximada), ganhas mais em remover os duplicados, porque quantos menos frames, menor será o ficheiro final.
No GIF Brewery, podes definir que frames queres remover e no Photoshop, podes minimizar a ocorrência de duplicados ao activar a opção “Limit To Every 2 Frames” na altura de importar o vídeo.
NOTA: Alguns programas de vídeo, como o Screenflow, permitem a exportação do vídeo com Motion Blur. É possível que obtenhas melhores resultados em animações com bastante movimento se utilizares esta opção, porque suaviza a animação quando há poucos frames por segundo.
Exporta várias versões
Com GIFs, o melhor que tens a fazer é exportar várias versões até encontrares o melhor compromisso qualidade/tamanho do ficheiro.
Joga com a dimensão da imagem, com o número de cores e com as opções de compressão das imagens (se o software o permitir) até ficares satisfeito com o produto final.
Depois, não te esqueças que ainda podes reduzir um pouco mais com o excelente ImageOptim para Mac, como foi já referido no meu artigo sobre como comprimir imagens.
Mãos à obra!
Para além de umas gargalhadas entre amigos, os GIFs animados podem enriquecer qualquer página Web e são bastante fáceis de criar, por isso… happy giffing!
Esqueci-me de alguma app? Tens alguma dica que queiras partilhar? Manifesta-te nos comentários!