Dio zabave prilikom pregledavanja

Web stranica zasigurno ini i

aktiviranje veza ukljuenih u grafike
objekte pomou kojih prelazite na
druge stranice te pokreete ugraene
animacije. U ovoj lekciji nauit 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

12 Pripremanje datoteka
za Web
Pregled lekcije
U ovoj lekciji nauit ete kako:

Izrezati sliku u Photoshopu.

Razlikovati korisnike i automatske odreske.
Povezivati korisnike odreske s drugim HTML stranicama.
Izraditi efekte prijelaza za prikazivanje stanja mia.
Pregledavati efekte prijelaza.
Izraivati jednostavne animirane GIF sliice koritenjem slojeva.
Koristiti palete Layers i Animation za izradu animacijskih nizova.
Izraivati animacije na temelju promjene poloaja, vidljivosti i efekta
sloja.
Koristiti naredbu Tween za izradu glatkih prijelaza izmeu razliitih
postavki prozirnosti i poloaja sloja.
Pregledavati animacije unutar Web preglednika.
Optimizirati fotografije za Web i odabrati odgovarajui nain saimanja.
Razlikovati GIF i JPEG optimizaciju.
Za zavretak ove lekcije trebat e vam oko sat vremena. Ako je potrebno,
sa tvrdog diska obriite mapu prethodne lekcije i na njega kopirajte mapu
Lesson12 s prateeg CD-a. Dok budete radili na ovoj lekciji, promijenit
ete i spremiti poetnu datoteku. Ako vam zatreba originalna poetna
datoteka, kopirajte ju s prateeg 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
nee vam biti potrebna.

PSCS3.indb 381

25.4.2008 4:09:41

382 LEKCIJA 12

Pripremanje datoteka za Web

Pripreme za rad
U ovoj ete lekciji dotjerati grafike elemente za poetnu stranicu muzeja panjolske
umjetnosti.
Dodat ete tekstualne hiperveze za povezivanja sa unaprijed izraenim stranicama.
Posjetitelji e pritiskanjem veze moi otvarati povezane stranice. Dodat ete i efekte
prijelaze da biste promijenili izgled stranice bez uitavanja nove te animirati logo
Museo Arte u gornjem lijevom kutu.
Zapoet emo s pregledom gotove HTML stranice koju ete izraditi od PSD
datoteke. Nekoliko podruja slike reagirat e na pokrete mia. Primjerice, neka
podruja fotografije mijenjati e izgled kada pokaziva pree preko njih ili ako ih
pritisnete.
1 Pokrenite Photoshop i drite pritisnute tipke Ctrl+Alt+Shift (Windows) ili
Command+Option+Shift (Mac OS) da biste uitali podrazumijevane postavke.
2 Pritisnite Yes da biste potvrdili da elite uitati podrazumijevane postavke te
Close da biste zatvorili prozor Welcome.
3 Pritisnite gumb Go To Bridge (
Adobe Bridge.

) na vrpci s opcijama alata da biste otvorili

4 Unutar Bridgea, na paleti Favorites u gornjem lijevom kutu, pritisnite Lessons

a potom dvaput pritisnite mapu Lesson12 u podruju 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 383

Uionica u knjizi

5 Desnom tipkom mia (Windows) ili dok drite 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 poinje

odmah prilikom otvaranja preglednika.
Napomena: Ako ne vidite animaciju logotipa nakon to se datoteka otvori u
pregledniku, ponovno uitajte stranicu pomou kontrola u pregledniku (opcija
Reload).
7 Prijeite pokazivaem mia preko tema na lijevoj strani Web stranice i preko
slika. Zamijetite kako se oblik pokazivaa mijenja strelica postaje prst.

PSCS3.indb 383

25.4.2008 4:09:41

384 LEKCIJA 12

Pripremanje datoteka za Web

8 Pritisnite anela 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 poveavaju i smanjuju prikaz slike.

9 Da biste se vratili na poetnu stranicu zatvorite prozor Zoomify.

10 Pritisnite neku drugu sliku da biste ju pregledali u posebnom prozoru. Kada
zavrite, zatvorite prozor preglednika.
11 Na poetnoj stranici pritisnite neku od tema da biste doli do povezanih
stranica. Da biste se vratili na poetnu stranicu pritisnite tekst Museo Arte odmah
ispod logotipa u gornjem lijevom dijelu prozora.
12 Kada zavrite 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 (djeak, stranica Spanish Masters i aneo).
Odresci (engl. slices) su pravokutna podruja slike koja definirate na temelju slojeva,
vodilica ili preciznih odabira na slici izraenih pomou alata Slice. Kada na slici
definirate odreske Photoshop izrauje HTML tablicu ili CSS stil koji e sadravati i
poravnavati odreske. Ako elite, moete generirati i pregledati HTML datoteku koja
e povezivati sliku s odrescima zajedno s tablicom ili CSS stilom.
Slikama moete dodavati i hiperveze (engl. hyperlinks). Posjetitelj u tom sluaju
moe 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

ADOBE PHOTOSHOP CS3 385

Uionica u knjizi

Postavljanje radnog prostora Web Design

Kao vodea aplikacija za pripremu fotografija za Web, Photoshop ima ugraene i
osnovne alate za izradu HTML-a. Da biste pojednostavili pristup do tih alata kada
radite s Web stranicama, moete prilagoditi podrazumijevani raspored paleta,
alatnih vrpci i prozora koristei unaprijed definirani radni prostor Photoshopa.
1 Unutar Bridgea dvaput pritisnite gumb Go Up ( ) da biste se pomaknuli za
dvije razine u hijerarhiji mapa i doli 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 dijalokom okviru koji se
otvorio vidjet ete upozorenje da e promjene utjecati na izbornike i preace na
tipkovnici. Pritisnite Yes.

PSCS3.indb 385

25.4.2008 4:09:44

386 LEKCIJA 12

Pripremanje datoteka za Web

3 Otvorite neki od glavnih izbornika da biste vidjeli njihove opcije. Vidjet ete
opcije istaknute grimiznom bojom njih ete najee koristiti dok pripremate slike
za Web.

4 Odaberite File > Save As pa promijenite ime datoteke u 12Working.psd da biste

spremili radni prostor. U dijalokom okviru Maximize Compatibility pritisnite OK.

Izrada odrezaka
Kada pravokutno podruje na slici definirate kao odrezak, Photoshop stvara HTML
tablicu koja e ga sadravati i poravnavati. Kad definirate odreske, moete ih
pretvoriti u gumbe i programirati za odreenu funkciju na Web stranici.
Nije mogue izraditi samo jedan odrezak, osim ako ne sadrava itavu sliku, to je
praktiki beskorisno. Sa svakim novim odreskom koji izradite unutar fotografije
(korisniki odrezak) automatski se izrauje drugi odrezak (automatski odrezak) koji
obuhvaa podruje fotografije izvan korisnikog odreska.

PSCS3.indb 386

25.4.2008 4:09:44

ADOBE PHOTOSHOP CS3 387

Uionica u knjizi

Odabiranje odrezaka i postavljanje njihovih opcija

Zapoet ete sa odabiranjem gotovog odreska u datoteci Start. Umjesto vas smo
izradili odrezak ije dimenzije (u pikselima) tono 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 oznaen brojem 01 u malom

plavom pravokutniku. Pojaviti e se zlatni okvir koji govori da je odrezak odabran.

Pravokutnik oznaen brojem 01 ukljuuje gornji lijevi kut fotografije. Na njemu se

nalazi i mala ikona ili znaka koja nalikuje slici planina. Plava boja pravokutnika
govori da je to korisniki odrezak, odrezak koji smo izradili u datoteci Start.
Zamijetite i sive odreske odrezak oznaen brojem 02 s desne strane i odrezak 03
odmah ispod odreska 01. Siva boja govori da su to automatski odresci, izraeni
automatski prilikom izrade korisnikog odreska. Sliica planina govori da odrezak
sadri slikovni sadraj. Pogledajte izdvojeni odlomak O simbolima odrezaka na
sljedeoj stranici za opis razliitih simbola na odrescima.

PSCS3.indb 387

25.4.2008 4:09:44

388 LEKCIJA 12

Pripremanje datoteka za Web

O simbolima odrezaka
Plavi i sivi simboli odreska, odnosno znake, u Photoshopovom prozoru slike i dijalokom okviru
Save For Web And Devices mogu biti korisni podsjetnici ako ih nauite itati. Svaki odrezak
moe sadravati onoliko znaki koliko je potrebno. Sljedee znake pojavljuju se pod navedenim
uvjetima:
(

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

) Odrezak sadri sliku.

) Odrezak ne sadri sliku.

) Odrezak se temelji na sloju, odnosno izraen je od sloja.

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

3 Pomou alata Slice Select dvaput pritisnite odrezak 01. Otvorit e se dijaloki
okvir Slice Options. Photoshop standardno imenuje svaki odrezak na temelju naziva
datoteke i broja odreska u ovom sluaju 12Start_01.
Odresci nisu osobito korisni ako ih ne konfigurirate. Opcije odreska ukljuuju naziv
odreska i URL koji se otvara kada korisnik pritisne odrezak.
Napomena: Opcije moete postaviti i za automatski odrezak, ali ga time pretvarate u
korisniki.
4 U dijalokom okviru Slice Options unesite naziv Logo Animation. U polje
URL unesite #. Znak ljestve omoguava da provjerite funkcionalnost gumba bez
zadavanja stvarne veze. To je vrlo korisno u ranoj fazi Web dizajna kada samo elite
provjeriti izgled i ponaanje gumba.
5 Pritisnite OK da biste primijenili promjene. U nastavku lekcije izradit ete
animiranu verziju slike koja e zamijeniti postojeu u konanom dizajnu.

PSCS3.indb 388

25.4.2008 4:09:45

ADOBE PHOTOSHOP CS3 389

Uionica u knjizi

Izrada gumba za kretanje kroz stranice

Sada ete na lijevoj strani izrezati gumbe za kretanje kroz stranice tako da im
moete dodijeliti prijelaze. Moete odabirati gumb po gumb i dodavati im opcije za
kretanje ili istu stvar uiniti mnogo bre.
1 Na paleti alata odaberite alat Slice ( ) ili na tipkovnici pritisnite kombinaciju
tipki Shift+K da biste alat aktivirali putem preaca na tipkovnici.
Zamijetite vodilice postavljene iznad i ispod rijei na lijevoj strani slike.
2 Pomou vodilica na lijevoj strani slike povucite dijagonalno iz gornjeg lijevog
kuta iznad rijei About Museo Arte do vodilice ispod rijei Contact da biste u
odrezak ukljuili svih pet rijei.

Plavi pravokutnik, slian 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 korisnikom odresku a ne automatskom.
Originalni sivi pravokutnik za automatski odrezak 03 ostaje nepromijenjen, no
podruje ukljueno 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 doli 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

390 LEKCIJA 12

Pripremanje datoteka za Web

5 U dijalokom okviru Divide Slice potvrdite polje Divide Horizontally Into i

upiite 5 u polje Slices Down, Evenly Spaced. Pritisnite OK.

Sada ete svakom odresku dodijeliti naziv i pripadajuu hipervezu.

6 Pomou alata Slice Select dvaput pritisnite prvi odrezak, s tekstom About Museo
Arte, da biste otvorili dijaloki okvir Slice Options.
7 U dijalokom okviru Slice Options odrezak nazovite About, u polje URL upiite
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

ADOBE PHOTOSHOP CS3 391

Uionica u knjizi

8 Ponovite esti i sedmi korak na preostalim odrescima, poevi od drugog po redu

(gledano s vrha), kako slijedi:

Dugi odrezak nazovite Tour, u polje URL unesite tour.html a u polje Target
_self.
Trei 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.
Vano: Upiite ove podatke tono 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. Budui da vam vodilice vie
neete trebati, moete ih sakriti tako to ete odabrati opciju View > Show > Guides.

Izrada odrezaka na temelju slojeva

Odreske, osim pomou alata Slice, moete izraivati i na temelju slojeva. Prednost
koritenja slojeva za izradu odrezaka je u tome to Photoshop stvara odrezak
prema dimenzijama sloja i ukljuuje u njega sve podatke o slici. Kada uredite sloj,
premjestite ga ili na njega primijenite efekt, odrezak izraen 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 sidrita i proirite tako da miem povuete njen donji desni kut.

PSCS3.indb 391

25.4.2008 4:09:46

392 LEKCIJA 12

Pripremanje datoteka za Web

2 Odaberite Layer > New Layer Based Slice. Unutar slike e se pojaviti plavi
pravokutnik oznaen brojem 04. Brojana oznaka koja se pojavljuje nastala je u
skladu s pozicijom odreska, gdje numeracija poinje u gornjem lijevom kutu slike.

3 Alatom Slice Select dvaput pritisnite odrezak i nazovite ga Image 1. U polje

URL upiite 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 tono 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 oznaen
brojem 08. Unutar prozora slike dvaput pritisnite ovaj novi odrezak alatom Slice
Select. U dijalokom 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 oznaen brojem
18.) Odrezak nazovite Card. U polje URL upiite card.html a u polje Target _blank.
Pritisnite OK.
Vjerojatno ste primijetili da dijaloki okvir, osim ove tri opcije koje ste zadali, sadri
jo opcija. Za vie informacija o njima pogledajte Photoshopov sustav pomoi.
7 Odaberite File > Save da biste spremili promjene.

PSCS3.indb 392

25.4.2008 4:09:46

ADOBE PHOTOSHOP CS3 393

Uionica u knjizi

O izradi odrezaka
Navest emo i nekoliko drugih metoda za izradu odrezaka koje moete sami isprobati.
Moete 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 budui da se tekst moe dodati i ureivati u programu za
ureivanje HTML koda te se ne morate vraati u Photoshop da biste ga ureivali. Meutim, ako
tekst bude prevelik, prelomiti e HTML tablicu i poremetiti izgled dokumenta.
Ako u dizajnu koristite vodilice moete odjednom podijeliti itavu sliku na odreske pomou
gumba Slices From Guides koji se nalazi na vrpci s opcijama alata Slice. Meutim, ovu tehniku morate
koristiti s oprezom budui da tako ponitavate sve postojee odreske i njima pridruene opcije. Ovom
metodom se izrauju samo korisniki odresci, kojih moda i neete trebati toliko mnogo.
Ako elite izraditi odreske jednake veliine, ravnomjerno rasporeene i poravnate, pokuajte
izraditi jedan odrezak koji obuhvaa itavo podruje. Nakon toga, pomou 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 ponititi vezu izmeu odreska temeljenog na sloju i pripadajueg sloja, dovoljno je da
odrezak pretvorite u korisniki odrezak. Dvaput ga pritisnite alatom Slice Select i zadajte mu opcije.

Dodavanje animacije
Unutar Photoshopa moete izraditi animaciju od samo jedne slike koritenjem
animiranih GIF datoteka. Animirana GIF datoteka sastoji se od niza slika, odnosno
sliica (engl. frames). Svaka se sliica malo razlikuje od prethodne to daje iluziju
pokreta kada se prikazuju odreenom brzinom isto kao i kod animiranog filma.
Animaciju moete izraditi na nekoliko naina:

Moete upotrijebiti gumb Duplicate Selected Frame na paleti Animation da biste

izradili animacijske sliice a potom na paleti Layers definirati stanja slike pridruena
svakoj animacijskoj sliici.
Moete koristiti znaajku Tween za izradu novih sliica koje izobliuju tekst ili
mijenjaju prozirnost sloja, njegov poloaj ili efekte da bi se stvorila iluzija pokreta
nekog elementa okvira, odnosno njegovog postepenog pojavljivanja ili iezavanja.
Vieslojne Adobe Photoshop ili Adobe Illustrator datoteke moete pretvoriti u
animacije tako da svaki sloj postaje animacijska sliica.

PSCS3.indb 393

25.4.2008 4:09:46

394 LEKCIJA 12

Pripremanje datoteka za Web

U ovoj ete lekciji isprobati prve dvije tehnike.

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

Izrada animirane GIF datoteke

Da bismo Web stranicu uinili zanimljivijom, animirat emo logo Museo Arte tako
da izgleda kao da plee u gornjem lijevom kutu stranice. Tekst emo animirati
zajednikim koritenjem 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 proirili
njen sadraj. 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 pomiu do konanog
poloaja. 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
proirili i iskoristili dostupan vodoravni prostor u radnom podruju.
Opcionalno, paletu Animation moete odvui i blie prozoru fotografije tako da svi
dijelovi radnog podruja 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 drite pritisnutu tipku Shift na
tipkovnici (da biste se ograniili samo na vodoravno pomicanje) povucite miem
slovo M do lijeve strane prozora slike. Pritisnite na tipkovnici strelicu nalijevo i
pomaknite slovo M sasvim lijevo, tako da se jedva moe vidjeti.

PSCS3.indb 394

25.4.2008 4:09:46

ADOBE PHOTOSHOP CS3 395

Uionica u knjizi

Ipak, pazite da ne izvuete slovo u potpunosti iz prozora fotografije.

6 Na paleti Layers pritisnite sloj A.

7 U prozoru slike pomou alata Move povucite slovo A ravno prema gore, sve dok
gotovo ne izae iz okvira. Ako je potrebno, drite pritisnutu tipku Shift na tipkovnici
da biste se ograniili samo na pomicanje u okomitom smjeru.

Drugi nain za animiranje objekta je mijenjanje njegove prozirnosti, tako da s

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

PSCS3.indb 395

25.4.2008 4:09:46

396 LEKCIJA 12

Pripremanje datoteka za Web

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%.
10 Odaberite File > Save da biste spremili promjene.

Izrada meusliica za pomicanje i prikazivanje sadraja slojeva

Sada ete izraditi sliice koje e predstavljati prelazna stanja izmeu dvije postojee
slike. Kada promijenite poloaj, prozirnost ili efekt na bilo kojem sloju izmeu dvije
animacijske sliice, moete zadati Photoshopu da automatski izradi zadani broj
meusliica.
Zapoet ete tako to ete sliicu 2 kao poetno stanje animacije.
1 Na paleti Animation povucite sliicu 2 lijevo od sliice 1. One e odmah
promijeniti imena.

Sada ete dodati meusliicu izmeu ove dvije slike.

2 Na paleti Animations provjerite je li odabran okvir 1 a potom pritisnite gumb
Tween ( ) na dnu palete.
3 U dijalokom okviru Tween postavite sljedee opcije (ako ve nisu zadane):

S padajueg popisa Tween With odaberite Next Frame.

U polje Frames to Add upiite 5.
Pritisnite radio-gumb All Layers.
U dijelu Parameters odaberite sve opcije.

PSCS3.indb 396

25.4.2008 4:09:47

ADOBE PHOTOSHOP CS3 397

Uionica u knjizi

4 Pritisnite OK da biste zatvorili dijaloki okvir.

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

PSCS3.indb 397

25.4.2008 4:09:47

398 LEKCIJA 12

Pripremanje datoteka za Web

Izrada meusliica
Naredbu Tween upotrijebit ete da biste automatski dodali ili modificirali niz sliica izmeu
dvije postojee sliice animacije ravnomjerno mijenjajui atribute slojeva (poloaj, prozirnost
ili parametre efekta) izmeu novih sliica tako da se postigne efekt glatke promjene ili kretanja.
Primjerice, ako elite da sloj iezne, postavite prozirnost sloja u poetnoj sliici na 100% a
prozirnost istog sloja u zavrnoj sliici na 0%. Kada izradi i umetne meusliice izmeu poetnog
i zavrnog stanja, prozirnost sloja e se postupno smanjivati od sliice do sliice.
Naziv postupka, tweening nastao je od izraza in betweening koji se kod klasine animacije
crtea koristi za opisivanje ovog procesa. Automatskom izradom meusliica se bitno smanjuje
vrijeme potrebno za izradu animacijskih efekata kao to su postupno pojavljivanje ili iezavanje
te pomicanje objekta po slici. Dodane meusliice mogu se pojedinano ureivati nakon to ih
izradite.
Kada ste odabrali jednu sliicu, moete odluiti hoete li meusliice dodati izmeu te sliice
i one koja joj prethodi ili koja slijedi. Ako odaberete dvije susjedne sliice, meusliice e biti
dodane izmeu njih. Ako odaberete vie od dvije sliice, postojee sliice izmeu prve i posljednje
sliice odabira e se nakon umetanja meusliica promijeniti. Ako odaberete prvu i posljednju
sliicu unutar jedne animacije, te se sliice tretiraju kao sliice u nizu a umetnute meusliice
se dodaju iza posljednje. (Ova je metoda umetanja meusliica korisna ako se animacija treba
ponavljati beskonaan broj puta.)
Napomena: Ne moete odabrati dvije sliice koje nisu susjedne i izmeu njih umetnuti meusliice.

Animiranje stila sloja

Kada ste dodavali meusliice u prethodnoj vjebi, moda ste primijetili polje za
potvrdu Effects u dijalokom okviru Tween. Sada ete animirati efekt primijenjen
na sloj, odnosno stil sloja. Konani rezultat bit e bljesak svjetla koji se pojavljuje i
nestaje iza slova M i A.
1 Na paleti Animation odaberite sliicu 7 i pritisnite gumb Duplicate Selected
Frame da biste napravili novu sliicu sa istim postavkama kakve ima i sliica 7.
Ostavite sliicu 8 odabranu.
2 Na paleti Layers odaberite sloj slova M. S pomonog izbornika Layers Style
( ) na dnu palete odaberite opciju Outer Glow. U dijalokom okviru Layer Style,
postavite sljedee opcije:

S padajueg popisa Blend Mode odaberite Screen.

Opciju Opacity postavite na vrijednost 55 a Spread na 0%.
Veliinu postavite na 5.

PSCS3.indb 398

25.4.2008 4:09:47

ADOBE PHOTOSHOP CS3 399

Uionica u knjizi

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 drite 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

400 LEKCIJA 12

Pripremanje datoteka za Web

Sada ete izraditi meusliice za kopirane efekte tako da slova zabljesnu na kraju
animacije.
5 Na paleti Animation odaberite sliicu 7. Pritisnite gumb Tween pri dnu palete.
6 U dijalokom 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 sliicu 7 te pritisnite gumb Duplicate Selected
Frame da biste izradili novu sliicu sa istim postavkama kao i za sliicu 7.
8 Povucite novu sliicu 8 na kraj animacije, gdje e postati sliica 11.
Postavit ete ovu animaciju tako da se na Web stranici izvede samo jednom.
9 Provjerite je li s pomonog izbornika na dnu palete Animation odabrana opcija
Once.

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

11 Odaberite File > Save da biste spremili promjene.

Izvoz HTML koda i slika

Kao i tesar koji iscrta ablonu prije nego to konano izree drvo, spremni ste za
izradu zavrnih odrezaka, definiranje veza i izvoenje datoteke ime e se dobiti
HTML stranica koja sve odreske prikazuje kao cjelinu.
Vano je da grafika za Web bude to manja da bi se stranice brzo otvarale.
Photoshop ima ugraene alate koji vam mogu pomoi da procijenite potreban
stupanj saimanja datoteka pri izvoenju odrezaka tako da se njihova kvaliteta ne
umanji previe. Uobiajeno je pravilo koristiti JPEG saimanje za fotografije te GIF
za crtee s manjim brojem boja u ovoj lekciji to je sluaj s podrujima oko tri
glavne fotografije na stranici.

PSCS3.indb 400

25.4.2008 4:09:47

ADOBE PHOTOSHOP CS3 401

Uionica u knjizi

Koristit ete Photoshopov dijaloki okvir Save For Web and Devices u kojem moete
usporediti postavke i razine saimanja za razliite formate datoteka.
1 Odaberite File > Save For Web And Devices.
2 U dijalokom okviru Save For Web and Devices pritisnite jeziak 2-Up.
3 U dijalokom okviru odaberite alat Slice Select ( ) a potom odaberite odrezak 4
s lijeve strane prozora. Pogledajte veliinu slike u donjem lijevom kutu prozora.
4 Ako je potrebno, premjestite sliku u dijalokom okviru pomou alata Hand i
prilagodite prikaz.
5 S pomonog izbornika Preset na desnoj strani dijalokog okvira odaberite JPEG
Medium. Pogledajte veliinu 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 djeaka). S padajueg popisa
Preset na desnoj strani dijalokog okvira odaberite opciju GIF 32 No Dither.

PSCS3.indb 401

25.4.2008 4:09:48

402 LEKCIJA 12

Pripremanje datoteka za Web

Zamijetite kako obojano podruje na desnom portretu izgleda manje kvalitetno a

