You are on page 1of 15

- Vežba 2

-

OPTIMIZACIJA GRAFIKE ZA WEB
UPOTREBA ALATKE SLICE TOOL
IZRADA WEB GALERIJE

monitora. Rezolucija monitora je podešena na 72 dpi-a (do 75). Pomoću slika definišemo izgled stranice. Optimizirati grafiku za Web znači smanjiti izlaznu veličinu slika uz što manji gubitak kvaliteta istih. Što je broj tačaka veći veličina slika je veća. Potrebno je izvršiti prikazivanje slike na različitim browser-ima. Kompresijom Smanjivanjem dimenzija slike. je najbolji način da izvršite optimizaciju. Veličina slike se može smanjiti na sledeće načine: 1. 2 . Kompresija obuhvata algoritme za kompresiju koji se koriste da bi zapisali što jedinstveniji prikaz iste informacije. Izgled slike na Web-u takođe zavisi od računarske platforme. grafičke kartice. Ova vežba daje prikaz alata i metoda pomoću kojih je moguće postići najbolji odnos “težine” datoteke i kvaliteta prikaza iste. Rezolucija slike predstavlja broj tačaka po kvadratnom inču (dpi – dots per inch). Ukoliko imate grafički intenzivan sajt. Treba znati da se smanjivanjem rezolucije gubi i na kvalitetu slike pa je odnos između kvalitete slike i njene rezolucije obrnuto proporcionalan i zbog toga podešavanje rezolucije predstavlja kompromis. Pod optimizacijom grafičkih elemenata se podrazumeva da se veličina slike u KB što više smanji. operativnog sistema i browser-a koji će se koristiti za prikaz slike. na različitim računarskim platformama sa različitim sistemima boja da bi videli kako će se ponašati vaša slika na Web-u. dugačkih JavaScript fajlova i slično. Pored ogromne konkurencije web sajtova vrlo je bitno da se Vaš web sajt brzo učita i prikaže sadržaj posetiocu. 4. Smanjivanjem rezolucije slike Smanjivanjem broja boja u slici. Flash-a. drugim rečima da se sa što manje informacija prikaže istu stvar. Osnovna priča oko optimizacije slika se vrti oko potrebnog vremena za učitavanje neke web prezentacije. do nivoa gde se ne gubi mnogo na jasnoći slike. Današnji standardi web stranica zahtevaju dobro odabranu kompresiju grafičkih datoteka. i obrnuto što je broj tačaka manji to je slika manja (zbog broja bitova potrebnih za zapis po pojedinom inču). Smanjivanje broja boja u slici je takođe korisna tehnika za optimizaciju grafičkih elemenata. Najjednostavniji način je da se u nekom programu za obradu slika izvrši podešavanje dimenzija. ali ih koristimo i kao ilustracije teksta. kako za dizajn elemente tako i za ilustracije sadržaja. stoga se preporučuje korišćenje ovih vrednosti za prikaz grafičkih elemenata na Web-u. optimizacija slika je veoma važna. Kada god je moguće treba izbegavati korišćenje elemenata koji produžavaju vreme učitavanja. Smanjivanje broja boja prisutnih na slici do prihvatljivog nivoa. ovo vreme se drastično produžuje korišćenjem zvuka. 3. 2.Дигиталне мултимедије 1 OPTIMIZACIJA GRAFIKE ZA WEB Upotreba slika za dizajn web sajta je uobičajena praksa. tj. Dimenzije slike treba da su pažljivo odabrane. Posetioci nisu oduševljeni kada treba da dugo čekaju na pojavljivanje sadržaja web stranice. Nije reč samo o slikama.

