Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. GIF
Design

10 způsobů jak optimalizovat animovaný GIF

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

Czech (Čeština) translation by Karel Krkoska (you can also view the original English article)

GIF je standardní format pro kompresi snímků s velkou plochou pevných barev a ostrých detailů jako v kresbě tužkou, logech a písmech. 8bit snímek by zmizel z webu po představení JPEG a PNG formátu, ale gif je stále oblíbený webový formát, díky podpoře animace. V tomto tutorialu, se blíže podíváme na všechny dostupné možnosti jak konvertovat video do GIF animace a jak optimalizovat  velikost souboru, jdeme na to!

Mimochodem, pokud pracujete s GIFy často, možná byste se měli podívat na automatické řešení: the Gift Export Photoshop akce, k dispozici na Envato Marketu, která vám dovolí vzít několik snímků a automaticky je nahrát do Photoshopu a vyexportovat jako GIF.


1. Trimming Animation

Nejdříve musíte otevřít video soubor ve Photoshopu. Často nepotřebujete celou sekvenci pro GIF animaci, takže ořežete video v Timeline Panelu. Zapněte možnost Loop a najděte dobré místo pro ořezaní vašeho videa.

10 Ways to Optimize a GIF File

2. Snížení velikosti snímku

Můžete buď snížit velikost snímku v Image menu nebo to udělat později v dialogu Save for Web. Já to preferuju udělat na začátku pomocí Image Size dialogu, protože to může ušetřit dost času, když otevíráte dialog Save for web. Vaše vrstva videa bude muset být převedena na Smart Object pokud chcete změnit velikost snímku, ale o to se teď nestarejte, to nijak neovlivní náš postup.

10 Ways to Optimize a GIF File

3. Save for Web

Moje oblíbená část na tomto workflow je to, že na Timeline panelu nemusíme dělat žádnou konverzi, abychom uložili snímek animace, protože dialog Save for Web uděla tuhle práci za nás, jakmile vybere GIF jako výstupní formát. Všimněte si, že možnost animace se objeví v pravém spodním rohu dialogu. Případně se můžete rozhodnout ještě více snížit velikost vašeho snímku.

10 Ways to Optimize a GIF File

4. Snížení množství snímků

Můžete dosáhnout dalšího snížení velikost GIF animace, pokud znovu otevřete exportovaný GIF ve Photoshopu a smažete každý druhý nebo třetí snímek z Timeline Panelu. Potom byste měli vybrat všechny zbývající snímky a zvýšit jejích trvání, abyste kompenzovali ztrátu snímků. Pokud tuto kompenzaci neuděláte, vaše animace bude přehrána rychleji než originál. Jakmile jste připraveni, uložte novou verzi, která by měla být mnohem menší než originál.

10 Ways to Optimize a GIF File

5. Čislo barev

Nejvíc relevantní možnost pro optimalizaci velikosti GIF filu je počet barev použitých v tabulce barev. Maximální možne množství je 256, které je dáno 8bit limitem. Je dobré se držet 64 barev  nebo méňě, záleží na originálním videu, občas budete muset zvýšit počet barev pro lepší výsledek.

10 Ways to Optimize a GIF File

6. Jaky vybrat algoritmus pro redukci barev?

  • Perceptuální: vytvoření vlastní barevné tabulky dáním priority barvám na které má lidské oko vyšší citlivost.
  • Selektivní vytvoření tabulky podobné té perceptuální, ale favorizuje širokou škálu barev a zachovává barvy pro web. Tato tabulka barev obvykle produkuje snímky s větší barevnou integritou. (Selektivní, je výchozí volba)
  • Adaptivní vytvoří vlastní tabulku barev, z barevného spektra které se nejvíce vyskytuje na snímku. Například, snímek pouze s odstíny zelené a modré vyprodukuje tabulku hlavně tvořenou zelenou a modrou. Nejvíce snímků koncentruje barvy v konkretním rozsahu spektra.
  • Restriktivní používá standard, 216 barev, web-safe tabulka barev, vlastní 8-bit (256-barev) panelu Windows a Mac OS. Toto nastavení zaručuje, že žádný prohlížeč nebude váhat s použitými barvami, když je snímek zobrazen pomocí 8-barev. Pokud váš snímek má méně než 216 barev, nepoužívané barvy odeberte z tabulky.
10 Ways to Optimize a GIF File

7. Dithering

Protože GIF soubory obsahují limitované množství barev, měli bychom imitovat chybějící barvy těmi dostupnými. Z "Dither" menu vybere jeden algoritmus pro takovou imitaci. Metoda "Diffusion" nás nechá upravit množství ditherování. Pomocí "Pattern" a "Noise" algoritmu není co upravovat. Čím více snímek ditherujeme, tím větší je soubor. Dithering přidá různě barevné pixely v blízkosti pro simulování barev nebo zjemnění přechodu barev. Některé snímky musí obsahovat dithering aby vypadali dobře, ale nejlepší je použít co nejmenší množství, aby byl soubor co nejmenší.

10 Ways to Optimize a GIF File

8. Web, snap, lossy, průhlednost, prokládání

  • Web Snap je použit aby se zamezilo ditherování v prohlížeči. Je to provedeno připnutím některých barev do Web-safe barev. Čím více Web-safe barev je přitomno v GIFu, tím méně ditherování bude ve výsledku. Hodnota 0% nezmění barvu, zatímco hodnota 100% změní všechny barvy ve snímku na web-safe.
  • Lossy komprese zruší vizuální informace, které mohou redukovat velikost souboru.
  • Pokud sníměk obsahuje průhlednost, vyberte průhlednost pro zachování průhledných pixelů; odeberte průhlednost pro vyplnění plně a částečné průhledných pixelu, matte barvou.
  • Prokládané GIF soubory jsou nahrávány v prohlížeči v pár průchodech (jako progresivní JPEG).


9. Porovnejte originální a optimalizovanou verzi

Jakmile přidáte hodně vlastních změn, můžete zjistit rozdíl velikosti a kvality pomocí 2-Up náhledu.

10 Ways to Optimize a GIF File

10. Náhled, Uložení přednastavení a optimalizace velikosti souboru

Pokud jste spokojeni s nastavením, podívejte se na váš finální GIF pomocí možnosti Preview v prohlížeči a nezapomeňte uložit vaše nastavení do přednastavení. Také můžete specifikovat omezení velikosti souboru z Optmize menu a jakmile je to aplikováno Photoshop se pokusí přizpůsobit velikost s tou nejlepší možnou kvalitou.

10 Ways to Optimize a GIF File
Advertisement
Advertisement
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.