Izrada Web strana - Mikro knjiga · 2009-06-19 · 50 Deo II: Izrada Web strana Uvod u Photoshop Elements Photoshop Elements je ogoàena verzija svog starijeg brata, Adobe Photoshopa,

Deo II

Izrada Web strana

Poglavàe 4

Pravàeçe i obrada Web grafike

eneracije vlasnika malih preduzeña nosile su svoje mar-

ketinãke i dizajnerske projekte ãtamparima koji su pa-

æàivo ãtampali fotografije, a u programima za prelom strana

dizajnirali su portfolije, broãure i drugi reklamni materijal za

ta preduzeña.

Sada sve viãe vlasnika malih preduzeña sami obavàaju taj

posao, zahvaàujuñi moñnim alatkama jednostavnim za upo-

trebu, u koje se ubraja i Photoshop Elements. Kad bi ih mogli

videti çihovi dedovi (neke moæda i vide), zaåudili bi se na

koliko naåina se moæe napraviti, obraditi i izmeniti grafiåki

dizajn.

U ovom poglavàu otkriñete neke od najneobiånijih stvari

koje moæete uraditi u programu kao ãto je Photoshop Ele-

ments. Nauåiñete kako da pravite slike, na primer banere i

dugmad na Web stranama, da im meçate veliåinu, opsecate

ih i doterujete.

Ovde vas åekaju i postupna uputstva za izradu i optimizo-

vaçe grafike koja se brzo preuzima s Weba – a to je vero-

vatno najbitnije u ovoj kçizi o izradi Web strana.

Zadatke navedene u ovoj kçizi moæete uraditi i u mnogim

drugim programima za obradu slika. Adobe Photoshop Elements preporuåujem

zato ãto je zasnovan na standardu u oblasti obrade slika, programu Adobe Pho-

toshop CS3, ali se mnogo lakãe koristi i znatno je jeftiniji. Za primere u ovoj

kçizi koristim Elements 5, mada i u ranijim verzijama programa postoje opcije

potrebne da se obave opisani zadaci.

U ovom poglavàu

✔ Upoznavaçe s programom Photoshop Elements

✔ Opsecaçe slika

✔ Meçaçe veliåina slika

✔ Optimizovaçe grafike u formatu GIF

✔ Optimizovaçe fotografija u formatu JPEG

✔ Kombinovaçe fotografija i teksta na novoj slici

✔ Obrada slika sa viãe slojeva

✔ Koriãñeçe specijalnih efekata

G

50

Deo II: Izrada Web strana

Uvod u Photoshop Elements

Photoshop Elements je ogoàena verzija svog starijeg brata, Adobe Photoshopa,

ali je ipak moñna alatka. Radni prostor, prikazan na slici 4-1, sveden je i jedno-

stavan ali ima brojne alatke i palete – i pregrãt opcija za obradu i snimaçe slika

za Web. Adobeovi inæeçeri napravili su okruæeçe tako da sve alatke budu ras-

poreœene po ivici ekrana kako biste dobili maksimalnu radnu povrãinu u sredi-

ni, mada palete moæete da otvarate, zatvarate i razmeãtate po ekranu onako

kako vam najviãe odgovara.

Da biste se upoznali s programom pre nego ãto preœete na zadatke, u ovom

odeàku govorim o tome kako je organizovan radni prostor u programu Photo-

shop Elements i opisujem çegove glavne elemente: kutiju sa alatkama, traku

Options, meni i palete. Kad prvi put pokrenete Photoshop Elements, pojavàuje

se uvodni ekran sa ãest moguñnosti. Da biste pristupili glavnim opcijama za

obradu, kojima su posveñeni naredni odeàci, izaberite Edit and Enhance Photos.

Kutija sa alatkama

Pre nego ãto iãta uradite, recimo pre nego ãto opseåete sliku, morate da izabe-

rete odgovarajuñu alatku iz kutije sa alatkama (engl.

toolbox

). To je jedna od

prvih stvari na koju treba da se naviknete kad koristite program kao ãto je Pho-

toshop Elements. Kutija sa alatkama u ovom programu sliåna je po mnogo

åemu kutiji sa alatom koju dræite u garaæi: kad treba da ukucate ekser, uzmete

åekiñ, a odvijaå upotrebite kad neãto hoñete da pritegnete.

Slika 4-1: Photoshop Elements nudi ãirok spektar alatki i paleta razmeãtenih po obodu glavnog radnog prostora u kome pravite i obraœujete slike.

Poglavàe 4: Pravàeçe i obrada Web grafike

51

Alatka iz kutije lako se bira: samo pritisnite ikonicu alatke, na primer ikonicu

sa slovom T za dodavaçe teksta slici. Teæi deo je da znate åemu koja alatka

sluæi (sliåno kao ãto treba da znate kad se koristi pàosnati odvijaå, a kad krsta-

sti). Neke alatke se lako prepoznaju: åetkica sluæi za slikaçe, ali pojedine alatke,

na primer peåat za kloniraçe, u poåetku vas mogu zbuçivati.

Lista alatki na slici 4-2 pomoñi ñe vam da sagledate kakve su vam opcije

ponuœene u kutiji sa alatkama.

Evo zanimàivog podatka: pojedine alatke skrivene su u priruånim menijima

drugih alatki. Ako dugme na kutiji sa alatkama ima trougliñ u doçem desnom

uglu, to znaåi da je sa istog dugmeta dostupno viãe alatki. Da biste pregledali

ostale alatke dugmeta, dræite pritisnutu vidàivu alatku sve dok se ne pojavi

priruåni meni, kao na slici 4-3.

Slika 4-2: Kutija sa alatkama nudi ãirok spektar opcija za obradu slika.

Alatka za pomeraçe (Move) Zumiraçe (Zoom)

Ãaka (Hand) Pipeta (Eyedropper)

Pravougaoni okvir za izbor(Rectangular Merquee) Laso (Lasso)

Åarobni ãtapiñ (Magic Wand) Åarobna åetkica(Magic Selection Brush)

Alatka za tekst (Text) Alatka za opsecaçe (Crop)

Isecaçe oblika (Cookie Cutter) Ispravàaçe (Straighten)Alatka za korigovaçe

crvenih oåiju (Red Eye) Åetkica za doterivaçe (Healing Brush)

Peåat za kloniraçe (Clone Stamp) Gumica za brisaçe (Eraser)

Olovka (Pencil) Kanta s bojom (Paint Bucket)

Preliv (Gradient) Pravougaonik (Rectangle)

Razmazivaçe (Smudge)

Podeãavaçe boje predçegplana (Set Foreground color)

Zatamçivaçe (Burn)

52


Iako ñete mnoge alatke koristiti u zadacima iz kçige, dok budete pravili ili

obraœivali slike za Web, nemoguñe je da opiãem sve funkcije programa Photo-

shop Elements u ovom uvodu o Web grafici. (Kad bih to uradila, ne bi ostalo

prostora da iznesem ostale bitne aspekte Web dizajna.) Ako hoñete da nauåite

viãe o izradi i obradi slika, proåitajte kçigu

Photoshop Elements For Dummies

,

autora Barbare Obermeier i Teda Padove (Wiley Publishing), ili (ukoliko vas

zanimaju naprednije tehnike)

Photoshop CS3 Bibliju

, autora Laurie Ulrich Fuller

i Roberta C. Fullera (Mikro kçiga).

Alatke u kutiji mogu biti rasporeœene jedna ispod druge boåno od radnog

prostora (kao na slici 4-1). Kutiju sa alatkama moæete prevuñi bilo gde drugde i

podesiti da alatke budu u dve kolone (kao na slici 4-2).

Traka Options

Duæ gorçe ivice radne povrãine u programu Elements, smeãtena je traka Opti-

ons (slika 4-4). Traka Options se sastoji od padajuñih lista, poàa za potvrdu i

radio-dugmadi. Svi ti elementi se mogu koristiti za podeãavaçe parametara bilo

koje izabrane alatke. Na primer, kad izaberete slikarsku åetkicu, dostupne su

opcije za promenu veliåine i oblika poteza koji ñete povuñi kad pritisnete åetki-

cu i preœete çome preko slike. Prebacite se na alatku za tekst, i traka Options

ñe se prilagoditi tako da se prikaæu opcije za promenu vrste i veliåine fonta.

Slika 4-3: Priruåni meniji otkrivaju viãe opcija istog dugmeta u kutiji sa alatkama.

SAVET

Slika 4-4: S trake Options lako se pristupa parametrima svake alatke, na primer opcijama za vrstu i veliåinu fonta ako je izabrana alatka Text.


53

Traka menija

Nijedan program nije kompletan bez trake s menijima pri vrhu radne povrãine

(slika 4-5). Pritisnite ime menija da biste ga otvorili i izabrali neku od çegovih

komandi i opcija za obradu. Ako su iza imena komande ispisane tri taåke (...),

kad pritisnete to ime otvara se okvir za dijalog u kome moæete primeniti niz op-

cija. Ako nisu, komanda se aktivira automatski åim je izaberete.

Umeãnost poniãtavaça i ponovnog biraça operacije

Uz sve funkcije, filtre i opcije za ureœivaçe

koje nudi Photoshop Elements, najåeãñe je

najboàe dræati se strategije pokuãaja i po-

greãaka – ãto je lako kad su vam dostupne

opcije Undo, Redo, åak i Revert ako treba da

vratite sliku u staçe kad ste je posledçi put

snimili.

Ako hoñete da neãto izmenite na slici, ali

se potom predomislite, odaberite Edit ➪Undo da biste poniãtili prethodni potez.

Ukoliko niste sigurni jeste li iãta dobili tim

poniãtavaçem, pritisnite prvo Undo pa

onda Redo kako biste uporedili sliku pre i

posle primene efekta. U programu Photo-

shop Elements moguñe je vratiti se mnogo

koraka unazad pomoñu opcije Undo, stoga

moæete iñi napred-nazad sve dok ne postig-

nete da slika izgleda onako kako hoñete.

U sluåaju da ste àubiteà preåica s tasta-

ture, pritisnite Ctrl+Z da biste primenili op-

ciju Undo u Windowsu (odnosno �+Z na

Macu); za Redo, pritisnite Ctrl+Y (�+Y na

Macu).

Slika 4-5: Iz menija se pristupa veñini funkcija programa Photoshop Elements, meœu kojima je i moja omiàena – opcija Undo.

54


Palete

Kao u svim Adobeovim aplikacijama, radni prostor u programu Elements pun je

paleta – malih prozora sa opcijama za formatiraçe i drugim parametrima. Broj-

ne palete vam pomaæu prilikom obrade i provere slika. Da biste otvorili paletu,

izaberite je iz menija Window. Na primer, kad odaberete Window

➪

Color Swat-

ches, otvara se paleta sa opcijama za boje. Obratite paæçu na to da svaka pale-

ta ima dugme More; pritisnite dugme More i pojaviñe se lista s dodatnim

komandama.

Paletu ostavite u koloni na desnoj strani radnog prostora, ili je prevucite na

glavnu radnu povrãinu, kao na slici 4-6, na kojoj sam upotrebila paletu Special

Effects kako bih primenila senku na izabrani tekst na slici. Da biste premestili

