Todos os anos, temos recebido muitas perguntas sobre como criar GIFs. Adoramos GIFs porque são fáceis de compartilhar, funcionam em todos os navegadores, e você pode fazê-los loop! Por demanda popular, aqui está uma visão geral das nossas duas ferramentas favoritas de criação de GIFs e nosso fluxo de trabalho para cada uma delas.
Gravando sua tela
Existem algumas ótimas ferramentas de gravação de tela por aí. Se você estiver no Mac, você pode usar o Quicktime, que é completamente gratuito. Neste artigo, estaremos usando ScreenFlow, que é uma aplicação paga pelo Telestream.
ScreenFlow é uma ótima opção para gravação porque inclui um poderoso editor que lhe dá controle detalhado sobre o seu GIF. Quando você abrir ScreenFlow ou clicar em configure gravação você verá esta tela.
ScreenFlow configuração de gravação.
Primeiro, certifique-se de ter o seu protótipo na tela. Depois, selecione a tela que você estará gravando e aperte o botão vermelho para começar a gravar toda a sua tela. Neste tutorial, eu estarei gravando uma interação feita no Framer, então minha janela de visualização está configurada para tela inteira. É possível cortar a gravação para o tamanho perfeito mais tarde.
Criar um loop perfeito
Uma coisa que sempre buscamos é um GIF em loop perfeito, e uma boa maneira de executar isso é garantir que o último frame do seu GIF seja exatamente o mesmo que o primeiro frame. Isso evita saltos, o que faz com que o GIF flua corretamente quando reproduzido em repetição.
Se sua animação contém um cursor do mouse e você tem uma mão firme, você pode facilmente criar um loop perfeito posicionando o cursor do mouse com a mão. Use tacos visuais para se lembrar onde você começou e onde você precisa terminar.
No meu exemplo eu fiz uso de um cursor animado de toque para o melhor resultado dentro do protótipo que eu estarei gravando. Baixe este exemplo para ver como você pode adicionar um cursor animado de toque aos seus próprios protótipos usando Framer.
Estados ativos e inativos para o cursor de toque.
Adicionar efeitos para apimentar
Agora você tenha feito sua gravação no ScreenFlow, você pode querer ajustá-la para focar no que você quer apresentar no GIF. Para fazer isso, vá para File > Document settings. Neste tutorial, vamos compartilhar para Dribbble on Web, portanto 800×600 é o tamanho ideal. Você vai notar que as dimensões da gravação feita anteriormente são muito grandes. Para mexer na escala da gravação, seleccione o clip e clique no canto superior direito do ScreenFlow.
Escale o seu clip para ajustar o tamanho do documento usando o selector de escala.
>
Após sua gravação estar no lugar, certifique-se de aparar o início e o fim arrastando o clipe (lembre-se, queremos criar o loop perfeito!).
Neste ponto, seu vídeo está pronto para ser exportado como está, embora recomendamos adicionar alguns toques finais. ScreenFlow permite adicionar um efeito de zoom suave para realçar detalhes específicos no seu vídeo. Para isso, posicione o depurador do vídeo sobre o ponto onde você deseja adicionar um efeito de zoom. Em seguida, clique no botão de acção de vídeo no canto superior direito do Screenflow e clique em + Action. Selecione um bom estado inicial e final para a ação usando os controles de escala que usamos anteriormente. Certifique-se de repetir estes passos para o efeito de zoom out.
Definir animações como zoom, adicionando ações de vídeo.
Pro-tip: Ao compartilhar um GIF em sites como Dribbble, tenha em mente que o primeiro frame do seu GIF será mostrado como a miniatura do post, então certifique-se de usar o frame mais interessante visualmente.
Exportar do ScreenFlow
Agora que o nosso clipe esteja polido e aperfeiçoado, é hora de exportar. Screenflow oferece um preset para exportar o clipe diretamente como um GIF, embora sugerimos evitar esta rota porque o seu GIF acabará como um arquivo grande altamente comprimido.
Em vez disso, estaremos exportando um arquivo .mov sem perdas. Navegue até File > Exportar > Preset > Lossless – ProRes com Alpha.
Enabling motion blurguer pode muitas vezes fazer o seu GIF parecer ainda mais suave, especialmente com o efeito de zoom que aplicamos.
Borrão vs. No blur
Optimização com Claquete
Claquete tal como o Screenflow oferece a possibilidade de gravar toda ou qualquer parte da sua área de trabalho e aparar, cortar e exportar essas gravações para formatos GIF ou vídeo. Você pode comprar Claquette na Mac App Store por $9.99
Claquette a maior vantagem do Screenflow é que lhe dá controle granular sobre a qualidade do seu GIF e, portanto, um melhor tamanho de arquivo com compressão surpreendente. Isso permitirá que você crie GIFs de alta qualidade que são um ótimo tamanho de arquivo.
Apenas como fizemos no Screenflow, selecione a tela que você estará gravando e clique em gravar no Claquette. Reproduza o vídeo que acabou de exportar no QuickTime e carregue em CMD + 1 para reproduzir o vídeo no seu tamanho real.
Configuração de gravação de Claquette.
Quando o clip acabar de reproduzir, pare a gravação para começar a cortá-lo e recortá-lo. Mova o controle deslizante à esquerda e à direita do clipe para o início e fim do clipe. Quanto ao tamanho do recorte, use o tamanho que você também escolheu para o seu clipe em Screenflow: 800 x 600. Mova a área de corte para o centro x:0 y:0 e acerte o corte.
Corte e clipes de corte em Claquete.
Encontrar o equilíbrio certo
Existem três qualidades GIF que têm uma grande influência no tamanho do ficheiro:
- Mount of colors
- Amount of motion
- Duration
Na maioria dos casos, Se o seu GIF contém apenas uma destas qualidades, então você pode aumentar a qualidade. Certifique-se de definir a largura e a altura a 100% e faça um laço para sempre. Quando o seu GIF contém muitas cores, eu recomendo fortemente que mantenha as cores em 256 e corte em outros aspectos como FPS ou qualidade de quantização.
Configurações de exportação do GIF.
Não há um verdadeiro Santo Graal para estas configurações, por isso quando partilhamos para Dribbble (máx 8mb) tentamos sempre mandá-las para as configurações mais altas possíveis, depois exportamos e vemos com o que temos de trabalhar. Continue repetindo esse processo de exportação até encontrar um equilíbrio tamanho/qualidade que se ajuste às suas necessidades.
Pro-tip: Mesmo que o Dribbble diga que o limite de tamanho é 8mb, na verdade é 8.3mb. Ao trabalhar com grandes gifs coloridos, você descobrirá rapidamente porque 0.3mb importa.
Agora que você tenha lido o guia, esperamos que ele o ajude a transformar as suas animações Framer nos melhores GIFs possíveis para apresentar o seu trabalho no seu portfólio, Dribbble, e em outros lugares. Mal podemos esperar para ver o que você cria, então não deixe de etiquetar seu post com #MadeWithFramer para ter a chance de aparecer em nossa newsletter semanal. Feliz criação!
Cheque o resultado final no Dribbble