Neste tutorial, veremos de perto todas as opções disponíveis para converter um vídeo em uma animação GIF e otimizar o tamanho do arquivo.
O que é um arquivo GIF?
Antes de começarmos, vamos examinar mais de perto a questão: “O que é um arquivo GIF?” GIF é o formato padrão para compactar imagens com grandes áreas de cores sólidas e detalhes nítidos, como aqueles em arte de linha, logotipos ou tipografia.
Por ser um formato de imagem com profundidade de 8 bits, teria desaparecido da web após a introdução dos formatos de arquivo JPEG e PNG. Mas o GIF ainda é um formato de arquivo da web preferido graças ao seu recurso de animação de quadros.
Há muitas maneiras de reduzir o tamanho de um GIF, desde otimizar arquivos GIF usando ferramentas online até aprender como compactar GIFs no Photoshop. Este guia rápido fará de você um especialista em otimização de GIFs.
Como otimizar um GIF animado: 10 maneiras
Se você quiser aprender essas técnicas por vídeo, confira nossa aula no canal Envato Tuts+ no YouTube:
1. Como cortar a animação
Primeiro de tudo, você precisará abrir o arquivo de vídeo com o Photoshop. Na maioria das vezes, você não precisará de toda a sequência para a animação GIF, então você pode cortar o vídeo acessando Janela > Linha do tempo. Ligar o Laço opção e tente encontrar um bom lugar para cortar seu vídeo.
2. Como reduzir o tamanho do arquivo de imagem GIF
Aprender como diminuir um GIF é muito fácil. Você pode reduzir o tamanho do GIF acessando Imagem > Tamanho da imagem ou batendo Alt-Control-I. Sua camada de vídeo terá que ser transformada em um Objeto Inteligente se você reduzir o tamanho do GIF, mas não precisar se preocupar com isso, isso não afetará em nada nosso fluxo de trabalho.
3. Como salvar o arquivo GIF para a web
Outra opção para reduzir o tamanho do GIF no Photoshop é a função “Salvar para Web”. Você pode encontrá-lo acessando Arquivo > Exportar > Salvar para Web ou pressionando Alt-Shift-Control-S.
O que mais gosto nesse fluxo de trabalho é que não precisamos fazer nenhuma conversão no painel Linha do tempo para poder salvar uma animação de quadro, pois a caixa de diálogo Salvar para a Web fará o trabalho para nós assim que você selecionar o formato de arquivo GIF como sua saída.
Observe que as opções de animação aparecerão no canto inferior direito da caixa de diálogo. Se você decidir reduzir ainda mais o tamanho do GIF no Photoshop, ainda poderá fazê-lo aqui.
4. Como reduzir o número de quadros
Se você está se perguntando como diminuir o tamanho de um GIF, também pode reduzir o tamanho do GIF reabrindo o GIF exportado de volta ao Photoshop e reduzindo os quadros do GIF. Exclua cada segundo ou terceiro quadro do Linha do tempo painel. Então você deve selecionar todos os frames restantes e aumentar sua duração para compensar a perda de frames. Se você não fizer essa compensação, sua animação será reproduzida mais rápido que a original. Quando estiver pronto, você pode salvar o novo GIF otimizado, que deve ser bem menor que o original.
5. Como alterar o número de cores animadas
A opção mais relevante para otimizar GIFs é a quantidade de cores utilizadas na Tabela de Cores. A quantidade máxima de cores é 256, proveniente da limitação de profundidade de 8 bits. De modo geral, é bom usar 64 cores ou menos para compactar o arquivo GIF no Photoshop. Mas dependendo do vídeo original, pode ser necessário aumentar o número de cores para obter um resultado melhor.
6. Como escolher o algoritmo de redução de cores
Aqui estão as opções para escolher a redução de cor:
- Perceptivo criar uma tabela de cores personalizada dando prioridade às cores para as quais o olho humano tem maior sensibilidade.
- Seletivo criar uma tabela de cores semelhante à tabela de cores Perceptual, mas favorecendo amplas áreas de cores e a preservação das cores da web. Essa tabela de cores geralmente produz imagens com maior integridade de cores. (Seletivo é a escolha padrão.)
- Adaptativo para criar uma tabela de cores personalizada amostrando cores do espectro que aparece com mais frequência na imagem. Por exemplo, uma imagem apenas com tons de verde e azul produz uma tabela de cores composta principalmente de verdes e azuis. A maioria das imagens concentra cores em áreas específicas do espectro.
- Restritivo usa a tabela de cores padrão segura para a Web, de 216 cores, comum aos painéis de 8 bits (256 cores) dos sistemas operacionais Windows e Mac. Esta opção garante que nenhum pontilhamento do navegador seja aplicado às cores quando a imagem for exibida usando cores de 8 bits. Se a sua imagem tiver menos de 216 cores, as cores não utilizadas serão removidas da tabela.
7. Como usar o pontilhamento para reduzir o tamanho do arquivo GIF no Photoshop
Como os arquivos GIF contêm um número limitado de cores, podemos querer imitar as cores ausentes com as disponíveis usando pontilhamento. De Pontilhar menu, escolhemos um dos algoritmos para tal imitação. O Difusão método nos permite ajustar a quantidade de pontilhamento. Com o Padrão e Barulho algoritmos, não há nada para ajustar.
Quanto mais pontilhamento em uma imagem, maior será o tamanho do arquivo. O pontilhamento adiciona pixels de cores diferentes próximos uns dos outros para simular cores secundárias ou gradações suaves de cores. Algumas imagens devem conter pontilhamento para terem uma boa aparência, mas é melhor usar a menor quantidade possível de pontilhamento para manter o menor tamanho de arquivo.
8. Como usar as funções Web Snap, Lossy, Transparency e Entrelaced
- Snap da Web é usado para ajudar a evitar pontilhamento em um navegador. Isso é feito ajustando algumas das cores para cores seguras para a web. Quanto mais cores seguras para a web estiverem presentes em um GIF, menor será o resultado do pontilhamento do navegador. Um valor de 0% não alterará nenhuma cor, enquanto um valor de 100% alterará todas as cores da imagem para seguras para a Web.
- Com perdas a compactação descarta informações visuais, que podem compactar arquivos GIF.
- Se a imagem contiver Transparênciaselecione Transparência para preservar pixels transparentes; desmarcar Transparência para preencher pixels total e parcialmente transparentes com a cor fosca.
- Entrelaçado Os arquivos GIF são carregados em um navegador em poucas passagens (como JPEGs progressivos).
9. Como comparar a versão original e otimizada do arquivo GIF
Depois de fazer muitas alterações personalizadas, você pode verificar a diferença no tamanho e na qualidade do arquivo usando o botão 2 para cima visualizar.
10. Como usar a visualização, salvar predefinições e otimizar o tamanho do arquivo
Se você estiver satisfeito com as configurações do GIF, dê uma olhada no seu GIF otimizado final com o Visualização opção em um navegador e não se esqueça de salvar suas configurações como predefinições. Você também pode especificar um limite de tamanho de arquivo com esta opção adicional na página Otimizar menu e, uma vez aplicado, o Photoshop tentará ajustar o tamanho com a melhor qualidade de imagem possível.
5 complementos GIF incríveis da Envato Elements
Agora você conhece dez maneiras simples de otimizar GIFs. Se você está procurando produtos Photoshop relacionados a GIF, confira estas ações e modelos incríveis:
1. ga-analytics#sendElementsClickEvent”>Speedway GIF Animado Photoshop Action (ATN, ASL)
A ação Speedway permite criar o efeito de que o objeto na frente da imagem está se movendo em um ritmo muito rápido. Todos os efeitos são em camadas e podem ser facilmente editados.
2. ga-analytics#sendElementsClickEvent”>Ação estereoscópica de fotografia 3D animada (PSD)
Se você deseja criar arquivos GIF com aparência retrô a partir de suas imagens estáticas, confira este modelo do Photoshop. É muito fácil de usar! Ele vem com três predefinições de cores vintage e um arquivo de ajuda.
3. ga-analytics#sendElementsClickEvent”>Ação de Photoshop de arte animada de zumbi Grime (ATN, PAT, PDF)
Esta incrível ação do Photoshop irá ajudá-lo a adicionar o moderno efeito animado de zumbi / sujeira às suas fotos. No arquivo principal, você encontrará um arquivo de ação, um arquivo de padrão e um link para um tutorial em vídeo.
4. ga-analytics#sendElementsClickEvent”>GIF Animated Sparkles Photoshop Action (ATN, ABR, PAT, PNG, PSD)
Se você está procurando algo mais brilhante e mágico, GIF Animated Sparkles Photoshop Action é a melhor escolha para você. Dá às suas fotos aquela aparência fabulosa e brilhante com apenas alguns cliques.
5. ga-analytics#sendElementsClickEvent”>Pôster Synthwave animado dos anos 80: Photoshop Action (ATN, ABR, PAT)
Esta ação também é uma das minhas favoritas. Dá a você a possibilidade de criar pôsteres animados incríveis no Adobe Photoshop, nos estilos synthwave/retrowave. É uma ferramenta útil para recriar a atmosfera dos anos 80.
Mais tutoriais do Envato Tuts+
Espero que este artigo tenha sido útil para você. Quer saber mais sobre como criar e editar GIFs no Photoshop? Leia estes tutoriais incríveis:
