Bara de meniu

Photoshop - Grafica Web

  • Click pe imagine pentru a o vedea la rezolutia originala.
1.Deschide un nou document : File - New - Width:700px / Height: 350 px - OK

2.Adauga un nou layer : Layer - New - Layer.
  Selecteaza culoarea gri (#182020) , apoi unealta Rounded Rectangle Tool ( Radius: 15px) si deseneaza un dreptunghi in scena:


3.Alege unealta Pen Tool si adauga setarile (de sus):


4.Apropie( CTRL + "+") si incearca sa faci o selectie asemanatoare - urmand pasii:
Adauga doua puncte pe partea superioara a barei :

Adauga un punct in dreapta/jos, si tinand apasat click trage cursorul in jos pana vei obtine o imagine asemanatoare:

Aplica din nou un click in dreapta:

Tinand apasata tasta SHIFT  click in dreapta barei:

Adauga puncte pentru a acoperi suprafata barei care urmeaza sa fie steara:


5.Click dreapta in scena - Make Selection - Feather Radius: 0 pixels - OK


6.Select - Inverse.
  Avand layerul cu dreptunghiul selectat, apasa tasta Delete pentru a sterge.
  CTRL + D pentru a deselecta.


7.Click dreapta pe layerul cu bara de navigare - Blending Options - Bifeaza Gradient Overlay si adauga un gradient , in stanga un gri mai inchis, iar in dreapta mai deschis:


8.Bifeaza Outer Glow si modifica la culoare - Negru , si la Blend Mode - Normal - OK.


9.Selecteaza layerul Background si adauga un nou layer deasupra : Layer - New - Layer.
  Selecteaza Rounded Rectangle Tool, culoarea pe care o doresti (am ales #2da7dd) si deseneaza butoanele.


10.Click dreapta pe layerul cu butoanele - Blending Options -Bifeaza Outer Glow si adauga setarile de la pasul 8:



11.Selecteaza unealta Text Tool, culoarea alb, marime 35 px , font Arial si adauga numele butoanelor.


  • Acest tutorial a fost doar ca o idee despre metoda folosita la crearea unui astfel de meniu, dar poti experimenta modificand latimea/inaltimea sau alte efecte pentru layere.

    • O varianta mai finisata:

    Click pe imagine pentru a o vedea la rezolutia originala.

  • Click aici pentru a descarca sursa tutorialului (.psd).
    • Aboneaza-te prin RSS
    Comentarii (22)add comment

    Andre123 said:

    		8)
     
    Reporteaza Abuz
    Displace
    Apreciaza
    aprilie 21, 2009
    Voturi: +2

    Vladorz said:

    		multumesc foarte mult pentru tutorial.. chiar aveam nevoie de asa ceva la un proiect :)
     
    Reporteaza Abuz
    Displace
    Apreciaza
    aprilie 22, 2009 | url
    Voturi: +1

    cosminel4u said:

    		Si in ce format il salvam ca sa il punem in HTML ? :D
     
    Reporteaza Abuz
    Displace
    Apreciaza
    mai 11, 2009
    Voturi: +1

    admin said:

    		Il tai in mai multe imagini (jpg, png, gif), si apoi le combini in html.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    mai 11, 2009 | url
    Voturi: +2

    cosminel4u said:

    		Ahamz . Multumesc :D Credeam ca exista un format si il opui direct :D
     
    Reporteaza Abuz
    Displace
    Apreciaza
    mai 11, 2009
    Voturi: +0

    clau said:

    		admin te rog fa un tutorial la html cum adaugi un astfel de meniu ca nu stiu cum tai si etc:) sunt incepator in ps. Te rog foarte mult
     
    Reporteaza Abuz
    Displace
    Apreciaza
    februarie 01, 2010 | url
    Voturi: +0

    admin said:

    		S-a facut :)

    PS: Te rog scrie corect
     
    Reporteaza Abuz
    Displace
    Apreciaza
    februarie 02, 2010
    Voturi: +0

    ShadoW said:

    		admin eu cand dau delete mi se sterge toat dreptunghiul facut cu gri imi zici si mie cum sa fac ca sa nu mia mi se sterga?
     
    Reporteaza Abuz
    Displace
    Apreciaza
    februarie 11, 2010
    Voturi: +0

    bogdanel said:

    		oameni buni sunteti
    cei mai buni sunteti singuri care explica rar si raspicat si nu se dau mari si in plus puneti si surse si idei si ....ce sa mai bravo
    tinetio tot asa
     
    Reporteaza Abuz
    Displace
    Apreciaza
    februarie 26, 2010
    Voturi: +0

    isf_ionut said:

    		Am o problema...1.eu am photoshop cs2 si nu gasesc rectangle alea...si 2 nu merge sa downl documentu psd:| se poate pune din nou???
     
    Reporteaza Abuz
    Displace
    Apreciaza
    aprilie 14, 2010 | url
    Voturi: +0

    admin said:

    		1. Rectangle Tool este in orice versiune de photoshop. Apasa U (sau SHIFT U pana apare) pentru a selecta.

    2. Click dreapta pe cuvantul "aici" - Save.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    aprilie 15, 2010
    Voturi: +1

    ZOGO said:

    		Mie numi merge cand dau delete zice could not complete you request because the content of the layer is nor directely editable :((
     
    Reporteaza Abuz
    Displace
    Apreciaza
    aprilie 25, 2010
    Voturi: +0

    admin said:

    		Click dreapta pe layer - Rasterize
     
    Reporteaza Abuz
    Displace
    Apreciaza
    aprilie 26, 2010
    Voturi: +0

    rzv said:

    		cum fac scrisul acela in bara ca nu reusesc nici cum.. ai putea te rog sa pui un tutorial mai complex ca unele chestii care tre facute nu le-ai scris iar acest lucru cu scrisul in casutele alea si sa arate cat de cat acceptabil nu-mi iese nici cum.. ms :)
     
    Reporteaza Abuz
    Displace
    Apreciaza
    mai 12, 2010
    Voturi: +0

    admin said:

    		Pai pur si simplu selectezi acea unealta si scrii un text. Doar atat :)
     
    Reporteaza Abuz
    Displace
    Apreciaza
    mai 12, 2010
    Voturi: +0

    amazingweb said:

    		cum pot face efecte atunci cand cineva se duce cu mouseul pe meniu?
     
    Reporteaza Abuz
    Displace
    Apreciaza
    iunie 10, 2010 | url
    Voturi: +0

    Derutatu' said:

    		Am facut totul pana la butoane ( pasul 9) dar nu stiu cum il pun in spate ... adica ca in imagine .. mi se vede tot peste meniul facut :( Cum fac sa fie in spate butoanele .. adica sa nu fie peste ...

    http://img839.imageshack.us/img839/4150/23432452.jpg
    Poza facuta in Photoscape ... doar ce mam apucat azi de photoshop si vreau si eu sa stiu, mersi.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    septembrie 26, 2010 | url
    Voturi: +0

    Andrei3500 said:

    		Ce photoshop folosesti?
     
    Reporteaza Abuz
    Displace
    Apreciaza
    mai 15, 2011
    Voturi: +0

    Coach Outlet Online said:

    		fdsf475Here you will find all the latest Coach Outlet coupons.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    iulie 28, 2011 | url
    Voturi: +0

    Brad Marchand Jersey said:

    		cum pot face efecte atunci cand cineva se duce cu mouseul pe meniu? Thank you !
     
    Reporteaza Abuz
    Displace
    Apreciaza
    octombrie 13, 2011 | url
    Voturi: +0

    Computer Repair Austin said:

    		Did you mean: Nice tutorial, just trying it myself :)
    Frumos tutorial, doar itmyself încercând:)
     
    Reporteaza Abuz
    Displace
    Apreciaza
    noiembrie 11, 2011 | url
    Voturi: +0

    tahitian noni juice said:

    		Just saying thanks will not just be adequate, for the wonderful clarity in your writing.It is imperative that we read blog post very carefully.
     
    Reporteaza Abuz
    Displace
    Apreciaza
    noiembrie 30, 2011 | url
    Voturi: +0

    Adauga un comentariu
    Micsoreaza | Mareste

    busy