S tim da su PNG-24 fajlovi često mnogo veći od JPEG fajla iste slike. Pretpostavljamo da ilustracije imaju tesnu vezu sa sadržajem i temom koju obrađuje web sajt i konkretna web strana (inače ne bi je ni trebalo staviti).Дигиталне мултимедије 1 Svaka slika ima mogućnost definisanja ALT (alternativnog) teksta koji se prikazuje kada posetilac isključi prikaz slika. Proverite dimenzije slike pomoću komande File / Image Size (slika 1) 3. Ilustracije sa precizno definisanim poljima ili oštrim ivicama i sa jasnim detaljima. Posebno treba obratiti pažnju kada je reč o slici koja je ujedno i link (veza) ka nekoj drugoj web stranici. Dimenzije slike prikazane na slici 1 su 800 x 600 piksela što je apsolutno NEPRIHVATLJIVO za postavljanje na jednu web stranicu.Postoji još jedan fajl format koji je pogodan za slike sa neprekidnim tonovima a to je PNG-24. slike sa neprekidnim tonovima (continuous-tone images) kao što su fotografije bi trebalo da su optimizovane kao JPEG fajlovi. 3 .1200 x 800 piksela) onda se mogu koristiti male slike (thumbnails) i klikom na njih se u posebnom prozoru prikazuje samo željena slika. Svi elementi jedne web stranice imaju svoje dimenzije i veličinu tako da kada se pojedine slike pripremaju za postavljanje na stranice treba voditi računa o njihovim dimenzijama. Ova mogućnost se odlično koristi prilikom optimizacije stranice radi boljeg rangiranja na mašinama za pretraživanje. Preporuka je da dimnezije slika koje se koriste na nekoj web stranici ne budu veće od 300 piksela (po širini). treba da su optimizovane kao GIF ili PNG-8 fajlovi. U prethodnoj vežbi pri definisanju širine dokumenta koji je prestavljao skicu web stranice postavili smo širinu šablona (kompletne web stranice) na 900 piksela. Postupci prilikom optimizacije Prilagođavanje dimenzija slike pomoću opcije Image size 1. Pretraživači mogu da pretražuju i slike međutim nisu u mogućnosti da shvate samu sliku već pretraživanje vrše preko alternativnog teksta odnosno preko ALT atributa slike. Ukoliko želite da korisnik vidi neku sliku u njeno pravoj veličini (npr. 2. Svaku sliku treba opisati korišćenjem ključnih reči jer će to pomoći pretraživačima da bolje shvate sadržaj web stranice. Otvoriti željenu sliku u Photoshop-u pomoću komande File /Open. Osnovna pravila su za optimizaciju: • • • • • ne koristiti slike ako nemaju veze sa sadržajem veličinu fajla slike držati ispod 12Kb svaku sliku opisati sa ALT atributom opis slike treba da sadrži ključne reči i fraze Flash nije bolja zamena za slike Formati slika na Web-u U osnovi.

Prilikom podešavanja širine slike u prozoru Image size treba da je uključena opcija Constrain Proportions tako da prilikom unosa širine slike visina se sama proporcionalno menja u odnosu na zadatu širinu i neće doći do deformisanje slike.4KB što je još uvek prilično veliko za postavljanje na web stranicu. Slika 2 4 . 6. Smanjenje dimenzija slike kao prvi korak pri optimizaciji se vrši tako što iz padajućeg menija Image izaberete opciju Image size i podesite širinu slike (width) na 300 piksela. Primetićete da su se i dimenzije slike smanjile na 225x169 piksela kako bi kvalitet ostao isti zbog smanjenja rezolucije. Potvrditi sa OK. Postavite da bude 72 piksela/inch. Na slici 1 u okviru dijalog prozora Image size možete primetiti da je rezolucija slike 96 piksela/inch.37MB smanjila na 111. Kada smo izvršili postupak prilagođavanja dimenzija i rezolucije (slika 2) možemo primetiti da se i veličina naše slike sa 1. Slika 1 5.Дигиталне мултимедије 1 4.

njihovih veličina i vremena potrebnog za učitavanje. 2.Дигиталне мултимедије 1 Primena komande Save for Web za sliku JPG formata 1. minimalne veličine fajla kao i vremena potrebnog da se slika prikaže na web stranici (download time). Kada otvorite sliku (File/Open ) koju želite da optimizujete iz padajućeg menija File izaberete opciju Save for Web. imamo mogućnost da izvršimo balansiranje između kvaliteta slike. (slika 3) Slika 3 5 . Dijalog prozor Save for Web omogućava prikaz različitih podešavanja za optimizaciju a i prikaz optimizovnih slika. Komandom Save for the Web.

Дигиталне мултимедије 1 3. C – parametri koji se podešavaju da i se dobila optimizovana slika 6 .Up: prikaz orginalne i optimizovane slike 4-Up: prikaz orginalne i 3 varijante optimizovane slike B – podaci o optimizovanoj slici (veličina i vreme potrebno za prikaz pri izabranoj brzini konekcije.8Kb/s). (Slika 4) A B Slika 4 C A – tabovi za preview (prikaz): Original: prikaza orginalne slike Optimized: prikaz optimizovane slike 2. po defoltu je 28. Dobićete novi prozor u kome se vrši kompresija slike ili degradacija iste. Promena brzine konekcije može da se vrši tako što kliknete desnim tasterom miša na konekciju i pojaviće se dodatni padajući meni u kojem možete da podesite brzinu konekcije i vidite koliko je vremena tada potrebno za prikaz slike.

Opcija Quality (E) omogućava da pomoću klizača podesite kvalite slike. e. g. "Medium". Opcija Progressive (D) za format slike JPG omogućava da se slika koja je postavljena na web stranici učitava deo po deo. Prilikom pomeranja klizača na veće vrednosti povećava se zamućenost i smanjuje veličina slike kao i vreme za prikaz. Opcija Blur (F) omogućava podešavanje zamućenosti slike čime se dodatno kompresuje fajl. U opciji označenoj sa B birate automatski podešene opcije za kvalitet slike "Low".Дигиталне мултимедије 1 4. Ponuđeni formati u padajućoj listi imaju već svoja podešavanja za optimizovanje koja uglavnom uvek treba dodatno podesiti. Opcija Matte omoguaćava da birate boju za piksele koji su na orginalnoj slici bili providni (transparentni). Opcija Optimized(C) prilikom procesa optimizacije mora biti označena. "High" i "Maximum".1 do 0. A B C E D F Slika 6 7 . h. b. Opcija ICC Profile se koristi kod nekih browsera za korekciju boja. f. d. Prilikom pomeranja klizača veličina slike i vreme potrebno za prikaz se menjaju. Ne treba preterivati sa ovim parametrom. U desnom uglu na slici 6 postoje sledeći parametri: a.5. U opciji Preset (A) birate formata slike jpg ili gif. c. Preporuka su vrednosti od 0.

pipeta za uzimanje uzorka boje (Eyedropper Tool).Дигиталне мултимедије 1 7. A B Slika 7 8 . 9. Na slici 7 sa A je označen skup alatki pomoću koga možete pomerati sliku koja se obrađuje (Hand Tool). Kartica Color Table je prazna kada je u pitanju JPG slika jer ne može da se prikaže svih 16 miliona boja. Na slici 7 sa B je označen ikonica za mogućnost prikaza slike u browseru. Ispod parametara za podešavanje nalaze se dve kartice: Color Table i Image Size. uvećavanje (Zoom Tool). vršiti dodatno seckanje slike (Slice Tool). biranje boja (Eyedropper Color). Pomoću kartice Image size možemo podesiti dimenzije slike (ukoliko to nismo uradili prethodno pomoću opcije Image size) na odgovarajuće vrednosti a onda izvršiti optimizaciju. 8.

Samo slike i grafike treba da budu isečene iz šablona I kasnije iskorišćene prilikom realizacije stranice. Slika 8 UPOTREBA ALATKE SLICE TOOL ZA WEB Upotreba alatke slice tool za web skicu ili šablon koji je kreiran u Photoshopu se odnosi na čuvanje slika u formatima za web koje se mogu iskoristiti iz šablona. Format meni B. (slika 9) 9 . Podešavanja parametara za kompresiju PNG-8 fajla je slično kao i za GIF fajl.Дигиталне мултимедије 1 Primena komande Save for Web za sliku GIF formata Veličinu GIF slika možete smanjiti smanjujući broj boja. Da bi efekat ove alatke bio potpun potrebno je da prilikom crtanja web šablona vodimo računa o rasporedu i organizaciji elemenata web stranice (zaglavlje. navigacija. Meni za algoritam za redukciju boja C. Otvorite web šablon ili sliku koju želite da isečete 2. footer). Dither Algoritam D: Maksimalan broj boja koji se D pojavljuje na slici sa mogućnošću promene. 1. Kao i kod GIF formata. Optimizacioni panel za GIF format: A B C A. telo stranice. PNG-8 format efikasno vrši kompresiju područja sa punom bojom. Izaberite alatku slice tool i počnite da crtate boksove kojim ćete definisati (označiti) deo koji želite da isečete. Sve što je tekst ili obična puna boja na web šablonu može se realizovati pomoću softvera za izradu web stranica.

baner. Otvoriće se dijalog prozor Slice Options. Izaberite vrstu isečka iz padajuće liste (slika ili ne) i upišite ime isečka. Zatim opet pomoću alatke izvršite označavanje dela koji želite da bude sledeći isečak i tako sve do kraja. (slika 10) Slika 10 10 .To znači da deo slike (grafike) koji je popunjen npr. telo stranice.solid (punom) bojom možete realizovati i u Dreamweaveru pomoću opcija za boju pozadine ubacivanjem hexadecimalnog koda boje i na taj način postići efekat veće brzine učitavanja. Delovi koje isecate bi trebalo da odgovaraju elementima web stranice (logo. 5. 6. navigacija. Kada vršite isecanje treba da vodite računa o sledećem: a.Дигиталне мултимедије 1 Slika 9 3. 4. Za sadržaj isečaka birate onaj deo grafike ili slike koji ne možete da realizujete pomoću Dreamweavera. Davanje imena isečcima se vrši tako što izaberete alatku slice tool i dva puta kliknete na isečak kome želite da date ime. footer) b.

Ako je u pitanju grafika iz padajućeg menija za izbor formata izaberite GIF format ako je u pitanju izaberite JPG format.(slika 11) Slika 11 9. 10. 11 .Дигиталне мултимедије 1 7. slika 12 12. 11. Izaberite opciju Save. Photoshop je kreirao za Vas direktorijum images i napravio posebne slike i grafiku od isečaka koji ste označavali na šablonu. Sačuvajte isečke u okviru vašeg direktorijuma u kome ćete smestiti web sajt. Podesite opcije kao na slici 12. Izaberite isečak koji ste imenovali. Na ovaj način web šablon koji ste jednom nacrtali u Photoshopu iskoristite za popunjavanje web stranica u Dreamweaveru. Selektujete ostale isečke iz prozora Save for web držeći SHIFT taster. 8. Iz File menija izaberite opciju File / Save for web. Otvoriće se dijalog prozor Save for web. Otvoriće se dijalog prozor Saved Optimized As. 13.

Popunjavanjem polja u galeriji Photoshop menja veličinu složenom HTML dokumentu i organizuje ga umesto vas. Promenom veličine se narušava fokusiranost slike i njen kvalitet. neophodno je da pronađete sopstvenih deset slika koje ćete koristiti. • U pišite naziv galerije u polju Site Name kao Galerija mobilnih telefona. Na taj način ćete ograničiti veličinu koju će Photoshop koristiti za prikazivanje izabranih slika. Da biste uradili Web galeriju ispratite sledeće korake: • Iz padajućeg menija File / Automate izaberite komandu Web Photo Gallery. zbog čega smo i podesili njegovu vidljivost. Pri izboru slika za vašu galeriju.Дигиталне мултимедије 1 IZRADA WEB GALERIJE U Photoshop-u biranjem komande File / Automate / Web Photo Gallery pokreće se automatska alatka koja fotografije obradi i postavi minijaturne prikaze na glavnu stranicu. 12 . Slika 13 • U okviru za dijalog iz padajuće liste Styles izaberite Simple-Vertical Thumbnails. neophodno je da pronađete one slike čija je veličina oko 500 K. a zatim ove minijaturne prikaze poveže sa većim verzijama ovih slika. Izabrani stil podrazumeva listu minijaturnih slika sa leve strane i uvećanu sliku u centralnom delu. Otvoriće vam se okvir za dijalog Web Photo Gallery kao što je prikazano na slici 13. Prikazivanje naslova na web stranici uvek izgleda lepo. • Izaberite Banner iz padajuće liste Options. Pre izrade same galerije.

Ova polja su dostupna ukoliko odaberete neki od stilova Table. Slika 14. 13 . Automatski proces ujedno tom prilikom vrši i njihovo međusobno povezivanje. • Polje Date se koristi za prikazivanje datuma objavljivanja galerije. Takođe je neophodno da kreirate direktorijum u kome će biti smeštene sve slike u galeriji. Definisanjem osnovnih polja i opcija u okviru za dijalog. • Dugmetom Destination selektujte lokaciju direktorijuma koju ste kreirali za galeriju. Pri izboru fonta vaš izbor je ograničen na one fontove za koje postoji generička podrška u pretraživaču. Uz pomoć ovog softvera smo napravili zanimljivu Internet galeriju na jednostavan i lak način. U zavisnosti od izabranog stila prikazivanja galerije okvir za dijalog Web Photo Gallery ima još 2 polja za podešavanje vrste fonta kao i njegove veličine. Photoshop automatski vrši proces otvaranja svih slika i pravljenje njihovih minijaturnih verzija. Veličina fonta od 3 označava da će sve upisane informacije biti prikazane na tri nivoa iznad standardne visine slova u HTML dokumentu. • Kreirajte novi direktorijum pod nazivom WebGalerija. • Kliknite na dugme OK. Broj 3 je sasvim dovoljan da prikaže ime i sadržaj galerije.Дигиталне мултимедије 1 • U polje Photographer upišite bilo kakav takst. Na slici 14 je prikazana galerija Web slika onako kako ona izgleda u pretraživaču Internet Explorer. Pre izrade galerije otvorite direktorijum u koji treba da prebacite slike koje će biti objavljene na Web galeriji. vrši se preko dela dijalog prozora Source Images: • Izaberite dugme Browse kako biste selektovali lokaciju direktorijuma sa originalnim slikama. Ovo polje je namenjeno za ime autora slika. Povezivanje direktorijuma odakle koristite slike i direktorijuma u kome smeštamo gotovu galeriju sa originalnim i obrađenim slikama.

To ćemo uraditi preko dela Options u okviru prozora za dijalog Web Photo Gallery – slika 15. Slika 15. pri čemu se automatski prikazuje njen veći prikaz. Za kvalitetnu sliku u galeriji izaberite opciju Medium iz padajuće liste JPEG Quality. • Potvrdite opciju Resize Images i selektujte Custom opciju iz padajuće liste ugrađenih veličina. 14 . Photoshop pravi galeriju čiji je sistem jednostavan i finkcioniše savršeno. potrebno je izvršiti promenu njihovih originalnih veličina. Ukoliko vladate HTML kodom ovu galeriju možete učiniti još složenijom. prikaz slika u punoj veličini i kontrole za navigaciju. • Upišite 340 vrednost kao parametar u polju za piksele. Na slici 14 takođe se može videti naslov galerije. • Iz padajuće liste Options izaberite Large Images. onda se to naziva sistem. • Kvalitet vaših slika u galeriji zavisi od parametra JPEG Quality. Kada u galeriji imate nekoliko povezanih stranica i više od jednog nivoa.Дигиталне мултимедије 1 Ova galerija omogućava korisniku Internet prezentacije da selektuje na minijaturni prikaz slike sa leve strane. Da bismo obezbedili neohodnu verziju slika određenih veličina za Web.

15 . Izvršiti optimizaciju slike slika_V2_Z1_2. Izvršiti optimizaciju slike slika_V2_Z1_1.Slice tool (0.Web galerija (0.3 boda) 1. Proveriti prikaz u browseru. Zadatak 4. Zadatak 2.3 boda) Izvršiti optimizaciju slike slika_V2_Z2 pomoću opcija i parametara komande Save for Web. Zadatak 3.jpg pomoću opcija i parametara komande Save for Web birajući da slika bude u GIF formatu ali da se ne izgubi od kvaliteta. Kolika je sada veličina slike? 2.Дигиталне мултимедије 1 ZADACI ZA SAMOSTALAN RAD: Zadatak 1 – Prilagođavanje dimenzija i rezolucije (0. Optimizovana slika treba da bude veličine do 15 KB.jpg prilagođavanjem rezolucije za prikaz na web stranici.Save for Web (GIF) (0.jpg prilagođavanjem dimenzija slike za prikaz na web stranici. Šta se desilo sa dimenzijama slike? Podesiti dimenzije slike za prika na web stranici.3 boda) Napraviti Web galeriju na osnovu slika koje su date u direktorijumu slike_za_galeriju .3 boda) Pomoću alatke slice tool izvršiti isecanje šablona Sajt_Mobilnih.psd i podešavanje formata isečaka.Save for Web (JPEG) (0.3 boda) Izvršiti optimizaciju slike slika_V2_Z3. Zadatak 5. Proveriti prikaz u browseru. Optimizovana slika treba da bude veličine do 15 KB.