|
Pregledna navigacija je na spletni strani zelo pomembna, saj obiskovalcu omogoča prijetno premikanje čez vsebino strani in pa zmanjšuje čas, ki ga uporabnik porabi, ko se sprašuje ... kam že moram klikniti?!? Navigacijo boste s pomočjo pomožnih črt hitro ustvarili.
1. V Photoshopu ustvarite nov dokument velikosti 600x150 pikslov. Ozadje s Paint Bucket Toolom  pobarvajte na temno modro ( #03346e).
2. Naredite pomožne črte. Če pomožnih črt še ne znate delati si oglejte vodič Pomožne črte v Photoshopu.
Vertical: 216, 311, 312, 407, 408, 503, 504, 599
Horizontal: 6, 7, 15, 142, 143
S pomožnimi črtami si boste veliko pomagali, saj določajo celotno postavitev navigacije.
3. Z Marquee Toolom  označite celotno območje med vodoravnima pomožnima črtama 7 in 142.
Sedaj v orodjarni izberite Gradient Tool  in nastavite barve.
Ustvarite nov Layer (Layer > New > Layer) in z gradientom naredite preliv.
4. Ustvarite nov Layer. Z Marquee Toolom označite pravokotnik in ga pobarvajte na belo.
Opacity mu znižajte na 10%.
5. Na tipkovnici pritisnite Ctrl+J in z Move Toolom  premaknite novonastali okvirček 1px desno od prvotnega. Nato znova pritisnite Ctrl+J in znova premaknite novonastali okvirček 1px desno od prvotnega. To storite še enkrat.
6. Ustvarite nov Layer. Z Marquee Toolom označite en piksel visok pravokotnik med vodoravnima črtama 6 in 7 ter ga pobarvajte na svetlo modro ( #91c4f3). Isto storite še za prostor med pomožnima vodoravnima črtama 142, 143.
7. Sedaj bomo naredili barvne črte nad menijskimi možnostmi.
Ustvarite nov Layer. Z Zoom Toolom  približajte pogled in z Marquee Toolom označite pravokotnik ter ga pobarvajte na zeleno ( #65cb00 ). Pobarvan okvirček mora bit 1px pod vodoravno črto.
8. Na tipkovnici stisnite Ctrl+J, premaknite okvirček na desno in ga pobarvajte na rdečo ( #ff0000 ). Ponovite postopek le da tokrat pobarvajte okvirček na oranžno ( #ffb400 ), naslednjega pa še na vijolično ( #dd00ff ).
9. Na vrsto pridejo ikone. Na spletu lahko poiščete svoje, lahko pa uporabite moje.
Razvrstite jih približno tako, kot kaže spodnja slika.
10. Še besedilo, ki ga ustvarite s pomočjo Type Toola  :
Domov, Vodiči, Forum, Kontakt: Kabel Bd, Bold, 11px, Sharp, #ffffff
Moje: Bookman Old Style, Bold Italic, 24px, Chrisp, #ffffff
Mesto: Bookman Old Style, Italic, 24px, Chrisp, #ffffff
Kjer znanje šteje: Bookman Old Style, Regular, 9px, Sharp, #ffffff
11. In tu je naša preprosta pregledna navigacija.
Če ste navigacijo uporabili na svoji spletni strani lahko na forumu prilepite povezavo do nje in nam jo pokažete.
|
