A apărut o eroare în acest obiect gadget

Bara de navigare in Photoshop

Astazi vom invata cum sa realizam o bara de navigare ( o bara de meniu ) folosindu-ne de Adobe Photoshop. In acest articol vom face o bara de meniu clasica, foarte simpla, vor mai exista tutoriale in care voi face si alte tipuri de meniuri.
Pasul 1: Facem un nou document in Adobe Photoshop (File-New) cu dimensiunile de 600×400 px si fundal alb.
1 - crearea unui nou document
Pasul 2: Folosim Rounded Rectangle Tool (U) si cu brush setat pe culoarea albastra, intr-un nou layer, facem urmatoarul shape.
2 - Rounded rectangle Tool
Pasul 3:  Dupa ce am facut acea forma, dam click dreapta pe layerul proaspat creat si alegem optiuneaBlending Options. Iar pentru Gradient Overlay facem urmatoarele setari:
Gradient Tool - bara de navigare
Pasul 4: Inner Shadow
Inner Shadow - bara de navigare
Pasul 5: Stroke
5
Pasul 6: Asa ar trebui sa fie bara daca ati respectat setarile de mai sus.
6
Pasul 7: Alegem Type Tool si adaugam butoanele peste bara creata. Incercati sa nu folositi fonturi foarte sofisticate pentru ca vor strica aspectul website-ului. Eu am folosit fontul Arial, Regular, 13 PT.
7
Pasul 8: Click dreapta pe layerul cu textul si facem urmatorele setari pentru Drop Shadow
8
Pasul 9: Din bara de unelte, alegem Single Column Marquee Tool si facem o selectie ca in imaginea de mai jos, bineinteles, intr-un Layer nou.
9
Pasul 10: Umpleti selectia cu culoarea alba iar apoi cu Eraser Tool (E) incercati sa-i dati un aspect cat mai “ascutit” la capete.
single column marquee tool
Pasul 11: Duplicati layerul cu separatorul (Ctrl+J) sau mai faceti inca o data aceeasi chestie ca la pasul 10, doar ca folosind culoarea neagra.
11
Pasul 12: Schimbati modul layerelor cu separatoarelor pe Soft Light.
12
Pasul 13: Repetati pasii 9-12 pentru a face si celelalte separatoare.
13
Asa ar trebui sa arate rezultatul, eu am mai facut inca 2 meniuri de culori diferite. Sper ca tutorialul sa va ajute, puteti descarca PSD-ul cu bara de navigare mai jos!
Bara de navigare in Photoshop - Tutorial in romana
Unele imagini sunt neclare, asta datorita functiei acestei teme de a redimensiona imaginile pentru ca site-ul sa nu fie distorsionat, de aceea este necesar sa dati click pe ele pentru a le vedea HD.

Descarca PSD-ul cu bara de navigare 

Niciun comentariu: