druga dodatna vezba dm1 08 cetvrtak · Дигиталне мултимедије 1 3 svaka slika...

- Vežba 2 -

OPTIMIZACIJA GRAFIKE ZA WEB UPOTREBA ALATKE SLICE TOOL

IZRADA WEB GALERIJE

Дигиталне мултимедије 1

2

OPTIMIZACIJA GRAFIKE ZA WEB Upotreba slika za dizajn web sajta je uobičajena praksa. Pomoću slika definišemo izgled stranice, ali ih koristimo i kao ilustracije teksta. Ukoliko imate grafički intenzivan sajt, optimizacija slika je veoma važna, kako za dizajn elemente tako i za ilustracije sadržaja. Osnovna priča oko optimizacije slika se vrti oko potrebnog vremena za učitavanje neke web prezentacije. Posetioci nisu oduševljeni kada treba da dugo čekaju na pojavljivanje sadržaja web stranice. Nije reč samo o slikama, ovo vreme se drastično produžuje korišćenjem zvuka, Flash-a, 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. Kada god je moguće treba izbegavati korišćenje elemenata koji produžavaju vreme učitavanja. Optimizirati grafiku za Web znači smanjiti izlaznu veličinu slika uz što manji gubitak kvaliteta istih. Današnji standardi web stranica zahtevaju dobro odabranu kompresiju grafičkih datoteka. 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. Pod optimizacijom grafičkih elemenata se podrazumeva da se veličina slike u KB što više smanji. Veličina slike se može smanjiti na sledeće načine:

1. Kompresijom 2. Smanjivanjem dimenzija slike, 3. Smanjivanjem rezolucije slike 4. Smanjivanjem broja boja u slici.

Kompresija obuhvata algoritme za kompresiju koji se koriste da bi zapisali što jedinstveniji prikaz iste informacije, drugim rečima da se sa što manje informacija prikaže istu stvar.

Dimenzije slike treba da su pažljivo odabrane. Najjednostavniji način je da se u nekom programu za obradu slika izvrši podešavanje dimenzija.

Rezolucija slike predstavlja broj tačaka po kvadratnom inču (dpi – dots per inch). Što je broj tačaka veći veličina slika je veća, i obrnuto što je broj tačaka manji to je slika manja (zbog broja bitova potrebnih za zapis po pojedinom inču). 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. Rezolucija monitora je podešena na 72 dpi-a (do 75), stoga se preporučuje korišćenje ovih vrednosti za prikaz grafičkih elemenata na Web-u.

Smanjivanje broja boja u slici je takođe korisna tehnika za optimizaciju grafičkih elemenata. Smanjivanje broja boja prisutnih na slici do prihvatljivog nivoa, tj. do nivoa gde se ne gubi mnogo na jasnoći slike, je najbolji način da izvršite optimizaciju. Izgled slike na Web-u takođe zavisi od računarske platforme, monitora, grafičke kartice, operativnog sistema i browser-a koji će se koristiti za prikaz slike. Potrebno je izvršiti prikazivanje slike na različitim browser-ima, 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.


3

Svaka slika ima mogućnost definisanja ALT (alternativnog) teksta koji se prikazuje kada posetilac isključi prikaz slika. Ova mogućnost se odlično koristi prilikom optimizacije stranice radi boljeg rangiranja na mašinama za pretraživanje. 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). 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. Posebno treba obratiti pažnju kada je reč o slici koja je ujedno i link (veza) ka nekoj drugoj web stranici. 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.

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, slike sa neprekidnim tonovima (continuous-tone images) kao što su fotografije bi trebalo da su optimizovane kao JPEG fajlovi. Ilustracije sa precizno definisanim poljima ili oštrim ivicama i sa jasnim detaljima, treba da su optimizovane kao GIF ili PNG-8 fajlovi.Postoji još jedan fajl format koji je pogodan za slike sa neprekidnim tonovima a to je PNG-24. S tim da su PNG-24 fajlovi često mnogo veći od JPEG fajla iste slike.

Postupci prilikom optimizacije Prilagođavanje dimenzija slike pomoću opcije Image size

1. Otvoriti željenu sliku u Photoshop-u pomoću komande File /Open. 2. Proverite dimenzije slike pomoću komande File / Image Size (slika 1) 3. Dimenzije slike prikazane na slici 1 su 800 x 600 piksela što je apsolutno