veliina slika je gotovo ista.
Na temelju onog to ste upravo nauili odabrat ete saimanje za pojedinane
odreske stranice.
7 Pritisnite jeziak Optimized u gornjem lijevom kutu dijalokog okvira.
8 Odaberite alat Slice Select te, dok drite pritisnutu tipku Shift na tipkovnici,
pritisnite sve tri glavne slike da biste ih odabrali. Sa padajueg popisa Preset
odaberite JPEG Medium.
9 U prozoru Preview, dok drite 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 sadri 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 podruju pregleda. Zatim
dvaput pritisnite mapu 12Start a potom Museo.
13 Desnom tipkom mia (Windows) ili dok drite 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 mia do odrezaka koje ste izradili. Zamijetite da pokaziva

mijenja oblik u aku sa ispruenim prstom to govori da se radi o gumbu.
Pritisnite portret djeaka da biste sliku vidjeli u punoj veliini 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 zavrite s pregledavanjem zatvorite preglednik Weba.

PSCS3.indb 402

25.4.2008 4:09:48

ADOBE PHOTOSHOP CS3 403

Uionica u knjizi

Optimiziranje slika za Web

Optimiziranje je proces odabira formata, rezolucije i postavki kvalitete da bi fotografija bila
vizualno ugodna i veliinom prikladan za upotrebu na Web stranicama. Jednostavno reeno,
trebate balansirati izmeu veliine datoteke i dobrog izgleda. Ne postoji jedinstvena kombinacija
postavki koja odgovara svim vrstama slikovnih datoteka. Optimizacija zahtjeva ovjekovu
prosudbu i dobro oko.
Opcije saimanja variraju ovisno o formatu datoteke koji koristite za spremanje slike. Najee se
koriste JPEG i GIF datoteke. JPEG format projektiran je tako da sauva 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 saimanje slika sa malim brojem boja,
kao to su crtei, logotipi i ilustracije s tekstom. Tu se za prikaz koristi paleta od 256 boja a ovaj
format podrava i prozirnu pozadinu.
Photoshop nudi irok raspon kontrola za smanjivanje datoteke uz istovremeno optimiziranje
prikaza na zaslonu. Obino ete sliku optimizirati prije nego to je spremite u HTML datoteku.
U dijalokom okviru Save For Web And Devices moete usporediti originalnu sliku sa jednom
ili vie saetih alternativa, uz mogunost prilagoavanja postavki. Za vie informacija o
optimiziranju slika u formatima GIF i JPEG pogledajte Photoshopov sustav pomoi.
1 Dok je JPEG ili GIF datoteka otvorena u Photoshopu odaberite opciju File > Save For Web And
Devices.
2 U dijalokom okviru Save For Web And Devices pritisnite jeziak 4-Up. U gornjem lijevom
kutu prikazana je originalna slika. Photoshop automatski izrauje tri alternative JPEG sliku
visoke, srednje ili niske kvalitete, odnosno tri GIF opcije.
3 Usporedite razlike u kvaliteti i veliini te pritisnite bilo koju optimiziranu verziju da biste
eksperimentirali sa formatom i postavkama kvalitete, nastavljajui s prosudbom veliine 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 saimanja

PSCS3.indb 403

Opcije GIF saimanja

25.4.2008 4:09:48

404 LEKCIJA 12

Pripremanje datoteka za Web

Dodavanje interaktivnosti
Ako ste uvijek eljeli uveavati fotografiju i pregledavati detalje, sada to i moete.
Novost u Photoshopu CS3 jest mogunost izrade interaktivnih fotografija koje se
mogu poveavati i pregledavati u bilo kojem pregledniku.
Koristei znaajku Zoomify moete na Web postaviti slike visoke rezolucije koje e
korisnici moi pregledavati i uveavati da bi se bolje vidjeli detalji. Slika osnovne
veliine preuzima se u isto vrijeme kad i jednako velika JPEG datoteka. Photoshop
e izvesti JPEG datoteke i HTML datoteku koje moete 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 koristei se znaajkom
Zoomify.
Sada ete sliku anela pretvoriti u datoteku koja e bit povezana s jednom od
hiperveza na poetnoj stranici.
2 Odaberite File > Export > Zoomify.
3 U dijalokom 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 kd i fotografije.

PSCS3.indb 404

25.4.2008 4:09:49

ADOBE PHOTOSHOP CS3 405

Uionica u knjizi

Sada ete zadnji put provjeriti izgled slike u pregledniku.

