Optimizirajte i spremite slike u GIF formatu

Nakon kreiranja animacije u Photoshopu, morate je spremiti u jedan od dostupnih formata, od kojih je jedan Gif. Karakteristika ovog formata je da je dizajniran za prikaz (reprodukciju) u pregledniku.

Ako ste zainteresirani za druge opcije za spremanje animacije, preporučujemo da pročitate ovaj članak ovdje:

Lekcija: Kako sačuvati video u Photoshopu

Proces stvaranja Gif Animacija je opisana u jednoj od prethodnih lekcija, a danas ćemo govoriti o tome kako spremiti datoteku Gif i postavke optimizacije.

Lekcija: Napravite jednostavnu animaciju u Photoshopu

Saving GIF

Za početak, ponovite materijal i pogledajte prozor postavki spremanja. Otvara se klikom na stavku. "Spremi za Web" u meniju "Datoteka".

Prozor se sastoji iz dva dijela: bloka za pregled

i blokiranje postavki.

Pregledni blok

Izbor broja opcija za gledanje odabran je na vrhu bloka. U zavisnosti od vaših potreba, možete odabrati željenu postavku.

Slika u svakom prozoru, osim originala, konfigurira se zasebno. Ovo je učinjeno tako da možete odabrati najbolju opciju.

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

Uz pomoć "Ruke" Možete premjestiti sliku unutar odabranog prozora. Izbor se vrši i pomoću ovog alata. "Skala" obavlja istu radnju. Takođe možete zumirati i smanjivati ​​pomoću dugmadi na dnu bloka.

Samo ispod je dugme označeno "Pogled". Otvara izabranu opciju u podrazumevanom pregledniku.

U prozoru preglednika, pored skupa parametara, možemo dobiti i HTML kod gif

Blok postavki

U ovom bloku se podešavaju parametri slike, razmotrimo ih detaljnije.

1. Shema boja. Ova postavka određuje koja će se indeksirana tablica boja primijeniti na sliku tijekom optimizacije.

   

   • Perceptualno, ali jednostavno "shema percepcije". Kada se primeni, Photoshop kreira tabelu boja, vođen trenutnim nijansama slike. Prema rečima programera, ova tabela je što je moguće bliže onome kako ljudsko oko vidi boje. Plus - najbliže originalnoj slici, boje se čuvaju što je više moguće.
   • Selektivno Shema je slična prethodnoj, ali uglavnom koristi boje koje su sigurne za web. Takođe se fokusira na prikaz nijansi blizu originala.
   • Adaptive. U ovom slučaju, tablica se kreira iz boja koje se češće nalaze na slici.
   • Limited. Sastoji se od 77 boja, od kojih su neke zamijenjene bijelom u obliku točke (zrna).
   • Prilagođeno. Prilikom odabira ove šeme moguće je kreirati vlastitu paletu.
   • Crno-bijelo. Ova tabela koristi samo dvije boje (crnu i bijelu), također koristi zrno.
   • U sivim tonovima. Ovdje se primjenjuju razne razine nijansi sive boje.
   • MacOS i Windows. Ove tabele se sastavljaju na osnovu karakteristika prikaza slika u preglednicima koji pokreću ove operativne sisteme.

   Evo nekoliko primjera korištenja shema

   

   Kao što vidite, prva tri uzorka imaju sasvim prihvatljiv kvalitet. Uprkos činjenici da se vizuelno teško razlikuju jedni od drugih, ove šeme će raditi drugačije na različitim slikama.

2. Maksimalan broj boja u tabeli boja.

   

   Broj nijansi na slici direktno utiče na njegovu težinu, a shodno tome i na brzinu preuzimanja u pretraživaču. Najčešće korištena vrijednost 128Budući da ova postavka gotovo da ne utječe na kvalitetu, a istovremeno smanjuje težinu gifa.

   

3. Web boje. Ova postavka postavlja toleranciju kojom se tonovi konvertuju u ekvivalent iz sigurne web palete. Težina datoteke određena je vrijednosti koju je postavio klizač: vrijednost je veća - datoteka je manja. Prilikom postavljanja web-boja ne zaboravite na kvalitet.

   

   Primjer:

   

4. Dithering vam omogućava da izjednačite prijelaze između boja miješanjem nijansi koje se nalaze u odabranoj tablici indeksa.

   

   Prilagođavanje će takođe pomoći, koliko je to moguće, da sačuva gradijente i integritet monohromatskih područja. Kada koristite dithering, povećava se težina datoteke.

   Primjer:

   

5. Transparentnost. Format Gif podržava samo apsolutno transparentne ili apsolutno neprozirne piksele.

   

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

   

   Podešavanje se zove "Frosted" (u nekim izdanjima "Granica"). Može se koristiti za miješanje piksela slike s pozadinom stranice na kojoj će se nalaziti. Za najbolji prikaz, odaberite boju koja odgovara boji pozadine sajta.

   

6. Interlaced. Jedna od najkorisnijih postavki za Web. U tom slučaju, ako datoteka ima veliku težinu, ona vam omogućava da odmah prikažete sliku na stranici, kako je učitana, poboljšavajući njen kvalitet.

   

7. Konverzija sRGB pomaže da se zadrži maksimum originalnih boja slike prilikom snimanja.

   

Prilagođavanje "Transparentnost podrhtavanja" značajno degradira kvalitet slike, ali o parametru "Gubici" govorićemo u praktičnom delu lekcije.

Za bolje razumijevanje procesa postavljanja gifa u Photoshopu, morate vježbati.

Praksa

Cilj optimizacije slika za internet je minimiziranje težine datoteke uz održavanje kvalitete.

1. Nakon obrade slike idite na meni "Datoteka - Spremi za Web".
2. Izložite režim prikaza "4 opcije".

   

3. Zatim vam je potrebna jedna od opcija kako biste što više približili originalu. Neka to bude slika desno od izvora. Ovo se radi kako bi se procenila veličina datoteke sa maksimalnim kvalitetom.

   Postavke parametara su sljedeće:

   • Shema boja "Selektivno".
   • "Boje" - 265.
   • "Podrhtavanje" - "Random", 100 %.
   • Uklonite polje za potvrdu ispred parametra "Interlace"jer će konačna jačina slike biti prilično mala.
   • "Web boje" i "Gubici" - nula.

     

   Uporedite rezultat sa originalom. Na dnu prozora uzorka možemo vidjeti trenutnu veličinu gifa i brzinu preuzimanja na navedenoj brzini Interneta.

   

4. Idite na donju sliku koja je upravo konfigurirana. Pokušajmo da ga optimizujemo.
   • Šema je ostala nepromijenjena.
   • Broj boja je smanjen na 128.
   • Značenje "Podrhtavanje" smanjena na 90%.
   • Web boje ne dirajte, jer nam u ovom slučaju neće pomoći da održimo kvalitet.

     

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

   

5. Budući da na slici već postoje zrna i mali defekti, pokušaćemo da ih povećamo "Gubici". Ovaj parametar određuje prihvatljiv nivo gubitka podataka tokom kompresije. Gif. Promijenite vrijednost na 8.

   

   Uspjeli smo dodatno smanjiti veličinu datoteke, dok smo izgubili malo kvalitete. Gifka sada teži 25,9 kilobajta.

   

   Tako smo mogli da smanjimo veličinu slike za oko 10 KB, što je više od 30%. Vrlo dobar rezultat.

6. Daljnje akcije su veoma jednostavne. Pritisnite dugme "Sačuvaj".

   

   Izaberite mjesto za spremanje, navedite ime gif-a, a zatim kliknite "Sačuvaj.

   

   Imajte na umu da postoji mogućnost uz Gif create and HTML dokument u koji će biti ugrađena naša slika. Za to je bolje odabrati prazan folder.

   

   Kao rezultat, dobijamo stranicu i fasciklu sa slikom.

   

Savet: kada imenujete datoteku, pokušajte da ne koristite ćirilične znakove, jer ih ne mogu čitati svi pretraživači.

U ovoj lekciji o snimanju slika u formatu Gif završen. Na njemu smo saznali kako optimizirati datoteku za postavljanje na Internet.

Pogledajte video: Veličina i format slika za Facebook How to tutorijal (Maj 2024).