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 i preko mobilne aplikacije za Android i iPhone.