Optimizacija i spremanje GIF slika

Nakon stvaranja animacije u Photoshopu, morate je spremiti u jednom od dostupnih formata, od kojih je jedan GIF. Značajka ovog formata je ta što je namijenjena za prikaz (reprodukciju) u pretraživaču.

Ako vas zanimaju druge mogućnosti za spremanje animacije, preporučujemo vam da pročitate ovaj članak:

Lekcija: Kako sačuvati video u Photoshopu

Proces kreiranja GIF animacija je opisana u jednoj od prethodnih lekcija, a danas ćemo govoriti o tome kako spremiti datoteku u format GIF i o postavkama optimizacije.

Lekcija: Kreirajte jednostavnu animaciju u Photoshopu

GIF Spremanje

Prvo ponovimo materijal i upoznajmo se s prozorom postavki spremanja. Otvara se klikom na predmet. Spremi za Web u meniju Datoteka.

Prozor se sastoji od dva dijela: blok za pregled

i blok postavki.

Blok za pregled

Izbor broja opcija pregledavanja odabran je na vrhu bloka. Ovisno o vašim potrebama, možete odabrati željenu postavku.

Slika u svakom prozoru, osim originala, konfigurira se zasebno. To se radi tako da možete izabrati najbolju opciju.

U gornjem lijevom dijelu bloka nalazi se mali set alata. Koristićemo samo "Ruka" i "Skala".

Sa Ruke Možete premjestiti sliku unutar odabranog prozora. Izbor se vrši i ovim alatom. "Skala" vrši istu radnju. Možete da uvećate i umanjite gumbe na dnu bloka.

Ispod je dugme s natpisom Pogled. Otvara se odabrana opcija u zadanom pretraživaču.

U prozoru pretraživača, pored skupa parametara, možemo i mi HTML kod GIF-ovi

Blok postavki

U ovom bloku su podešeni parametri slike, razmotrit ćemo je detaljnije.

1. Šare boja. Ova postavka određuje koja će indeksirana tablica boja biti primijenjena na sliku tokom optimizacije.

   

   • Percepcijskiveć jednostavno "šema percepcije". Kad se primijeni, Photoshop kreira tablicu boja, vođenu trenutnim bojama slike. Prema programerima, ova tablica je što bliže načinu na koji ljudsko oko vidi boje. Plus - slika najbliža originalu, boje su maksimalno očuvane.
   • Selektivni Shema je slična prethodnoj, ali uglavnom se koriste boje koje su sigurne za web. Naglasak je i na prikazu nijansi bliskih originalu.
   • Adaptive. U tom se slučaju tablica kreira od boja koje su na slici uobičajenije.
   • Ograničena. Sastoji se od 77 boja, od kojih su neke zamijenjene bijelom u obliku točkice (zrno).
   • Custom. Kada odaberete ovu shemu, postaje moguće kreirati vlastitu paletu.
   • Crno-belo. U ovoj tablici koriste se samo dvije boje (crna i bijela), koja se također koriste veličinom zrna.
   • U sivim tonovima. Ovde se koriste razni 84 nivoi nijansi sive.
   • MacOS i Windows. Ove se tablice sastavljaju na temelju značajki prikazivanja slika u preglednicima koji rade pod ovim operativnim sistemima.

   Evo nekoliko primjera upotrebe kola.

   

   Kao što vidite, prva tri uzorka su prilično prihvatljive kvalitete. Unatoč činjenici da se vizualno gotovo ne razlikuju jedna od druge, ove sheme će na različitim slikama djelovati drugačije.

2. Maksimalni broj boja u tabeli boja.

   

   Broj nijansi na slici direktno utječe na njenu težinu, a u skladu s tim i na brzinu preuzimanja u pretraživaču. Najčešće korištena vrijednost 128, budući da takvo postavljanje gotovo ne utječe na kvalitetu, a istovremeno smanjuje težinu gifa.

   

3. Web boje. Ova postavka postavlja toleranciju s kojom se sjene pretvaraju u ekvivalente iz sigurne Web palete. Težina datoteke određena je vrijednosti postavljenom klizačem: vrijednost je veća - datoteka je manja. Pri podešavanju web boja ne zaboravite i na kvalitet.

   

   Primjer:

   

