photoshop cs3.pdf

Dio zabave prilikom pregledavanja Web stranica zasigurno čini i aktiviranje veza uključenih u grafičke objekte pomoću kojih prelazite na druge stranice te pokrećete ugrađene animacije. U ovoj lekciji naučit ćete kako u Photoshopu pripremiti datoteke za Web dodavanjem odrezaka za povezivanje s drugim stranicama te izraditi prijelaze i animacije.

PSCS3.indb 380 25.4.2008 4:09:40

Pregled lekcijeU ovoj lekciji naučit ćete kako:

Izrezati sliku u Photoshopu.•

Razlikovati korisničke i automatske odreske.•

Povezivati korisničke odreske s drugim HTML stranicama.•

Izraditi efekte prijelaza za prikazivanje stanja miša.•

Pregledavati efekte prijelaza.•

Izrađivati jednostavne animirane GIF sličice korištenjem slojeva.•

Koristiti palete Layers i Animation za izradu animacijskih nizova.•

Izrađivati animacije na temelju promjene položaja, vidljivosti i efekta •sloja.

Koristiti naredbu Tween za izradu glatkih prijelaza između različitih •postavki prozirnosti i položaja sloja.

Pregledavati animacije unutar Web preglednika.•

Optimizirati fotografije za Web i odabrati odgovarajući način sažimanja.•

Razlikovati GIF i JPEG optimizaciju.•

Za završetak ove lekcije trebat će vam oko sat vremena. Ako je potrebno, sa tvrdog diska obrišite mapu prethodne lekcije i na njega kopirajte mapu Lesson12 s pratećeg CD-a. Dok budete radili na ovoj lekciji, promijenit ćete i spremiti početnu datoteku. Ako vam zatreba originalna početna datoteka, kopirajte ju s pratećeg CD-a.

U ovoj lekciji trebat ćete i aplikaciju za pregledavanje Web stranica kao što je Netscape Communicator, Internet Explorer ili Safari. Veza s Internetom neće vam biti potrebna.

12 Pripremanje datoteka za Web

PSCS3.indb 381 25.4.2008 4:09:41

382Pripremanje datoteka za WebLEKCIJA 12

Pripreme za radU ovoj ćete lekciji dotjerati grafičke elemente za početnu stranicu muzeja španjolske umjetnosti.

Dodat ćete tekstualne hiperveze za povezivanja sa unaprijed izrađenim stranicama. Posjetitelji će pritiskanjem veze moći otvarati povezane stranice. Dodat ćete i efekte prijelaze da biste promijenili izgled stranice bez učitavanja nove te animirati logo Museo Arte u gornjem lijevom kutu.

Započet ćemo s pregledom gotove HTML stranice koju ćete izraditi od PSD datoteke. Nekoliko područja slike reagirat će na pokrete miša. Primjerice, neka područja fotografije mijenjati će izgled kada pokazivač pređe preko njih ili ako ih pritisnete.

1 Pokrenite Photoshop i držite pritisnute tipke Ctrl+Alt+Shift (Windows) ili Command+Option+Shift (Mac OS) da biste učitali podrazumijevane postavke.

2 Pritisnite Yes da biste potvrdili da želite učitati podrazumijevane postavke te Close da biste zatvorili prozor Welcome.

3 Pritisnite gumb Go To Bridge ( ) na vrpci s opcijama alata da biste otvorili Adobe Bridge.

4 Unutar Bridgea, na paleti Favorites u gornjem lijevom kutu, pritisnite Lessons a potom dvaput pritisnite mapu Lesson12 u području pregleda. Dvaput pritisnite mapu 12End a potom dvaput pritisnite mapu po imenu site.

PSCS3.indb 382 25.4.2008 4:09:41

ADOBE PHOTOSHOP CS3 383Učionica u knjizi

5 Desnom tipkom miša (Windows) ili dok držite pritisnutu tipku Control (Mac OS) pritisnite datoteku home.html te iz kontekstualnog izbornika odaberite opciju Open With. Odaberite Web preglednik s kojim ćete otvoriti HTML datoteku.

6 Zamijetite da se u gornjem lijevom kutu nalazi animirani logo. Animacija počinje odmah prilikom otvaranja preglednika.

Napomena: Ako ne vidite animaciju logotipa nakon što se datoteka otvori u pregledniku, ponovno učitajte stranicu pomoću kontrola u pregledniku (opcija Reload).

7 Prijeđite pokazivačem miša preko tema na lijevoj strani Web stranice i preko slika. Zamijetite kako se oblik pokazivača mijenja – strelica postaje prst.

PSCS3.indb 383 25.4.2008 4:09:41


8 Pritisnite anđela u sredini donjeg dijela slike da biste otvorili prozor Zoomify. Isprobajte kontrole koje se u njemu nalaze tako što ćete ih pritisnuti i promatrati kako povećavaju i smanjuju prikaz slike.

9 Da biste se vratili na početnu stranicu zatvorite prozor Zoomify.

10 Pritisnite neku drugu sliku da biste ju pregledali u posebnom prozoru. Kada završite, zatvorite prozor preglednika.

11 Na početnoj stranici pritisnite neku od tema da biste došli do povezanih stranica. Da biste se vratili na početnu stranicu pritisnite tekst „Museo Arte“ odmah ispod logotipa u gornjem lijevom dijelu prozora.

12 Kada završite s pregledom Web stranice zatvorite preglednik i vratite se u Bridge.

U prethodnim koracima upoznali ste dva tipa veza: odreske (kod tema na lijevoj strani stranice) i slike (dječak, stranica Spanish Masters i anđeo).

Odresci (engl. slices) su pravokutna područja slike koja definirate na temelju slojeva, vodilica ili preciznih odabira na slici izrađenih pomoću alata Slice. Kada na slici definirate odreske Photoshop izrađuje HTML tablicu ili CSS stil koji će sadržavati i poravnavati odreske. Ako želite, možete generirati i pregledati HTML datoteku koja će povezivati sliku s odrescima zajedno s tablicom ili CSS stilom.

Slikama možete dodavati i hiperveze (engl. hyperlinks). Posjetitelj u tom slučaju može pritisnuti sliku da bi otvorio povezanu stranicu. Za razliku od odrezaka, koji su uvijek pravokutnog oblika, slike mogu imati proizvoljan oblik.

PSCS3.indb 384 25.4.2008 4:09:41


Postavljanje radnog prostora Web DesignKao vodeća aplikacija za pripremu fotografija za Web, Photoshop ima ugrađene i osnovne alate za izradu HTML-a. Da biste pojednostavili pristup do tih alata kada radite s Web stranicama, možete prilagoditi podrazumijevani raspored paleta, alatnih vrpci i prozora koristeći unaprijed definirani radni prostor Photoshopa.

1 Unutar Bridgea dvaput pritisnite gumb Go Up ( ) da biste se pomaknuli za dvije razine u hijerarhiji mapa i došli do mape 12Start. Nakon toga, dvaput pritisnite umanjeni prikaz datoteke 12Start.psd da biste ju otvorili u Photoshopu.

2 Odaberite Window > Workspace > Web Design. U dijaloškom okviru koji se otvorio vidjet ćete upozorenje da će promjene utjecati na izbornike i prečace na tipkovnici. Pritisnite Yes.

PSCS3.indb 385 25.4.2008 4:09:44


3 Otvorite neki od glavnih izbornika da biste vidjeli njihove opcije. Vidjet ćete opcije istaknute grimiznom bojom – njih ćete najčešće koristiti dok pripremate slike za Web.

4 Odaberite File > Save As pa promijenite ime datoteke u 12Working.psd da biste spremili radni prostor. U dijaloškom okviru Maximize Compatibility pritisnite OK.

Izrada odrezakaKada pravokutno područje na slici definirate kao odrezak, Photoshop stvara HTML tablicu koja će ga sadržavati i poravnavati. Kad definirate odreske, možete ih pretvoriti u gumbe i programirati za određenu funkciju na Web stranici.

Nije moguće izraditi samo jedan odrezak, osim ako ne sadržava čitavu sliku, što je praktički beskorisno. Sa svakim novim odreskom koji izradite unutar fotografije (korisnički odrezak) automatski se izrađuje drugi odrezak (automatski odrezak) koji obuhvaća područje fotografije izvan korisničkog odreska.

PSCS3.indb 386 25.4.2008 4:09:44


Odabiranje odrezaka i postavljanje njihovih opcija

Započet ćete sa odabiranjem gotovog odreska u datoteci Start. Umjesto vas smo izradili odrezak čije dimenzije (u pikselima) točno odgovaraju dimenzijama animacije koju ćete odresku dodati na kraju ove lekcije.

1 Na paleti alata odaberite alat Slice Select ( ) sakriven ispod alata Slice.

2 U gornjem lijevom kutu slike pritisnite odrezak označen brojem 01 u malom plavom pravokutniku. Pojaviti će se zlatni okvir koji govori da je odrezak odabran.

Pravokutnik označen brojem 01 uključuje gornji lijevi kut fotografije. Na njemu se nalazi i mala ikona ili značka koja nalikuje slici planina. Plava boja pravokutnika govori da je to korisnički odrezak, odrezak koji smo izradili u datoteci Start.

Zamijetite i sive odreske – odrezak označen brojem 02 s desne strane i odrezak 03 odmah ispod odreska 01. Siva boja govori da su to automatski odresci, izrađeni automatski prilikom izrade korisničkog odreska. Sličica planina govori da odrezak sadrži slikovni sadržaj. Pogledajte izdvojeni odlomak „O simbolima odrezaka“ na sljedećoj stranici za opis različitih simbola na odrescima.

PSCS3.indb 387 25.4.2008 4:09:44


O simbolima odrezakaPlavi i sivi simboli odreska, odnosno značke, u Photoshopovom prozoru slike i dijaloškom okviru Save For Web And Devices mogu biti korisni podsjetnici ako ih naučite čitati. Svaki odrezak može sadržavati onoliko znački koliko je potrebno. Sljedeće značke pojavljuju se pod navedenim uvjetima:

( ) Broj odreska. Brojevi su poredani u nizu od lijeva na desno i od vrha prema dnu slike

( ) Odrezak sadrži sliku.

( ) Odrezak ne sadrži sliku.

( ) Odrezak se temelji na sloju, odnosno izrađen je od sloja.

( ) Odrezak je povezan sa drugim odrescima (radi optimizacije).

3 Pomoću alata Slice Select dvaput pritisnite odrezak 01. Otvorit će se dijaloški okvir Slice Options. Photoshop standardno imenuje svaki odrezak na temelju naziva datoteke i broja odreska – u ovom slučaju 12Start_01.

Odresci nisu osobito korisni ako ih ne konfigurirate. Opcije odreska uključuju naziv odreska i URL koji se otvara kada korisnik pritisne odrezak.

Napomena: Opcije možete postaviti i za automatski odrezak, ali ga time pretvarate u korisnički.

4 U dijaloškom okviru Slice Options unesite naziv Logo Animation. U polje URL unesite #. Znak ljestve omogućava da provjerite funkcionalnost gumba bez zadavanja stvarne veze. To je vrlo korisno u ranoj fazi Web dizajna kada samo želite provjeriti izgled i ponašanje gumba.

5 Pritisnite OK da biste primijenili promjene. U nastavku lekcije izradit ćete animiranu verziju slike koja će zamijeniti postojeću u konačnom dizajnu.

PSCS3.indb 388 25.4.2008 4:09:45


Izrada gumba za kretanje kroz stranice

Sada ćete na lijevoj strani izrezati gumbe za kretanje kroz stranice tako da im možete dodijeliti prijelaze. Možete odabirati gumb po gumb i dodavati im opcije za kretanje ili istu stvar učiniti mnogo brže.

1 Na paleti alata odaberite alat Slice ( ) ili na tipkovnici pritisnite kombinaciju tipki Shift+K da biste alat aktivirali putem prečaca na tipkovnici.

Zamijetite vodilice postavljene iznad i ispod riječi na lijevoj strani slike.

2 Pomoću vodilica na lijevoj strani slike povucite dijagonalno iz gornjeg lijevog kuta iznad riječi „About Museo Arte“ do vodilice ispod riječi „Contact“ da biste u odrezak uključili svih pet riječi.

Plavi pravokutnik, sličan onome za odrezak 01, pojavio se u gornjem lijevom kutu odreska koji ste upravo izradili i koji je dobio oznaku 04. Plava boja govori da se radi o korisničkom odresku a ne automatskom.

Originalni sivi pravokutnik za automatski odrezak 03 ostaje nepromijenjen, no područje uključeno u odrezak 03 je manje i pokriva samo mali pravokutnik iznad teksta.

Zlatni okvir pokazuje rubove odreska i govori da je odrezak odabran.

3 Ako je odabran alat Slice, pritisnite kombinaciju tipki Shift+K na tipkovnici da biste došli do alata Slice Select. Opcije odreska na alatnoj vrpci iznad prozora slike se mijenjaju i pojavljuje se niz gumba za poravnavanje.

Sada ćete od odabranog odreska izraditi pet gumba.

4 Pritisnite gumb Divide na vrpci s opcijama alata iznad prozora slike.

PSCS3.indb 389 25.4.2008 4:09:45


5 U dijaloškom okviru Divide Slice potvrdite polje Divide Horizontally Into i upišite 5 u polje Slices Down, Evenly Spaced. Pritisnite OK.

Sada ćete svakom odresku dodijeliti naziv i pripadajuću hipervezu.

6 Pomoću alata Slice Select dvaput pritisnite prvi odrezak, s tekstom About Museo Arte, da biste otvorili dijaloški okvir Slice Options.

7 U dijaloškom okviru Slice Options odrezak nazovite About, u polje URL upišite about.html a u polje Target _self. (Pazite da ne zaboravite podvlaku ispred slova s.) Pritisnite OK.

Opcija Target zadaje kako će se povezana datoteka otvoriti kada posjetitelj pritisne hipervezu. Ako ju postavite na _self povezana datoteka se otvara u istom prozoru u kojem je prikazana i izvorna datoteka.

PSCS3.indb 390 25.4.2008 4:09:45


8 Ponovite šesti i sedmi korak na preostalim odrescima, počevši od drugog po redu (gledano s vrha), kako slijedi:

Dugi odrezak nazovite • Tour, u polje URL unesite tour.html a u polje Target _self.

Treći odrezak nazovite • Exhibits, u polje URL unesite exhibits.html a u polje Target _self.

Četvrti odrezak nazovite • Members, u polje URL unesite members.html a u polje Target _self.

Peti odrezak, koji se nalazi na dnu, nazovite • Contact, u polje URL unesite contact.html a u polje Target _self.

Važno: Upišite ove podatke točno kao što je napisano tako da odgovaraju stranicama koje smo unaprijed izradili za vas a s kojima ćete povezati ove gumbe.

9 Odaberite File > Save da biste spremili promjene.

Ako vas indikatori automatskih odrezaka ometaju, odaberite alat Slice Select te

pritisnite gumb Hide Auto Slice na vrpci s opcijama alata. Budući da vam vodilice više nećete trebati, možete ih sakriti tako što ćete odabrati opciju View > Show > Guides.

Izrada odrezaka na temelju slojeva

Odreske, osim pomoću alata Slice, možete izrađivati i na temelju slojeva. Prednost korištenja slojeva za izradu odrezaka je u tome što Photoshop stvara odrezak prema dimenzijama sloja i uključuje u njega sve podatke o slici. Kada uredite sloj, premjestite ga ili na njega primijenite efekt, odrezak izrađen na temelju sloja će se prilagoditi novim vrijednostima.

1 Na paleti Layers odaberite sloj Image 1. Ako ne vidite cijelu paletu Layers, povucite ju iz sidrišta i proširite tako da mišem povučete njen donji desni kut.

PSCS3.indb 391 25.4.2008 4:09:46


2 Odaberite Layer > New Layer Based Slice. Unutar slike će se pojaviti plavi pravokutnik označen brojem 04. Brojčana oznaka koja se pojavljuje nastala je u skladu s pozicijom odreska, gdje numeracija počinje u gornjem lijevom kutu slike.

3 Alatom Slice Select dvaput pritisnite odrezak i nazovite ga Image 1. U polje URL upišite image1.html a u polje Target _blank. Unos _blank za opciju Target uzrokovat će otvaranje povezane stranice u novoj instanci Web preglednika. Pritisnite OK.

Pazite da gornje opcije postavite točno kako je napisano, tako da odgovaraju gotovoj stranici s kojom se ovaj odrezak povezuje.

Sada ćete izraditi odrezak za sloj Exhibit Info.

4 Na paleti Layers odaberite sloj Exhibit Info.

5 Odaberite Layer > New Layer Based Slice. Pojavit će se novi odrezak označen brojem 08. Unutar prozora slike dvaput pritisnite ovaj novi odrezak alatom Slice Select. U dijaloškom okviru Slice Options odrezak nazovite Exhibit Info. U polje URL unesite exhibitinfo.html a u polje Target _blank. Pritisnite OK.

6 Ponovite četvrti i peti korak za sloj Image 2. (Novi odrezak bit će označen brojem 18.) Odrezak nazovite Card. U polje URL upišite card.html a u polje Target _blank. Pritisnite OK.

Vjerojatno ste primijetili da dijaloški okvir, osim ove tri opcije koje ste zadali, sadrži još opcija. Za više informacija o njima pogledajte Photoshopov sustav pomoći.


PSCS3.indb 392 25.4.2008 4:09:46


O izradi odrezakaNavest ćemo i nekoliko drugih metoda za izradu odrezaka koje možete sami isprobati.

• Možete izraditi i No Image odreske te im dodati tekst ili izvorni HTML kod. No Image odresci mogu imati pozadinsku boju i biti spremljeni kao dio HTML datoteke. Glavna prednost ove vrste odrezaka ogleda se kod upotrebe teksta budući da se tekst može dodati i uređivati u programu za uređivanje HTML koda te se ne morate vraćati u Photoshop da biste ga uređivali. Međutim, ako tekst bude prevelik, prelomiti će HTML tablicu i poremetiti izgled dokumenta.

• Ako u dizajnu koristite vodilice možete odjednom podijeliti čitavu sliku na odreske pomoću gumba Slices From Guides koji se nalazi na vrpci s opcijama alata Slice. Međutim, ovu tehniku morate koristiti s oprezom budući da tako poništavate sve postojeće odreske i njima pridružene opcije. Ovom metodom se izrađuju samo korisnički odresci, kojih možda i nećete trebati toliko mnogo.

• Ako želite izraditi odreske jednake veličine, ravnomjerno raspoređene i poravnate, pokušajte izraditi jedan odrezak koji obuhvaća čitavo područje. Nakon toga, pomoću gumba Divide koji se nalazi na vrpci s opcijama alata Slice Select podijelite originalni odrezak okomito i vodoravno, na onoliko dijelova koliko vam je potrebno.

• Ako želite poništiti vezu između odreska temeljenog na sloju i pripadajućeg sloja, dovoljno je da odrezak pretvorite u korisnički odrezak. Dvaput ga pritisnite alatom Slice Select i zadajte mu opcije.

Dodavanje animacijeUnutar Photoshopa možete izraditi animaciju od samo jedne slike korištenjem animiranih GIF datoteka. Animirana GIF datoteka sastoji se od niza slika, odnosno sličica (engl. frames). Svaka se sličica malo razlikuje od prethodne što daje iluziju pokreta kada se prikazuju određenom brzinom – isto kao i kod animiranog filma. Animaciju možete izraditi na nekoliko načina:

Možete upotrijebiti gumb Duplicate Selected Frame na paleti Animation da biste •izradili animacijske sličice a potom na paleti Layers definirati stanja slike pridružena svakoj animacijskoj sličici.

Možete koristiti značajku Tween za izradu novih sličica koje izobličuju tekst ili •mijenjaju prozirnost sloja, njegov položaj ili efekte da bi se stvorila iluzija pokreta nekog elementa okvira, odnosno njegovog postepenog pojavljivanja ili iščezavanja.

Višeslojne Adobe Photoshop ili Adobe Illustrator datoteke možete pretvoriti u •animacije tako da svaki sloj postaje animacijska sličica.

PSCS3.indb 393 25.4.2008 4:09:46


U ovoj ćete lekciji isprobati prve dvije tehnike.

Datoteka animacije mora biti spremljena u formatu GIF ili kao QuickTime film. Nije moguće spremati animacije kao JPEG ili PNG datoteke.

Izrada animirane GIF datoteke

Da bismo Web stranicu učinili zanimljivijom, animirat ćemo logo Museo Arte tako da izgleda kao da „pleše“ u gornjem lijevom kutu stranice. Tekst ćemo animirati zajedničkim korištenjem paleta Animation i Layers u radnom prostoru Web Design (Window > Workspace > Web Design).

1 Na paleti Layers pritisnite trokut pored grupe Logo Animation da biste proširili njen sadržaj. Grupa se sastoji od tri komponente – slova M, slova A te teksta Museo Arte – na odvojenim slojevima.

Izraditi ćete animaciju na kojoj se dva slova pojavljuju i pomiču do konačnog položaja. Na kraju će slova zasjati a naslov Museo Arte postepeno se prikazati.

2 Odaberite Window > Animation da biste prikazali paletu Animation u donjem lijevom dijelu prozora slike. Povucite donji desni kut palete Animation da biste ju proširili i iskoristili dostupan vodoravni prostor u radnom području.

Opcionalno, paletu Animation možete odvući i bliže prozoru fotografije tako da svi dijelovi radnog područja budu zajedno.

3 Na paleti Animation pritisnite gumb Duplicate Selected Frame. Time ćete izraditi novi okvir koji se temelji na prethodnom.

4 Na paleti Layers odaberite sloj M.

5 Odaberite alat Move ( ) na paleti alata. Dok držite pritisnutu tipku Shift na tipkovnici (da biste se ograničili samo na vodoravno pomicanje) povucite mišem slovo M do lijeve strane prozora slike. Pritisnite na tipkovnici strelicu nalijevo i pomaknite slovo M sasvim lijevo, tako da se jedva može vidjeti.

PSCS3.indb 394 25.4.2008 4:09:46


Ipak, pazite da ne izvučete slovo u potpunosti iz prozora fotografije.

6 Na paleti Layers pritisnite sloj A.

7 U prozoru slike pomoću alata Move povucite slovo A ravno prema gore, sve dok gotovo ne izađe iz okvira. Ako je potrebno, držite pritisnutu tipku Shift na tipkovnici da biste se ograničili samo na pomicanje u okomitom smjeru.

Drugi način za animiranje objekta je mijenjanje njegove prozirnosti, tako da s vremenom iščezne.

8 Na paleti Layers odaberite sloj Museo Arte. Smanjite vrijednost opcije Opacity na 0%.

PSCS3.indb 395 25.4.2008 4:09:46


9 Na paleti Layers odaberite sloj M te smanjite njegovu prozirnost na 10%. Nakon toga odaberite sloj A pa i njegovu prozirnost smanjite na 10%.


Izrada međusličica za pomicanje i prikazivanje sadržaja slojeva

Sada ćete izraditi sličice koje će predstavljati prelazna stanja između dvije postojeće slike. Kada promijenite položaj, prozirnost ili efekt na bilo kojem sloju između dvije animacijske sličice, možete zadati Photoshopu da automatski izradi zadani broj međusličica.

Započet ćete tako što ćete sličicu 2 kao početno stanje animacije.

1 Na paleti Animation povucite sličicu 2 lijevo od sličice 1. One će odmah promijeniti imena.

Sada ćete dodati međusličicu između ove dvije slike.

2 Na paleti Animations provjerite je li odabran okvir 1 a potom pritisnite gumb Tween ( ) na dnu palete.

3 U dijaloškom okviru Tween postavite sljedeće opcije (ako već nisu zadane):

S padajućeg popisa Tween With odaberite Next Frame.•

U polje Frames to Add upišite • 5.

Pritisnite radio-gumb All Layers.•

U dijelu Parameters odaberite sve opcije.•

PSCS3.indb 396 25.4.2008 4:09:47


4 Pritisnite OK da biste zatvorili dijaloški okvir.

5 Da biste vidjeli kako izgleda animacija pritisnite gumb Play na dnu palete Animation. Tako ćete pregledati animaciju, koja će ovdje možda izgledati malo isprekidano, no unutar Web preglednika će sve biti u redu.

PSCS3.indb 397 25.4.2008 4:09:47


Izrada međusličicaNaredbu Tween upotrijebit ćete da biste automatski dodali ili modificirali niz sličica između dvije postojeće sličice animacije – ravnomjerno mijenjajući atribute slojeva (položaj, prozirnost ili parametre efekta) između novih sličica tako da se postigne efekt glatke promjene ili kretanja. Primjerice, ako želite da sloj iščezne, postavite prozirnost sloja u početnoj sličici na 100% a prozirnost istog sloja u završnoj sličici na 0%. Kada izradi i umetne međusličice između početnog i završnog stanja, prozirnost sloja će se postupno smanjivati od sličice do sličice.

Naziv postupka, „tweening“ nastao je od izraza „in betweening“ koji se kod klasične animacije crteža koristi za opisivanje ovog procesa. Automatskom izradom međusličica se bitno smanjuje vrijeme potrebno za izradu animacijskih efekata kao što su postupno pojavljivanje ili iščezavanje te pomicanje objekta po slici. Dodane međusličice mogu se pojedinačno uređivati nakon što ih izradite.

Kada ste odabrali jednu sličicu, možete odlučiti hoćete li međusličice dodati između te sličice i one koja joj prethodi ili koja slijedi. Ako odaberete dvije susjedne sličice, međusličice će biti dodane između njih. Ako odaberete više od dvije sličice, postojeće sličice između prve i posljednje sličice odabira će se nakon umetanja međusličica promijeniti. Ako odaberete prvu i posljednju sličicu unutar jedne animacije, te se sličice tretiraju kao sličice u nizu a umetnute međusličice se dodaju iza posljednje. (Ova je metoda umetanja međusličica korisna ako se animacija treba ponavljati beskonačan broj puta.)

Napomena: Ne možete odabrati dvije sličice koje nisu susjedne i između njih umetnuti međusličice.

Animiranje stila slojaKada ste dodavali međusličice u prethodnoj vježbi, možda ste primijetili polje za potvrdu Effects u dijaloškom okviru Tween. Sada ćete animirati efekt primijenjen na sloj, odnosno stil sloja. Konačni rezultat bit će bljesak svjetla koji se pojavljuje i nestaje iza slova M i A.

1 Na paleti Animation odaberite sličicu 7 i pritisnite gumb Duplicate Selected Frame da biste napravili novu sličicu sa istim postavkama kakve ima i sličica 7. Ostavite sličicu 8 odabranu.

2 Na paleti Layers odaberite sloj slova M. S pomoćnog izbornika Layers Style ( ) na dnu palete odaberite opciju Outer Glow. U dijaloškom okviru Layer Style, postavite sljedeće opcije:

S padajućeg popisa Blend Mode odaberite Screen.•

Opciju Opacity postavite na vrijednost 55 a Spread na 0%.•

Veličinu postavite na 5.•

PSCS3.indb 398 25.4.2008 4:09:47


Da biste odabrali boju, pritisnite uzorak boje i odaberite svijetlo žutu boju s palete.•

3 Pritisnite OK da biste primijenili stil na sloj M. Sada ćete isti efekt kopirati i na sloj A.

4 Na paleti Layers, dok na tipkovnici držite pritisnutu tipku Alt (Windows) ili Option (Mac OS), povucite ikonu Effect sa sloja M do sloja A. Tako ćete kopirati efekt na sloj A.

PSCS3.indb 399 25.4.2008 4:09:47


Sada ćete izraditi međusličice za kopirane efekte tako da slova zabljesnu na kraju animacije.

5 Na paleti Animation odaberite sličicu 7. Pritisnite gumb Tween pri dnu palete.

6 U dijaloškom okviru Tween, unesite vrijednost 2 u polje Frames To Add. Provjerite je li u dijelu Parameters odabrana opcija Effects te pritisnite OK.

7 Na paleti Animation odaberite sličicu 7 te pritisnite gumb Duplicate Selected Frame da biste izradili novu sličicu sa istim postavkama kao i za sličicu 7.

8 Povucite novu sličicu 8 na kraj animacije, gdje će postati sličica 11.

Postavit ćete ovu animaciju tako da se na Web stranici izvede samo jednom.

9 Provjerite je li s pomoćnog izbornika na dnu palete Animation odabrana opcija Once.

10 Pritisnite gumb Play na dnu palete Animation i pregledajte animaciju.


Izvoz HTML koda i slikaKao i tesar koji iscrta šablonu prije nego što konačno izreže drvo, spremni ste za izradu završnih odrezaka, definiranje veza i izvoženje datoteke čime će se dobiti HTML stranica koja sve odreske prikazuje kao cjelinu.

Važno je da grafika za Web bude što manja da bi se stranice brzo otvarale. Photoshop ima ugrađene alate koji vam mogu pomoći da procijenite potreban stupanj sažimanja datoteka pri izvoženju odrezaka tako da se njihova kvaliteta ne umanji previše. Uobičajeno je pravilo koristiti JPEG sažimanje za fotografije te GIF za crteže s manjim brojem boja – u ovoj lekciji to je slučaj s područjima oko tri glavne fotografije na stranici.

PSCS3.indb 400 25.4.2008 4:09:47


Koristit ćete Photoshopov dijaloški okvir Save For Web and Devices u kojem možete usporediti postavke i razine sažimanja za različite formate datoteka.

1 Odaberite File > Save For Web And Devices.

2 U dijaloškom okviru Save For Web and Devices pritisnite jezičak 2-Up.

3 U dijaloškom okviru odaberite alat Slice Select ( ) a potom odaberite odrezak 4 s lijeve strane prozora. Pogledajte veličinu slike u donjem lijevom kutu prozora.

4 Ako je potrebno, premjestite sliku u dijaloškom okviru pomoću alata Hand i prilagodite prikaz.

5 S pomoćnog izbornika Preset na desnoj strani dijaloškog okvira odaberite JPEG Medium. Pogledajte veličinu slike prikazanu u donjem lijevom kutu.

Sada na desnoj strani palete 2-Up pogledajte kako bi slika izgledala i koliko bi bila velika u formatu GIF.

6 Alatom Slice Select odaberite odrezak 04 (portret dječaka). S padajućeg popisa Preset na desnoj strani dijaloškog okvira odaberite opciju GIF 32 No Dither.

PSCS3.indb 401 25.4.2008 4:09:48


Zamijetite kako obojano područje na desnom portretu izgleda manje kvalitetno a veličina slika je gotovo ista.

Na temelju onog što ste upravo naučili odabrat ćete sažimanje za pojedinačne odreske stranice.

7 Pritisnite jezičak Optimized u gornjem lijevom kutu dijaloškog okvira.

8 Odaberite alat Slice Select te, dok držite pritisnutu tipku Shift na tipkovnici, pritisnite sve tri glavne slike da biste ih odabrali. Sa padajućeg popisa Preset odaberite JPEG Medium.

9 U prozoru Preview, dok držite pritisnutu tipku Shift, pritisnite sve preostale odreske da biste ih odabrali te s popisa Preset odaberite GIF 64 Dithered.

10 Pritisnite Save i odaberite mapu Lesson12/12Start/Museo koja sadrži ostatak Web lokacije i stranice s kojima su odresci povezani.

11 Za format odaberite HTML and Images. Prihvatite podrazumijevane postavke te pod Slices odaberite All Slices. Nazovite datoteku home.html te pritisnite Save.

12 U Bridgeu pritisnite Lessons na paleti Favorites, u gornjem lijevom kutu prozora preglednika. Dvaput pritisnite mapu Lesson12 u području pregleda. Zatim dvaput pritisnite mapu 12Start a potom Museo.

13 Desnom tipkom miša (Windows) ili dok držite pritisnutu tipku Control (Mac OS) pritisnite datoteku home.html te odaberite opciju Open With sa kontekstualnog izbornika. Odaberite Web preglednik da biste otvorili HTML datoteku.

14 U Web pregledniku pregledajte HTML datoteku i isprobajte hiperveze:

Pomaknite pokazivač miša do odrezaka koje ste izradili. Zamijetite da pokazivač •mijenja oblik u šaku sa ispruženim prstom što govori da se radi o gumbu.

Pritisnite portret dječaka da biste sliku vidjeli u punoj veličini u posebnom •prozoru.

Pritisnite vezu Spanish Masters i pregledajte prozor koji se otvorio.•

Pritisnite tekstualne veze sa lijeve strane da biste vidjeli druge Web stranice.•

15 Kada završite s pregledavanjem zatvorite preglednik Weba.

PSCS3.indb 402 25.4.2008 4:09:48


Optimiziranje slika za WebOptimiziranje je proces odabira formata, rezolucije i postavki kvalitete da bi fotografija bila vizualno ugodna i veličinom prikladan za upotrebu na Web stranicama. Jednostavno rečeno, trebate balansirati između veličine datoteke i dobrog izgleda. Ne postoji jedinstvena kombinacija postavki koja odgovara svim vrstama slikovnih datoteka. Optimizacija zahtjeva čovjekovu prosudbu i dobro oko.

Opcije sažimanja variraju ovisno o formatu datoteke koji koristite za spremanje slike. Najčešće se koriste JPEG i GIF datoteke. JPEG format projektiran je tako da sačuva široki spektar boja, fine varijacije svjetline i neprekidne tonove, što je bitno kod fotografija. U ovom formatu slike se mogu prikazivati u milijunima boja. Format GIF prikladan je za sažimanje slika sa malim brojem boja, kao što su crteži, logotipi i ilustracije s tekstom. Tu se za prikaz koristi paleta od 256 boja a ovaj format podržava i prozirnu pozadinu.

Photoshop nudi širok raspon kontrola za smanjivanje datoteke uz istovremeno optimiziranje prikaza na zaslonu. Obično ćete sliku optimizirati prije nego što je spremite u HTML datoteku. U dijaloškom okviru Save For Web And Devices možete usporediti originalnu sliku sa jednom ili više sažetih alternativa, uz mogućnost prilagođavanja postavki. Za više informacija o optimiziranju slika u formatima GIF i JPEG pogledajte Photoshopov sustav pomoći.

1 Dok je JPEG ili GIF datoteka otvorena u Photoshopu odaberite opciju File > Save For Web And Devices.

2 U dijaloškom okviru Save For Web And Devices pritisnite jezičak 4-Up. U gornjem lijevom kutu prikazana je originalna slika. Photoshop automatski izrađuje tri alternative – JPEG sliku visoke, srednje ili niske kvalitete, odnosno tri GIF opcije.

3 Usporedite razlike u kvaliteti i veličini te pritisnite bilo koju optimiziranu verziju da biste eksperimentirali sa formatom i postavkama kvalitete, nastavljajući s prosudbom veličine datoteke u odnosu na kvalitetu.

4 Ako ste zadovoljni rezultatom, pritisnite Save da biste zadali ime datoteke i spremili ju. Ako ne želite spremiti datoteku pritisnite Cancel.

Opcije JPEG sažimanja

Opcije GIF sažimanja

PSCS3.indb 403 25.4.2008 4:09:48


Dodavanje interaktivnostiAko ste uvijek željeli uvećavati fotografiju i pregledavati detalje, sada to i možete. Novost u Photoshopu CS3 jest mogućnost izrade interaktivnih fotografija koje se mogu povećavati i pregledavati u bilo kojem pregledniku.

Koristeći značajku Zoomify možete na Web postaviti slike visoke rezolucije koje će korisnici moći pregledavati i uvećavati da bi se bolje vidjeli detalji. Slika osnovne veličine preuzima se u isto vrijeme kad i jednako velika JPEG datoteka. Photoshop će izvesti JPEG datoteke i HTML datoteku koje možete postaviti na Web.

1 Unutar Bridgea dvaput pritisnite mapu Lesson12. Nakon toga dvaput pritisnite mapu 12Start a potom datoteku Card.jpg da biste ju otvorili.

Ovo je velika rasterska slika koju ćete izvesti u HTML koristeći se značajkom Zoomify.

Sada ćete sliku anđela pretvoriti u datoteku koja će bit povezana s jednom od hiperveza na početnoj stranici.

2 Odaberite File > Export > Zoomify.

3 U dijaloškom okviru Zoomify Export odaberite mapu Lesson12/12Start/Museo. Za osnovnu sliku unesite Card u polje Base Name, postavite kvalitetu na 12, opciju Width na 600 a opciju Height na 400. Potvrdite i polje Open In Web Browser.

4 Pritisnite OK da biste pregledniku Weba poslali HTML kôd i fotografije.

PSCS3.indb 404 25.4.2008 4:09:49


Sada ćete zadnji put provjeriti izgled slike u pregledniku.

4 Unutar Bridgea dvaput pritisnite mapu Lesson12. U području pregleda dvaput pritisnite mapu 12Start a nakon toga Museo.

5 Desnom tipkom miša (Windows) ili dok držite pritisnutu tipku Control (Mac OS) pritisnite datoteku Card.html te s kontekstualnog izbornika odaberite opciju Open With. Odaberite Web preglednik da biste otvorili HTML datoteku.

6 Upotrijebite kontrole u prozoru Zoomify da biste testirali vezu za povećavanje slike anđela.

Čestitamo! Naučili ste kako pomoću odrezaka, efekata prijelaza i značajke Zoomify možete Web stranici dodati animacije i interaktivnost.

PSCS3.indb 405 25.4.2008 4:09:49


DODATNA TEHNIKA Ako gumbima dodijelimo efekt prijelaza učinit ćemo

ih još očitijima. Kada radite na sadržaju za Web, dobro je korisniku jasno priopćiti gdje se nalazi gumb. U ovoj lekciji, jedini znak da se radi o gumbu je promjena oblika pokazivača iz strelice u šaku sa ispruženim prstom kada se nađe iznad gumba. Većini korisnika to nije dovoljno.

Evo kako možete dodatno istaknuti gumb: izraditi ćete drugo stanje za odrezak gumba koje će se prikazati kada korisnik postavi pokazivač miša iznad odreska. To ćete postići tako što ćete promijeniti vidljivost sloja, izvesti ga u posebnu mapu i uključiti ga u datoteku s već napisanim HTML kodom koji osigurava funkcionalnost prijelaza.

1 Vratite se na datoteku 12Working.psd.

2 Na paleti Layers pritisnite trokutić pored Menu Color Bkgds da biste vidjeli njene slojeve.

3 Pritisnite sličicu oka lijevo od slojeva iz grupe Menu Color Bkgds da biste prikazali ili sakrili slojeve od cell_1 do cell_5.

Sada pogledajte što se događa sa odrescima gumba. Kada ih odaberete postat će tamnosivi. Gumbi tako trebaju izgledati kada preko njih prijeđe pokazivačem miša.

4 Provjerite je li sloj Menu Color Bkgd vidljiv te odaberite File > Save For Web And Devices.

5 U prozoru slike pomoću alata Slice Select ( ) i dok držite pritisnutu tipku Shift odaberite svih pet gumba.

6 U dijaloškom okviru Save For Web And Devices provjerite je li odabran format GIF. Pritisnite Save.

7 U dijaloškom okviru Save Optimized As dođite do mape Lesson 12 te pritisnite New Folder. Nazovite novu mapu Over States. S padajućeg popisa Format odaberite Images Only. Na padajućem popisu Settings ostavite odabranu opciju Default Settings a s padajućeg popisa odaberite Selected Slices i pritisnite Save.

PSCS3.indb 406 25.4.2008 4:09:49


8 Dođite do mape Over States te otvorite jednu od datoteka koje ste upravo izvezli.

Kada biste radili stvarnu Web stranicu te datoteke biste uvezli u program za uređivanje HTML koda (primjerice Adobe® Dreamweaver® CS3) i programirali stranicu tako da slike iz mape Over States zamijene originalne odreske kada korisnik pokazivačem miša prijeđe preko njih.

Izradili smo model da biste vidjeli kako bi završena Web stranica trebala izgledati.

9 U Bridgeu pritisnite mapu Lesson12. Dvaput pritisnite mapu 12End a nakon toga mapu Site.

10 Desnom tipkom miša (Windows) ili dok držite pritisnutu tipku Control (Mac OS) pritisnite datoteku home.html te sa kontekstualnog izbornika odaberite opciju Open With. Odaberite Web preglednik u kojem želite otvoriti HTML datoteku.

PSCS3.indb 407 25.4.2008 4:09:49

PonavljanjePitanja za ponavljanje1 Što su to odresci? Kako ih izrađujete?

2 Opišite prijelaze te stanje Over.

3 Opišite jedan jednostavan način za izradu animacije u Photoshopu.

4 Koji se formati datoteka mogu koristiti za spremanje animacija?

5 Što je to optimiziranje slike i kako se slike optimiziraju za Web?

Odgovori1 Odresci su pravokutna područja slike koja definiramo da bismo na njih primijenili različite metode optimiziranja i kojima možemo pridružiti animirane GIF datoteke, hiperveze i prijelaze. Odreske možemo izraditi pomoću alata Slice ili pretvaranjem slojeva u odreske pomoću izbornika Layer.

2 Prijelaz je efekt koji mijenja izgled dijela Web stranice a da se pritom ne mora učitavati nova Web stranica – kao što primjerice gumb mijenja boju kada korisnik mišem prijeđe preko njega. Stanje Over pokazuje da se pokazivač miša nalazi unutar definiranog područja ali da korisnik još nije pritisnuo tipku.

3 Jednostavan način za izradu animacije je korištenje Photoshop datoteke sa slojevima. Pomoću gumba Duplicate Selected Frame na paleti Animations potrebno je izraditi novu sličicu i zatim pomoću palete Layers mijenjati položaj, prozirnost ili efekt odabrane sličice. Međusličice između dva okvira možemo ručno dodati korištenjem gumba Duplicate Selected Frame ili automatski pomoću naredbe Tween.

4 Animacija mora biti spremljena u formatu GIF ili kao QuickTime film. Nije ju moguće spremiti u JPEG ili PNG datoteku.

5 Optimizacija slike je proces odabira formata datoteke, rezolucije i postavki kvalitete tako da datoteka bude mala a slika istovremeno dovoljno kvalitetna za objavljivanje na Webu. Slike kontinualnih tonova obično se optimiziraju u JPEG formatu a jednostavne slike s diskretnim bojama, bez nijansi u formatu GIF. Da bismo optimizirali sliku potrebno je odabrati opciju File > Save For Web And Devices.

PSCS3.indb 408 25.4.2008 4:09:49

photoshop cs3.pdf

Documents