Buton de download in Photoshop

In acest tutorial vom invata cum sa realizam un buton de download in Adobe Photoshop. Aceeasi pasi pot fi aplicati pentru realizarea si altor tipuri de butoane/iconite web. Sunt foarte multe stiluri de butoane, noi vom invata sa facem unul simplu dar de efect.

Pasul 1: Facem o noua imagine in Photoshop cu dimensiunile de 400×300 px si Background Alb.
Pasul 1
Pasul 2: Acest pas este unul optional, dar eu am preferat sa nu las backgroundul simplu, ci sa-l modific putin pentru a scoate butonul mai mult in evidenta. Umpleti backgroundul cu o culoare albastra. Codul culorii :#2777A9
2
Pasul 3: Mergem la Filter-Render-Lighting Effects pentru a adauga ceva efecte fundalului
3
Pasul 4: Facem un nou layer (Ctrl+Shift+N) iar apoi folosim Rounded Rectangle Tool, cu culoarea neagra si facem un dreptunghi asemanator celui din imaginea de mai jos.
4
Pasul 5: Click dreapta pe layerul creat la pasul 4- Blending OptionsGradient Overlay si facem urmatorele setari:
5
Pasul 6: Apoi pentru Inner Shadow :
6
Pasul 7: Stroke:
7
Pasul 8: Si Drop Shadow:
8
Pasul 9: Asa ar trebui sa arate daca am aplicat corect setarile de mai sus
9
Pasul 10: Folosind Type Tool (T) si un font la alegere (eu am alex Myriad Pro, Semibold, 18pt )  adaugam textul “Download”  peste butonul nostru.
10
Pasul 11: Click dreapta pe layerul cu textul- Blending Options-Drop Shadow si adaugam o umbra subtila sub text.
11
Pasul 12: Facem inca un layer (Ctrl+Shift+N), il redenumim Pattern si folosind Pen Tool (P) sau orice unealta de selectie, faceti o selectie in jurul butonului.
12
Pasul 13: Click dreapta pe selectie – Fill si selectam Pattern apoi dam ok. Puteti invata cum sa realizati acest pattern in tutorialul de aici.
13
Pasul 14: Dupa ce am dat ok, ar trebui sa avem ceva de genul acesta.
14
Pasul 15: Pentru layerul cu pattern-ul modificam Blending Mode-ul pe Soft Light iar opacitatea o descrestem pana la 35%.
15
Pasul 16: Vom adauga si un efect de “sticla” peste buton. Facem un nou layer, il redenumim “Efect sticla” .
16
Pasul 17: Folosind Rectangular Marquee Tool facem urmatoarea selectie:
17
Pasul 18: Click dreapta pe selectie-Fill,  si umplem selectie cu culoarea alba.
18
Pasul 19: Stergem excesul folosind radiera (Eraser Tool – tasta E).
19
Pasul 20: Apoi pentru layerul “Efect sticla” setam Blending Mode-ul pe Soft Light, si la fel scadem opacitatea pana la 30 %.
20
Pasul 21: Apoi folosind unealta Single Row Marquee Tool, prezentata si in imaginea de mai jos facem urmatoarea selectie,   nu inainte de a face un layer nou.
21
Pasul 22: Cu Brush Tool de dimensiuni mari si culoarea alba dati un click in interiorul selectiei facute la pasul anterior.
22
Final : Puteti face butoane de diferite culori, doar schimband setarile de la pasul 5. Succes!
Buton de download in Photoshop - Final

Descarca PSD-ul cu butonul de download!

Niciun comentariu: