U trendu

Photoshop – Kreiranje web sajta (II deo)

Nastavljamo sa dizajnom sajta u Photoshop-u:

  • Sada ćemo kreirati liniju uz levu ivicu dokumenta koja će u budućnosti predstavljati liniju gde će biti smešten meni, tj. navigacija kroz sajt. Izaberite alatku „Rectangle tool“ i selektujte njome prvih 150 piksela, na levoj strani dokumenta. Zatim taj selektovani deo ispunite foreground bojom. Za popunu selekcije mustrom (pattern-om) kreirajte „pattern overlay“ efekt izborom menija „Layer> Layer Style> Pattern Overlay“. Po izboru ovog menija, u dijalogu izaberite mustru koju smo prethodno spremili, te kliknite „OK“. I pogledajte čudo: imate gotovu liniju menija.

  • Prelazimo na kreiranje tzv. „svoda“, koji će se nalaziti u gornjem delu web stranice. Kada dizajnirate web sajt u Photoshop-u, pre toga već morate imati sliku u glavi o tome da li ćete za formiranje strane u HTML-u koristiti tabele ili frejmove. Ova odluka će direktno uticati na ono šta možete da uradite u Photoshop-u, a šta ne možete. Mada ovaj dizajn koji predstavljamo može biti izveden i uz pomoć tabela, mnogo je prikladnije koristiti frejmove jer ćemo kreirati „svod“ koji ćemo kasnije smestiti u frejm na vrhu stranice. Kreirajte novi sloj klikom na dugme „Create New Layer“ u paleti „Layers“, te izaberite alatku „Rectangle tool“. Selektujte pravougaoni oblik koji će početi u gornjem levom uglu dokumenta, i to 20 piksela od vrha, a imaće visinu od 95 piksela. Neka selekcija bude široka koliko i sam dokument. Da biste bili precizniji u selekciji, zumirajte dokument i pratite lenjir. Ako kasnije budete imali potrebu da menjate oblik selekcije, to možete uraditi sa „Path Component Selection“ alatkom, i potvrđenom opcijom „Show Bounding Box“ na liniji opcija. Sa ovom alatkom možete promeniti oblik selekciji, kao što to radite, recimo, u Corel-u.

  • Pošto je oblik pravougaonika dosta jednostavan, promenićemo ga u neki lučni oblik (u obliku luka). Kliknite u donji desni ugao alatkom „Direct Selection“ (beli pokazivač miša) i prevucite sidrenu tački (Anchor Point) nagore, držeći istovremeno taster „Shift“ (ovo ograničava pokret samo na vertikalnu osu). Za dodavanje još jedne sidrene tačke na sredinu pravougaonika, iskoristite alatku „Add Anchor Point“, a zatim alatkom „Direct Selection“ premestite ovu tačku nagore i dobićete fini luk.

  • „Nafilujte“ sada ovu putanju (Path) istom mustrom kao i liniju menija, selektujte meni „Layer> Change Layer Content Pattern…“ i izaberite već korišćenu mustru. Nabacićemo i efekat senke – meni „Layer> Layer Style> Drop Shadow“.

    Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.