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

10 spôsobov, ako optimalizovať animovaný súbor 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

Slovak (Slovenčina) translation by Zoli Rosa (you can also view the original English article)

GIF je štandardný formát pre kompresiu obrázkov s veľkými plochami plných farieb a ostrých detailov, ako sú tie v umení, logách alebo písme. Vzhľadom k formátu s 8 bitovou hĺbkou by sa po zavedení formátov JPEG a PNG zmizol z webu, ale funkcia GIF je stále obľúbeným formátom webových súborov vďaka funkcii animácie framov. V tomto kurze budeme pozorne sledovať všetky dostupné možnosti na konverziu videa na animáciu GIF a ako optimalizovať veľkosť súboru. Poďme nato!

Mimochodom, ak často pracujete s animovanými GIF, možno budete chcieť zistiť automatické riešenie: akciu Gift Export Photoshop dostupnú na Envato Market, ktorá vám umožní urobiť viac obrázkov, automaticky ich nahrať vo Photoshope a exportovať ich ako GIF.


1. Orezanie animácie

Najprv budete musieť otvoriť video súbor vo Photoshope. Väčšinu času nebudete potrebovať celú sekvenciu animácie GIF, aby ste mohli video orezať na paneli Timeline. Zapnite možnosť Smyčka (Loop) a pokúste sa nájsť vhodné miesto na orezanie videa.

10 Ways to Optimize a GIF File

2. Zmenšenie veľkosti obrázka

Veľkosť obrázka môžete znížiť buď z ponuky Obrázok, alebo ju môžete vykonať neskôr v dialógovom okne Uložiť pre web. Radšej to urobte na začiatku dialógového okna veľkosť obrazu, pretože môže ušetriť značné množstvo načítacej doby, keď otvoríte uložiť pre Web dialógové okno. Ak zmeníte veľkosť obrázka, vaša vrstva videa sa musí zmeniť na inteligentný objekt, ale nemusíte sa o to obávať, nebude to mať vplyv na náš pracovný postup.

10 Ways to Optimize a GIF File

3. Uložte pre web

Mojou najobľúbenejšou vecou v tomto pracovnom postupe je, že na paneli Časová os nie je potrebné vykonať žiadnu konverziu, aby sme mohli uložiť animáciu rámcov, pretože dialógové okno Uložiť pre web urobí prácu za nás, keď vyberiete formát súboru GIF ako váš výstup. Všimnite si, že možnosti animácie sa zobrazia v pravom dolnom rohu dialógového okna. V prípade, že sa rozhodnete pre ďalšie zníženie veľkosti vášho obrázka, môžete to urobiť tu.

10 Ways to Optimize a GIF File

4. Znížte množstvo rámcov

Môžete ďalej zmenšiť veľkosť animácie GIF, ak znovu otvoríte exportovaný GIF do Photoshopu a odstráňte každý druhý alebo tretí rámik z panelu Časová os. Potom by ste mali vybrať všetky zvyšné snímky a zvýšiť ich trvanie, aby ste kompenzovali stratu rámcov. Ak takúto kompenzáciu neurobíte, vaša animácia sa bude prehrávať rýchlejšie ako originál. Akonáhle ste pripravení, môžete uložiť novú verziu, ktorá by mala byť oveľa menšia ako pôvodná verzia.

10 Ways to Optimize a GIF File

5. Počet farieb

Najrelevantnejšou možnosťou na optimalizáciu veľkosti súboru GIF je počet farieb použitých v tabuľke farieb. Maximálne množstvo farieb je 256, čo pochádza z obmedzenia 8 bitovej hĺbky. Vo všeobecnosti je dobré držať sa 64 farieb alebo menej, ale v závislosti od pôvodného videa budete možno musieť zvýšiť počet farieb, aby ste dosiahli lepší výsledok.

10 Ways to Optimize a GIF File