NEPRIHVATLJIVO za postavljanje na jednu web stranicu. U prethodnoj vežbi pri definisanju širine dokumenta koji je prestavljao skicu web stranice postavili smo širinu šablona (kompletne web stranice) na 900 piksela. 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. Preporuka je da dimnezije slika koje se koriste na nekoj web stranici ne budu veće od 300 piksela (po širini). Ukoliko želite da korisnik vidi neku sliku u njeno pravoj veličini (npr.1200 x 800 piksela) onda se mogu koristiti male slike (thumbnails) i klikom na njih se u posebnom prozoru prikazuje samo željena slika.


4

4. 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. 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. Potvrditi sa OK.

Slika 1

5. Na slici 1 u okviru dijalog prozora Image size možete primetiti da je rezolucija slike

96 piksela/inch. Postavite da bude 72 piksela/inch. Primetićete da su se i dimenzije slike smanjile na 225x169 piksela kako bi kvalitet ostao isti zbog smanjenja rezolucije.

6. 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,37MB smanjila na 111,4KB što je još uvek prilično veliko za postavljanje na web stranicu.

Slika 2


5

Primena komande Save for Web za sliku JPG formata

1. Komandom Save for the Web, imamo mogućnost da izvršimo balansiranje između kvaliteta slike, minimalne veličine fajla kao i vremena potrebnog da se slika prikaže na web stranici (download time). Dijalog prozor Save for Web omogućava prikaz različitih podešavanja za optimizaciju a i prikaz optimizovnih slika, njihovih veličina i vremena potrebnog za učitavanje.

2. Kada otvorite sliku (File/Open ) koju želite da optimizujete iz padajućeg menija File izaberete opciju Save for Web. (slika 3)

Slika 3


6

3. Dobićete novi prozor u kome se vrši kompresija slike ili degradacija iste. (Slika 4)

Slika 4

A – tabovi za preview (prikaz): Original: prikaza orginalne slike Optimized: prikaz optimizovane slike 2- 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; po defoltu je 28,8Kb/s). 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. C – parametri koji se podešavaju da i se dobila optimizovana slika

A

B C


7

4. U desnom uglu na slici 6 postoje sledeći parametri: a. U opciji Preset (A) birate formata slike jpg ili gif. Ponuđeni formati u

padajućoj listi imaju već svoja podešavanja za optimizovanje koja uglavnom uvek treba dodatno podesiti.

b. U opciji označenoj sa B birate automatski podešene opcije za kvalitet slike "Low", "Medium", "High" i "Maximum".

c. Opcija Optimized(C) prilikom procesa optimizacije mora biti označena. d. Opcija Progressive (D) za format slike JPG omogućava da se slika koja je

postavljena na web stranici učitava deo po deo. e. Opcija Quality (E) omogućava da pomoću klizača podesite kvalite slike.

Prilikom pomeranja klizača veličina slike i vreme potrebno za prikaz se menjaju.

f. Opcija Blur (F) omogućava podešavanje zamućenosti slike čime se dodatno kompresuje fajl. Prilikom pomeranja klizača na veće vrednosti povećava se zamućenost i smanjuje veličina slike kao i vreme za prikaz. Ne treba preterivati sa ovim parametrom. Preporuka su vrednosti od 0,1 do 0,5.

g. Opcija Matte omoguaćava da birate boju za piksele koji su na orginalnoj slici bili providni (transparentni).

h. Opcija ICC Profile se koristi kod nekih browsera za korekciju boja.

Slika 6

A

B

C

DE

F


8

7. Ispod parametara za podešavanje nalaze se dve kartice: Color Table i Image Size. Kartica Color Table je prazna kada je u pitanju JPG slika jer ne može da se prikaže svih 16 miliona boja. 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. Na slici 7 sa A je označen skup alatki pomoću koga možete pomerati sliku koja se obrađuje (Hand Tool), vršiti dodatno seckanje slike (Slice Tool), uvećavanje (Zoom Tool), pipeta za uzimanje uzorka boje (Eyedropper Tool), biranje boja (Eyedropper Color).

9. Na slici 7 sa B je označen ikonica za mogućnost prikaza slike u browseru.

Slika 7

