Naredite lep, čist header

V tem photoshop vodiču vam bom pokazal, kako narediti preprost a zadovoljiv header za spletno stran z veliko videi, kjer je iskanje pomembno. Podoben header lahko uporabite tudi za druge spletne strani z veliko vsebine (besedila pesmi, knjigarna, spletna trgovina ... ).

1. Ustvarite nov dokument. Moj bo velikosti 1000x200px.

2. Z Rectangle Toolom sedaj zgoraj naredite en okvirček velikosti 1000x45 pikslov. Barva ni pomembna.

3. Okvirčku sedaj dodajte Gradient Overlay (Layer > Layer Style > Gradient Overlay).

4. Ustvarite nov Layer. V orodjarni izberite Rectangle Marquee Tool in potegnite 2 piksla visok okvirček pod sedajšnjim zelenim okvirčkom. Dodajte mu isti Gradient Overlay, kot zgoraj.

5. Sedaj isto naredite za zgornji rob, le da zamenjate barvi pri Gradient Overlayju.

6. Na vrsti ja gumb aktivne in hover povezave (CSS: a:active, a:hover {} ). Ustvarite nov Layer. Z Marquee Toolom označite gumb. (91x43, Spodnjega roba naj ne prekriva, medtem, ko zgornjega lahko). Gumb pobarvajte.

7. Gumbu dodajte Inner Shadow in pa Gradient Overlay.

8. Gumbu dodajte spodnji rob, 2 px visok (kakor okvirčku) z istim gradient Overlayjem, kot pri gumbu.

9. Nad okvirčkom spišite besede, ki bodo predstavljale vaš meni.

10. Sedaj bomo naredili črtice med besedami. Ustvarite nov Layer, uporabite Marquee Tool in označite pravokotnik, 2px širok. Pobarvajte ga.

11. Sedaj tej črtici dodajte Gradient Overlay. Opacity nastavite na 65%.

12. Sedaj duplicirajte ta Layer s črtico ( Ctrl+J ), da dobite več črtic, nato pa jih porazporedite po meniju.

13. Sedaj ustvarite nov Layer in v orodjarni izberite Elliptical Marquee Tool. Označite elipso, kakor vam kaže slika. Pobarvajte jo.

14. Na seznamu Layerjev nesite to elipso čisto dol, da bo pod vsemi drugimi Layerji. Dodajte ji Gradient Overlay in pa Drop Shadow.

15. Zdaj bom uporabil ikono za video, poleg pa bom napisal ime spletne strani (Bookman Old Style, Italic, 25px, Crisp).

16. Ustvarite nov Layer in s pomočjo Marquee Toola označite pravokotnik, ki bo služil, kot okvirček za iskanje. Pobarvajte ga na belo (#ffffff).

17. Dodajte mu Stroke, debeline 1 px.

18. Poleg tega okvirčka naredite še en gumb (išči) in sicer tako, da na seznamu Layerjev označite že narejen oranžen gumb in pritisnite Ctrl+J. Nato novonastali gumb prenesite na vrh, nad vse Layerje. V orodjarni izberit Move Tool in ga namestite poleg okvirčka za iskanje.

19. Sedaj na tipkovnici pritisnite Ctrl+T (free transform) in ga pomanjšajte na želeno velikost. Skrijte Inner shadow. Vanj nato vpišite še besedo išči.

20. Desno zgoraj v menijsko vrstico lahko dodate še ikono za uporabnika, da header ne bo tako dolgočasen.

21. In to je naš header za video portal.

*kliknite na sliko