Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

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

Autor/ica Weberica

Završila fotografiju na ŠPU, a nakon toga grafički i web dizajn. Rođena, živi i radi u epicentru Zagreba. Stalni član Kroativ mreže i autor mnogih korisnih članaka, radi kao stalni suradnik Web Inkubator studija.

Oglas

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)

predlošci za web dizajnere

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)

predložak za web dizajn

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)

predložak za web dizajn

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)

psd predložak za web dizajn

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..)

predložak elemenata za web dizajn - yahoo design stencil kit

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/

Označeno s: ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

5 komentara

  • Web dizajn kaže:

    Veoma koristan tekst! Hvala!

  • Schtefek kaže:

    Svaka čast, pa ovime se uštedi SSStrašno puno vremena, hvala najljepša.

  • booking kaže:

    Odlican teks za pocetnike, e sad i jedan predlog: mozda bi bilo dobro da se sada priblizi korisnicima kako da isti dizajn iskoriste za prvljenje templejta za CMS.

    • TrioLatice kaže:

      Ovaj članak je davno napisan , pa u današnje vrijeme komentar nema svoju svrhu koju bi tada imao. Stvaranje PSD za CMS je daleko složenije nego što je to za statične stranice. Međutim kada to jednom napravite kasnije si olakšavate posao.
      Razne tutorijale koje sam ja nekada koristio davali su samo neke osnovne korake u tome. Ni jedan nije ulazio dovoljno u detalje, koji su u tome bitni. U takvom turorijalu i nije toliko bitno da te nuči kako da napraviš nešto u Photoshopu, daleko je bitnije da te nauči na koji naćin da to primjeniš u svome predlošku.
      Iz toga raloga potrebno je i poznavati i sam način rada dotičnoga CMS-a . Pa i u tome je potrebno videjti do koje granice detalja imaš namjeru ulazit prilikom dizajniranja predloška.

  • Weberica kaže:

    evo *booking i to smo vam pronašli :)

Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">