Sumário
GIFs não são apenas para gatos! Na Baremetrics, usamos GIFs para anunciar e explicar novos recursos no Twitter e no Intercom. Acompanhe e vou mostrar a você, do início ao fim, como criá-los para seu próprio produto.
Isso não é novo–outras empresas como Slack e Invision vêm criando GIFs incríveis há um tempo e serviram como inspiração para eu entrar nesse jogo também.
Por que GIFs?
Então, por que usar GIFs para anunciar novos recursos? Simples–eles têm uma baixa barreira de entrada. No Twitter, assistir a um GIF leva apenas um clique ou um toque.
No Intercom, eles são reproduzidos automaticamente, o que é uma ótima maneira de fazer um usuário melhorar sua mensagem no app.
Descobrimos que incluir um GIF nos dá um maior engajamento tanto no Twitter quanto no Intercom, tornando-o uma ótima maneira de chamar atenção para novos recursos e melhor engajar seus usuários. Hurra!
Ok, estou convencido. E agora?!
Para começar, você precisa de três coisas: Screenflow, Photoshop e um recurso novo ou existente para destacar.
Para mostrar seu processo, vou guiá-lo na criação de um GIF de anúncio de recurso de conta! Estamos prestes a lançar um recurso muito solicitado na Baremetrics: Customer Cohorts (que você pode ver em ação em nossa demonstração). Vamos começar e vou mostrar o processo que uso e alguns dos efeitos que empreguei para fazer um GIF super incrível!
Se preparando para fazer seu GIF
Existem duas coisas básicas que você precisa fazer para se preparar para criar um ótimo GIF.
Remova coisas desnecessárias
Use as ferramentas de desenvolvedor do Chrome para remover quaisquer elementos de interface desnecessários para melhor chamar a atenção do espectador para onde precisa estar. É assim que criei o GIF do Seletor de Data onde o Calendário parece flutuar no espaço sem os elementos de interface circundantes.
Capture o vídeo
Próximo passo: capture o vídeo! É para isso que você precisa do Screenflow.
Cuidado com os requisitos do GIF!
Eu sei, eu sei… você quer pular para a parte divertida de edição. Mas antes de fazer isso, você precisa estar atento a várias limitações do formato GIF.
Aprendi muitas das lições da forma difícil, gastando horas editando vídeos incríveis apenas para descobrir que não se veem tão incríveis quando tentei comprimi-los em um arquivo GIF de 5MB. Ah sim, o Twitter tem um limite de 5MB para GIFs. Então esses passos são importantes.
- Use o mínimo de cores possível. Por questões de tamanho de arquivo, seu GIF terá apenas 256 cores para trabalhar. Isolar o elemento de interface que você deseja destacar na etapa anterior é útil aqui, pois você provavelmente limitará o número de cores no GIF.
- Evite transições que alterem as cores. Transições que desvanecem elementos dentro/fora o fazem alterando a cor. Quando você desvanece algo que é "azul", na verdade vai ser um monte de diferentes tons de azul.
- Mantenha abaixo de 10 segundos. Não há uma regra rígida aqui, mas fica difícil ficar abaixo do limite de 5MB do Twitter depois que você excede 10 segundos.
Hora da edição!
Ok! É hora de pegar a gravação de tela bruta e torná-la bonita. Vou mostrar alguns dos meus efeitos favoritos que faço no Screenflow.
Estes são criados usando Ações de Vídeo. Pense como se você fosse um cinematógrafo com uma câmera de vídeo. Você define onde deseja que a câmera comece o movimento e onde deseja que ela esteja quando terminar. Isso permite que você panoramize pela tela ou faça zoom rapidamente em algo em que gostaria de focar a atenção do espectador.
Zoom Zoom Zoom
O pão com manteiga dos screencasts: o zoom. Aumente o zoom para destacar algo em particular e torná-lo mais visível para o usuário. Gosto que meus zooms sejam rápidos e precisos e geralmente os defino para uma duração de 0,3 segundos.
A Revelação
Imagine Vanna White revelando o Wheel of Fortune tabuleiro. Assim: 💁. Essencialmente, é o que você está fazendo aqui. Panoramize o que quer que seja que você está destacando. Sinta-se à vontade para fazer sons de "oooh" e "ahhh" enquanto faz isso.
Perspectiva Distorcida
Use isto com moderação. É uma ferramenta em seu arsenal e notei que as pessoas tendem a exagerar um pouco. Você quer chamar atenção para seu conteúdo, não fazer o espectador sentir que tem a cabeça de lado dentro de uma Casa dos Espelhos.
Texto em Zoom
Agora estamos começando a ficar sofisticados. Esta é uma maneira divertida de adicionar um pouco de floreio visual enquanto ainda não adiciona nenhuma cor adicional (e, portanto, tamanho de arquivo).
Transição de Zoom para Cor
Mais floreio visual divertido!
A grande revelação…
E aqui está o produto final, que faz uso de todos os efeitos que detalharei acima.
Convertendo para GIF
O próximo passo é transformar seu arquivo de vídeo em um GIF. Estou usando o método do Photoshop descrito por Andy Orsow na Invision, que criou um ótimo artigo sobre o assunto, junto com algumas outras dicas para fazer o próprio GIF. Recomendo verificar também.
Importar para Camadas de Vídeo
Vá até o Arquivo Menu e escolha Importar > Quadros de Vídeo para Camadas.
Selecione Do Início ao Fim na área Intervalo para Importar e certifique-se de que "Criar Animação de Quadro" esteja marcado. Clique OK.
Exporte esse bichinho!
O próximo passo é ir até o Arquivo Menu novamente e escolher Exportar > Salvar para Web. Nas versões mais recentes do Photoshop, terá Legado entre parênteses.
Aviso! O Photoshop está prestes a ficar dolorosamente lento. Suponho que seja por isso que esse recurso é considerado "Legado" agora.
Existem algumas configurações com as quais você pode brincar para ajustar o tamanho do arquivo: Tamanho da Imagem e Cores sendo meus principais favoritos.
Para Tamanho da Imagem Twitter redimensiona horizontalmente e corta verticalmente todas as visualizações de imagem para uma resolução de 440×220, portanto não faz sentido fazer seu GIF muito maior do que isso. Neste caso, escolhi uma largura de 500 pixels para que o GIF fosse um pouco maior quando usado fora do Twitter.
Se você cuidou em manter o comprimento do seu clipe bem curto, você deve ser capaz de definir Cor para o máximo de 256. Reduzir para 128 é uma opção se seu GIF for uma opção, mas resultará em um GIF de qualidade muito inferior.
Conforme você faz ajustes às configurações de exportação, você pode ver o tamanho do seu GIF final no canto inferior esquerdo da janela. Apenas 2,2MB? Legal!
Quando estiver pronto, clique no grande botão azul Salvar .
Dicas Adicionais e Recursos
GIFs são uma ferramenta fantástica, mas nem sempre são a melhor escolha. Se você está, digamos, incorporando clipes curtos em seu site ou em uma postagem de blog, sua melhor opção é algo como um vídeo Wistia. Se eu tivesse usado GIFs para este post, teria cerca de 50MB – não é exatamente viável.
Aqui estão alguns outros recursos e inspirações para conferir.
- Documentação e Tutoriais do Screenflow
- 7 Dicas para Projetar GIFs Animados Incríveis
- Tweet do GIF do Seletor de Data
- Tweet do GIF de Divisão de Receita
- Tweet do GIF de Intervalos de Dados
- Tweet do GIF de Planos de Arquivo
- Tweet do GIF de Anotações
