View
3
Download
0
Category
Preview:
Citation preview
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
Deo II: Izrada Web strana
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.
Poglavàe 4: Pravàeçe i obrada Web grafike
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
Deo II: Izrada Web strana
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.
Poglavàe 4: Pravàeçe i obrada Web grafike
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
Deo II: Izrada Web strana
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
Poglavàe 4: Pravàeçe i obrada Web grafike
57
Promena veliåine slike
Ãta vam je potrebno
✔
Adobe Photoshop Elements (ili sliåan program)
✔
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.)
Poglavàe 4: Pravàeçe i obrada Web grafike
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
Poglavàe 4: Pravàeçe i obrada Web grafike
59
Optimizovaçe grafike u formatu GIF ili PNG
Ãta vam je potrebno
✔
Adobe Photoshop Elements (ili sliåan program)
✔
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
Deo II: Izrada Web strana
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.
Poglavàe 4: Pravàeçe i obrada Web grafike
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
Deo II: Izrada Web strana
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
Poglavàe 4: Pravàeçe i obrada Web grafike
63
Optimizovaçe fotografija u formatu JPEG
Ãta vam je potrebno
✔ 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.
66 Deo II: Izrada Web strana
Kombinovaçe fotografija i teksta na novoj slici
Ãta vam je potrebno
✔ 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.)
Poglavàe 4: Pravàeçe i obrada Web grafike 67
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.
68 Deo II: Izrada Web strana
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.
Poglavàe 4: Pravàeçe i obrada Web grafike 69
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.
70 Deo II: Izrada Web strana
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.
Poglavàe 4: Pravàeçe i obrada Web grafike 71
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.
72 Deo II: Izrada Web strana
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.
Poglavàe 4: Pravàeçe i obrada Web grafike 73
Obrada slika sa viãe slojeva
Ãta vam je potrebno
✔ 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.
74 Deo II: Izrada Web strana
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.
Poglavàe 4: Pravàeçe i obrada Web grafike 75
Koriãñeçe specijalnih efekata
Ãta vam je potrebno
✔ 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.
76 Deo II: Izrada Web strana
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.
Poglavàe 4: Pravàeçe i obrada Web grafike 77
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
Recommended