4 Unutar Bridgea dvaput pritisnite mapu Lesson12. U podruju pregleda dvaput
pritisnite mapu 12Start a nakon toga Museo.
5 Desnom tipkom mia (Windows) ili dok drite 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 poveavanje
slike anela.

estitamo! Nauili ste kako pomou odrezaka, efekata prijelaza i znaajke Zoomify
moete Web stranici dodati animacije i interaktivnost.

PSCS3.indb 405

25.4.2008 4:09:49

406 LEKCIJA 12

Pripremanje datoteka za Web

DODATNA TEHNIKA Ako gumbima dodijelimo efekt prijelaza uinit emo

ih jo oitijima. Kada radite na sadraju za Web, dobro je korisniku jasno priopiti
gdje se nalazi gumb. U ovoj lekciji, jedini znak da se radi o gumbu je promjena
oblika pokazivaa iz strelice u aku sa ispruenim prstom kada se nae iznad
gumba. Veini korisnika to nije dovoljno.
Evo kako moete dodatno istaknuti gumb: izraditi ete drugo stanje za odrezak
gumba koje e se prikazati kada korisnik postavi pokaziva mia iznad odreska.
To ete postii tako to ete promijeniti vidljivost sloja, izvesti ga u posebnu
mapu i ukljuiti 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 sliicu 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 dogaa sa odrescima gumba. Kada ih odaberete postat e
tamnosivi. Gumbi tako trebaju izgledati kada preko njih prijee pokazivaem mia.
4 Provjerite je li sloj Menu Color Bkgd vidljiv te odaberite File > Save For Web
And Devices.
5 U prozoru slike pomou alata Slice Select (
Shift odaberite svih pet gumba.

) i dok drite pritisnutu tipku

6 U dijalokom okviru Save For Web And Devices provjerite je li odabran

format GIF. Pritisnite Save.
7 U dijalokom okviru Save Optimized As doite do mape Lesson 12 te pritisnite
New Folder. Nazovite novu mapu Over States. S padajueg popisa Format
odaberite Images Only. Na padajuem popisu Settings ostavite odabranu opciju
Default Settings a s padajueg popisa odaberite Selected Slices i pritisnite Save.

PSCS3.indb 406

25.4.2008 4:09:49

ADOBE PHOTOSHOP CS3 407

Uionica u knjizi

8 Doite 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
ureivanje HTML koda (primjerice Adobe Dreamweaver CS3) i programirali
stranicu tako da slike iz mape Over States zamijene originalne odreske kada
korisnik pokazivaem mia prijee preko njih.
Izradili smo model da biste vidjeli kako bi zavrena Web stranica trebala izgledati.
9 U Bridgeu pritisnite mapu Lesson12. Dvaput pritisnite mapu 12End a nakon
toga mapu Site.
10 Desnom tipkom mia (Windows) ili dok drite 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

Ponavljanje
Pitanja za ponavljanje
1 to su to odresci? Kako ih izraujete?
2 Opiite prijelaze te stanje Over.
3 Opiite jedan jednostavan nain 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?

Odgovori
1 Odresci su pravokutna podruja slike koja definiramo da bismo na
njih primijenili razliite metode optimiziranja i kojima moemo pridruiti
animirane GIF datoteke, hiperveze i prijelaze. Odreske moemo izraditi
pomou alata Slice ili pretvaranjem slojeva u odreske pomou izbornika Layer.
2 Prijelaz je efekt koji mijenja izgled dijela Web stranice a da se pritom ne
mora uitavati nova Web stranica kao to primjerice gumb mijenja boju kada
korisnik miem prijee preko njega. Stanje Over pokazuje da se pokaziva mia
nalazi unutar definiranog podruja ali da korisnik jo nije pritisnuo tipku.
3 Jednostavan nain za izradu animacije je koritenje Photoshop datoteke
sa slojevima. Pomou gumba Duplicate Selected Frame na paleti Animations
potrebno je izraditi novu sliicu i zatim pomou palete Layers mijenjati
poloaj, prozirnost ili efekt odabrane sliice. Meusliice izmeu dva okvira
moemo runo dodati koritenjem gumba Duplicate Selected Frame ili
automatski pomou naredbe Tween.
4 Animacija mora biti spremljena u formatu GIF ili kao QuickTime film.
Nije ju mogue 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 obino 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