Menu, ktoré zvládne každý:)

Tento tutoriál je veľmi jednoduchý a zvládnuť by ho mal naozaj každý. Použitý soft bol Photoshop CS2 Výsledok je elegantné, moderné menu, ktoré pôsobí priestorovo. Pusťme sa do toho.

Krkok 1 .

Otvoríme si nový dokument o rozmeroch 1024×182 (podstatná je hlavne šírka aby sme vedeli ako bude menu vyzerať na stránke)
Vytvoríme novú vrstvu (skratka: ctrl+shift+N), nazveme ju „základ“. Vyberieme nástroj obdĺžnikový výber (skratka: M), vytvoríme obdĺžnikový výber na šírku celého dokumentu, teda 1024px, výška je na vás. Ja som zvolil 29px. Teraz pravým klikom na výber zvolíme „transformovať výber“. V hornom menu ako zmeníme šírku zo 100% na 70% . Teraz máme výber aký potrebujeme a je v strede dokumentu . Stlačením „G“ zvolíme nástroj prechod. Upravíme ho podľa potreby. Zvoľte si dva odtiene sivej, bledšia bude hore a tmavšia dolu. Výber vyplníme týmto prechodom a s vrstvou „základ“ sme skončili.


Krok 2.

Teraz vyrobíme button „hover“. Vyberieme si časť panelu vo vrstve základ. Tento výber nám určí budúcu veľkosť buttonu. Stlačením ctrl+J skopírujeme aktuálny výber do novej vrstvy. Premenujeme ju na „button hover“. Dvojklikom na náhľad vrstvy sa dostaneme do menu štýl vrstvy. Zaklikneme si efekt „vnútorná žiara“ a nastavíme podľa obrázka.
Opacity vrstvy nastavíme na 55%, v menu vrstvy vyberieme prekrývať.

Krok 3.

Teraz vytvoríme nápis a vytiahnutie. Stlačte „T“ alebo vyberte nástroj písanie textu (vodorovne). Font som zvolil Trebuchet MS, veľkosť 14 bold.
Keď máme text hotový, urobíme rámik okolo tlačidiel a panelu. V zásade bude postup takýto: držte ctrl a kliknite na náhľad vrstvy „button hover“ v panely s vrstvami. Vytvorili ste tak výber veľkosti buttonu, v novej vrstve „vytiahnutie“ pravým klikom vyberte možnosť „vytiahnuť výber“. Farbu zvoľte svetlú sivú, umiestnenie na stred a hrúbku 1px. Potvrďte „OK“ a je to. Takto postupujte pri každom vyťahovaní. Aj vrstvy “základ”.


Krok 4.

Tieň môžeme urobiť množstvom spôsobov. My na to pôjdeme takto: Vytvorte novú vrstvu, nazvite ju „tieň“. Vytvorte výber široký ako „základ“ a vysoký cca ¼ vrstvy základ. Vyplňte ju tmavo sivou farbou. Vyberte v hornom menu filter – rozostrenie – gausiánske rozostrenie, hodnotu zvoľte podľa chuti. Zvoľte nástroj výber (skratka: M) a držaním ctrl a pohybom myši alebo šípok dolaďte polohu tieňa. Naše menu je hotové. (kliknutím sa obrázok zväčší)

Ak sa vám tutoriál páčil, pridajte komentár. Ak nie, napíšte prečo, nabudúce to zmením. Prípadne ak máte konkrétnu požiadavku na nejaký návod, napíšte a urobím ho čo najkôr

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.