Visoka Tehnicka Skola Nis

Web Dizajn

VEBA 2 - Adobe Photoshop napredni pojmovi

Cilj Vebe
Upoznati se sa naprednim alatima u softveru Adobe Photoshop
Razumeti pojam slojeva (layers) i rad sa njima
Upoznati se sa osnovnom strukturom veb strane
Rad sa tekstualnim elementima

Teroijski uvod - Rad sa slojevima

U programu Adobe Photoshop slika se sastoji iz slojeva. Slojevi se koriste za rad na individualnim delovima
slike a da pri tom ne utiu jedan na drugi. Za slojeve moe da se kae da su providni papiri naslagani jedan
preko drugog koji se mogu repozicionirati i na koje se moe crtati bez uticaja na druge papire (slojeve).

Primer slojeva
Recimo da smo u Photoshop-u nacrtali sledeu sliku. Onom ko gleda ovu sliku ona je obina slika bez slojeva
- "ravna" slika. Meutim, u Photoshop-u, to su 4 zasebna sloja (etiri sliice koje ine nau sliku) koji su jedan
preko drugog. Imamo plavu pozadinu, dva sloja sa oblakom i tekst (Tutorial9). Reprezentacija slojeva u 3D
okruenju bi bila kao to je to prikazano na sledeoj slici.

Kako koristiti slojeve u Photoshop-u

Najlake ete razumeti slojeve ako krenemo sa prostijim
zadatkom pri emu ete moi sami da eksperimentiete.
Kreiraemo novi dokument u Photoshop-u (File->New).
Dimenzije nae slike neka budu 400x400 px, a rezolucija
72px/inch. Evo ta emo dobiti kada zavrimo na zadatak:

Bojenje pozadine
Kliknemo na foreground color, pojavie se prozor za odabir
boje. Koristimo kliza kako bi odabrali boju koja nam
odgovara. Mi emo koristiti tupu i zelenu odnosno u hex
reprezentaciji 36442.

Visoka Tehnicka Skola Nis

Web Dizajn

Kliknemo OK kako bi smo potvrdili odabranu boju. Sada uzmemo Fill Tool sa Toolbox-a i klikenmo bilo gde na povrini
nae slike (kreiranog dokumenta).

Kreiranje novog sloja

Prvo emo da pogledamo Layers Palette i da se upoznamo sa njenim osnovnim funkcijama.

Kako bi smo kreirali novi sloj klikenmo na ikonicu New

Layer.
Kao to se vidi na slici iznad pojavie se novi sloj sa
nazivom Layer 1. Ime moe da mu se promeni duplim
klikom na samo ime, odnosno Layer 1. Dok je sloj
selektovan (obeleen) ta god da radite menjae izgled
samo aktivnog sloj.

Visoka Tehnicka Skola Nis

Web Dizajn

