Photoshop – Kreiranje web sajta (III deo)

Do naลกeg prvog sajta uraฤ‘enog uz pomoฤ‡ Photoshop-a, ostalo je joลก samo nekoliko koraka:

  • Sledi nam kreiranje dugmadi, ovo neฤ‡e biti teลกko ukoliko veฤ‡ imate neko iskustvo u koriลกฤ‡enju Adobe Illustrator-a ili drugog paketa za rad sa vektorskom grafikom. Duplirajte sloj sa lukom tako ลกto ฤ‡ete prevuฤ‡i sloj iznad dugmeta „Create New Layer“, a zatim izaberite meni „Layer> Layer Style> Clear Layer Style“ radi uklanjanja efekta senke sa kopiranog sloja. Sada ฤ‡emo „iseฤ‡i“ deo luka koji leลพi iznad linije menija i iskoristiฤ‡emo ovo kao osnovu za dugmad. Alatkom „Direct Selection tool“ selektujte sve taฤke na putanji luka, osim one u donjem levom uglu, i prve desne taฤke, koju smo naknadno dodali. Potom paralelno prevucite putanju (path) drลพeฤ‡i pritisnute tastere „Shift“ i „Alt“, pre nego ลกto otpustite taster miลกa, radi automatskog kreiranja kopije putanje. Spojite krajeve putanje uz pomoฤ‡ alatke „Pen tool“, i koristeฤ‡i „Convert Point tool“ podesite svaku sidrenu taฤku. Izmenite boju oblika u crnu preko menija „Layer> Change Layer Content> Solid Color“. Na kraju podesite vidljivost (osobinu Opacity) dugmadi, tako da ona dugmad koja su niลพe imaju veฤ‡i stepen providnosti.

  • Sa izabranom tekst alatkom kliknite tamo gde ลพelite da postavite natpis za dugmad i ukucajte tekst. Pre toga podesite foreground boju na belu, jer inaฤe ako se tekst nalazi iznad dugmadi, neฤ‡e se uopลกte videti. Za rotaciju teksta izaberite „Edit> Free Transform“, a ukoliko je ova opcija „zasivljena“, prvo selektujte alatku „Move tool“. Uoฤiฤ‡ete tanku liniju u obliku pravougaonika koja okruลพuje ceo objekat. Prevlaฤenjem „ruฤica“ (mali kvadratiฤ‡i) tekst moลพete skalirati i rotirati. Kada podesite ugao i poziciju teksta, pritisnite „Enter“. Kada ste zadovoljni sa tekstom, duplirajte ga dva puta i izmenite tekst.

  • U poslednjem koraku preostalo nam je kreiranje navigacionih linija na vrhu i dnu stranice. Pomoฤ‡u alatke „Rectangle tool“ kreirajte nekoliko oblika. Umesto efekta „ispupฤenja“, kod ove dugmadi primeniฤ‡emo efekat „unutraลกnje senke“ (Inner Shadow effect) i dodaฤ‡emo im odgovarajuฤ‡i tekst. Kada zavrลกimo sa dugmadima, kreiraฤ‡emo novi folder, odnosno novi skup slojeva (Layer Set), pa ฤ‡emo tu prevuฤ‡i sve navigacione elemente. Ova nova opcija grupisanja slojeva ne sluลพi samo boljoj organizaciji slojeva, veฤ‡ vam omoguฤ‡ava i kopiranje viลกe slojeva odjednom. Selektujte skup slojeva vezanih za gornju navigacionu liniju i komandom „Layer> Duplicate Layer Set..“ duplirajte celu navigacionu liniju. Na kraju samo set prevucite na dno dokumenta i vi ste zavrลกili osnovni dizajn za vaลก novi sajt.

Pratite Krstaricu na www.krstarica.com