Buton de metal în Photoshop, adăugând pictograma pe

Și, din moment ce este nevoie de mai multe din aceleași imagini, dar diferite dimensiuni (acest lucru se datorează faptului că gadget-uri cu ecran Android au diferite rezoluții și raportul de aspect), trebuie să lucreze cu forme vectoriale la codul sursă poate fi redimensionate, fără pierderi de calitate pentru aplicații Android.

Creați un document nou cu o dimensiune de 500 până la 500 de pixeli. Plasați ghidajele în centrul documentului. Luați instrumentul "Ellipse", selectați modul "Shape" (Snape),
asigurați-vă că operațiile cu contur sunt în poziția "New Layer" (pentru mai multe detalii aici) și construiți un cerc geometric corect din centru, la fel ca la începutul ultimei lecții. după cuvintele "Să începem". Culoarea de umplere nu este importantă. rezultat:


Buton de metal în Photoshop, adăugând pictograma pe

Figura "Ellipse" pentru pregătirea insignei.

Acum trebuie să construim un alt cerc, dar astfel încât conținutul acestui cerc să fie scăzut din conținutul primului cerc. Pentru a face acest lucru, în panoul cu opțiuni, selectați operația "Scoateți din zona de fasonare":


Buton de metal în Photoshop, adăugând pictograma pe

Selectați Subtractare din zona Formă.

Și construim un alt cerc drept din centru, dimensiunea noului cerc este mai mică decât prima. pentru că a doua cifră a fost construită în modul de scădere, pixelii primei cifre vor fi scăzuți din cel de-al doilea:


Buton de metal în Photoshop, adăugând pictograma pe

Conținutul celui de-al doilea cerc este scăzut din primul cerc.

Ca rezultat, avem un cerc plin de pixeli. Dar pentru sarcina noastră nu avem nevoie de un cerc întreg, ci de un semicerc sau, mai degrabă, de un cerc "două treimi"))). Din cercul rezultat, se scade segmentul. Pentru a face geometria corectă a segmentului, plasăm un ghid orizontal la înălțimea a trei patrimi din cerc:


Buton de metal în Photoshop, adăugând pictograma pe

Ghid orizontal pentru construirea unei crestături a unei părți a unui cerc.

Acum, ia instrumentul „Pen“ (Pen Toll), modul de operare circuite noi încă „Scădeți figura din față“, astfel încât conținutul figurii construit „Pen“, va fi, de asemenea, scăzute din conținutul principal. Desenați un "triunghi" cu un "pix", un vârf în crucile de ghidare centrală. cele două laturi trebuie să treacă prin intersecția ghidajului orizontal superior cu conturul exterior al cercului:


Buton de metal în Photoshop, adăugând pictograma pe

Folosind un triunghi construit cu instrumentul Pen, am scos o parte a cercului. Rețineți că toate contururile sunt pe același strat.

Acum trebuie să picurăm bastonul vertical, de data aceasta avem nevoie de modul "Adăugare în figura de formă":


Buton de metal în Photoshop, adăugând pictograma pe

Selectați modul "Îmbinare forme".

Atunci când trecerea la acest mod (și el ar trebui să acționeze în următoarele adăugări figura) din Photoshop`e mea din nou merge triunghi glitch trase stilou, se unește cu cercul, așa că am anulat Crtl + Alt + Z, eroarea se elimină, iar modul este „Merge figura "rămâne.

Luați instrumentul "Rectangle" și construiți un dreptunghi vertical care completează pictograma ON / OFF:


Buton de metal în Photoshop, adăugând pictograma pe

Pictograma ON / OFF este construită. Dar, după cum puteți vedea, grosimea liniilor nu se potrivește. Acest lucru este ușor de rezolvat.

Deci, în general, icoana este gata. Dacă cineva este jenat de afișarea de forme contur în document, nu vă faceți griji. Dacă salvați documentul în orice format grafic standard, contururile nu vor fi vizibile. Ele pot fi ascunse chiar și într-un document Photoshop, trebuie doar să selectați orice alt instrument, cu excepția instrumentelor vectoriale, de exemplu, "Mutare".

Dar este posibil să nu ne placă lățimea liniei semicercului sau a dreptunghiului, diametrul și dimensiunea, raportul lor etc. Nu am folosit cifrele vectoriale pentru construcție, din motive întemeiate, în orice moment, chiar și după salvarea documentului. Putem schimba scala lor fără pierderi de calitate și cu respectarea geometriei relative. De exemplu, după construirea unui dreptunghi, mi se pare că lățimea semicercului este prea mică în comparație cu dreptunghiul. Pot rezolva cu ușurință acest lucru prin reducerea diametrului cercului interior.
Luăm "Instrumentul de selecție directă", apăsați tasta Ctrl și faceți clic alternativ pe toate punctele de referință ale conturului cercului. Apoi aplicați comanda „Free Transform“, țineți taste Shift + Alt și trăgând în interiorul colț al cadrului pentru orice transformare, reduce diametrul cercului interior, pentru a crește lățimea semicercului benzii. Deci, putem modifica mărimea și poziția oricăror elemente de pictograme:


Buton de metal în Photoshop, adăugând pictograma pe

Se evidențiază patru puncte pivot, în timpul transformării va fi afectată numai cercul interior.

Dar cel mai important lucru este că putem schimba geometria icoanei în același mod, după ce am pus-o deja pe documentul țintă.

De fapt, odată ce pictograma este gata, este timpul să o trageți în document cu butonul, o putem face folosind instrumentul "Mutare". Iată cum arată documentul:


Buton de metal în Photoshop, adăugând pictograma pe

Tipul de document cu pictograma vectorială adăugată.

În momentul de față, pictograma se află în centrul butonului, dar se pare că este greșit. Faptul este că cercul icoanei este sub centrul, dar dacă ridici figura, dreptunghiul va fi prea mare. Prin urmare, mai întâi trebuie să omiteți conturul dreptunghiului în raport cu pictograma și apoi să mutați întreaga pictogramă. Conturul poate fi ușor omis de instrumentul "Selectarea conturului":


Buton de metal în Photoshop, adăugând pictograma pe

Deplasați dreptunghiul puțin în jos.

Selectând punctele de referință ale conturului și instrumentul Transformare liberă, putem schimba dimensiunea pictogramei.

În plus, selectarea punctului de referință instrumentul „Alocarea Nod“ dorit (instrumentul Selecție directă), nu numai că poate transforma dimensiunea, dar, de asemenea, pentru a muta punctul de a schimba forma pictogramei. Aici ajusesc dimensiunea pictogramei (toate punctele de ancorare sunt evidențiate) sub dimensiunea butonului:


Buton de metal în Photoshop, adăugând pictograma pe

Cu ajutorul funcției "Free Transformation" ajustăm mărimea formei vectoriale.

Redenumiți stratul cu pictograma pe.

Mai întâi, face ca pictograma să arate ca pe ON. În acest caz, ne vom limita la adăugarea stilurilor straturilor "Glow extern" și "Color Overlay" cu următorii parametri:

Buton de metal în Photoshop, adăugând pictograma pe
Buton de metal în Photoshop, adăugând pictograma pe


Buton de metal în Photoshop, adăugând pictograma pe

Butonul este în stare pornită.

Acum opriți starea. Duplicați stratul pe. redenumiți la oprire și adăugați stilul stratului "Umbra interioară" și "Suprapunerea culorii" cu următorii parametri:

Buton de metal în Photoshop, adăugând pictograma pe
Buton de metal în Photoshop, adăugând pictograma pe


Buton de metal în Photoshop, adăugând pictograma pe

Butonul este în starea off.

Pentru a da butonului un efect de metal strălucitor pe corp, ar trebui să puneți un punct culminant. Creați un strat nou pe toate celelalte straturi. Ridicați instrumentul Perie. rigiditatea face egal cu zero, culoarea este albă, dimensiunea este ceva mai mult decât banda corpului. Faceți clic pe peria din partea stângă sus. Ar trebui să arate ceva de genul:


Buton de metal în Photoshop, adăugând pictograma pe

Ready de desen, pentru claritate am adăugat un fundal negru.

Și ultimul. Uneori, pentru a da un stil techno, suprafața butoanelor are o textură de cercuri concentrice, pentru aceasta, pe stratul cu suprafața este necesar să se impună o imagine ca aceasta:


Buton de metal în Photoshop, adăugând pictograma pe

Imaginea mea cu cercuri concentrice pe un fundal transparent.

Plasați desenul cu cercuri deasupra stratului cu baza butonului, schimbați modul de amestecare. modul este cel mai bine pentru a ridica independent prin tastarea, aici am modul "suprapus".

Dacă cercurile ies prea clar, reduce opacitatea stratului, în plus, am adăugat o mască de strat și, în unele locuri pictate cerc translucide perie negru.


Buton de metal în Photoshop, adăugând pictograma pe


Descărcați materialele pentru lecție (PSD, 1 PNG, 22,39 MB)

Articole similare