Crtanje trave
Izaberemo Brush Tool sa Toolbox-a. Photoshop vec ima ubaen brush
trave - "Dune Grass". U opcijama za brush tool otvorimo Brush Preset
Picker (mala strelica na dole). Skrolujemo na dole i kada naemo Dune
Grass Brush selektujemo je.
Kako bi dobili travu u dve nijanse zelene kliknemo na Background
Color i izaberemo svetliju zelenu boju (recimo #19250F). Kada smo
podesili boje za Foreground i Background kreemo sa crtanjem trave
tj. nanoenjem Brush-a trave. To inimo tako to drimo levi klik mia.

Dodavanje teksta
Izaberemo Horisontal Type Tool sa Toolbox-a. Podesimo da nam je
Foreground Color bela. Klikenmo bilo gde na radnu povrinu nae
slike i kucamo neki text.

Kada ukucamo zeljeni tekst selektujemo ga (CTRL+A ili kao u word-u). Sledee to emo da uradimo je da
podesimo atribute u Type Options Bar. Podesimo da nam je font Arial, debljina fonta Bold, veliina 60pt i
anti- aliasing na Crisp.

Type Tool je kreirao novi sloj (Text Layer) u layers palette ije je ime tekst koji smo ukucali (Layers). Da bi
smo prihvatili date promene pritisnemo CTRL+ENTER.

Pomeranje (premetanje) slojeva

Sve to treba da uradimo je da pomerimo da na tekstualni sloj bude ispod sloja sa travom. To inimo tako
to sloj sa tekstom obeleimo i vuemo ispod sloja sa travom.

Visoka Tehnicka Skola Nis

Web Dizajn

Sada mozemo da koristimo Move Tool kako bi smo pomeraili slojeve na radnoj povrini nae slike
(dokumenta). Odaberemo Move Tool, obeleimo sloj koji elimo da pomerimo u layers palette i pomeramo
sloj po principu click and drag dok ne dobijemo neto nalik sledeoj slici.

Opacity, Blending Modes i bojenje selekcija

Kreiramo novi sloj iznad background sloja i napravimo elipsastu selekciju koristei Elliptical Marquee Tool.
Koristeci Fill Tool obojimo selekciju belom bojom. Zatim deselektujemo sve (Select->Deselect ili CTRL+D).
Kada dobijemo novi sloj (selekciju), obojen u belo, promenimo Blending Mode na Overlay. Na kraju, treba
da smanjimo Opacity negde izmedju 15% i 20%.

Sada desni klik na sloj pa Duplicate Layer. Ovo e kreirati potpuno istu kopiju sloja. Koristei Move Tool
pomerimo kopirani sloj tako da moemo da vidimo dve elipse. Ostalo je jo samo da pogledamo jo jednu
korisnu mogunost layer palette. Kliknemo na New Group ikonu na dnu palete.

Grupe predstavljaju direktorijume u koje stavljamo sloj, a kada

selektujemo grupu selektuju se svi slojevi unutar grupe i omoguava
nam se da istovremeno menjamo Opacity, Blending Mode-ove,
poziciju vie slojeva odjednom. Slojeve smetamo u grupe tako to ih
prevuemo u grupu u layers palette. Pre bilo kakvog dizajniranja
neophodno je upoznati se sa stvarima koje treba uraditi pre bilo
kakvog crtanja (dizajniranja) u ps-u, kao i na spektar boja i fontova
koji su nam na raspolaganju (mogu se koristiti bilo koje boje ali samo
ako emo objekat sa tom bojom kasnije sei a ne ubacivati boju preko
CSS-a).

Visoka Tehnicka Skola Nis

Web Dizajn

Priprema PS-a za dizajniranje

Kada razmiljamo o dizajnu prvo treba razmisliti o dimenzijama sajta. Najpametniji izbor je duina 960px, a
visina zavisno od toga koliko nam treba - neka to za poetak uvek bude 1000px. Zato bas duina 960px?! Evo
nekoliko razloga: sajt je po duini vidljiv i na malim rezolucijama (1024x768), 960 kao broj je deljiv sa 2, 3, 4,
5, 6, 8, 10, 12. Zato je to bitno? Recimo da elite da jedan sajt ima vie kolona (npr. 3). Da recimo duina
vaeg dizajna nije deljiva sa 3 duine kolona bi bile razlomljene vrednosti to je teko zapamtiti kada se kodira
CSS (gubljenje je vremena stalno meriti, a i veoma je teko tano premeriti) i imali bi ste problema uklopiti
sve delove jednog sajta. 960px po duini je samo osnova, kasnije emo proiriti do nekih 1100 ili 1200px kako
bi smo mogli da vidimo kako e sajt izgledati i na veim rezolucijama tj. veim monitorima (najpogodnije zbog
pozadina). Otvorimo photoshop, napravimo novi dokument sa sledeim podeavanjima:

Zatim emo da koristimo smart guides. Guides

emo da koristimo kao pokazatelj gde nam je kraj
dokumenta sa leve i desne strane kao i odozgo i
obeleiemo sredinu jer e nam biti bitna kasnije,
a i uvek je dobro znati gde je sredina. Na dnu
dokumenta ne ide guide jer emo kasnije, ukoliko
bude potrebno, poveavati ili smanjivati visinu.
Trebalo bi da bude neto nalik sledeem:
Kao dodatnu pripremu pre dizajna, napravite
wireframe ukoliko imate ideju u svojoj glavi kako
e sajt izgledati. Wireframe je mrea smart
guides-a koji radnu povrinu (naih 960x1000px)
deli na delove (segmente) koji predstavljaju
jednu celinu. Kada zavrimo dizajn i kreemo da
seckamo psd i pretvaramo ga u (X)HTML+CSS
mnogo e nam pomoi ako uradimo wireframe
odmah a ne kasnije. Evo jednog primera
wireframe-a sa gotovim dizajnom:
5

Visoka Tehnicka Skola Nis

Web Dizajn

Websafe fonts
Websafe fontove ini grupa fontova koja se moe prikazati na bilo kom operativnom sistemu i bilo kojoj verziji
istog bez dodatnog instaliranja fontova. Dakle, korienjem websafe fontova garantuje se pravilan prikaz
naeg sajta bez obzira koji operativni sistem korisnik da koristi. Naveemo 16 fontova koji se najee koriste
kao i njihov CSS kod.

Websafe colors
Paleta od 216 boja ini websafe (veb sigurne) boje. Zato ba te boje?! Ranije kada su monitori pa i grafike
kartice podravale samo 256 boja pribegavalo se samo osnovnim (osnovnih 256 boja i nijansi) kako bi se
sadraj prikazivao podjednako dobro svuda. Ova pojava je navie bila izraena kada je dolo do napredovanja
hardvera za multimediju gde su grafike kartice podravale 16 miliona boja (sada i mnogo vie) ali je bilo
dosta korisnika sa karticama za 256 boja pa se javila potreba za standarizovanjem nekih boja kao paleta
bezbednih boja za iroku upotrebu bez bojazni da se nee adekvatno prikazati na nekim
karticama/monitorima. Te boje, bez obzira na hardverske mogunosti, se i dalje koriste - najvie od strane
dizajnera. Na slici ispod je data tabela websafe boja sa heksadecimalnom oznakom (iskljuivo heksadecimalna
oznaka se koristi za HTML i CSS jer imena boja se mogu drugaije renderovati u zavisnosti od veb itaa-a,
operativnog sistema, ...).

Visoka Tehnicka Skola Nis

Web Dizajn

Zadaci za vebu
Zadatak 1: Kreirajte sledeu sliku koristei instrukcije opisane u vebi.

Zadatak 2: Kreirati dizajn za veb stranicu kao na slici:

Zadatak 3: Pogledati fajlove Zad3, beach i flower in a osnovu njih kreirati sliku Zad3_R. prikazanu na slici
iznad.
7

Visoka Tehnicka Skola Nis

Web Dizajn

Zadatak 4: Koja je prednost korienja slojeva?

.

Zadatak 5: ta su grupe u programu photoshop i za ta ih koristimo?

Zadatak 6: Koja je uloga alatke crop?

.

Zadatak 7: Kada kreirate novi sloj, gde se on pojavljuje u panelu Layers?

.
Zadatak 8: Kako moete postaviti sliku koja se nalazi na jednom sloju ispred slike koja se nalazi na drugom
sloju?
.
Zadatak 9: Kada zavrite projekat, ta moete da uradite da biste umanjili veliinu datoteke bez promene
kvaliteta dimenzija?
.
Zadatak 10:

Na koji nain se Photoshop odnosi prema tekstu?

Zadatak 11:

Po emu se tekstualni sloj razlikuje od ostalih slojeva u Photoshopu, a po emu ne?

Zadatak 12: Po emu razlikuju opcije layer via copy i layer via cut koje moemo primeniti na neki
selektovani deo slike?
.

Student
__________________________

Overava
__________________

Literatura
1. http://www.myfonts.com/hotnewfonts/
2. http://www.wix.com/
3. http://www.csszengarden.com/
8

Visoka Tehnicka Skola Nis

Web Dizajn

4. https://www.youtube.com/watch?v=RBMMjpJg6Qk
5. Adobe Creative Team, Adobe Photoshop CS6 uionica u knjizi, CET computer equipment and trade,
ISBN 978-86-7991-358-6, 2012