paletu, pritisnite je i povucite za jeziåak, pa je spustite gde vam odgovara. Kad

paletu odvojite od glavnog prozora aplikacije, ona dobija sopstvenu naslovnu

traku radi lakãeg premeãtaça i identifikacije.

Slika 4-6: Paletu moæete premestiti tako da bude bliæe onome na åemu trenutno radite.


55

Opsecaçe slike

Ãta vam je potrebno

✔

Adobe Photoshop Elements (ili sliåan program)

✔

Digitalna fotografija

Vreme:

Maçe od pola sata

Buduñi da su fotografije na Webu uglavnom male,

opsecite delove koji nisu bitni – to je jedan od naåina

da se vide svi vaæni delovi. Kad opsecate sliku za

Web, najboàe je da se usredsredite na kàuåne ele-

mente slike. Moæete da iseåete vrh, dno, boåne strane

ili koji god deo hoñete, s prilagodàivim ivicama alatke

za opsecaçe (Crop).

U ovom zadatku koji se izvrãava korak po korak, pre-

bacujete fokus na glavne elemente tako ãto uklaçate

pozadinu pomoñu alatke za opsecaçe.

1.

Otvorite sliku u programu Ele-

ments, pa iz palete Tools izaberite

alatku za opsecaçe. Poãto odse-

åene delove slike ne moæete da

povratite nakon ãto snimite i zatvo-

rite datoteku sa slikom, najboàe je

da ne radite na originalnoj slici

nego na çenoj kopiji.

2.

Pritisnite i prevucite miãem

po slici kako biste definisali

podruåje koje hoñete da iseåete.

Sve izvan okvira za opsecaçe

uklaça se kad zavrãite postupak.

56


3.

Da biste poveñali ili smaçili okvir za

opsecaçe, povucite ruåice na uglo-

vima ili ivicama oblasti za opsecaçe.

4.

Da biste dovrãili opsecaçe, dvaput

pritisnite u sredini izabrane oblasti

ili pritisnite ikonicu Commit (zeleni

znak za potvrdu) u doçem desnom

uglu okvira za opsecaçe. Da biste

iskàuåili alatku za opsecaçe, a da ne

opseåete sliku, pritisnite dugme Can-

cel (crveni krug s linijom po sredini).

5.

Kad dovrãite opsecaçe,

biñe ukloçene oblasti slike

koje su ostale van okvira za

opsecaçe a ukupna veli-

åina slike proporcionalno

ñe se smaçiti. Alatka za

opsecaçe aktivna je sve

dok ne izaberete drugu

alatku iz kutije sa alatkama.

Ponavàajte korake od 2 do 5 za dodatno opsecaçe. Izaberite Edit

➪

Undo kako biste poniãtili opsecaçe ukoliko niste zadovoàni rezultatom. Kad snimite sliku, trajno joj meçate izgled.

SAVET


57

Promena veliåine slike


✔


✔

Digitalna fotografija

Vreme:

Maçe od pola sata

Meçaçe veliåine slike vaæno je iz dva razloga: slike

treba da budu dovoàno male kako bi se dobro prikazi-

vale na ekranu. Ãto viãe smaçujete sliku, to je maça i

çena datoteka, a slika se bræe uåitava. Da biste

poveñali ili smaçili sliku, treba da promenite veliåinu

slike ili platna. Uradite sledeñe:

1.

Otvorite sliku u programu

Elements, pa izaberite

Image

➪

Resize. Ako ne

æelite da pokvarite origi-

nalnu sliku, napravite

çenu kopiju pa çoj pro-

menite veliåinu kako biste

je prilagodili za Web

lokaciju.

2.

U okviru za dijalog Image Size za-

dajte visinu i ãirinu slike. U ovom

primeru, smaçila sam sliku za

50 procenata. Okvir za dijalog

Image Size moæe vas isprva zbuniti

jer ima viãe opcija za promenu ve-

liåine i rezolucije slike. Primenite

jednostavnu strategiju: koristite

poàa u oblasti Pixel Dimensions

u gorçem delu okvira za dijalog.

Pomoñu tih opcija meçajte visinu

i ãirinu slike na zadatu veliåinu u

pikselima, ili procentualno pove-

ñajte odnosno smaçite sliku, kao

u ovom primeru. (Kad to radite,

treba da budu izabrana poàa Scale

Styles, Constrain Proportions i

Resample Image u doçem delu

okvira za dijalog.)


58

Pravàeçe i otvaraçe slika u programu Elements

U programu Photoshop Elements moæete

da otvorite postojeñu sliku ili da napravite

potpuno nove slike, te da na ekranu imate

viãe otvorenih slika u isto vreme, ãto vam

olakãava kombinovaçe slika i rad na sloæe-

nijem dizajnu.

Da biste napravili nov dokument, oda-

berite File ➪ New, pa u okviru za dijalog

New File zadajte Height, Width, Resolution,

Color Mode i Background color. Kad napra-

vite sliku, moæete dodatno izmeniti bilo koji

parametar.

Da biste otvorili postojeñu sliku, izaberi-

te File ➪ Open, pronaœite odgovarajuñu sli-

ku na disku, pritisnite je da biste je izabrali,

pa pritisnite Open. Slika se pojavàuje u no-

vom prozoru u kome je moæete obraœivati.

Ukoliko pokuãate da otvorite sliku, a ne

vidite je u direktorijumu na disku iako znate

da bi trebalo da je tamo, promenite opciju

Files of Type (pri dnu okvira za dijalog Open)

u All Formats. Sada bi trebalo da se prikaæe

lista svih slika u datom direktorijumu.

Kad pravite novu sliku u programu Pho-

toshop Elements, moæete da zadate mnoge

parametre, meœu çima i veliåinu, rezoluciju

i boju.

3.

Ako unesete znak za potvrdu u poàe

Constrain Proportions pri dnu okvira

za dijalog Image Size, sve promene

visine automatski se odraæavaju i na

ãirinu (i obrnuto), tako da proporcije

slike ostaju nepromeçene i nakon

promene visine ili ãirine.

4.

Pritisnite OK da biste promenili veliåinu slike.

Ako hoñete da sliku vratite na prethodne dimen-

zije, izaberite Edit

➪

Undo. Kad snimite sliku,

unete izmene su trajne. Zapazite da se veliåina

datoteke promenila pa je s prvobitnih 1,59 MB

smaçena na 407 MB. Kad fiziåki smaçite sliku,

drastiåno se smaçuje i veliåina datoteke slike,

ãto znaåi da se slika bræe uåitava na Internetu.

Najåeãñe moæete zadræati podrazumevane parametre, osim ako unapred znate da ñete naknadno meçati rezoluciju slike. (Uputstva za promenu rezolucije navedena su ka-snije u ovom poglavàu, u odeàcima „Optimizovaçe grafike u formatu GIF ili PNG” i „Optimizovaçe fotografija u formatu JPEG”.) Slike bi, u naåelu, trebalo da obraœujete u srazmerno visokoj rezoluciji, a veliåinu im smaçujte kad budete spremni da snimite konaånu verziju za Web.

SAVET


59

Optimizovaçe grafike u formatu GIF ili PNG


✔


✔

Digitalna fotografija sa ograniåenim brojem boja

Vreme:

Maçe od pola sata

Dugo se smatralo da je format GIF najpodesniji za

crteæe, stripove i ostale slike koje imaju malo boja.

(U narednim odeàcima videñete da je format JPEG

idealan za fotografije i druge slike s milionima boja.)

Format GIF takoœe najviãe odgovara kad pravite slike

s providnom pozadinom, kad postiæete da slika “lebdi”

na Web strani. Kako je Web sazrevao, popularnost je

stekao treñi format, PNG. Format PNG superiorniji je

od formata GIF u svim aspektima osim u jednom: stariji

åitaåi Weba boàe podræavaju GIF slike, naroåito u

pogledu providnosti.

Da biste postigli da se sadræaj Web strana prikazuje

podjednako dobro na raåunarima svih posetilaca

vaãe lokacije, odluåite se za format GIF. Ukoliko hoñete da slike izgledaju maksimalno

dobro s minimalnom veliåinom datoteka slika, boàe rezultate postiñi ñete s formatom

PNG. Ako pretpostavàate da ñe posetioci koristiti starije verzije åitaåa Weba, boài

izbor je GIF. U narednoj veæbi koja se izvrãava korak po korak, odluåila sam se za

sigurnu varijantu i odabrala format GIF, ali proces je gotovo isti bez obzira na to koji

format koristite.

Kad koristite format PNG ili GIF, moæete da skratite vreme uåitavaça tako ãto ñete

smaçiti broj boja na slici. Zato su ti formati idealni za grafiku kojoj je potrebno malo

boja da se vaàano prikaæe, a to su crteæi ili jednostavno dizajnirani logotipi. Smaçu-

juñi broj boja na slikama snimàenim u formatu PNG ili GIF, uklaçate nepotrebne boje.

Ako odstranite previãe boja, promena ñe biti drastiåna (a slika ñe izgledati uæasno); ali

ukoliko ostavite samo ograniåen broj neophodnih boja, moæda neñete ni primetiti ra-

zliku, a slika ñe se uåitavati bræe.

U zadatku koji se izvrãava korak po korak, otkriñete najboài naåin da smaçite broj

boja na slici i da je snimite bilo u formatu PNG ili GIF u programu Photoshop Elements.

1.

Napravite novu sliku ili otvo-

rite postojeñu u bilo kom

formatu u programu Photo-

shop Elements. Poãto ste

snimili kopiju slike kad ste

primenili opciju Save for

Web, neñete brinuti o pro-

meni originalne slike.

60


2.

Izaberite File

➪

Save for Web. U okviru za dijalog Save for Web, izaberite GIF iz

padajuñe liste Optimized File Format.

Zaãto samo 72 ppi?

Kad snimate slike za Web, trebalo bi da ih

snimite u rezoluciji od 72 piksela po inåu

(ppi) u okviru za dijalog Image Size. (Videti

odeàak “Promena veliåine slike”, ranije u

ovom poglavàu.) Veñina raåunara ne prika-

zuje viãe od 72 ppi, pa bilo koja veña vredn-

ost ne znaåi niãta za prikazivaçe na Webu

jer bi u tom sluåaju posetioci uåitavali viãe

piksela nego ãto se na çihovim monitorima

moæe prikazati. Ali ako hoñete da ãtampate

sliku, treba vam ãto viãe piksela. Upravo

zato veñina slika koje vidite na Webu izgle-

da vrlo loãe kad se odãtampa.


61

3.

U sluåaju da ãtampate sliku s pro-

vidnom pozadinom, izaberite op-

ciju Transparency pa zadajte tzv.

mat boju (engl.

matte color

). Mat

boja bi trebalo da se podudara s

bojom pozadine Web strane na

kojoj je postavàena slika. Koristeñi

podudarnu mat boju, spreåavate da

ivice slike budu krzave. Da biste

promenili tu boju, u gorçem levom

uglu okvira za dijalog izaberite pi-

petu pa pritisnite poàe Matte kako

biste otvorili paletu boja na kojoj

moæete izabrati boju. Boju na slici

moæete da izaberete i ako pritisnete

sliku pipetom.

4.

Datoteku sa slikom smaçiñete ako

smaçite broj boja – upiãite broj maçi

od 256 u poàe Colors ili izaberite una-

pred definisanu vrednost iz padajuñe

liste Colors. U ovom primeru, broj

boja je smaçen sa 256 (ãto je maksi-

malan broj boja u formatu GIF) na 64.

5.

Pri dnu okvira za za dijalog

Save for Web zapaziñete da se

ispod prikaza slike levo poja-

vàuje prvobitna veliåina dato-

teke, dok se optimizovana

veliåina datoteke prikazuje

ispod prikaza na desnoj

strani. Uporedite te brojke da

biste videli koliko je slika

maça nakon ãto ste smaçili

broj boja s 256 na 46. U ovom

primeru, vidite da je smaçe-

çem broja boja datoteka sa

slikom smaçena sa 155 KB na

4,63 KB.

62


6.

Smaçujte daàe broj boja

kako biste joã viãe smaçili

datoteku sa slikom – ali ne

preterujte. U ovom primeru,

slika je svedena samo na

dve boje pa se beo tekst

Ma-

libu, California

ne vidi zato

ãto nije zadræano dovoàno

boje na slici kako bi se prika-

zala plava pozadina, crveno

ispisan tekst

Zuma Beach

i

beo tekst. Obratite paæçu i

na to da crvena slova u pri-

kazu desno viãe nisu glatka.

Iako se åini da su na slici

samo dve boje, mnoge vari-

jacije plave i crvene isko-

riãñene su kako bi se

napravila jasna granica iz-

meœu teksta i pozadine. Sa

samo dve boje na slici, glat-

ka ivica postaje krzava.

7.

Podeãavajte broj boja i

ostale parametre sve dok na

slici ne ostane minimalno

boja (samim tim biñe mini-

malna i datoteka sa slikom)

a da to ne naruãi kvalitet

slike. U ovom primeru, broj

boja na slici smaçen je na

32, a veliåina datoteke na

4,355 KB.

8.

Kad sve parametre slike podesite onako kako æelite, pritisnite OK. U

okviru za dijalog Save imenujte sliku i odredite gde ñete je snimiti na

disku. Zatim pritisnite Save.

Kad koristite okvir za dijalog Save For Web, Elements automatski snima kopiju slike u novom formatu, ne meçajuñi originalnu sliku.

SAVET


63

Optimizovaçe fotografija u formatu JPEG


✔ Adobe Photoshop Elements (ili sliåan program)

✔ Digitalna fotografija s milionima boja

Vreme:

Maçe od pola sata

Format JPEG je najboài izbor za slike s mnogo boja,

kao ãto su fotografije ili slike sa senkama ili prelivima.

Sve slike moæete snimiti u formatima GIF, PNG ili JPEG

preko okvira za dijalog Save For Web, ali najboàe

rezultate postiæete ako izaberete najprikladniji format

za svaku pojedinaånu sliku. To je zato ãto najboài

naåin da optimizujete slike (tj. postignete da se bræe

uåitavaju na Webu) zavisi od toga koliko boja se poja-

vàuje na slici.

Åak i kad je fotografija veñ u formatu JPEG, uvek

moæete smaçiti çenu datoteku (i ubrzati uåitavaçe)

u okviru za dijalog Save for Web kako biste optimizo-

vali sliku, ãto je opisano u sledeñim koracima:

1. Napravite novu sliku ili

otvorite postojeñu u bilo

kom formatu u programu

Photoshop Elements. Poãto

prilikom rada u okviru za

dijalog Save for Web pravite

kopiju slike, ne treba da bri-

nete o tome hoñete li izme-

niti originalnu sliku.

2. Izaberite File ➪ Save for

Web, pa u padajuñoj listi

Optimized File Format

okvira za dijalog Save for

Web odaberite JPEG.

64 Deo II: Izrada Web strana

3. Ako je slika veña od oblasti za prikaz

u okviru za dijalog Save for Web, kao

u ovom primeru, odaberite alatku

Hand (ãaka) u gorçem levom uglu

okvira za dijalog. Zatim pritisnite i

povlaåite da biste pozicionirali naj-

vaænije elemente na slici, tako da pri-

kaz bude boài. Moæete da promenite i

veliåinu prikaza slike. Prikaz slike pri-

tisnite desnim tasterom miãa pa

izaberite opciju Fit on Screen ili bilo

koji parametar uveñaça.

4. Da biste smaçili datoteku sa JPEG sli-

kom, pomoñu klizaåa promenite parame-

tar Quality ili upiãite broj (maksimalna

vrednost je 100). Kompresija se meri u

procentima: ãto je niæi broj, veña je kom-

presija a maça datoteka.

5. Pri dnu okvira za za di-

jalog Save for Web,

ispod prikaza slike levo

pojavàuje se prvobitna

veliåina datoteke, dok

se veliåina optimizova-

ne datoteke prikazuje

ispod prikaza na desnoj

strani. U ovom primeru

je pri podeãenoj vred-

nosti 75 za opciju Quali-

ty, veliåina datoteke sa

slikom smaçena sa

1,36 MB na 130,2 KB.

Poglavàe 4: Pravàeçe i obrada Web grafike 65

6. Podeãavajte parametar Quali-

ty sve dok ne postignete mak-

simalnu kompresiju (ãto je

veña kompresija, maçi je

broj u poàu Quality), a da se

pri tom bitno ne naruãi kvali-

tet slike. U ovom primeru,

parametar Quality smaçen

je na 50 kako bi se datoteka

svela na 69,75 KB, ãto je

maçe od polovine veliåine

datoteke kad je parametar

Quality bio podeãen na 75.

7. Dok podeãavate opciju Qua-

lity, budno motrite na pri-

kaz. Ako previãe smaçite

kvalitet, vidno ñete pokvariti

sliku.

8. Kad sve parametre slike podesite onako kako æelite, pritisnite OK.

U okviru za dijalog Save imenujte sliku i odredite gde ñete je sni-

miti na disku. Zatim pritisnite Save kako biste snimili novu verziju

JPEG slike sa zadatim parametrima i saåuvali neizmeçen original.

Poveñavaçe i smaçivaçe prikaza slike

Dok radite na slikama u programu Photo-

shop Elements, åesto je korisno da smaçite

ili poveñate prikaz kako biste mogli videti

veñi deo slike na ekranu ili uveñane elemen-

te koje hoñete da obradite. Za promenu ve-

liåine prikaza slike na ekranu, koristite

alatku Zoom.

Prvo pritisnite i tako izaberite alatku za

promenu veliåine prikaza u kutiji sa alatka-

ma. Zatim pritisnite bilo gde na slici kako bi-

ste uveliåali prikaz. Prikaz smaçujete ako

sliku pritisnete dræeñi taster Alt (u Win-

dowsu), odnosno Option (na Macu). Evo sa-

veta: kad promenite veliåinu prikaza,

moæete utvrditi koliko bi trebalo da prome-

nite stvarnu veliåinu slike kako bi se ona po-

javila na ekranu kao ãto ste zamislili. Da

biste to uradili, primenite alatku Zoom i po-

desite veliåinu slike na najprikladniju za

Web stranu, pa vidite koliko to iznosi u pro-

centima (vrednost je prikazana pri vrhu

ekrana, pored imena datoteke). Tako ñete

saznati koji broj treba da upiãete u poàe

Size okvira za dijalog Image Size kad meça-

te veliåinu slike u procentima.

Da biste ponovo prikazali sliku u pravoj

veliåini, dvaput pritisnite alatku Zoom.


Kombinovaçe fotografija i teksta na novoj slici


✔ Adobe Photoshop Elements (ili sliåan program koji podræava slojeve)

✔ Digitalne fotografije

Vreme:

Oko pola sata (ako se ne zanesete)

Pravàeçe nove slike od fotografija i teksta skoro je

podjednako jednostavno kao obrada postojeñe slike,

recimo banera ili dugmadi koji su ubaåeni u ãablone

opisane u ovoj kçizi.

U naåelu, smatram da je najboàe prvo napraviti novu

sliku u programu Photoshop Elements i kopirati u çu

fotografije ili drugu grafiku koju hoñete da koristite.

Kad postavite te elemente, lako ñete dodati tekst i sve

to spojiti u celinu. Samo pratite sledeñe korake da

biste sami napravili banere i dugmad:

1. U programu Photoshop Ele-

ments, izaberite File ➪ New

da biste napravili novu sliku i

zadali joj veliåinu, rezoluciju,

te boju pozadine. Ovde mi je

zadatak da napravim sliku

ãirine 500 piksela, visine 380

piksela, u rezoluciji od 72 ppi,

s modelom boja RGB i belom

pozadinom.

2. Ako paleta Layers nije

otvorena boåno od

radne povrãine, izabe-

rite Window ➪ Layers

da biste je otvorili.

(Mora biti otvorena

ako hoñete da pratite

ãta se deãava sa sloje-

vima koji se automatski

prave prilikom kopi-

raça slika ili doda-

vaça teksta slici.)


3. Otvorite jednu sliku ili

viãe slika koje ñete

dodati novoj datoteci

– izaberite File ➪ Open

pa odaberite sliku sa

diska. Moæete da otvo-

rite slike u ma kom for-

matu koji podræava

Photoshop Elements,

a meœu çima su JPEG,

GIF, TIF i PSD.

4. Kad radite s viãe slika

u programu Photo-

shop Elements,

moæda ñete hteti da

otvorite Photo Bin, pri

dnu radnog prostora:

ako veñ nije otvoren,

izaberite Window ➪

Open the Photo Bin.

Izaberite bilo koju

otvorenu sliku tako

ãto ñete pritisnuti

çen umaçeni prikaz.

5. Da biste kopirali otvorenu sliku

u novu datoteku, prvo odaberite

alatku za pomeraçe (Move) u gor-

çem levom uglu kutije sa alatkama.


6. Pritisnite da biste odabrali sliku

koja tako postaje aktivna. Izaberite

Select ➪ All.

7. Kad izaberete sliku, odaberite File ➪ Copy

ili pritisnite kombinaciju tastera Ctrl+C

(Windows) odnosno �+C (Mac).

8. Ovo je bitno: datoteku kojoj ñete

dodati sliku treba da odaberete

pre nego ãto umetnete sliku. Ako

je otvoren Photo Bin pri dnu rad-

nog prostora, odaberite je odatle.

Isto tako, na radnom prostoru

moæete da odaberete bilo koju

sliku koju tu vidite tako ãto ñete

je pritisnuti miãem.


9. Izaberite File ➪ Paste, ili pritisnite

kombinaciju tastera Ctrl+V (Win-

dows) odnosno �+V (Mac).

10. Da bi ste pozicionirali umetnutu

sliku izaberite je pa je prevucite na

odgovarajuñe mesto na novoj slici.

Za preciznije pozicioniraçe kori-

stite tastere sa strelicama – moæete

da podeãavate izabrani sloj piksel

po piksel, u svim smerovima. Slici

moæete promeniti veliåinu alatkom

za pomeraçe – pritisnite ivice slike

alatkom i povlaåite kako biste

podesili visinu i ãirinu.

11. Da biste dodali i pozi-

cionirali joã slika,

ponavàajte korake od