A

B


9

Primena komande Save for Web za sliku GIF formata Veličinu GIF slika možete smanjiti smanjujući broj boja. Kao i kod GIF formata, PNG-8 format efikasno vrši kompresiju područja sa punom bojom. Podešavanja parametara za kompresiju PNG-8 fajla je slično kao i za GIF fajl.

Optimizacioni panel za GIF format: A. Format meni B. Meni za algoritam za redukciju boja C. Dither Algoritam D: Maksimalan broj boja koji se pojavljuje na slici sa mogućnošću promene.

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. 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, telo stranice, footer). Sve što je tekst ili obična puna boja na web šablonu može se realizovati pomoću softvera za izradu web stranica. Samo slike i grafike treba da budu isečene iz šablona I kasnije iskorišćene prilikom realizacije stranice.

1. Otvorite web šablon ili sliku koju želite da isečete

2. Izaberite alatku slice tool i počnite da crtate boksove kojim ćete definisati (označiti) deo koji želite da isečete. (slika 9)

A

B

C D


10

Slika 9

3. Zatim opet pomoću alatke izvršite označavanje dela koji želite da bude sledeći isečak i

tako sve do kraja. 4. Kada vršite isecanje treba da vodite računa o sledećem:

a. Delovi koje isecate bi trebalo da odgovaraju elementima web stranice (logo, baner, navigacija, telo stranice, footer)

b. Za sadržaj isečaka birate onaj deo grafike ili slike koji ne možete da realizujete pomoću Dreamweavera.To znači da deo slike (grafike) koji je popunjen npr.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.

5. 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. 6. Otvoriće se dijalog prozor Slice Options. Izaberite vrstu isečka iz padajuće liste (slika

ili ne) i upišite ime isečka. (slika 10)

Slika 10


11

7. Iz File menija izaberite opciju File / Save for web. Otvoriće se dijalog prozor Save for web.

8. Izaberite isečak koji ste imenovali. 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. Selektujete ostale isečke iz prozora Save for web držeći SHIFT taster. Izaberite opciju

Save. 10. Otvoriće se dijalog prozor Saved Optimized As. Sačuvajte isečke u okviru vašeg

direktorijuma u kome ćete smestiti web sajt. 11. Podesite opcije kao na slici 12.

slika 12

12. Photoshop je kreirao za Vas direktorijum images i napravio posebne slike i grafiku od

isečaka koji ste označavali na šablonu. 13. Na ovaj način web šablon koji ste jednom nacrtali u Photoshopu iskoristite za

popunjavanje web stranica u Dreamweaveru.


12

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, a zatim ove minijaturne prikaze poveže sa većim verzijama ovih slika. Popunjavanjem polja u galeriji Photoshop menja veličinu složenom HTML dokumentu i organizuje ga umesto vas. Pre izrade same galerije, neophodno je da pronađete sopstvenih deset slika koje ćete koristiti. Pri izboru slika za vašu galeriju, neophodno je da pronađete one slike čija je veličina oko 500 K. Na taj način ćete ograničiti veličinu koju će Photoshop koristiti za prikazivanje izabranih slika. Promenom veličine se narušava fokusiranost slike i njen kvalitet. Da biste uradili Web galeriju ispratite sledeće korake:

• Iz padajućeg menija File / Automate izaberite komandu Web Photo Gallery. Otvoriće vam se okvir za dijalog Web Photo Gallery kao što je prikazano na slici 13.

Slika 13

• U okviru za dijalog iz padajuće liste Styles izaberite Simple-Vertical Thumbnails.

Izabrani stil podrazumeva listu minijaturnih slika sa leve strane i uvećanu sliku u centralnom delu.

• Izaberite Banner iz padajuće liste Options. Prikazivanje naslova na web stranici uvek

izgleda lepo, zbog čega smo i podesili njegovu vidljivost.

• U pišite naziv galerije u polju Site Name kao Galerija mobilnih telefona.


13

• U polje Photographer upišite bilo kakav takst. Ovo polje je namenjeno za ime autora slika.

• Polje Date se koristi za prikazivanje datuma objavljivanja galerije.

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. Ova polja su dostupna ukoliko odaberete neki od stilova Table. Pri izboru fonta vaš izbor je ograničen na one fontove za koje postoji generička podrška u pretraživaču. Veličina fonta od 3 označava da će sve upisane informacije biti prikazane na tri nivoa iznad standardne visine slova u HTML dokumentu. Broj 3 je sasvim dovoljan da prikaže ime i sadržaj galerije. Pre izrade galerije otvorite direktorijum u koji treba da prebacite slike koje će biti objavljene na Web galeriji. Takođe je neophodno da kreirate direktorijum u kome će biti smeštene sve slike u galeriji. Povezivanje direktorijuma odakle koristite slike i direktorijuma u kome smeštamo gotovu galeriju sa originalnim i obrađenim slikama, vrši se preko dela dijalog prozora Source Images:

• Izaberite dugme Browse kako biste selektovali lokaciju direktorijuma sa originalnim slikama.

• Kreirajte novi direktorijum pod nazivom WebGalerija.

• Dugmetom Destination selektujte lokaciju direktorijuma koju ste kreirali za galeriju.

• Kliknite na dugme OK.

Definisanjem osnovnih polja i opcija u okviru za dijalog, Photoshop automatski vrši proces otvaranja svih slika i pravljenje njihovih minijaturnih verzija. Automatski proces ujedno tom prilikom vrši i njihovo međusobno povezivanje. Uz pomoć ovog softvera smo napravili zanimljivu Internet galeriju na jednostavan i lak način. Na slici 14 je prikazana galerija Web slika onako kako ona izgleda u pretraživaču Internet Explorer.

Slika 14.


14

Ova galerija omogućava korisniku Internet prezentacije da selektuje na minijaturni prikaz slike sa leve strane, pri čemu se automatski prikazuje njen veći prikaz. Na slici 14 takođe se može videti naslov galerije, prikaz slika u punoj veličini i kontrole za navigaciju. Kada u galeriji imate nekoliko povezanih stranica i više od jednog nivoa, onda se to naziva sistem. Photoshop pravi galeriju čiji je sistem jednostavan i finkcioniše savršeno. Ukoliko vladate HTML kodom ovu galeriju možete učiniti još složenijom. Da bismo obezbedili neohodnu verziju slika određenih veličina za Web, potrebno je izvršiti promenu njihovih originalnih veličina. To ćemo uraditi preko dela Options u okviru prozora za dijalog Web Photo Gallery – slika 15.

• Iz padajuće liste Options izaberite Large Images. • Potvrdite opciju Resize Images i selektujte Custom opciju iz padajuće liste ugrađenih

veličina.

• Upišite 340 vrednost kao parametar u polju za piksele. • Kvalitet vaših slika u galeriji zavisi od parametra JPEG Quality. Za kvalitetnu sliku u

galeriji izaberite opciju Medium iz padajuće liste JPEG Quality.

Slika 15.


15

ZADACI ZA SAMOSTALAN RAD: Zadatak 1 – Prilagođavanje dimenzija i rezolucije (0,3 boda)

1. Izvršiti optimizaciju slike slika_V2_Z1_1.jpg prilagođavanjem dimenzija slike za prikaz na web stranici. Kolika je sada veličina slike?

2. Izvršiti optimizaciju slike slika_V2_Z1_2.jpg prilagođavanjem rezolucije za prikaz na web stranici. Šta se desilo sa dimenzijama slike? Podesiti dimenzije slike za prika na web stranici.

Zadatak 2- Save for Web (JPEG) (0,3 boda) Izvršiti optimizaciju slike slika_V2_Z2 pomoću opcija i parametara komande Save for Web. Optimizovana slika treba da bude veličine do 15 KB. Proveriti prikaz u browseru. Zadatak 3- Save for Web (GIF) (0,3 boda) Izvršiti optimizaciju slike slika_V2_Z3.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. Optimizovana slika treba da bude veličine do 15 KB. Proveriti prikaz u browseru. Zadatak 4- Slice tool (0,3 boda) Pomoću alatke slice tool izvršiti isecanje šablona Sajt_Mobilnih.psd i podešavanje formata isečaka. Zadatak 5- Web galerija (0,3 boda) Napraviti Web galeriju na osnovu slika koje su date u direktorijumu slike_za_galeriju .

druga dodatna vezba dm1 08 cetvrtak · Дигиталне мултимедије 1 3 svaka slika...

Documents