Bună ziua, dragi cititori! Astăzi vă voi spune cum să creați un frumos buton stralucitor "Play". Această lecție este destinată utilizatorilor începători ai Adobe Photoshop. este ușor de jucat, deci ar trebui să-l încercați =).
Pe măsură ce urmăm această lecție, vom învăța abilitățile de bază de desen. Adăugând efecte de lumină elementelor imaginii și vom folosi și instrumentul Pen. diferite moduri de suprapunere și moduri de selecție.
![Buton luminos în Photoshop (design buton) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-2897f1d8.jpg)
Bine, să începem!
Creați un document nou (dimensiunea nu contează) cu un fundal negru. Apoi, creați un nou strat și, folosind o periuță moale de albastru închis, desenați un punct în centrul pânzei, acesta va fi fondul nostru:
![Buton luminos din Photoshop (strat nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-e7c0055f.jpg)
Creați un nou strat și trageți pe acest strat un cerc galben în centrul pânzei:
![Buton luminos din Photoshop (buton luminos) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-ea768a25.jpg)
Acum, să adăugăm niște lumini și umbre în cercul nostru. Pentru a începe, selectați un strat cu un cerc, apoi utilizați o perie moale de culoare albă, trageți o evidențiere (a se vedea imaginea de mai jos):
![Buton luminos în Photoshop (Acum, să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-8b698250.jpg)
Creați un alt strat și utilizați peria neagră moale pentru a desena o umbră în partea dreaptă jos a butonului viitor:
![Buton luminos în Photoshop (crearea unui buton pentru site) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-f4018269.jpg)
Apoi, adăugați un alt strat sub strat cu cercul. Folosind o perie moale negru, vopsea o umbră sub buton: (foloseste Free Transform Tool (Ctrl + T) pentru a „stoarce“ perie de amprentă digitală și a obține o umbră.):
![Buton luminos din Photoshop (buton luminos) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-42a105b0.jpg)
Rezultatul final al primului pas:
![Buton luminos din Photoshop (rezultă acum să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-76e8d185.jpg)
Acum, să adăugăm o săgeată butonului nostru - creați un nou strat și selectați instrumentul Polygon din bara de instrumente:
![Buton luminos în Photoshop (Acum, să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-875ba951.jpg)
Aplicați următoarele setări pentru acest instrument. De asemenea, vreau să menționez că culoarea de umplere ar trebui să fie maro închis:
Apoi, trageți un triunghi, după cum se arată mai jos: (poate fi util să activați afișarea grilei, folosiți-o ca ghid folosind combinația de taste Ctrl +).
![Buton luminos în Photoshop (Acum, să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-80f64982.jpg)
Aplicați următoarele straturi de straturi pe strat cu săgeata:
![Buton luminos din Photoshop (rezultă acum să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-39129158.jpg)
![Buton luminos din Photoshop (strat nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-7ad74e31.jpg)
Iată ce sa întâmplat în acest stadiu:
![Buton luminos din Photoshop (buton luminos) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-18b9c6b0.jpg)
Acum, adăugați puțină strălucire la săgeata noastră - a crea un strat nou sub triunghiul și o perie moale, alb, de aproximativ aceeași mărime ca și triunghiul, cu un singur click face perie imprimare, așa cum se arată în ilustrația de mai jos:
![Buton luminos din Photoshop (buton luminos) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-b9f37989.jpg)
Duplicați acest strat și comprimați-l cu instrumentul Free Transform. Întoarceți-o și atașați-o la una dintre liniile triunghiului - aceasta va crea un efect suplimentar de strălucire:
![Buton luminos din Photoshop (în jurul butonului nostru) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-29636754.jpg)
Duplicați acest strat de două ori mai mult, rotiți și mutați aceste straturi pe celelalte laturi ale triunghiului:
![Buton luminos din Photoshop (rezultă acum să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-2de491e6.jpg)
Rezultatul nostru curent arată astfel:
![Buton luminos în Photoshop (design buton) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-c63c77b9.jpg)
Acest pas este opțional. Am decis să adaug la acest buton un "efect cordon / fir" pentru al face unic și interesant.
Utilizați instrumentul Pen. pentru a crea o cale. Apoi, creați un accident vascular cerebral pentru conturul nostru folosind dimensiunea pensulei galbene de 5px (nu uitați să bifați opțiunea Simulare presiune):
![Buton luminos din Photoshop (rezultă Acum hai) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-d99f7b32.jpg)
Apoi adăugați un "nod" la butonul nostru folosind instrumentul Rectangular. Desenând-o, plasați acest dreptunghi în locul conectării filetului cu butonul și transformându-l folosind instrumentul Perspectivă:
![Buton luminos din Photoshop (rezultă Acum hai) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-6776d52d.jpg)
După transformare cu ajutorul perspectivei, ar trebui să obțineți acest rezultat:
![Buton luminos din Photoshop (strat nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-a685c90e.jpg)
Să adăugăm o textură pentru a face pachetul nostru mai realist: aplicați următorii parametri de amestecare pe stratul nostru:
![Buton luminos în Photoshop (design buton) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-39814c01.jpg)
![Buton luminos din Photoshop (rezultă Acum hai) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-40d73cf0.jpg)
![Buton luminos din Photoshop (strat nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-7b8d3f9e.jpg)
![Buton luminos din Photoshop (strat nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-6b743e3f.jpg)
După ce ați finalizat acest pas, trebuie să obțineți acest rezultat:
![Buton luminos în Photoshop (Acum, să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-02062967.jpg)
Acum, să adăugăm încă un efect de iluminare. Pentru aceasta încărca din nou selecția în baza butonului (cerc), și de a crea un nou strat cu o perie moale, vopsea albă fascicul de lumină în termen de selecția noastră (vezi imaginea de mai jos.)
![Buton luminos din Photoshop (creați un nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-0aef5436.jpg)
Deselectați (Ctrl + D), mutați acest strat puțin în dreapta și veți obține acest efect:
![Buton luminos în Photoshop (design buton) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-c6c96886.jpg)
Duplicați acest strat (Ctrl + J), răsuciți-l orizontal și plasați-l pe partea stângă a butonului:
![Buton luminos din Photoshop (creați un nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-2f58bcb3.jpg)
Acum ar trebui să aveți ceva de genul:
![Buton luminos din Photoshop (rezultă acum să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-a043ac44.jpg)
Acum, să adăugăm niște puncte stralucitoare în jurul butonului nostru. Pentru a face acest lucru, luați o perie moale și aplicați astfel de parametri:
![Buton luminos din Photoshop (creați un nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-813943d3.jpg)
![Buton luminos în Photoshop (design buton) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-0e61d8f9.jpg)
![Buton luminos în Photoshop (Acum, să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-aa6ab2fb.jpg)
Verificați dacă opțiunea Antialiasing este activată. Acum, haideți să desenați punctele stralucitoare în jurul butonului nostru:
![Buton luminos în Photoshop (Acum, să adăugăm) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-c3cdf080.jpg)
Aproape am terminat! Pentru a regla în final imaginea noastră, am decis să adăugăm o mică strălucire butonului nostru. Creați un strat nou sub strat cu cercul și, folosind peria moale galbenă, trageți o strălucire în jurul butonului:
![Buton luminos din Photoshop (în jurul butonului nostru) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-2d16272f.jpg)
După ce am jucat un pic cu culorile, am decis să adaug un strat de corecție Hue / Saturation pe partea superioară a tuturor straturilor pentru a da strălucire unei nuante roșiatice:
![Buton luminos din Photoshop (strat nou strat) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-069fbbfc.jpg)
![Buton luminos în Photoshop (crearea unui buton pentru site) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-2ba52e1b.jpg)
![Buton luminos din Photoshop (buton luminos) Buton luminos din Photoshop](https://images-on-off.com/images/199/svetyashayasyaknopkavfotoshop-2897f1d8.jpg)
Totul este pentru ziua de azi! Sper că ți-a plăcut lecția și ai găsit ceva util pentru tine în ea =) Până la întâlniri noi, o zi bună!
Traducător: Sergey Zastavny;