6 do 10. U ovom pri-

meru, paleta Layers

prikazuje tri sloja –

sloj s belom pozadi-

nom i zaseban sloj za

svaku fotografiju koja

je umetnuta u sliku.

Dok sam dodavala

slike, Photoshop Ele-

ments je automatski

dodavao slojeve.


12. Da biste slici dodali tekst

(bilo da slika veñ ima viãe slo-

jeva, kao u ovom primeru),

prvo morate izabrati alatku

za tekst iz kutije sa alatkama.

13. Kad izaberete alatku za

tekst, pri vrhu radnog

prostora pojavàuje se

nova grupa opcija. Tu

moæete da podeãavate

opcije za tekst kao ãto

su boja (vidi se na ovoj

slici), tako ãto pritisne-

te biraå boje da biste

otvorili paletu za izbor

boja pa onda pritisnete

boju na paleti. Koristite

klizaå desno od pro-

zora palete da biste

prikazali viãe boja.

14. Moæete da koristite i opcije

alatke za tekst, pri vrhu rad-

nog prostora, kako biste

promenili veliåinu i vrstu

fonta, te poravnaçe teksta.


Ukàuåivaçe, iskàuåivaçe i promena redosleda slojeva

Kad radite na slici s mnogo slojeva, pone-

kad je korisno da ih ukàuåujete i iskàuåujete

kako biste isprobavali razliåite kombinacije

ili oåistili radnu povrãinu dok se bavite de-

taàima. Pritiskaçem sliåice oka levo od slo-

ja, postiñete da sloj na radnoj povrãini bude

nevidàiv. Ne brinite – sloj lako moæete pov-

ratiti ako ponovo pritisnete isto poàe kako

bi se opet pojavila sliåica oka. U tome je le-

pota ove opcije: åas vidite slojeve, åas ih ne

vidite.

Redosled slojeva na paleti Layers moæe-

te promeniti i tako odrediti koji se sloj slike

pojavàuje na vrhu. Da biste promenili re-

dosled slojeva, pritisnite sloj i odvucite ga

gore ili dole na paleti Layers. Ãto je viãe po-

zicioniran sloj na paleti, to je viãa çegova

pozicija meœu slojevima u dokumentu.

15. Na sliku upisujete tekst kad

pritisnete miãem da biste

postavili kursor na odgovara-

juñe mesto i onda kucate.

Slici moæete dodati tekst

proizvoàne duæine. Pritisnite

Enter (Return) da biste

dodali znak za prekid reda.

16. Za ureœivaçe teksta koji ste

otkucali moæete da koristite i

opcije za tekst pri vrhu rad-

nog prostora. Izaberite tekst

koji hoñete da izmenite, pa

odaberite opcije formati-

raça kako biste promenili

boju, font, veliåinu teksta ili

neke druge parametre. Da

biste izmenili reåi, pritisnite

i izaberite sam tekst pa ga

obriãite ili dopunite.

17. Kad dodajete tekst, Photo-

shop automatski ubacuje nov

sloj koji se pojavàuje na pale-

ti Layers. Da biste premestili

ili izmenili sloj, morate prvo

izabrati alatku za pomeraçe

iz kutije sa alatkama. Photo-

shop Elements automatski

bira sloj kad ga pritisnete.


18. Ukoliko se sloj ne vidi u rad-

nom prostoru, izaberite ga

na paleti Layers tako ãto

ñete ga pritisnuti miãem.

Photoshop Elements prika-

zuje sadræaj svakog sloja da

biste lakãe uoåili sloj koji

hoñete da izaberete.

19. Da biste sloj joã lakãe

prepoznali meœu drugim

slojevima, promenite mu

ime: desnim tasterom

miãa pritisnite sloj pa

odaberite stavku Rename

Layer da otvorite okvir

za dijalog Layer Proper-

ties gde upisujete novo

ime.

20. Moæete nastaviti da

unedogled dodajete

slojeve teksta i slike,

da ih obraœujete i

prilagoœavate pona-

vàajuñi navedene

korake. Jedan od naj-

boàih naåina da se

naviknete na rad u

programu Photoshop

Elements jeste da

izvesno vreme posve-

tite isprobavaçu raz-

nih kombinacija

teksta i slika na viãe

slojeva.


Obrada slika sa viãe slojeva


✔ Adobe Photoshop Elements (ili sliåan program koji podræava slojeve)

✔ Digitalna slika sa viãe slojeva

Vreme:

Maçe od pola sata

U programima kao ãto je Photoshop Elements, meœu

odlikama koje najviãe zbuçuju korisnike spada i naåin

podele razliåitih delova slike na slojeve. U osnovi, slo-

jevi omoguñavaju programu da podeli sliku na viãe

odeàaka koji se mogu nezavisno obraœivati. Zato

moæete da ureœujete tekst a da to ne utiåe na fotogra-

fiju ispod çega ili da premeãtate zasebne fotografije

sve dok ih ne postavite kako vam odgovara.

Bez slojeva, tekst bi bio zakaåen za fotografiju ili

baner, kao u primeru koji ovde obraœujemo, i ne biste

mogli da ga meçate nakon ãto ga dodate slici. Slojevi

su naroåito korisni kad prilagoœavate banere, dug-

mad i druge grafiåke elemente ubaåene u ãablone koji

su opisani u ovoj kçizi.

1. U programu Photo-

shop Elements otvo-

rite postojeñu sliku

koja ima viãe slojeva,

kao ãto je ovaj baner.

2. Izaberite Window ➪ Layers da biste

otvorili paletu Layers. Na paleti Lay-

ers pritisnite i tako izaberite sloj koji

hoñete da ureœujete. U ovom primeru

izabrala sam sloj s reåima LaFontaine Multimedia.

Kad dodajete tekst, fotografije ili druge elemente novoj ili postojeñoj datoteci, Photo-

shop Elements automatski pravi nov sloj za svaku dodatu stavku. Ti slojevi se zatim

mogu nezavisno ureœivati. Pre nego ãto preœete na ureœivaçe teksta ili obradu slike

sa slojem, morate da izaberete odgovarajuñi sloj. Tu na scenu stupa paleta Layers, ãto

ñete videti u ovom zadatku.


3. U kutiji sa alatkama izaberite

alatku kako biste promenili sadr-

æaj sloja. U ovom primeru izabrala

sam alatku za tekst kako bih izme-

nila reåi.

4. Primenite izabranu alatku da biste

izmenili odabranu sliku. U ovom

primeru dvaput sam pritisnula ime

LaFontaine da bih ga izabrala pa

sam umesto çega upisala ime

Warner.

5. Da biste uredili tekst na dru-

gom sloju, ponovo izaberite

odgovarajuñi sloj na paleti

Layers. Ovde sam izabrala

sloj s tekstom u doçem de-

snom uglu banera. Poãto je

alatka za tekst veñ aktivna,

samo sam izabrala tekst koji

hoñu da izmenim i upisala

novi tekst.

6. Nakon ãto unesete izmene, izaberite

File ➪ Save As i upiãite novo ime slike.

Tako ñete saåuvati izmenu a neñete

promeniti originalnu sliku.


Koriãñeçe specijalnih efekata


✔ Adobe Photoshop Elements (ili liåan program koji podræava efekte)

✔ Digitalna fotografija

Vreme:

Maçe od pola sata

Photoshop Elements sadræi obimnu zbirku specijal-

nih efekata, meœu kojima su i filtri, stilovi slojeva i

foto-efekti. Pomoñu tih opcija dodajete senke slikama

ili tekstu, pravite oborene ivice, pa åak postiæete

umetniåki “ãmek”, kao kad primeçujete slikarske

efekte prikazane u ovom zadatku.

1. U programu Photoshop Ele-

ments izaberite File ➪ New

da biste napravili novu sliku,

odnosno File ➪ Open da

biste otvorili postojeñu.

Zatim otvorite paletu Art-

work and Effects bilo tako

ãto ñete pritisnuti strelicu

pored palete ili tako ãto ñete

izabrati Window ➪ Artwork

and Effects.

2. Paleta Layers neka bude otvorena kako biste bili sigurni

da efekte primeçujete na pravi sloj. (Paletu otvarate kad

izaberete Window ➪ Layers.) Pritiskaçem i povlaåeçem

gorçe ivice palete moæete je proãiriti ili smaçiti da bi

zauzela viãe ili maçe mesta boåno od radnog prostora.


3. Paleta Artwork and Effects ima mnogo

opcija. S jedne grupe opcija na drugu

prelazite tako ãto pritiskate ikonice

kategorija duæ vrha palete i iz padaju-

ñih lista birate zbirku opcija u svakoj

kategoriji, recimo opcije filtara kao na

ovoj slici.

4. Da biste primenili filtar ili

neki drugi efekat, pritisnite

i izaberite sloj na koji hoñe-

te da primenite efekat pa

onda dvaput pritisnite iko-

nicu sloja na paleti Layers.

U ovom primeru, izabrala

sam sloj s fotografijom i

dvaput sam pritisnula filtar

Cutout kako bih otvorila

çegov okvir za dijalog.

Svaki filtar za umetniåke

efekte ima okvir za dijalog

sliåan ovome u kome po-

deãavate efekte. Na levoj

strani okvira za dijalog nala-

zi se prikaz slike u kome vi-

dite kako primeçeni filtar

utiåe na sliku.


5. Pritisnite OK da biste prime-

nili filtar na sliku pa zatvorite

okvir za dijalog. Izaberite Edit

➪ Undo kako biste poniãtili

dejstvo filtra. Da biste pode-

sili parametre filtra, dvaput

pritisnite ikonicu filtra na pa-

leti Special Effects i ponovo

ñete otvoriti okvir za dijalog.

6. Da biste primenili filtre na tekst,

na primer senku, pritisnite slovo T

pri vrhu palete. Prikazañe se

opcije za efekte koji se primeçuju

na tekst. U ovom primeru izabrala

sam sloj s tekstom Beach Walks.

Prvo izaberite sloj s tekstom, pa

dvaput pritisnite odgovarajuñu

opciju za tekst. Opcija se automat-

ski primeçuje na tekst.

7. Da biste uklonili filtar za tekst,

izaberite Edit ➪ Undo. Drugi

filtar primeniñete tako ãto

ñete dvaput pritisnuti alatku

za tekst. U ovom primeru,

uklonila sam senku i umesto

çe sam primenila filtar Bevel.

Sloæenije efekte dobiñete ako

primenite viãe filtara na isti

element.

Da biste usavrãili tehniku obrade fotografija, neophodno je mnogo prakse, a najboàe ñete je steñi ako eksperimentiãete. Uåeçe pomoñu pokuãaja i pogreãaka naroåito je bitno kad radite s naprednim tehnikama, kao ãto su filtri i specijalni efekti. Primeçu-juñi razliåite filtre na tekst i slike ne biste li videli kako izgledaju, odliåan je naåin da otkrijete ãta sve moæete postiñi sa ovim zanimàivim funkcijama.

SAVET

Documents

Izrada Web strana - Mikro knjiga · 2009-06-19 · 50 Deo II: Izrada Web strana Uvod u Photoshop Elements Photoshop Elements je ogoàena verzija svog starijeg brata, Adobe Photoshopa,