4. Odmrzavanje vam omogućava izglađivanje prijelaza između boja miješanjem nijansi sadržanih u odabranoj tabeli za indeksiranje.

   

   Isto tako će prilagođavanje pomoći, koliko je to moguće, očuvanju gradijenata i cjelovitosti monofonskih presjeka. Kada se primijeni odmrzavanje, težina datoteke se povećava.

   Primjer:

   

5. Transparentnost Format GIF podržava samo apsolutno prozirne ili potpuno neprozirne piksele.

   

   Ovaj parametar, bez dodatnog podešavanja, slabo prikazuje zakrivljene linije, ostavljajući piksel ljestvice.

   

   Naziva se fino podešavanje "Matt" (u nekim izdanjima "Granica") Uz njegovu pomoć konfigurira se miješanje piksela slike s pozadinom stranice na kojoj se nalazi. Za najbolji prikaz odaberite boju koja odgovara boji pozadine web mjesta.

   

6. Prepleteni. Jedno od najkorisnijih za Web postavke. U tom slučaju, ako datoteka ima značajnu težinu, omogućava vam da odmah pokažete sliku na stranici, poboljšavajući njen kvalitet kako se učitava.

   

7. Konverzija sRGB pomaže zadržati maksimum originalnih boja slike uz uštedu.

   

Prilagodba "Propadanje transparentnosti" značajno pogoršava kvalitetu slike i parametar "Gubici" razgovaraćemo u praktičnom delu predavanja.

Da biste bolje razumjeli postupak postavljanja GIF spremanja u Photoshopu, morate vježbati.

Vežba

Cilj optimizacije slika za Internet je minimizirati težinu datoteka uz održavanje kvalitete.

1. Nakon obrade slike prijeđite na meni Datoteka - Spremite za Web.
2. Postavljamo način pregleda "4 opcije".

   

3. Zatim morate napraviti jednu od opcija što je više moguće originalnoj. Neka to bude slika desno od izvora. To se radi kako bi se procijenila veličina datoteke na maksimalni kvalitet.

   Postavke parametara su sljedeće:

   • Šare boja "Selektivno".
   • "Colors" - 265.
   • Dyinging - "Random", 100 %.
   • Uklonimo daw ispred parametra Prepleteni, jer će konačni volumen slike biti prilično mali.
   • Web Colors i "Gubici" - nula.

     

   Usporedite rezultat s originalom. U donjem dijelu prozora s uzorkom možemo vidjeti trenutnu veličinu GIF-a i njegovu brzinu preuzimanja navedenom internetskom brzinom.

   

4. Idite na sliku ispod upravo konfiguriranu. Pokušajmo to optimizirati.
   • Šemu ostavljamo nepromenjenom.
   • Broj boja je smanjen na 128.
   • Vrijednost Dyinging smanjiti na 90%.
   • Web boje ne diramo jer nam u ovom slučaju neće pomoći održati kvalitetu.

     

   Veličina GIF-a smanjena je sa 36,59 KB na 26,85 KB.

   

5. Budući da slika već ima zrnatost i male nedostatke, pokušaćemo da je povećamo "Gubici". Ovaj parametar definira prihvatljivi nivo gubitka podataka tijekom kompresije. GIF. Promijenite vrijednost u 8.

   

   Uspjeli smo dodatno smanjiti veličinu datoteke, a pritom smo malo izgubili na kvaliteti. GIF-ovi sada teže 25,9 kilobajta.

   

   Ukupno, uspjeli smo smanjiti veličinu slike za oko 10 KB, što je više od 30%. Jako dobar rezultat.

6. Daljnje akcije su vrlo jednostavne. Kliknite na dugme Spremi.

   

   Odaberite mjesto za spremanje, dajte naziv gif-a i ponovo kliknite "Spremi ".

   

   Imajte na umu da postoji mogućnost da GIF stvaraju i HTML dokument u koji će biti ugrađena naša slika. Da biste to učinili, bolje je odabrati praznu mapu.

   

   Kao rezultat toga, dobivamo stranicu i mapu sa slikom.

   

Savjet: prilikom imenovanja datoteke pokušajte ne koristiti ćirilične znakove jer ih ne mogu čitati svi pregledači.

Ovo je lekcija za spremanje slike u formatu GIF završen. Na njemu smo saznali kako optimizirati datoteku za objavljivanje na Internetu.