Kako ubrzati izradu DIZAJNA za web stranicu pripremom PSD predloška

Nekidan smo pisali kako ubrzati izradu web stranica pripremom predloška odnosno mapi sa početnim kodovima, reset css-om itd..

Danas ćemo se pozabaviti sa pripremom PSD predloška za dizajn web stranice.

PSD predložak sa grid sistemom nam dolazi u paketu 960_grid i to je odlično. (više o dizajniranju i prijelomu pomoću 960 grid frameworka saznajte ovdje)

Već imamo postavljenu i centriranu mrežu margina na sredini dokumenta i određivanje širine kolona je savršeno jednostavno.(slika 1)

slika 1

No, što je sa elementima web stranice? Nije li besmisleno na svaki novi predložak ponovo mjeriti i ucrtavati iste bannere, ispisivati Lorem Ipsum paragrafe teksta, ucrtavati i upisivati iste login boxove, iste vodoravne i okomite menije , iste liste nabrajanja…?? Nije li to masivni gubitak vremena?

Naravno da je.  A vrijeme je novac, zar ne? Pogotovo freelancerima koji mjesečno rade i po desetak dizajna.

Dakle, vrijeme možemo uštediti na vrlo jednostavan način – izradom svog jedinstvenog predloška za PSD. U predložak ćemo staviti samo okvire za slike / bannere i tekst bez ikakvog stylinga, boja itd… jer to će se razlikovati od dizajna do dizajna.

U jedan predložak staviti ćemo sve elemente jer će nam to biti puno jednostavnije za rad nego da imamo zaseban psd za tekst,  zaseban za bannere, zaseban za elemente formi itd..

Ovdje ću opisati kako sam ga ja sebi složila, a svatko ga može napraviti onako kako njemu odgovara.

Dakle, otvorimo naš PSD grid_960 predložak, povećamo ga na visinu od najmanje 3000 px i u njemu otvorimo novu mapu. Mapu možemo nazvati BANNERI i u nju ćemo staviti layere sa standardnim veličinama bannera. Ja sam na svaki napisala i veličinu. Sada, kada trebam u nekom novom dizajnu predvidjeti mjesto za banner samo ga potegnem iz predloška i smjestim na željeno mjesto. ( slika 2)

slika 2

Kada smo gotovi, ugasimo mapu i otvorimo novu. Nazovemo je TEXT AND ELEMENTS. U novoj mapi otvorimo podmape i nazovemo ih po elementima : navigacije, tekst, slideri, search, login, footer, liste… itd , sve što nam padne na pamet da će nam ikada trebati.

U te mape potegnemo već gotove elemente sa web stranica koje već imamo od prije ili ih nacrtamo / napišemo nove.  Naravno, koristimo Lorem Ipsum ili neki drugi dummy text (slika 3)

slika 3

Kada smo gotovi, ugasimo i tu mapu, pa možemo otvoriti novu i nazvati je FORM ELEMENTS. U nju možemo staviti podmape sa već gotovim elementima formi, scrollera, radio buttona, text area itd.. a naći ćemo ih na netu (slika 4)

slika 4

Nešto od gotovih elemenata naći ćete u Yahoo design stencil kit -u (kalendare, scrollere, bannere, carusel, Chart and tables, menus, buttons, navigation, pagination, mobile itd..)

yahoo design stencil kit

Dakle, jednog kišnog dana, kada imamo vremena možemo ga uložiti u izradu ovakvog predloška i uštediti puno sati i dana našeg budućeg života. Daaa, znaaam, to je zabavno kao i pospremanje ormara, ali isplati se . Nakon toga, izrada svakog novog dizajna biti će čisti kreativni posao slaganja, bojanja i ukrašavanja to jest dizajniranja 😉

Ajmo, na posao! Što se čeka? 🙂

PS. Na prijedlog čitatelja – elemente za wordpress možemo skinuti ovdje: http://www.area381.com/2007/07/10/wordpress-psd-framework/