Tutorialul.ro - Meniu Stil Vista | Photoshop

Meniu Stil Vista

Photoshop - Grafica Web

Click pe imagine pentru a o vedea la rezolutia originala.

1.Am inceput cu o imagine de fundal.
Salveaz-o intai:

Click dreapta - Save As.

Apoi deschide Photosho-ul si de sus : File - Open - Selecteaza imaginea - OK.

2.Adauga un nou layer - Shift + CTRL + N - OK.
Selecteaza unealta Rectangle Tool, culoarea negru (#000000) si deseneaza fundalul meniului:

3.Apasa CTRL + J pentru a face o copie actualului Layer.
Selecteaza unealta Rectangular Marquee Tool(tasta M), selecteaza jumatatea de jos a meniului si apasa tasta Delete pentru a o sterge. Apoi CTRL + D pentru a deselecta.

4.Click dreapta pe layerul nou (Layer 1 copy) - Blending Options.
Bifeaza Gradient Overlay - click pe dreptunghiul din dreapta cuvantului Gradient pentru a schimba culorile.
Dublu click pe sageata din stanga pentru a adauga culoarea de inceput pentru partea de jos, si in dreapta jos adauga codul 35393d - click OK pentru a o schimba.

La fel si cu sageata din dreapta, dublu click pe sageata - si adauga codul 787b7d - OK

5. Bifeaza apoi de mai sus, Drop Shadow si lasa setarile de baza - doar modifica unghiul la -93 de grade:

Apasa OK pentru a termina.

6.Adauga un nou layer : Layer - New - Layer - OK (SHIFT + CTRL + N).
Selecteaza unealta Line Tool, pune de sus Weight: 2 px, selecteaza pentru culoare codul : 9fa2a4 si tinand apasata tasta SHIFT adauga o linie orizontala deasupra barei de meniu.
**In timp ce desenezi, poti tine apasata tasta SPACE (Spatiu) pentru a muta linia.

7.Acum urmeaza sa adaugam numele butoanelor.
Selecteaza unealta Horizontal Type Tool, culoarea alb, iar de sus : Font: Arial / Regular / 12 pt/ Sharp si scrie numele butoanelor cu ceva spatiu in plus intre ele.

8.Adauga un nou layer : SHIFT + CTRL + N - OK. Selecteaza din nou unealta Line Tool, pastreaza Weight: 2 px, culoarea alb, doar modifica Opacity:30 %, si adauga o linie verticala (la fel cu Shift + Space pentru pozitionare) intre butoane.

9.Apasa CTRL + J pentru a face o copie a layerului cu linia. Selecteaza unealta Move Tool(tasta V) si tinand apasata tasta Shift, apasa, de la tastatura, sageata dreapta pentru a muta linia intre celelalte 2 butoane.
Apoi repeta pasii de la punctul 9 in functie de cate butoane ai.

10.Acum vrem sa adaugam deasupra meniului, numele/logo`ul site-ului.
Selecteaza layerul Background si adauga unul deasupra : Layer - New - Layer - OK.

11.Selecteaza unealta Rounded Rectangle Tool, de sus seteaza Radius: 25 px si deseneaza un dreptunghi cu colturile rotunjite :

12.Selecteaza unealta Magic Wand Tool, cu setarile : Tolerance: 50 , bifate doar Anti-Alias si Contiguos, si da click in interiorul dreptunghiului.
In timp ce ai selectat, sterge layerul cu dreptunghiul : Layer - Delete - Layer - OK.
Selecteaza daca nu ai inca selectat layerul Background, dupa care click dreapta in interiorul selectiei - Layer Via Copy pentru a face o copie a acelei parti din fundal intr-un nou layer.

13.Click dreapta pe layerul nou creat - Blending Options - Bifeaza Drop Shadow si lasa setarile de bazam doar la Opacity modifica la 50 %.

14.Avand selectat layerul nou, de sus: Filter - Blur - Gaussian Blur - Radius: 2 - OK

15.Acum poti adauga fie cu unealta Horizontal Type Tool numele site-ului in interiorul dreptunghiului, fie logo-ul.

Imaginea Finala:

Click pe imagine pentru a o vedea la rezolutia originala.

Succes si sper v-a fost de ajutor!

Seteaza ca Favorit

Bookmark

Trimite Email

Comentarii (9) add comment

Subscribe to this comment's feed

Master said:

	trebuia retusat si logoul de la tutorialul.ro,in rest e ok
	Reporteaza Abuz Displace Apreciaza

ianuarie 29, 2009 | url
Voturi: +1

admin said:

	La ce te referi prin retusat? A fost doar ca idee.
	Reporteaza Abuz Displace Apreciaza

ianuarie 29, 2009 | url
Voturi: +0

danutz said:

	Super fain tutorialul...am reusit sal fac dar am o mica problema....eu la sit vreau sami fac mai multe categorii...dar nu pot da la toate categoriile (link to)...le ia pe toate pe acelasi(link to)....ma puteti ajuta?
	Reporteaza Abuz Displace Apreciaza

mai 08, 2009
Voturi: +0

admin said:

	Trebuie sa-l imparti in mai multe imagini (foloseste Slice Tool) iar apoi sa pui link pe fiecare imagine.
	Reporteaza Abuz Displace Apreciaza

mai 08, 2009 | url
Voturi: +1

danutz said:

	Multumesc frumos.....;)
	Reporteaza Abuz Displace Apreciaza

mai 08, 2009
Voturi: +0

andreieicho said:

	am reusit sa il fac e super tare dar cum pun link pe fiecare imagine dupa ce le impart ca sa duca spre exemplu cand apas pe acasa sa ma duca acasa P.S. felicitari pentru site
	Reporteaza Abuz Displace Apreciaza

octombrie 24, 2009
Voturi: +0

stefan said:

	as vrea shi eu sa stiu dupa ce am facut poza cum o salvez adik cu ce extensie? plss ajutor ;)
	Reporteaza Abuz Displace Apreciaza

ianuarie 23, 2010 | url
Voturi: +0

clau said:

	am si eu o intrebare , sa zicem ca'mi reuseste tot tutorialul si daka vreau sal pun pe un site(html) cum pot pune linkurii la butoanele forum,acasa,resurse??
	Reporteaza Abuz Displace Apreciaza