Como fazer um GIF no PhotoShop a partir do vídeo

Se você chegou aqui querendo saber como fazer um GIF com o Photoshop, provavelmente é porque o vídeo que você carregou no seu site estava demorando muito para carregar. Bem, você veio ao lugar certo. Neste guia, mostraremos como fazer um GIF no Photoshop a partir de um vídeo. Ele ficará ótimo em seu site e será muito mais otimizado para velocidade do que um arquivo de vídeo!

Com a ajuda de um GIF, você pode apresentar qualquer tipo de vídeo em um site, em loop. Pode ser um clipe de material promocional, uma gravação de tela para um tutorial ou qualquer coisa que você realmente queira.

Para este tutorial, você precisará de algumas imagens de vídeo e do Adobe Photoshop. Se você não tem uma assinatura do Photoshop, você pode fazer uma avaliação gratuita; conseqüentemente, você pode descobrir que ter o Photoshop é uma grande ajuda para o design da web! Se o seu vídeo for muito longo, convém cortá-lo primeiro em um editor de vídeo como o iMovie ou Adobe Premiere. O Photoshop também tem uma opção de corte durante a importação, mas um editor de vídeo é melhor se a sequência original for extremamente longa.

Vamos começar.

Antevisão do Resultado Final

Este é o resultado final do GIF que criamos para este tutorial, perfeito para uma seção ou fundo de módulo.

Para começar, importe o vídeo para o Photoshop

Para importar o videoclipe para o Photoshop, você precisa primeiro estar dentro do editor do Photoshop. A partir daí, clique em Arquivo> Importar> Quadros de vídeo para camadas. Selecione o vídeo que deseja usar e clique em abrir.

Na caixa de diálogo pop-up, você tem duas opções; 1. Do início ao fim - para usar o vídeo em sua totalidade ou, 2. Somente intervalo selecionado - para usar a opção de recorte e usar apenas uma seção do vídeo.

Abaixo disso, há uma opção para limitar a importação a um determinado número de quadros. Selecione um número pequeno se o vídeo for mais curto e um número maior se o vídeo for mais longo. Isso pode levar algumas tentativas e erros até que você tenha o fluxo correto. Por exemplo, a filmagem com alterações pequenas ou lentas terá muitos quadros que parecem quase exatamente iguais. Por outro lado, se a filmagem for rápida com muitas mudanças visuais, se você tirar muitos quadros, pode parecer saliente.

Para este tutorial, escolhemos 'Do começo ao fim' e 'Limite a cada 3 quadros.' Certifique-se de clicar em 'Criar animação de quadro'.

Faça ajustes nas filmagens

Este é o momento perfeito para fazer qualquer tipo de ajuste que você quiser em seu vídeo, desde o corte de tamanho até o ajuste dos níveis de cor. Por exemplo, pode haver um objeto feio no canto do vídeo ou a altura total do vídeo é muito grande para onde você deseja colocá-lo no design do seu site. Como alternativa, se a gravação de vídeo estiver excessivamente saturada, você pode usar o painel de ajustes para ajustar a saturação em todas as camadas de uma vez.

Para os criativos, fazer ajustes em diferentes camadas criará todos os tipos de efeitos diferentes em seu GIF. O que você não pode fazer é remover fundos ou usar ferramentas que funcionam apenas em uma camada de cada vez.

Dica Profissional: Certifique-se de que qualquer ajuste que você fizer, você selecionou todas as camadas.

Como cortar todas as camadas de uma vez

Selecione todas as camadas clicando na Camada 1 e enquanto pressiona Shift, clique na camada superior. Selecione a ferramenta Rectangular Marquee e selecione a área do vídeo que deseja manter (não o que deseja retirar). Clique em Image> Crop e as áreas fora da seleção desaparecerão. Em nosso vídeo, selecionamos toda a área de vídeo deixando um pouco no topo desmarcado. Queremos tornar o vídeo inteiro menos alto e remover a borda branca do horizonte.

Como ajustar as cores no GIF

Com todas as camadas selecionadas, clique na guia de ajustes no menu Painéis. Você pode usar qualquer uma das ferramentas de ajuste e aplicá-las às camadas em seu GIF. Por exemplo, você pode transformar as cores em preto e branco ou dar um efeito duotônico. Usamos o ajuste de preto e branco com uma tonalidade para tornar a cor do nosso vídeo um pouco mais artística. Isso é perfeito para um fundo que não atrapalhe o resto do conteúdo. Você pode usar qualquer matiz de cor que desejar e ajustar os diferentes níveis de cor da maneira que desejar. Apenas um conselho: se você adicionar ajustes de cores, seu arquivo final será maior do que se não o fizesse.

Este GIF foi baixado em 211 MB sem os filtros de cores e em 312 MB com os ajustes de cores. Se você realmente quiser os ajustes de cor, terá que cortar os quadros para tornar o arquivo final menor. Mais sobre isso na próxima seção.

Use a linha do tempo para editar os quadros

Com a janela da linha do tempo, você pode editar os quadros para diminuir o tamanho final do arquivo GIF. Por exemplo, quadros extras no final do clipe que parecem apenas atrasar ou criar uma seção estática. Quanto mais molduras você tirar, melhor! Mas tome cuidado ao tirar muitos quadros e o efeito final se torna saltitante, reserve um tempo para verificar como fica o loop após excluir alguns quadros.

Para acessar a janela da linha do tempo e ver como o GIF está funcionando em um loop, clique em Janela> Linha do tempo. Um longo painel horizontal será aberto na seção inferior da tela. No canto inferior esquerdo, existem alguns controles. Escolha a opção de loop como 'Forever' e pressione o botão play para ver como o GIF se parece. Em nosso caso, nosso GIF parece muito bom, mas ainda é muito longo. Com mais de 200 quadros e com um ajuste de cor, o arquivo final é de 312 MB. Você pode verificar o tamanho do arquivo final seguindo as etapas na seção 'Salvar como GIF' abaixo. Depois de dar uma olhada, basta pressionar cancelar em vez de salvar. Você também poderá diminuir o tamanho do arquivo com as opções Exportar para a Web.

Como excluir quadros para diminuir o tamanho do arquivo GIF

Para tornar nosso GIF muito menor, retiramos os últimos 200 quadros. O vídeo completo tem uma seção onde a câmera do drone gira e faz uma panorâmica à esquerda em direção ao parque atrás da praia. Nós não precisamos disso. Agora, nosso GIF pesa 160 MB. Ainda bem grande. Não retiramos mais nenhum quadro porque ficará saliente, então deixamos como está para otimizar mais tarde com as opções 'Salvar para a Web'.

Para excluir quadros, você pode selecionar um e pressionar o ícone da lixeira que está sob as funções de reprodução da janela do cronograma. Da mesma forma, você pode selecionar um grupo consecutivo de quadros clicando em um e, em seguida, nos quadros anteriores ou posteriores, pressionando shift + clique. Se você não quiser cortar a sequência do início ou do final do GIF, mas quiser torná-lo mais curto, exclua os quadros alternativos pressionando um deles e, a seguir, clique com o botão direito em todos os outros quadros.

Adoramos como, quando você faz um GIF no Photoshop com vídeo, você pode cortar seções da filmagem na importação e depois disso! Tão prático.

Como alterar a velocidade do GIF

A janela da linha do tempo também oferece a opção de desacelerar ou acelerar o GIF. Cada quadro na linha do tempo possui um controle de velocidade abaixo dele. A medição padrão é 'sem atraso' ou '0', mas pode acontecer que o vídeo que você usou já tenha um ajuste de velocidade. Este é o caso do nosso vídeo. Se você olhar a captura de tela acima, onde excluímos os quadros, você pode ver que nossos quadros têm um atraso de 0,04 segundos. Quando visualizamos o GIF, parece que ele está acelerado. Nós não queremos isso.

Selecionamos todos os frames na linha do tempo clicando nas três linhas no canto superior esquerdo da janela da linha do tempo e clicando em 'Selecionar todos os frames'. Em qualquer um dos frames, clicamos na pequena seta para baixo e escolhemos 'sem atraso'. Isso fará com que nosso GIF flua naturalmente. Para criar um GIF que parece estar em câmera lenta, escolha qualquer valor acima de 1 segundo.

Salvar como GIF e otimizar

Quando tudo estiver concluído, é hora de salvar o projeto como um GIF. Clique em Arquivo> Exportar> Salvar para a Web (herdado) e escolha a opção GIF na caixa de diálogo pop-up. Verifique o tamanho do arquivo e considere sua saída. Existem algumas coisas que você pode fazer para reduzir o tamanho do arquivo.

• Reduza a contagem de cores.
• Reduza ou remova o pontilhamento.
• Reduza a altura e a largura.

Para verificar como os ajustes estão mudando seu GIF, clique no botão Visualizar. Use as guias 2 e 4 para ver as diferentes opções. Você pode ter que voltar e remover mais quadros se ainda for muito grande. Tenha como objetivo um tamanho de arquivo inferior a 20 MB. Se você estiver criando um GIF para uma seção de largura total, precisará realmente cortar os frames para poder obtê-lo em um bom tamanho para a web.

Uma boa regra é manter seus arquivos GIF com no máximo 20 MB. Mais do que isso é muito grande. Se você conseguir reduzi-lo para menos de 10 MB sem perder muita qualidade, você tem um vencedor.

Acabamos excluindo mais frames do nosso GIF para reduzi-lo a 18 MB. Então colocamos no GIFCompressor e reduzimos em 55%. GIFCompressor é uma ferramenta online gratuita que reduz o tamanho do GIF sem perder qualidade. Você pode fazer upload de um GIF de até 50 MB.

Conclusão

Como você pode ver, é muito fácil fazer um GIF no Photoshop a partir de um vídeo. A única ressalva é a duração do vídeo com o qual você começa e quantos quadros você remove. Se você não remover o suficiente, o arquivo final será realmente enorme e isso não ajudará em nada. Pode levar alguns testes para finalmente obter um GIF exatamente como você deseja. Se você estiver criando GIFs de capturas de tela para tutoriais, como neste guia, você pegará o jeito e ficará cada vez mais simples.

Imagem em destaque via emojoez / shutterstock.com