Vodič je stariji od 2 godine i možda nije u potpunosti aktualan. Za provjeru, koristite “pitaj učitelja”.

Dizajn moderne web stranice

Dizajn moderne web stranice
Autor članka: Igor Kovačić
Kategorije: Dizajn
Teme: ,
Datum objave: 20.12.2009

U ovom tutorijalu pokazati ćemo kako izraditi “layout” web stranice pomoću Photoshop-a. Svaku stranicu obično započinjemo crtanjem, a tek tada krećemo sa prebacivanjem u XHTML. Kada započinjete raditi web stranicu bitna vam je ideja i malo znanja o photoshopu. Krenimo…

Kako će izgledati naša stranica na kraju?

(kliknite za uvećanje)
Web dizajn 01

1. korak

Otvorimo Photoshop CS3 (ili CS2)

Pritisnimo “Ctrl+N” kako bi stvorili novi dokument

Dimenzije slike su 780×768

Web dizajn 02

Kliknimo na “OK”

2. korak

Kliknimo desnim klikom na “Gradient Tool” i odaberimo “Paint bucket Tool”

Web dizajn 03

3. korak

Odaberimo boju

Web dizajn 04

Upišimo “151515” u sljedeći okvir

Web dizajn 05

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

Web dizajn 06

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

Web dizajn 07

8. korak

Namjestimo sljedeće postavke

Web dizajn 08

Kliknimo na “OK” 2 puta

9. korak

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

Web dizajn 09

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

Web dizajn 10

11. korak

Odaberimo boje

boje su sljedeće

Web dizajn 11

Kliknimo na “OK” 2 puta

12. korak

Namjestimo “Opacity” na 20%

Rezultat je sljedeći

Web dizajn 12

13. korak

Dodajmo Logo u gornji lijevi kut

Na primjer

Web dizajn 13

14. korak

Pritisnimo “Ctrl+Shift+N” kako bi stvorili novi layer

Nazovimo ga “menu”

Alat koji koristimo je “Rounded Rectangle Tool”

Web dizajn 14

Postavke su sljedeće

Web dizajn 15

Boja: #2f2f2f

Nacrtajmo sljedeći oblik

Web dizajn 16

15. korak

Napišimo neki tekst

Postavke fonta su sljedeće

Web dizajn 17

Primjer teksta

Web dizajn 18

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
Web dizajn 19

17. korak

Layeru “title” dodjelimo style “Gradient Overlay” sa sljedećim postavkama

Web dizajn 20

…i sljedećim bojama

Web dizajn 21

Kliknimo na “OK” 2 puta

18. korak

Dodajmo neki tekst. Npr.

Web dizajn 22

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)

Web dizajn 23

20. korak

Dodajmo neki tekst. Npr.

Web dizajn 24

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

Web dizajn 25

22. korak

Napravimo novi layer i nazovimo ga “box”

Alatom “Rectangle Tool” nacrtajmo sljedeći oblik

Boja: #3e3e3e

Web dizajn 26

23. korak

Dodajmo stil “Stroke”

Postavke su sljedeće

Web dizajn 27

24. korak

Dodajmo neki tekst. Npr.

Web dizajn 28

25. korak

Nacrtajmo povećalo

Stvorimo novi layer naziva “povecalo”

Odaberimo bijelu boju

Odaberimo alat “Custom Shape Tool”

Web dizajn 29

…i pronađimo povećalo

Web dizajn 30

Naš rezultat je sljedeći

Web dizajn 31

26. korak

Stvorimo novi layer i nazovimo ga “line”

Odaberimo alat “Line tool”

Debljina linije je 1px

Boja: #525252

Nacrtajmo liniju kao na slici

Web dizajn 32

27. korak

Dodajmo sliku. Npr.

Web dizajn 33

28. korak

Dodajmo vijest

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

Web dizajn 34

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

Web dizajn 35

31. korak

Ponovimo korake 28, 29 i 30 za drugu vijest

Rezultat je sljedeći

Web dizajn 36

32. korak

Stvorimo novi layer i nazovimo ga “side”

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

Web dizajn 37

33. korak

Layeru “side” dodjelimo style “Gradient Overlay Sljedećih” postavki

Web dizajn 38

Boje

Web dizajn 39

34. korak

Napišimo neki tekst. Npr.

Web dizajn 40

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

Web dizajn 41

36. korak

Dodajmo neki tekst. Npr.

Web dizajn 42

37. korak

Dodajmo sljedeće znakove u prostor header-a

Web dizajn 43

38. korak

Dodajmo gumb read more iza prve vijesti

Kraj

Uskoro dolazi tuturijal u kojem ovaj template pretvaramo u HTML

Download PSD file-a

Download korištenih fontova

U slučaju dodatnih pitanja, slobodno nas kontaktirajte i putem rubrike “Pitajte učitelja”.

Uživajte ;-)

3 komentara na članak 'Dizajn moderne web stranice'

Pratite komentare na članak 'Dizajn moderne web stranice' putem RSS feeda.

  1. NeriX
    07.02.2010 u 16:39h

    Mocan tutorijal svaka cast .. nadam se da ce ubrzo doci kako da se ovaj lijepi dizajn pretvori u html. Pozdrav …

  2. Igor Kovačić
    07.02.2010 u 16:40h

    U zadnje vrijeme rjesavamo neke obaveze pa ne stizemo pisati previse. Uskoro stize tutorijal ;-) o pretvaranju u html

  3. Stanislav
    15.07.2010 u 00:26h

    Svaka čast!
    Tutorijal, a i cijela stranica je fenomenalna!

Ostavite komentar na ovaj članak

Uvredljivi i spam komentari biti će obrisani. Ukoliko se Vaš komentar ne pojavi odmah, pričekajte da ga odobrimo ;-). Odgovore na pitanje brže ćete dobiti ukoliko nas kontaktirate putem forme pitajte učitelja.