Dizajniranje web stranice u photoshopu

Do sada smo na Kroativu objavili nekoliko tutoriala o dizajniranju i kodiranju web stranice  Osnovni raspored i širine kolona u web dizajnu,   Rezanje  psd dizajna za kodiranje u HTML , Kako napraviti moderni web d.0 dizajn i Kako napraviti magazin style dizajn.

Danas ćemo pisati o dizajniranju web stranice u photoshopu. Nećemo ići previše u širinu i detalje nego ćemo pokušati početnicima objasniti nekoliko osnovnih stvari i nadovezati se na post o osnovnom rasporedu i širinama kolona u web dizajnu. Pretpostavka je da svi već znamo rukovati Adobe ps. alatima te ovdje neće biti podrobnih objašnjenja za to.

Za primjer ćemo uzeti vrlo  jednostavni dizajn korišten i u tutorialu o rezanju PSD za HTML (slika 1)

slika 1

Pogledajmo od čega se sastoji : Header sa logotipom i ilustracijom, topnavigacija sa 5 tabova za linkove, dio za izdvojeni tekst, dio za glavni tekst i footer. Sadržaj je smješten u tri kolone.

GRID 960 PSD TEMPLATE

Dizajniranje a kasnije i kodiranje web stranice jako će nam olakšati grid 960 system psd template pa savjetujemo da ga skinete i spremite na svoj PC. Psd template nalazi se u mapi 960_download/templates/photoshop/960_grid_12.psd.

Kada ga otvorimo u photoshopu izgledati će ovako:

slika 1

Veličina dokumenta će biti 1000 x 1000 px pa ćemo prvo povećati canvas (image / canvas size / ) i namjestiti na 1920 x 1000 px . Zatim ćemo ga spremiti pod drugim imenom u drugu mapu tako da nam originalan template ostane za buduće projekte.

Ružićaste crte možemo isključiti i uključiti a nalaze se u mapi 12-coll-grid. Također možemo uključiti i isključiti guides (view / show/ guides) da nam ne smetaju dok crtamo. Nemoramo se bojati da ćemo ih pomaknuti tokom rada jer su svi ti layeri zaključani. Međutim, moramo paziti da ne pomaknemo guides.

Širina containera naše web stranice jednaka je širini od prve lijeve zelene crte do krajnje desne (guides) i iznosi 960px. Naš sadržaj (tekst i slike)  nalaziti će se unutar ružićastih kolona tj unutar 940px.

Pa počnimo:

BODY BACKGROUND

1) Dupliciramo bg layer i na njega izlijemo boju cappuccino pjene koju smo uzeli sa slike sa šalicom. To će biti naš body – background.

2) Otvorimo novi layer, odaberemo front color tamno smeđu i nacrtamo 250 px visoki pravokutnik. Na blending options damo pravokutniku lagani gradient overlay u dvije nijanse tamnosmeđe boje koje smo uzeli sa šalice.

HEADER – gornji dio

Na lijevu stranu headera dolazi logotip a pored njega  može doći neka zgodna ilustracija koja će našu web stranicu učiniti zanimljivijom. Ova ilustracija je složena pomoću radial gradienta, kista sa viticama i ikone šalice sa kavom. (slika 2)

slika 2

NAVIGACIJA

3) Sada na red dolaz top navigacija. Rub prvog taba namjestimo da se poklapa sa rubom logotipa i rubom prve kolone, 10 px od margine. Kako bi nam svi tabovi bili iste veličine možemo nacrtati samo prvi a zatim ih duplicirati  i poravnati rubove i razmak među njima. Za početak možemo sve tabove nacrtati u istoj tamnosmeđoj boji za a: stanje.

slika 3

TOP CONTENT – izdvojeni sadržaj

4) Na novom layeru nacrtati ćemo novi pravokutnik boje bijele kave, visok oko 300 px.

Otvoriti ćemo još jedan layer i na njega staviti sličicu izlivene kave koju smo napravili koristeći pjenu iz šalice.

Sada ćemo pravokutniku dati lagani gradient koji će se savršeno stopiti sa nijansom prolivene kave, dati mu stroke u najsvjetlijoj nijansi odabranog gradienta i sjenu na donjem rubu.

