Tutorialul.ro - Bara de meniu | Photoshop

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).

Seteaza ca Favorit

Bookmark

Trimite Email

Comentarii (16) add comment

Subscribe to this comment's feed

Andre123 said:


	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 ?
	Reporteaza Abuz Displace Apreciaza

mai 11, 2009
Voturi: +0

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: +1

cosminel4u said:

	Ahamz . Multumesc Credeam ca exista un format si il opui direct
	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: +0

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