Advertisement
  1. Design & Illustration
  2. Tools & Tips
Design

10 Maneiras de Otimizar um Arquivo de GIF Animado

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Portuguese (Português) translation by Ingrid Fornazari (you can also view the original English article)

GIF é o formato padrão para se comprimir imagens com áreas largas de cores sólidas e vivas em detalhes como essas artes lineares, logos ou tipos. Começando com um formato de imagem de 8 bits de profundidade, ele teria desaparecido da web após a introdução dos arquivos JPEG e PNG, mas o GIF ainda é um formato de arquivo favorecido pela web graças a sua característica de animação de quadro. Nesse tutorial, nós daremos uma olhada de perto em todas as opções disponíveis par converter um video em uma animação GIF, e como otimizar seu tamanho de arquivo. Vamos começar!

A propósito, se você trabalha com GIFs animados frequentemente, você pode querer conferir essa solução automatizada: o GIF Export ação Photoshop disponível no Envato Market, que permite que você pegue múltiplas imagens, carregue-as automaticamente no Photoshop, e exporte elas como GIF.


1. Aparando a Animação

Primeiro de tudo você precisa abrir o video no Photoshop. A maioria das vezes você não precisa de toda a sequência para uma animação GIF, então você pode aparar o video no Painel Linha do Tempo. Ligue o a opção Loop e tente encontrar um bom lugar para cortar seu video.

10 Ways to Optimize a GIF File

2. Reduzindo o Tamanho da Imagem

Você pode tanto reduzir o tamanho da imagem a partir do menu Imagem ou mais tarde na caixa de diálogo do Salvar para Web. Eu prefiro fazer isso no começo com a Caixa de Diálogo Tamanho da Imagem, porquê isso salva uma considerável quantia de tempo de carregamento quando você abre a caixa de diálogo Salvar para Web. Sua camada de video vai ter que ser transformada em um Objeto Inteligente se você redimensionar a imagem, mas não precisa se preocupar com isso, não vai afetar seu fluxo de trabalho de modo algum.

10 Ways to Optimize a GIF File

3. Salvar para Web

A minha coisa favorita sobre esse fluxo de trabalho e que nós não precisamos fazer nenhuma conversão no painel Linha do Tempo para poder salvar um quadro de animação, já que a caixa de diálogo do Salvar para Web fará todo o trabalho por nós assim que você selecionar o formato de arquivo GIF como saída. Observe que as opções de Animação vão aparecer no canto inferior direito da caixa de diálogo. Caso você decida reduzir depois o tamanho da sua imagem você ainda pode fazer isso aqui.

10 Ways to Optimize a GIF File

4. Reduzir a Quantidade de Quadros

Você pode reduzir posteriormente o tamanho da animação GIF se você reabrir o GIF exportado de volta no Photoshop e apagar cada segundo ou terceiro quadro a partir do Painel Linha do Tempo. Então você deve selecionar todos os quadros remanescentes e aumentar a duração deles para compensar a falta dos quadros. Se você não compensar sua animação ela será reproduzida mais rápido que a original. Uma vez que você estiver pronto salve a nova versão, que deverá ser bem menor que a original.

10 Ways to Optimize a GIF File

5. Número de Cores

A opção mais relevante para otimizar um arquivo GIF é o número de cores usados na Tabela de Cores. A quantidade máxima de cores é 256, que vem da limitação 8 bit de profundidade. Falando de maneira geral é bom se ater a 64 cores ou menos, mas dependendo do video original você pode precisar aumentar o número de cores para conseguir melhor resultado.

10 Ways to Optimize a GIF File

6. Qual Algoritmo de Redução de Core Escolher?

  • Perceptual para criar uma tabela de cores personalizada dando prioridade as cores pelas quais o olho humano tem maior sensibilidade.
  • Seletiva para criar uma tabela de cores semelhante a tabela de cor Perceptual, mas favorecendo áreas de cor e preservação de cores para Web. Essa tabela de cor normalmente produz imagens com a melhor integridade de cor (Seletiva é a opção padrão).
  • Adaptativa para criar uma tabela de cor personalizada por amostragem de cores do espectro que aparece mais comumente na imagem. Por exemplo, em uma imagem com apenas tons de verde e azul produz uma tabela de cor feita primariamente de verdes e azuis. Muitas imagens concentram cores de áreas em particular do espectro.
  • Restritiva usas o padrão, tabela de cores segura para web de 216 cores, comum aos painéis 8-bit (256) do Windows e Mac Os. Essa opção assegura que nenhum dither do navegador será aplicado às cores quando a imagem for mostrada usando cor de 8-bit. Se sua imagem tem menos de 216 cores, as cores não usadas são removidas da tabela.
10 Ways to Optimize a GIF File

7. Dithering

Uma vez que os arquivos GIF tem um número limitado de cores, nós podemos querer imitar as cores que faltam com aquelas disponíveis usando o dithering. A partir do Menu "Dither", nós escolhemos um dos algoritmos para tais imitações. O método "Difusão" (Difusion) nos permite ajustar a quantidade de dither. Com os algoritmos "Padrão" e "Ruído" não há nada para ajustar. Quanto mais dithering em uma imagem, maior o tamanho do arquivo. O Dithering adiciona pixels de coloração diferente próximos uns aos outros para simular cores secundárias ou gradações suaves da cor. Algumas imagens devem conter dithering para ficarem boas, mas o melhor é usar a menor quantidade de dithering possível para manter o menor tamanho de arquivo.

10 Ways to Optimize a GIF File

8. Web Snap, Lossy, Transparência e Entrelaçado

  • Web Snap é usado para prevenir dithering em um navegador. É feito através do encaixe de algumas cores para cores seguras para Web. Quanto mais cores seguras para Web estiverem presentes num GIF, resultará em menos dithering do navegador. Um valor de 0% não mudará nenhuma cor, enquanto um valor de 100% mudará todas as cores da imagem para seguras para Web.
  • Lossy compressão descarte informação visual o que pode reduzir o tamanho do arquivo.
  • A imagem contém Transparência, selecione Transparência para preservar os pixels transparentes; desmarque Transparência para preencher total ou parcialmente os pixels transparentes com a cor mate.
  • Entrelaçado arquivos GIF são carregados no navegador em poucas passagem (como nos JPEG progressivos).


9. Compare as Versões Original e Otimizada

Uma  vez que você adicionou várias mudanças personalizadas você pode conferir a diferença no tamanho do arquivo e qualidade usando o visualizador 2-Up.

10 Ways to Optimize a GIF File

10. Visualização, Salvar Predefinições e Otimizar o Tamanho do Arquivo

Se você está contente com suas configurações dê uma olhada no seu GIF final com a opção Visualizaçã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 essa opção adicional do Menu Otimização, e  uma vez aplicada, o Photoshop vai tentar encaixar no tamanho com a melhor qualidade de imagem possível.

10 Ways to Optimize a GIF File
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.