Bara de Navigare Simpla

Photoshop - Grafica Web


Click pe imagine pentru a o vedea la rezolutie maxima.

1.Deschidem un nou document: File - New - 600px x 300 px.

2.Selectam Paint Bucket Tool, culoarea #D8D1C4 si aplicam pe scena pentru a schimba culoarea fundalului.

3.Adaugam un nou Layer - CTRL + SHIFT + ALT + N.
  Selectam unealta Rectangular Marquee Tool(tasta M) si facem o selectie asemanatoare:


4.Selectam unealta Gradient Tool(tasta G), de sus sa fie bifata prima iconita - pentru Gradient Linear, apoi click in stanga ei pe dreptunghi pentru a selecta culorile pentru gradient.
  Apoi, in partea stanga(dublu click pe sageata de jos - stanga) adaugam culoarea cu codul e6ded0, apoi in dreapta culoarea c4ba9a - OK pentru a termina de selectat culorile.

  Inapoi pe scena, tinand apasa tasta Shift(pentru a trasa o linie verticala), incepand de deasupra selectiei, trasam pana in josul ei un gradient.

  CTRL + D pentru a deselecta.

5.Click dreapta pe layerul cu bara - Blending Options - bifeaza Drop Shadow - modifica fata de setarile initiale - Distance: 0px

  Bifeaza apoi Stroke cu setarile: Size: 1 px / culoarea alb :


6.Selecteaza unealta Burn Tool, de sus Range: Midtones / Exposure:100 %, iar dand click dreapta pe scena am selectat la Master Diameter: 22 px / Hardness: 0 %.

  Tinand apasata din nou tasta SHIFT, de la stanga la dreapta, in partea superioara a barei, trasam o linie care va inchide culoarea:


7.Selectam unealta Dodge Tool, cu aceleasi setari : Range: Midtones / Exposure:100 % si Master Diameter: 22 px / Hardness: 0 %.
  Doar ca acum, trasam acea linie, tinand apasata tasta SHIFT, in partea de jos:


8.Adaugam un nou layer - SHIFT + CTRL + ALT + N.
  Selectam unealta Rectangel Tool, culoarea alb si desenam un dreptunghi asemanator, care va avea rol de stralucire pentru bara:


9.Din panoul de layere, selectam pentru layerul nou, modul "Soft Light" si Opacity:30 %.


11.Selectam unealta Horizontal Type Tool , de sus eu am folosit : Font: Georgia / Regular/ 22 px / Smooth si scriem numele butoanelor, dupa fiecare nume apasand de cate ori tasta SPATIU (Space) pentru a avea un loc mai mare intre butoane:


12.Click dreapta pe layerul cu textul - Blending Options - Drop Shadow si adauga urmatoarele setari:


13.Adauga un nou layer - SHIFT + CTRL + ALT + N.
  Selecteaza unealta Rectangle Tool, culoarea negru si deseneaza un dreptunghi deasupra primului buton pentru a evidentia ce se intampla cand cursorul mouse-ului va fi deasupra acelui buton - Hover Effect.
  Apoi din panoul cu layere, ca la pasul 9 , modifica modul in Soft Light si Opacity: 30 %.

Imaginea finala - click pe imagine pentru a o vedea la rezolutie maxima:


Succes
Aboneaza-te prin RSS
Comentarii (6)add comment

alin said:

admin vreau si eu sa stiu cum fac sa inserez aceasta bara de meniu in html si sa pot pune linkurile pe butoane(ce extenesie le dau la final) :)
 
Reporteaza Abuz
Displace
Apreciaza
aprilie 21, 2009
Voturi: +0

alin said:

admin vreau si eu sa stiu ce extensie dau la final ptr ca sa le pot insera in html :D tnx
 
Reporteaza Abuz
Displace
Apreciaza
aprilie 21, 2009
Voturi: +0

admin said:

A aparut un tutorial pentru transformarea in html folosind unealta Slice Tool.
 
Reporteaza Abuz
Displace
Apreciaza
februarie 02, 2010
Voturi: +2

Coach Outlet Online said:

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

Andy Henry said:

Ok e foarte bun tutorialul,dar daca eu folosesc un model facut dupa acest tutorial ,cand merg cu mouse-ul pe un alt buton va merge ??adica hover effect va merge si la restu d epe bara de navigare?? ms anticipat
 
Reporteaza Abuz
Displace
Apreciaza
august 18, 2011
Voturi: +0

Prada taschen said:


Dein Artikel ist gut wert Augapfel. Au?erdem inspirierte mich sehr, sehr attraktiv ，das werde ich diese wieder zu sehen.Prada taschen
 
Reporteaza Abuz
Displace
Apreciaza
septembrie 27, 2011 | url
Voturi: +0

Adauga un comentariu
Micsoreaza | Mareste

busy