Zatim ćemo promijeniti i boju prvog taba navigacije (za a:hover stanje)  kako bi mu donji rub bio neprimjetan.  (slika 4)

slika 4

FOOTER – dno stranice

5) Sada nam preostaje još nacrtati pravokutnik za footer. U našem slučaju  visok je samo 50 px i ima isti tamnosmeđi gradient kao i pozadina header-a.

Time smo nacrtali osnovni dizajn naše jednostavne web stranice. Svaki dio nalazi se na svom layeru i može se po želji povećati, smanjiti ili mu se može izmjeniti boja.

ELEMENTI

Također je važno u dizajnu predvidjeti sve elemente za koje mislimo ili nam je rečeno da će biti potrebni na web stranici.

Osim topnavigacije, naslova, podnaslova i teksta to mogu biti još i tražilica, kontakt forme, login i register,  box sa novostima, vremenska prognoza, flickr galerija, dodatna okomita navigacija, padajuća navigacija, razne galerije slika, liste nabrajanja itd…

Dobro je barem vizualno zapamtiti i razne js slidere, galerije, efekte navigacije itd kako bismo ih znali predvidjeti u našem dizajnu. Na kroativu smo već objavljivali linkove sa jQuery, Mootools i flash primjerima pa ih se dobro ponekada prisjetiti.

Ne smijemo zaboraviti odrediti i boju linkova za a i a:hover stanje kako u navigacijama tako i unutar teksta.

CONTENT – sadržaj

6) Sadržaj je sav tekst i sve fotografije koje nisu dio dizajna same web stranice već ih određuje klijent sam. Iako niti jedan dio sadržaja nećemo rezati iz PSD-a, ipak ga moramo prikazati u dizajnu.

Zadaća dizajnera je da odabere vrstu i veličinu fonta, širine kolona, veličine i smještaj fotografija i svih ostalih elemenata na stranici . Klijent to sve želi vidjeti prije nego odobri dizajn.

Font za logotip možemo odabrati po želji jer ćemo ga kasnije ubaciti kao sliku. Za sve ostalo najbolje je za početak koristiti samo web safe fontove. Ne moramo imati kompletne tekstove od klijenta, dovoljan nam je tzv. “dummy tekst”. Najćešće se koristi “Lorem ipsum” a možemo ih kopirati odavde.

Na odvojene layere ubaciti ćemo sadržaj. Layere ćemo grupirati u mape za pojedine elemente – mapa navigacija, top tekst, lijeva kolona, srednja kolona, desna kolona i footer. Time ćemo olakšati posao i sebi i onome tko će naš dizajn kodirati.

Paziti ćemo da je naš dizajn konzistentan tj da se poklapaju rubovi naslova sa rubovima teksta i slika kao i da su nam margine svuda jednake. Ovdje će nam odlično poslužiti naš grid 960 template (slika 5)

slika 5

I to bi bilo to. Naš dizajn je spreman za pokazivanje klijentu, rezanje i za kodiranje u grid 960 frameworku.

gotovi dizajn

NAPOMENE

Važno je zapamtiti da se dizajn za tisak i dizajn za web razlikuju po jednoj vrlo važnoj stvari a to su DETALJI.

Dok tisak podnosi velike jednobojne površine i debele obrube u web dizajnu sve je puno suptilnije. Ovdje nema mjesta za kričave jarke boje, debele sjene i obrube. Gradienti moraju biti suptilni, a razlika između najtamnijeg i najsvjetlijeg dijela neka bude u samo nekoliko nijansi. Na Kroativu smo već pisali o novim trendovima u web dizajnu, tipografiji, teksturama itd pa početnici imaju od kuda početi.

Primjer lijepog dizajna sa puno suptilnih detalja i svim potrebnim elementima za blog možemo pogledati i besplatno downloadirati ovdje, a izradio ga je i poklanja vam ga naš Webmaster.

free psd web design

Postoje web dizajneri (ili bi bolje bilo reći developeri)  koji uopće ne koriste photoshop nego stranicu stilski urede isključivo u Css-u bez korištenja slika. Iako i to ponekada može dati zgodne rezultate mislim da bi web bio jako dosadno mjesto kada bismo uvijek sve stranice radili na taj način.