1. Design & Illustration
  2. GIF

10 Načina za Optimizaciju Animirane GIF Datoteke

by
Read Time:8 minsLanguages:
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

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

GIF je standardni format za komprimiranje slika s velikim površinama čvrste boje i oštrih detalja poput onih u linijskim crtežima, logotipima ili tekstu. Budući da je format slike od 8 bitova, nestao bi s weba nakon uvođenja JPEG i PNG formata datoteka, ali GIF je još uvijek favorizirani format web-datoteke zahvaljujući svojoj značajci okvirne animacije. U ovom vodiču pregledat ćemo sve dostupne opcije za pretvaranje videozapisa u GIF animaciju i kako optimizirati njegovu veličinu. Započnimo!

Usput, ako često radite s animiranim GIF-om, možda biste željeli pogledati automatizirano rješenje: Gift Export  Photoshop akciju dostupnu na Envato Market tržištu, koja vam omogućuje snimanje više slika, automatski ih prenosi u Photoshop i izvozi kao GIF.


1. Trimanje Animacije

Prije svega trebati ćete otvoriti video datoteku pomoću programa Photoshop. Većinu vremena nećete trebati cijeli niz za GIF animaciju, tako da možete smanjiti videozapis na ploči Timeline. Uključite opciju Loop i pokušajte pronaći dobro mjesto za rezanje videozapisa.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

2. Smanjenje veličine slike

Možete smanjiti veličinu slike iz Image izbornika ili kasnije to učiniti u dijaloškom okviru Save for web. Ja to radije činim na početku s Image Size dijaloškim okvirom jer tako mogu uštedjeti znatnu količinu vremena učitavanja kada otvorite dijaloški okvir Save for web. Vaš sloj videozapisa morati će biti pretvoren u Smart Object ako promijenite veličinu slike, ali ne morate brinuti, to uopće neće utjecati na naš tijek rada.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

3. Spremanje za Web

Moja omiljena stvar u ovom tijeku rada je to što ne moramo napraviti konverziju na Timeline ploči kako bismo mogli spremiti animaciju okvira, jer će to dijaloški okvir Save for Web obaviti za nas, nakon što za izlaz odaberete format GIF datoteke. Imajte na umu da će se opcije animacije pojaviti u donjem desnom kutu dijaloškog okvira. Ako odlučite smanjiti veličinu slike još uvijek možete to učiniti ovdje.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

4. Smanjite količinu okvira

Možete dodatno smanjiti veličinu GIF animacije ako ponovno otvorite izvezeni GIF u Photoshopu i izbrišete svaki drugi ili treći okvir (frame) s ploče Timeline Panel. Zatim biste trebali odabrati sve preostale okvire i povećati njihovo trajanje kako biste nadoknadili gubitak okvira. Ako ne izvršite tu nadoknadu, animacija će se reproducirati brže od originala. Kada budete spremni, možete spremiti novu inačicu koja bi trebala biti puno manja od originala.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

5. Broj boja

Najrelevantnija opcija za optimizaciju veličine GIF datoteke je broj boja korištenih u tablici boja. Maksimalna količina boja je 256, koja proizlazi iz ograničenja dubine od 8 bitova. Općenito govoreći, dobro je držati se 64 ili manje boje, ali ovisno o izvornom videozapisu možda biste trebali povećati broj boja kako biste dobili bolji rezultat.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

6. Koji Algoritam za Redukciju Boje Izabrati?

  • Perceptual da izradite prilagođene tablice boja pružajući prioritet bojama za koje ljudsko oko ima veću osjetljivost.
  • Selective odaberite za izradu tablice boja slične Perceptual tablici boja, ali pogodujući širokim područjima boja i očuvanju web boja. Ova tablica boja obično proizvodi slike s najvećim integritetom boje. ("Selective" je zadani izbor.)
  • Adaptive za izradu prilagođene tablice boja uzorkovanjem boja iz spektra koji se najčešće pojavljuju na slici. Na primjer, slika sa nijansama samo zelenih i plavih boja daje tablicu boja koja je prvenstveno zelena i plava. Većina slika koncentrira boje u određenim područjima spektra.
  • Restrictive koristi standard, 216 boja, tablicu boja sigurnih za web, uobičajene za 8-bitne (256 boja) tablice sustava Windows i Mac OS. Ova opcija osigurava da se na boje ne primjenjuje dither preglednika kada se slika prikazuje pomoću 8-bitne boje. Ako vaša slika ima manje od 216 boja, neiskorištene boje uklanjaju se iz tablice.
10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

7. Podrhtavanje ("Dithering")

Budući da GIF datoteke sadrže ograničeni broj boja, možda ćemo htjeti oponašati boje koje nedostaju dostupnima pomoću podrhtavanja. Iz izbornika "Dither" odabiremo jedan od algoritama za takvu imitaciju. Metoda "Diffusion" omogućuje nam prilagodbu podrhtavanja. S algoritmima "Pattern" i "Noise" nemamo što prilagoditi. Što je više podrhtavanja na slici, veća je veličina datoteke. Podrhtavanje dodaje različito obojene piksele u neposrednoj međusobnoj blizini da simulira sekundarne boje ili glatke gradacije u boji. Neke slike moraju sadržavati dithering kako bi izgledale dobro, ali najbolje je upotrijebiti najmanju količinu podrhtavanja kako biste zadržali najmanju veličinu datoteke.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

8. Web Snap, Lossy Kompresija, Transparentnost i Isprepleteni Signali

  • Web Snap se koristi kako bi spriječio podrhtavanje u pregledniku. To se postiže dodavanjem nekih boja web-sigurnim bojama. Što je više web-sigurnih boja prisutno na GIF-u, to će manji biti podrhtavanje preglednika. Vrijednost od 0% neće promijeniti nijednu boju, dok će vrijednost od 100% promijeniti sve boje na slici u web-sigurne boje.
  • Lossy kompresija odbacuje vizualne informacije, što može smanjiti veličinu datoteke.
  • Ako slika sadrži Transparency, odaberite Transparency kako biste sačuvali transparentne piksele; poništite odabir opcije Transparency kako biste ispunili potpuno i djelomično prozirne piksele mat bojom.
  • Interlaced GIF datoteke učitane su u pregledniku u nekoliko prolaza (poput progresivnih JPEG-ova).


9. Usporedite Izvorne i Optimizirane Verzije

Nakon što dodate mnogo prilagođenih promjena, možete provjeriti razliku u veličini i kvaliteti datoteke pomoću 2-Up prikaza.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

10. Pregled, Spremanje Unaprijed Podešenih Postavki i Optimiziranje Veličine datoteke

Ako ste zadovoljni s vašim postavkama, pogledajte svoj konačni GIF koristeći opciju Preview u pregledniku i ne zaboravite spremiti postavke kao unaprijed postavljene (preset). Također možete odrediti ograničenje veličine datoteke s ovom dodatnom opcijom iz Optimize Menu izbornika i nakon tih primjena, Photoshop će pokušati prilagoditi veličinu uz najbolju moguću kvalitetu slike.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File
One subscription.
Unlimited Downloads.
Get unlimited downloads