Como otimizar um GIF animado: 10 maneiras

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.

Tutorial de redução do tamanho do GIF no Photoshop Cortando o vídeo no Adobe PhotoshopTutorial de redução do tamanho do GIF no Photoshop Cortando o vídeo no Adobe PhotoshopTutorial de redução do tamanho do GIF no Photoshop Cortando o vídeo no Adobe Photoshop

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.

Tutorial Como reduzir o tamanho do GIF Redimensionando o tamanho da imagemTutorial Como reduzir o tamanho do GIF Redimensionando o tamanho da imagemTutorial Como reduzir o tamanho do GIF Redimensionando o tamanho da imagem

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.

Como reduzir o tamanho do GIF Tutorial salvando o arquivo gif para a WebComo reduzir o tamanho do GIF Tutorial salvando o arquivo gif para a WebComo reduzir o tamanho do GIF Tutorial salvando o arquivo gif para a Web

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.

Tutorial Como compactar GIF Reduzindo o número de quadros no GIFTutorial Como compactar GIF Reduzindo o número de quadros no GIFTutorial Como compactar GIF Reduzindo o número de quadros no GIF

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.

Tutorial Como compactar GIF alterar o número de cores do GIFTutorial Como compactar GIF alterar o número de cores do GIFTutorial Como compactar GIF alterar o número de cores do GIF

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.
Tutorial Como compactar GIF escolhendo o algoritmo de redução de corTutorial Como compactar GIF escolhendo o algoritmo de redução de corTutorial Como compactar GIF escolhendo o algoritmo de redução de cor

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.

Comprimir GIF Tutorial do Photoshop escolhendo a função de pontilhamentoComprimir GIF Tutorial do Photoshop escolhendo a função de pontilhamentoComprimir GIF Tutorial do Photoshop escolhendo a função de pontilhamento

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).
Tutorial de compactação de GIF do Photoshop usando transparência com perdas de snap na web e funções entrelaçadas Tutorial de compactação de GIF do Photoshop usando transparência com perdas de snap na web e funções entrelaçadas Tutorial de compactação de GIF do Photoshop usando transparência com perdas de snap na web e funções entrelaçadas

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.

Tutorial de otimização de GIF do Photoshop comparando os gifs originais e otimizadosTutorial de otimização de GIF do Photoshop comparando os gifs originais e otimizadosTutorial de otimização de GIF do Photoshop comparando os gifs originais e otimizados

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.

Tutorial de redução do tamanho do arquivo GIF salvando a predefinição usando a visualização e otimizando o tamanho do arquivoTutorial de redução do tamanho do arquivo GIF salvando a predefinição usando a visualização e otimizando o tamanho do arquivoTutorial de redução do tamanho do arquivo GIF salvando a predefinição usando a visualização e otimizando o tamanho do arquivo

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.

ga-analytics#sendElementsClickEvent”>Ação animada do Photoshop Gif do SpeedwayAção animada do Photoshop Gif do SpeedwayAção animada do Photoshop Gif do Speedway

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.

ga-analytics#sendElementsClickEvent”>Ação estereoscópica de fotografia animada em 3DAção estereoscópica de fotografia animada em 3DAção estereoscópica de fotografia animada em 3D

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.

ga-analytics#sendElementsClickEvent”>Ação animada do Photoshop Zombie Grime ArtAção animada do Photoshop Zombie Grime ArtAção animada do Photoshop Zombie Grime Art

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.

ga-analytics#sendElementsClickEvent”>Gif animado brilhos ação do PhotoshopGif animado brilhos ação do PhotoshopGif animado brilhos ação do Photoshop

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.

ga-analytics#sendElementsClickEvent”>Pôster Synthwave animado dos anos 80 - Photoshop ActionPôster Synthwave animado dos anos 80 - Photoshop ActionPôster Synthwave animado dos anos 80 - Photoshop Action

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:

[ad_2]

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *