Aflați cum să creați butoane în Photoshop

Am parcurs deja multe din această serie. Aș vrea să cred că din ceea ce am acoperit până acum, ați putea începe să proiectați câteva lucruri destul de interesante! Pentru acest tutorial pe butoane, vă voi arăta cum să faceți o pictogramă folosind doar patru cercuri. Da, asta e, doar patru! În timp ce patru cercuri vă vor face ceva destul de răcoros, vă dau mai multă lovitură pentru dolar, arătându-vă cum să îmbunătățiți graficul prin adăugarea a încă două cercuri. Să desenăm!

Crearea butoanelor

Cu asta vom ajunge. Aceeași tehnică va funcționa pentru aproape orice formă, așa că atunci când am terminat, puteți crea un pătrat sau un dreptunghi cu colțuri rotunjite. Experiment. Schimbarea culorilor ar trebui să fie destul de simplă, deci dacă nu sunteți în jos cu verde, schimba-l. Aflați puțin teoria culorilor într-unul din postările mele anterioare pentru a vă optimiza efectul dorit.

1. Deschideți Photoshop și creați un document nou.


Am folosit presetările de mai sus pentru simplificări și de vreme ce vreau aceste icoane în aplicația mea mobilă. Este posibil ca presetările să fie modificate în funcție de modul în care doriți să utilizați butoanele.


2. Selectați instrumentul de formă Ellipse (u) din bara de instrumente.

De asemenea, puteți alege instrumentul Ellipse din bara de opțiuni din partea de sus.


3. Țineți apăsată tasta SHIFT și creați un cerc

Aceasta va fi dimensiunea butonului dvs., deci dimensiunea judecătorului în consecință. Un strat nou cu numele Shape-1 ar fi trebuit să fie creat în paleta de straturi.

4. Faceți clic pe numele "Shape-1" din paleta de straturi pentru al redenumi.

Denumiți stratul dvs. ceva descriptiv sau ușor de reținut. Am numit baza mea pentru că acesta este stratul de pornire și totul va fi construit de aici.

5. Apăsați Enter pentru a salva modificările.

6. Faceți dublu clic pe specimenul de culoare de pe specimenul de culoare "strat de bază" pentru a schimba culoarea.
7. Alegeți culoarea pe care doriți să o faceți. Am folosit # 529655.

8. Faceți dublu clic pe strat sau faceți clic pe butonul "Adăugați un stil de strat" ​​din paleta de straturi.
9. Selectați Overlay Overlay

Vom crea minunatele sublinieri și umbre pe care le vedeți în piesa finită. Gradienții sunt perfecți pentru acest efect și pot fi folosiți în multe moduri creative.


10. Faceți dublu clic pe modelul de culori pentru gradient.

Aici vom adăuga trei culori în gradientul nostru, un punct culminant, o nuanță și ceva între ele. Evidențiați semnificația permite adăugarea mai multor verde și albe și mai puțin roșu și albastru. Shade înseamnă să scoți niște verde și albastru. Am folosit evidențiază - # 00ff24, ceva între - # 00bb23 și umbră - # 00891a.


11. Faceți clic pe OK pentru a accepta setările pentru gradient.

12. Alegeți opțiunea "Reflected" din caseta verticală stil gradient.
13. Faceți clic pe OK pentru a închide fereastra stilului stratului.


Arată cam nebun, nu? Să facem un alt cerc acolo rapid.


14. Selectați din nou bara de instrumente (u) din nou.

15. Acum, fără a țineți SHIFT jos ca și înainte, încercați să desenați același cerc, care nu este la fel de înalt.

NOTĂ: Începeți în partea de sus și utilizați bara de spațiu în timp ce desenați sau verificați "de la centru" din opțiunile de formă și aliniați-l cu mijlocul cercului anterior.
Un strat nou cu numele Shape-1 ar fi trebuit să fie creat în paleta de straturi.

16. Faceți clic pe numele "Shape-1" din paleta de straturi pentru al redenumi.

Denumiți stratul dvs. ceva descriptiv sau ușor de reținut. Mi-am denumit radial și asta va avea un sens mai mult aici într-o secundă.

17. Apăsați Enter pentru a salva modificările.

Deci ar trebui să aveți acum două straturi, de bază și radiale în paleta de straturi.

18. Faceți dublu clic pe strat sau faceți clic pe butonul "Adăugați un stil de strat" ​​din partea de jos a paletei de straturi.
19. Selectați Overlay Overlay.

20. Faceți dublu clic pe modelul de culori pentru gradient.


Acum vom folosi doar două culori. # 1be220 pentru evidențierea și # 529655 pentru culoarea mai închisă.

21. Faceți clic pe OK pentru a accepta setările pentru gradient.

22. Alegeți Radial din caseta derulantă pentru stil
23. Faceți clic pe OK pentru a închide fereastra stilului stratului.


Acum începe să arate destul de bine. Două cercuri în jos, una să meargă. Vom adăuga încă un cerc care va fi punctul nostru culminant.


24. Creați un nou strat și denumiți-l.
25. Alegeți instrumentul de marcaj Ellipse (M) din bara de instrumente.

Facem acest lucru puțin diferit, doar pentru a vă arăta cum să realizați efecte similare cu diferite instrumente. Cu toate acestea, pentru glares, mi se pare că instrumentul de marquee este ușor de folosit decât instrumentul de formă.


26. Cu stratul de evidențiere selectat, creați un cerc cu aceeași înălțime ca și în cazul stratului radial, cu excepția faptului că este puțin mai îngust.
27. Alegeți culoarea Alb ca culoare din planul din partea de jos a barei de instrumente.
28. Cu selecția noastră creată, alegeți Instrumentul Gradient (G) din bara de instrumente.

29. Alegeți Foreground la Transparent din bara de opțiuni pentru gradient.
30. Faceți clic și trageți din partea de sus a selecției în partea de jos a selecției.


Bine, bine? S-ar putea să dorim să o facem puțin mai subtilă, deci vă permite să ajustăm puțin opacitatea. Cu stratul de evidențiere încă selectat:

31. Reglați transparența din paleta de straturi. Am schimbat-o la 80%.

Acolo îl aveți. Trei cercuri mici cu diferite stiluri și avem o pictogramă dulce. Despre cel mai simplu buton pe care il poti face, de fapt arata bine oricum.

Dacă doriți să oferiți icoanelor dvs. puțin mai mult, permiteți adăugarea unei adâncimi mai mici. O umbră mică de picătură ar trebui să facă truc. Încă doi oameni?

1. Selectați stratul de bază.

2. Faceți clic dreapta și alegeți Duplicat Layer.

În loc să redenumim stratul, vom folosi numele implicit și vom folosi culoarea pentru a le diferenția.

3. Faceți dublu clic pe specimenul de culoare de pe stratul duplicat.

4. Schimbați culoarea în negru sau # 000000

5. Dezactivați aplicația Gradient Overlay de pe stratul duplicat făcând clic pe pictograma ochi din paleta de straturi.

6. Cu stratul negru selectat, trageți stratul duplicat sub stratul de bază.

Notă: Încă nu veți vedea nicio modificare a imaginii.

7. Alegeți instrumentul de mutare (V) din bara de instrumente.
8. Acum folosiți tasta de jos de pe tastatură și apăsați de trei ori.


Tocmai am mutat stratul în jos (3 pixeli), astfel încât să avem puțină umbră încovoiată în spatele stratului de bază.

9. Schimbați opacitatea stratului negru la 50% din paleta de straturi.

Încă o umbră pentru a merge și am terminat. Acesta este un termen industrial.


10. Creați un alt strat nou și denumiți-l pe umbră.

Notă: Glisați stratul în partea de jos a paletei de straturi, sub cercul negru pe care tocmai l-am creat, dacă nu este deja.

11. Alegeți instrumentul de marcaj Ellipse (M) din bara de instrumente.

12. Trageți o Elipsă în partea de jos a butonului și o faceți la aceeași lățime cu cercul "de bază", dar nu foarte mare.

Acest lucru va face să arate că butonul este așezat pe o suprafață.


13. Faceți clic pe SHIFT f5 sau pe Editare> Completați. Completați selecția cu negru.

14. Schimbați opacitatea stratului de umbră la 30% și ieșiți de la computer.

Cum a ieșit? După cum puteți vedea, puteți suprapune orice tip de pictogramă sau formă Photoshop pe acest buton și puteți avea un mic set de pictograme pentru a vă folosi aplicația.

Intelegi ce vreau sa spun?

Un motiv pentru care îmi place să folosesc opacitatea pentru umbre în loc să aleg doar o culoare gri este pentru că atunci când salvăm acest lucru, dorim să folosim un format care să accepte folii transparente. Opacitatea va fi păstrată și indiferent de culoarea de fond, umbrele vor arăta bine.

Sper că ați găsit acest tutorial util.

În continuare vom analiza Image Optimization pentru dispozitivele mobile, precum și un instrument puțin cunoscut în cadrul Photoshop, care face prototipul o briză.