Photoshop CS3 - Dizajn web stranice 01

U ovom tutorijalu pokazati ćemo kako izraditi "layout" web stranice pomoću Photoshop-a. Svaku stranicu započeti ćemo raditi sa izgledom, a tek onda idemo na HTML. Kada započinjete raditi web stranicu bitna vam je ideja i malo znanja o photoshopu. Krenimo...

Kako će izgledati naša stranica na kraju?

1. korak

Otvorimo Photoshop CS3 (ili CS2)

Pritisnimo "Ctrl+N" kako bi stvorili novi dokument

Dimenzije slike su 780x768,

Kliknimo na "OK"

2. korak

Kliknimo desnim klikom na "Gradient Tool" i odaberimo "Paint bucket Tool"

3. korak

Odaberimo boju

Upišimo "151515" u sljedeći okvir

Kliknimo na "OK"

4. korak

Pritisnimo bilo gdje u okviru slike lijevu tipku

Vaša pozadina trebala bi postati boje "#151515" (tamno siva)

5. korak

Pritisnimo "Ctrl+Shift+N" kako bi stvorili novi layer

U ime layera upišimo lines i pritisnimo ok

Nacrtajmo sljedeći oblik bijele boje u gornjem lijevom kutu

Crtanje je lagano izvesti sa alatom "Rectangle Tool" pa kasnije duplicirati layere, a kasnije ih spojiti u jedan

6. korak

Kliknimo na "Add a layer style" (pogledati gdje se nalazi u tutorijalu - izrada odraza), zatim na "Gradient overlay"

7. korak

Kliknimo na sljedeći okvir i pobrinimo se da su postavke identične kao na slici

8. korak

Namjestimo sljedeće postavke

Kliknimo na "OK" 2 puta

9. korak

Kliknimo desnim klikom na layer "lines", zatim kliknimo lijevim na "Convert to Smart Object"

Ponovno kliknimo desnim klikom na layer "lines", zatim kliknimo na "Rasterize Layer"

10. korak

Uvjerimo se da je i dalje odabran layer "lines"

Kliknimo na "Add a layer style", a zatim na "Gradient overlay"

Postavke su sljedeće, kliknimo na označeni okvir

11. korak

Odaberimo boje

boje su sljedeće

Kliknimo na "OK" 2 puta

12. korak

Namjestimo "Opacity" na 20%

Rezultat je sljedeći

13. korak

Dodajmo Logo u gornji lijevi kut

Na primjer

14. korak

Pritisnimo "Ctrl+Shift+N" kako bi stvorili novi layer

Nazovimo ga "menu"

Alat koji koristimo je "Rounded Rectangle Tool"

Postavke su sljedeće

Boja: #2f2f2f

Nacrtajmo sljedeći oblik

15. korak

Napišimo neki tekst

Postavke fonta su sljedeće

Primjer teksta

16. korak

Napravimo novi layer i nazovimo ga "title"

Nacrtajmo sljedeći oblik alatom "Rounded Rectangle Tool" istih postavka kao i kada smo crtali menu

17. korak

Layeru "title" dodjelimo style "Gradient Overlay" sa sljedećim postavkama

...i sljedećim bojama

Kliknimo na "OK" 2 puta

18. korak

Dodajmo neki tekst. Npr.

19. korak

Napravimo novi layer i nazovimo ga "scroll"

Nacrtajmo sljedeći oblik alatom "Rounded Rectangle Tool" istih postavka kao i kada smo crtali menu

Boja: #2f2f2f (ista kao i za menu)

20. korak

Dodajmo neki tekst. Npr.

21. korak

Napravimo novi layer i nazovimo ga "search"

Nacrtajmo sljedeći oblik alatom "Rounded Rectangle Tool" istih postavka kao i kada smo crtali menu

22. korak

Napravimo novi layer i nazovimo ga "box"

Alatom "Rectangle Tool" nacrtajmo sljedeći oblik

Boja: #3e3e3e

23. korak

Dodajmo stil "Stroke"

Postavke su sljedeće

24. korak

Dodajmo neki tekst. Npr.

25. korak

Nacrtajmo povećalo

Stvorimo novi layer naziva "povecalo"

Odaberimo bijelu boju

Odaberimo alat "Custom Shape Tool"

...i pronađimo povećalo

Naš rezultat je sljedeći

26. korak

Stvorimo novi layer i nazovimo ga "line"

Odaberimo alat "Line tool"

Debljina linije je 1px

Boja: #525252

Nacrtajmo liniju kao na slici

27. korak

Dodajmo sliku. Npr.

28. korak

Dodajmo vijest

Font: Arial, Regular, 12pt, None. Boja: #FFFFFF

29. korak

Dodajmo točkice

Najlaše ih je izvesti pomoću teksta na vrlo maloj veličini fonta

30. korak

Dodajmo tekst ispod točkica

Font: Arial, Regular, 9pt, None. Boja: #FFFFFF

Rezultat je sljedeći

31. korak

Ponovimo korake 28, 29 i 30 za drugu vijest

Rezultat je sljedeći

32. korak

Stvorimo novi layer i nazovimo ga "side"

Alatom "Rounded Rectangle Tool" istih postavki kao i za menu nacrtajmo sljedeće

33. korak

Layeru "side" dodjelimo style "Gradient Overlay Sljedećih" postavki

Boje

34. korak

Napišimo neki tekst. Npr.

35. korak

Stvorimo novi layer i nazovimo ga "footer"

Boja: #2f2f2f

Alatom "Rounded Rectangle Tool" istih postavki kao i za menu nacrtajmo sljedeće na dnu slike

36. korak

Dodajmo neki tekst. Npr.

37. korak

Dodajmo sljedeće znakove u prostor header-a

38. korak

Dodajmo gumb read more iza prve vijesti

Kraj. Uskoro dolazi tuturijal u kojem ovaj template pretvaramo u HTML

PSD File: download

Korišteni fontovi: download

Sve nejasnoće možete poslati na igor@ucionica.net

Uživajte ;-)

Povratak

Servis daljinske pomoći

Učionica pomaže djeci

Development blog

Whitepapers

RSS