6. Ktorý algoritmus znižovania farieb si vyberiete?

  • Intuitívne (Perceptual) vytvorenie vlastnej tabuľky farieb tým, že uprednostníte farby, pre ktoré ľudské oko má väčšiu citlivosť.
  • Selektívne (Selective) vytvoriť farebnú tabuľku podobnú tabuľke intuitívnych farieb, ale uprednostňujúce široké oblasti farieb a zachovanie farieb pre web. Táto tabuľka farieb zvyčajne vytvára obrázky s najväčšou celistvosťou farieb. (Selective je predvolená voľba.)
  • Adaptívne (Adaptive) na vytvorenie vlastnej tabuľky farieb odberom farieb zo spektra, ktoré sa najčastejšie objavuje na obrázku. Napríklad obraz s odtieňmi zelenej a modrej vytvorí tabuľku farieb najmä zo zelených a modrých. Väčšina obrázkov sústreďuje farby v určitých oblastiach spektra.
  • Reštriktívna (Restrictive) používa štandardnú, 216 farebnú, bezpečnú webovú tabuľku farieb bežné pre 8-bit (256 farieb) panely Windows a Mac OS. Táto voľba zaisťuje, že pri zobrazení farieb na 8 bitových farbách sa nepoužíva žiadna farba farieb. Ak má obrázok menej než 216 farieb, nevyužité farby sa odstránia z tabuľky
10 Ways to Optimize a GIF File

7. Dithering

Vzhľadom k tomu, že súbory GIF obsahujú obmedzený počet farieb, možno by sme mohli pomocou chýbajúcich farieb napodobniť chýbajúce farby s dostupnými farbami. Z ponuky "Dither" zvolíme jeden z algoritmov pre takúto imitáciu. Metóda "difúzie" umožňuje nastaviť množstvo rozptýlenia. S algoritmami "Pattern" a "Noise" nie je potrebné nič upravovať. Čím väčšie rozmazanie obrazu, tým väčšia je veľkosť súboru. Dithering pridáva rôzne farebné pixely v tesnej blízkosti k sebe, aby simulovali sekundárne farby alebo hladké odstupňovanie farieb. Niektoré obrázky musia obsahovať dithering, aby vyzerali dobre, ale je najlepšie použiť minimálne množstvo rozptýlenia, aby sa zachovala najmenšia veľkosť súboru.

10 Ways to Optimize a GIF File

8. Web Snap, Lossy, Transparency and Interlaced

  • Funkcia Web Snap sa používa na zabránenie roztriešteniu v prehliadači. Robí sa to tak, že niektoré farby sa prepnú na bezpečné webové farby. Čím sú v GIF viac farieb bezpečných pre web, tým dôjde k menšiemu rozptýleniu prehliadača. Hodnota 0% nezmení žiadne farby, zatiaľ čo hodnota 100% zmení všetky farby v obraze na web-safe.
  • Strata Lossy kompresie vyradí vizuálne informácie, ktoré môžu znížiť veľkosť súboru.
  • Ak obrázok obsahuje priehľadnosť Transparency, vyberte možnosť Priehľadnosť, aby ste uchovali priehľadné pixely. zrušte začiarknutie priečinka Priehľadnosť tak, aby vyplnili úplne a čiastočne priehľadné obrazové body s matnou farbou.
  • Preložené Interlaced súbory GIF sú načítané v prehliadači v niekoľkých priechodoch (ako sú progresívne JPEG).


9. Porovnaj pôvodné a optimalizované verzie

Po pridaní mnohých vlastných zmien môžete skontrolovať rozdiel vo veľkosti a kvalite súborov pomocou zobrazenia 2-Up.

10 Ways to Optimize a GIF File

10. Ukážka, Uložiť predvoľbu a Optimalizovať na veľkosť súboru

Ak ste s vašimi nastaveniami spokojný, pozrite sa na záverečnú verziu GIF s možnosťou Ukážka v prehliadači a nezabudnite uložiť nastavenia ako prednastavené. Môžete tiež určiť obmedzenie veľkosti súboru s touto dodatočnou možnosťou z ponuky Optimalizácia a akonáhle to bude aplikované, Photoshop sa pokúsi prispôsobiť veľkosť s najvyššou možnou kvalitou obrazu.

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.