Este é um guia para criar um GIF em loop ou cinemagraph. O processo combina duas disciplinas: fazer o loop e fazer o GIF.
É importante observar que, neste guia, essas duas etapas são realizadas com o software Adobe Creative Suite. Qualquer software de edição de vídeo de nível prosumer ou melhor deve ser capaz de fazer o loop com a lógica apresentada aqui. Usarei o Photoshop para criar o GIF, pois é a ferramenta mais abrangente que já vi. Outros geradores de GIF possibilitam menos controle com opções semelhantes, então você pode tentar fazer com eles se não tiver este software.
Mas primeiro vamos falar um pouco do contexto. A ideia de usar o vídeo em loop é apresentar um momento intemporal com um pouco de magia para atrair seus espectadores. Também descobri que o meio realmente se presta a certos temas.
Há alguns pontos para se ter em mente antes de começar. Como formato, os GIFs não são as formas mais limpas de apresentar movimento em loop na web. Para carregar com velocidade confiável, a imagem deve ser menor que 1 MB, o que geralmente significa que a animação é limitada a 20 quadros, o tamanho do quadro é limitado a 600 pixels ou mais e a imagem estará sujeita a compressão.
Então, por que alguém se importaria em trabalhar com esse formato? Tudo se resume a acessibilidade. No momento desta publicação, o GIF é o único formato de arquivo que pode ser reproduzido automaticamente em qualquer navegador. O vídeo HTML5 permite loops de maior resolução com durações mais longas, mas os dispositivos móveis da Apple proíbem especificamente a reprodução automática de qualquer tipo de vídeo. Isso significa que uma grande parte de sua audiência pode perder o que é suposto ser uma adição mágica e sutil de movimento a uma matéria.
Lembre-se que o GIF é apenas metade do processo - na verdade, é apenas o método de entrega do loop.
Fazendo um bom loop:
Tudo começa na câmera.
A principal coisa que você precisa aqui é brevidade e estabilidade. Quando estiver filmando, procure por um movimento recursivo. Isso pode ser o vento balançando uma árvore, fumaça subindo, alguém piscando ou carros passando. Mantenha-se imóvel. *É melhor estar em um tripé, mas geralmente as mãos firmes e um estabilizador de imagem na lente já funcionam. Loops decentes também podem surgir organicamente de filmagens diretas, como do tempo de inatividade entre as perguntas de uma entrevista.
*Há alguns casos quando esta regra pode ser quebrada.
Mova os clipes para um programa de edição não linear (eu uso o Premiere).
Busque o loop mais completo.
Isso varia de acordo com o tema. Há dois tipos de movimentos para buscar: cíclico e oscilante. O oscilante é como bumerangue; às vezes não é eficiente para fazer um loop sutil e acaba tornando o clipe mais longo, o que afeta o tamanho do arquivo GIF. O cíclico é muito melhor para fazer um loop grande.
Cíclico: Procure momentos no início e final de um clipe que pareçam iguais.
Oscilante: Encontre momentos com movimentos que permitam ocultar a inversão repentina. Retratos geralmente só podem ser feitos com esse método.
Construa o loop.
Cíclico
-Copie e cole o clipe para que ele se sobreponha.
-Adicione uma transição. A função "dissolve" muitas vezes funciona.
-Corte a extremidade final e, em seguida, remova o mesmo comprimento do início. Isso garante que o final do loop corresponda ao início.
- Se você ver um salto no meio da dissolução, talvez possa mudar o tempo para encontrar um ponto ideal.
Oscilante
-Copie e cole o clipe um após o outro.
-Retroceda o segundo clipe.
-Remova um quadro do final de cada clipe. Neste momento, o começo e o final de cada clipe tem o mesmo quadro. Isso significa que o mesmo quadro será reproduzido duas vezes seguidas e resultará em uma pausa.
**Borrados são mais adequados para alguns movimentos.
Teste.
Neste ponto, você deve poder copiar e colar sua sequência para revelar a natureza do seu loop. Se funcionar bem, deve parecer sem problemas. Às vezes, você encontra um movimento irreconciliável em segundo plano que precisará ser paralizado mais tarde.
Exporte.
Eu gosto de exportar em full HD apesar de que empacotá-lo como um GIF irá destruí-lo. Nunca se sabe quando um formato de arquivo em tamanho real, reproduzido automaticamente, estará por perto (ou se quiser fazer um loop offline).
Aqui está um rolo de arquivos de loop processados para dar uma ideia de como eles podem ser curtos. Clique aqui para ver todas as imagens finais.
Exportando como GIF:
Uso Photoshop CC 2016, mas qualquer outra versão deve funcionar.
File > Import > Video Frames to Layers
Escolha o seu arquivo de vídeo. Anote a duração do clipe.
Selecione a faixa.
Minha regra geral é “Limit to Every" ou limitar a cada número de quadros com base na duração do clipe. Eu costumo pegar a duração e adicionar um quadro, a menos que o clipe seja realmente curto. Um segundo neste caso é curto o suficiente para importar do começo ao fim. Lembre-se de que, nesse estágio, estamos trabalhando para limitar o tamanho do arquivo. A duração do clipe é o fator mais relevante no tamanho do arquivo e, como resultado, precisamos limitar o número de quadros.
Reduza o tamanho do clipe
Nesta fase, temos algumas opções para reduzir preventivamente o tamanho do arquivo (para mantê-lo com menos de 1 MB).
- Congele o movimento copiando e colando áreas estáticas da imagem. Certifique-se de aumentar os espaços para cortar sua seleção e verifique se a camada colada está por cima.
- Apague quadros. A quantidade máxima de quadros depende de quanto sua imagem pode ser congelada. Com a maior parte da imagem coberta neste caso, acho que os 15 quadros originais são ótimos. Eu nunca fui acima de 20 quadros sem ter que usar uma compressão seriamente prejudicial mais tarde.
Estabeleça o timing
O timing pode ser um pouco complicado, pois diferentes navegadores reproduzem em velocidades diferentes. Dito isso, espere que fique um pouco mais rápido online do que no Photoshop, então um pouco de lentidão não é ruim.
Layer > New Adjustment Layer
É uma boa ideia consolidar seus pretos e brancos com uma camada de "níveis", pois a compactação posterior limitará o intervalo de cores.
File > Export > Save For Web (Legacy)
Este é o passo final e sem dúvida o mais complicado. Essas opções na janela iminente controlam várias características do seu novo GIF:
Isso tudo é um cálculo, algo como: Tamanho do arquivo = Comprimento do Loop x Tamanho da Imagem x Cores x Dither x Lossy
Seu primeiro passo deve ser mudar o tamanho da imagem. Eu uso 600px.
Em seguida, há três valores cuja importância varia de acordo com a imagem. Os seguintes são exemplos de GIFs exportados com cada opção ativada para mostrar o que acontece.
-Lossy: Essa é a compactação geral. Zero (0) significa sem compressão e cada valor crescente significa uma imagem mais difusa. Mudar isso de 0 a 5 pode fazer uma enorme diferença no tamanho do arquivo sem muito comprometimento. Este é um exemplo de 60 lossy apenas para demonstrar como pode ficar confuso.
-Dither: Determina como as cores pontilhadas podem ser. 100 por cento é o mais pontilhado. Qualquer coisa menor irá revelar faixas onde um gradiente deve existir.
-Cores: limitado a 250. Você ficará surpreso com o pouco que precisa. Esse tem 100 por cento Dither, 0 Lossy e 40 cores.
Como escolhi um clipe muito curto, esse GIF poderia ser exportado sem comprometer nenhum dos controles de imagem. Aqui está em 0 Lossy, 100% dither e 256 cores. São 882 KB.
Basta salvar e pronto. Se quer ver mais possibilidades desse formato, visite gifumentarian.tumblr.com/archive.
Todos os cinemagraphs desta página foram produzidos para Denverite.com.
Imagem sob licença CC no Flickr via Andrew Hitchcock