Como compactar . GIFs com maestria

1. O que faz com que um GIF seja ótimo?: Ei, eu sou Jake Bartlett e isso está comprimindo GIFS como um chefe. Nesta aula rápida, vou mostrar minhas três melhores maneiras de comprimir GIFS para compartilhar na internet. Parte um, GIF ou JIF. Vamos tirar isso do caminho. O inventor do GIF diz JIF. A maioria do planeta diz GIF. Eu estou incluído no campo GIF, então é assim que eu vou pronunciá-lo. Parte dois, o que funciona melhor? GIFS definitivamente tem um uso muito específico. Saber quando usar um GIF em um vídeo. Basta lembrar os três S; curto, simples e pequeno. O GIFS precisa ser curto e quanto mais tempo forem, maior será o tamanho do arquivo. O GIFS deve ser simples. Muitos GIFS funcionam como loops. Se você estiver renderizando um monte de gráficos 3D super complicados ou estiver incorporando fotos ou vídeos em seu trabalho, um GIF provavelmente não será sua melhor aposta porque ele vai comprimir suas imagens tanto que seu O trabalho não vai parecer tão bom. Animações simples, com arte vetorial limpa, funcionam muito bem para GIFS. Ter uma paleta de cores menor realmente ajuda a manter o tamanho do arquivo baixo. Isso não quer dizer que você não pode ter um monte de cores e adicionar coisas como texturas e sombreamento, mas quanto mais simples for, melhor seu GIF vai olhar no final. Pequeno, há dois objetivos principais ao comprimir um GIF. Mantendo o tamanho do arquivo pequeno e a qualidade alta. Manter sua resolução de exportação pequena ajudará ambos os objetivos. A maioria dos meus GIFS acabam em drible e drible só aceita duas resoluções, 400 por 300 e 800 por 600, então geralmente não exporto um GIF maior que 800 por 600. Se você quiser compactar especificamente para o Skillshare, a largura de um item de projeto é de 580 pixels. Agora, essas são todas resoluções de exportação. Eu recomendo que você trabalhe em uma resolução mais alta como 1920 por 1080 ou 1440 por 1080 para 4 por 3. Parte três, comprimir como um chefe. 2. Método 1: Gifgun: Existem três métodos que eu recomendo para comprimir GIFs, e cada um tem sua própria vantagem e desvantagem. Método um, GIF Gun. GIF gun é de longe o método mais simples para comprimir GIFs do After Effects. É $30. Mas eu posso garantir que se explorar presentes de efeitos após é algo que você faz regularmente, é o melhor $30 que você pode gastar. Aqui no After Effects eu tenho um monte de meus padrões do meu título gráfico tudo pronto para comprimir. Esta composição é 1920 por 1080 a 24 quadros por segundo. Eu vou subir para a janela e descer para GIF Gun, e você pode ver que é um pequeno painel, apenas dois botões, e eu poderia até encaixar isso em meus painéis aqui, que eu sempre tenha acesso a ele, e os dois são make GIF e configurações. A maneira como ele funciona é que, assim como renderizar um vídeo do After Effects, ele está configurado para renderizar qualquer área de trabalho que esteja definida. Cada uma dessas camadas já está aparada para ser um loop sem costura. Se eu for para o primeiro quadro e definir minha tinta pressionando B no teclado, pressione O para saltar para cima dessa camada e pressione N para definir meu ponto de matriz. Vou pressionar 0 no teclado numérico para renderizar, e você vê que é loop sem costura. Como eu sei que isso está configurado corretamente, eu posso configurar minha exportação. Agora, se eu clicar em fazer GIF agora, ele irá comprimir o GIF na resolução do meu comp, que está cheio dez ADP, e como já discutimos, isso é muito maior do que eu quero que seja. Vou para as minhas configurações e tenho algumas opções. A primeira é escolher para onde eu queria exportar. Eu só mudei para estar na área de trabalho. Então temos a opção de redimensionar a largura e dimensionará proporcionalmente a altura. Não quero que seja 1920 de largura. Vou clicar na marca de seleção redimensionar para largura e 800 pixels é como gostaríamos que exportasse. A próxima opção é escolher o número máximo de cores, e como você pode ver na dica de ferramenta aqui, mais cores significam GIFs maiores e, por maior, significam o tamanho do arquivo. Se eu clicar neste menu suspenso, você verá que temos algumas opções predefinidas. Agora, esta animação em particular tem apenas três cores. Realmente eu posso derrubar este máximo de cores para baixo para oito e provavelmente vai ficar muito bem. Mas geralmente, vou deixar isso em 128 e está tudo bem. Se a qualidade não for alta o suficiente nesse ponto, eu aumentarei até 256, podemos controlar a taxa de quadros. Agora está definido para ser a taxa de quadros de composições, então 24 quadros por segundo, mas eu posso soltar isso para 12 se eu quiser cortar o número de quadros e metade para economizar no tamanho do arquivo. Vou deixar isso por enquanto porque quero que seja a taxa de quadros completa, e finalmente, temos a opção de salvar uma cópia de vídeo. O que eu não preciso fazer, e a última opção é ter certeza de que seu GIF loops. Eu quero minar o loop, eu vou deixar isso marcado e clique em Concluído. Então é tão simples como clicar, fazer GIF. After Effects exporta um vídeo. GIF Gun me dá um pouco de status. Ele me diz que o GIF está compactando e abre automaticamente o arquivo onde você está exportando o GIF na minha área de trabalho, e com certeza, há meu GIF em loop. Agora, se você está olhando para este vídeo em tela cheia, você provavelmente pode dizer que as bordas da minha arte parecem realmente crocantes. Isso é porque eu limitei meu padrão de cores a oito cores. Você pensaria que porque minha arte só tem três cores, oito seria mais do que suficiente. Mas se eu ampliar aqui muito perto nas bordas dessas duas cores, você pode ver que não é apenas este roxo e este vermelho. Há o que é chamado anti-aliasing que está acontecendo entre os dois gráficos para tornar as bordas mais suaves, e a mesma coisa é verdade para o amarelo e o roxo. Se eu diminuir o zoom para caber, eu vou para as minhas configurações, alterar o máximo de cores até 128 apenas para ter certeza de que super suave clique Concluído e, em seguida, fazer GIF novamente, e aqui vamos nós. Temos nosso segundo GIF, pré-visualizar isso. Você pode ver que é muito mais limpo do que isso. Este é o nosso original, que é limitado a oito cores, e esta é a nossa segunda compressão com um 128. Agora, a diferença de tamanho do arquivo é bastante significativa. O primeiro é de apenas 388 kilobytes, e o segundo é um megabyte. Meu objetivo é manter meus GIFs em torno de dois megabytes ou menos, porque o compartilhamento de habilidades limita o upload do tamanho do arquivo a dois megabytes. Agora, se manter meu presente para dois megabytes ou menos é realmente diminuir a qualidade, então eu definitivamente vou aumentar o tamanho do arquivo e, em seguida, apenas lidar com postar o GIF de uma maneira diferente, mas vamos chegar a isso mais tarde. Por enquanto, estou perfeitamente feliz com esse GIF, e essa é de longe a maneira mais simples de exportar um GIF do After Effects. Enquanto estou gravando esta classe, GIF Gun é um plug-in muito novo e eles ainda estão trabalhando no desenvolvimento de mais recursos. Pode ser uma compra ainda mais valiosa no futuro. 3. Método 2: Photoshop: O segundo método para compactar GIFs é usar o Photoshop. Se você tiver efeitos secundários, as chances são que você tem Photoshop para. Como passamos dos efeitos secundários para o Photoshop? Bem, deixe-me saltar para o meu segundo GIF. Eu vou definir a área de trabalho e eu vou exportar isso como um arquivo de vídeo. Vamos subir a composição, Adicionar à fila de renderização e seus módulos de saída provavelmente definidos como sem perdas, e tudo bem. Eu realmente não quero comprimir de efeitos secundários para Photoshop. Então eu vou dizer a ele para ir na minha área de trabalho e clicar em Renderizar. Em seguida, eu vou até o Photoshop, ir para Arquivo, abrir, ir para minha área de trabalho e aqui está meu arquivo QuickTime. Vou clicar duas vezes nele. Photoshop irá processar, ler o formato de vídeo, que pode levar um pouco de tempo dependendo do tamanho do seu arquivo , e lá está. Posso reproduzir isto dentro do Photoshop. Ele pode não reproduzir em tempo real no início, mas pelo menos me permite ver que a animação está funcionando. Agora, se o Photoshop não permitir que você abra o arquivo QuickTime diretamente, você precisará acessar Arquivo, Importar, Quadros de Vídeo para Camadas. Em seguida, selecione o vídeo, deixe o intervalo definido do início ao fim e marque a opção Fazer animação de quadros e clique em OK. Isso vai trazer uma linha do tempo um pouco diferente, mas basicamente funciona da mesma maneira. Vou fechar esta e voltar para aqui. O próximo passo é ir para Arquivo, Exportar, Salvar para Web (Legado). Agora, estou usando o Photoshop CC 2015. Qualquer versão anterior teria uma taxa mais segura listada na Web aqui por Salvar e Salvar como. Vá para Salvar para Web. Isso abre esse diálogo que nos permite comprimir para web. A primeira coisa que vou fazer é vir até a Predefinição, clicar no menu suspenso, e chegar ao GIF 128 Dithered. Agora, isso é apenas uma predefinição e nós temos muitos e muitos controles para como este GIF vai exportar. A primeira coisa que quero fazer é redimensionar a imagem. Ainda está definido para 1920 por 1080. Vou clicar duas vezes na largura e digitar 800, e isso levará um segundo para redimensionar. Agora, estamos recebendo uma prévia ao vivo de como nosso GIF vai parecer uma vez compactado. Aqui no canto inferior esquerdo, você pode ver que ele está nos dizendo que o GIF resultante será de 1,1 megabytes. Isso é perfeitamente aceitável. Uma das coisas legais que o Photoshop permite que você veja é quais cores ele está usando para comprimir seu GIF. Assim como usar arma GIF, eu posso aumentar ou diminuir o número de cores usadas. Se eu baixar isso para 8, você pode ver que nós temos essas bordas crocantes novamente. Se eu realmente digitar 3, já que há apenas três, nós realmente perdemos a cor da tinta. Se eu aumentá-lo para 4, provavelmente traria isso de volta porque uma das cores é realmente transparência. Mas isso é provavelmente muito mais técnico do que você precisa se preocupar. Minha regra de ouro é 128 cores, e se isso não parecer bom o suficiente, bombeie até 256. Isso nem aumentou tanto o tamanho do arquivo, mas 128 está ótimo. Uma vez que é um tamanho de arquivo menor, eu vou ir em frente e deixá-lo lá. Como eu estou feliz com a forma como isso parece, a última coisa que eu preciso fazer é mudar minhas Opções de Looping de Once para Forever. Às vezes, o Photoshop gosta de alterar isso novamente para Once, se você tiver configurado e depois voltar para cima e alterar suas configurações de compactação, não tenho idéia do porquê. Às vezes, simplesmente faz. A última coisa que eu sempre faço antes de apertar Salvar é ter certeza de que meu Looping está definido para Forever. Em seguida, vou clicar em Salvar, colocá-lo na minha área de trabalho, chamá-lo de Photoshop para que possamos mantê-los organizados. Lá nós o temos, ele o exportou. Se eu for para minha área de trabalho, aqui está, Visualização do Photoshop. Temos um GIF em loop. Aqui está o título gráfico para o meu Rock para fora com curso de animação de personagens. Como você pode ver, eu tenho uma vinheta texturizada nos cantos, há sombreamento no texto, e é um pouco mais longo do que os padrões de loop que eu já tive. Agora, essa textura granulada que eu adicionei é uma escolha de design, mas também é algo que ajuda a comprimir GIFs. Se eu fosse abrir este vídeo sem o ruído no fundo, e tentar comprimir isso como um GIF, porque minha paleta de cores é limitada a um 128, temos toda essa faixa feia que acontece por causa da compressão. Sem a compressão, há tantos tons diferentes desta cor laranja que vai ser amarelo. Mas como um GIF é um formato altamente compactado, ele é super perceptível. Agora, eu poderia aumentar as cores para tentar consertar isso. Mas mesmo no máximo de 256, ainda não parece muito bom. Eu poderia tentar aumentar o meu dither todo o caminho e isso suavizá-lo um pouco mais. Mas você ainda pode ver claramente essa faixa. É aí que esta textura granulada vem a calhar. Se eu ligar isso de volta, a faixa desapareceu completamente, mesmo com 128 cores. Esse grão permite que o Photoshop gere esse gradiente de forma a eliminar todas as faixas. Agora, se eu avançar em direção ao texto entrar, você vê que o sombreamento não está aparecendo nisso. Se olharmos para a nossa tabela de cores, há realmente apenas dois tons diferentes de vermelho, e é por isso que perdemos tudo isso. Eu ainda vou aumentar isso para 256 cores, e lá vai você. Agora, o sombreamento aparece de volta porque temos muitos mais tons de vermelho. Agora, o tamanho do nosso arquivo é de 2,7 megabytes, é muito grande para compartilhar habilidades. Mas talvez se eu mudar a largura para 580, isso ajude a comprimir a imagem ainda mais. Perfeito, que caiu para 1,4 megabytes e igualdade parece ótimo. Agora que tudo está pronto, meu Looping está definido para Forever. Posso clicar em Salvar, escolher uma área de trabalho. Vou chamar isso de “Rock Out Title Photoshop”. Posso ir para a minha área de trabalho. Aqui está. Ótima. É assim que você usa o Photoshop para compactar GIFs. 4. Método 3: Giphy.com: O último método é usar um site on-line para converter seu vídeo em um GIF para você. Agora, há muitos sites que você pode fazer isso com. O que vou mostrar chama-se Giphy. Mas neste caso, acho que faria mais sentido se você pronunciasse Giphy. Voltando depois de efeitos, vou exportar isso como um arquivo de vídeo, mas desta vez vou compactar para que meu upload não leve muito tempo. Vou para Composição, Adicionar à Fila de renderização e, em vez de ProRes, vou certificar-me de que meu formato definido como QuickTime, altere minhas opções de formato. Altere o codec de vídeo para H.264. Qualidade definida para 100. Vou limitar a minha taxa de dados a 15.000 kilobits por segundo clique em “Ok”, tudo o resto está definido. Vou clicar em “Ok”. Certifique-se de que isto está a exportar para a minha área de trabalho. Vou nomeá-lo, upload padrão, e depois “Renderizar”. Então eu vou até Giphy dot-com. Logo no topo, vou clicar no botão “Carregar”, clicar em “Procurar”. O upload de padrão é o meu arquivo QuickTime. Vou pré-visualizar, você pode ver que é de qualidade total. Clique em “Abrir”. Se você planeja compartilhar sua animação no Giphy, você tem opções para adicionar tags para torná-la pesquisável. Eu não preciso fazer isso, então eu vou clicar em “Fazer upload de GIFs”, e isso vai levar um minuto para fazer o upload desse arquivo. Uma vez concluído, ele abrirá automaticamente sua animação. Como você pode ver, a qualidade não é tão grande. Infelizmente, não há nenhuma maneira real de controlar a qualidade de seu upload para sites como Giphy ou Imager. Se eu rolar para baixo, ele nos dá código Embed, o que é ótimo. Podemos abrir mais opções e há todos os tipos de configurações de compartilhamento. Mas se eu entrar em avançado, nós temos um link Giphy que irá direto para esta página, ou se você quiser um URL direto para esta animação, é para isso que o link de download GIF serve. Então, se eu copiar isso e colá-lo em uma nova guia, você verá que links diretamente para ele. Isso pode ser perfeitamente aceitável para o que você precisa, mas posso dizer que a qualidade é menor, e parece que até caiu minha taxa de quadros. Agora, como eu disse, fazer upload para um site como Giphy, você não tem controle sobre essas configurações, mas é rápido e hospeda automaticamente sua imagem, então não é uma opção que você deve descartar. 5. Postando um GIF na Skillshare: Então essas são minhas três principais maneiras de comprimir GIFs para a web. Depois de ter seu GIF, você pode criar um projeto de classe e compartilhá-lo na página do projeto de classe. Quando você realmente fizer upload de seu projeto para o Skillshare, certifique-se de não fazer upload dele como sua foto de capa. Isto é apenas para gerar uma miniatura na página do projeto de classe e basicamente ter um cabeçalho para o seu projeto de classe. Agora, Skillshare diz que GIF é um formato aceitável, e é, mas não vai animar. Em vez disso, vá até o seu espaço de trabalho do projeto, clique em carregar foto, escolha seu GIF, desde que ele esteja abaixo de dois megabytes, você pode carregá-lo, e isso fará upload da imagem diretamente no seu espaço de trabalho do projeto. Lá está ele. Agora, eu ainda tenho meu link copiado do meu upload do Jiffy, digamos que o GIF era muito grande para carregar diretamente no Skillshare. Bem, então eu iria clicar no botão Imagem, colar esse URL na fonte e clicar em OK. Isso exibe automaticamente a imagem da URL hospedada no Jiffy. Então é assim que você postar um GIF que é muito grande para estar no Skillshare, e isso é tudo o que há para comprimir GIFS como um chefe. Espero que tenham gostado desta aula rápida. Eu adoraria se você me deixasse uma crítica. Faça algumas animações incríveis, comprima esses GIFs e carregue-os para a página do seu projeto, marque-me na mídia social @jakeinmotion, se você compartilhar algum de seu trabalho. Como sempre, fazer quaisquer perguntas que você tem no me perguntar qualquer coisa discussão na página da Comunidade. Obrigado de novo, e te vejo da próxima vez.