Share
Sare și piper, pix și hârtie, biscuiți și lapte, deși toate sunt bune pe cont propriu, aceste lucruri lucrează împreună pentru a scoate cele mai bune dintre ele. Adobe Illustrator și Adobe Photoshop nu fac excepție. Astăzi vă voi arăta cum să utilizați Illustrator pentru a proiecta un buton de redare și cum să vă îmbunătățiți vectorii utilizând Photoshop. Această tehnică este utilă în special pentru persoanele care doresc să facă icoane și modele UI. Să începem!
Începeți prin a crea un nou document în ilustrator (am făcut-o 800 x 800 px). Selectați "Instrumentul rotunjit dreptunghi" (cu raza de colț de 100px) și creați o formă care arată ca un buton rotunjit. Apoi selectați instrumentul "Rectangle", creați un dreptunghi și centrați-l în dreptul dreptunghiului rotunjit. Acesta va fi pentru butonul de redare.
Lucrați pe cel de-al doilea dreptunghi (dreptunghiul "joacă"). Mergeți la Efect> Distort & Transform> Pucker & Bloat pentru a face dreptunghiul curbat. Completați caseta în fereastră (am folosit 6%) și apăsați OK, după care mergeți la Object> Expand Appearance.
Pentru a crea pictograma "play", selectați "Star Tool", deschideți dialogul Star Tool și introduceți următoarele setări.
Acum, creați pictogramele "următor" și "anterioare". Mai întâi duplicați pictograma de redare prin opțiunea Opțiuni + Faceți clic pe + Drag (oriunde doriți), apoi faceți același lucru, dar de data aceasta glisați-l spre dreapta (puteți ține apăsată tasta Shift pentru a menține obiectul în linie dreaptă). Selectați cele două triunghiuri, faceți clic pe butonul "Adăugați în zona de formare", apoi faceți clic pe "Expand", redimensionați și repoziționați.
Creați pictograma "Anterioară" accesând Object> Transform> Reflect> Vertical și faceți clic pe "Copy". Mutați-o în poziție și tocmai v-ați făcut niște butoane de jucători.
Adăugați culorile pe butoane. Butonul "Play" are o umplere de # 506670 într-o cursă de # 2C515E. Butoanele "Următorul" și "Anterior" au o umplere de # 85D4D6 și o curgere de # 27A0A0.
Pentru a crea umbra de jos, trebuie să duplicați butonul, apoi cu "Instrumentul rotunjit dreptunghi" (folosind aceleași setări) să creeze aceeași formă, dar puțin mai mare. Selectați acest dreptunghi și cel pe care l-ați copiat și faceți clic pe "Scoateți din zona de formă" și "Expandați". Faceți-l negru și dați-l opacitate de 20% și setați modul de amestecare la Overlay.
Utilizați umbra de jos pentru a crea strălucirea de sus. Selectați umbra de jos, mergeți la Transformați> Reflectați. După efectuarea setărilor, faceți clic pe "Copiere". Mutați-l în poziție, rearanjați punctele de ancorare astfel încât să devină mai subțire și să-l facă alb (lăsați opacitatea și modurile de amestecare așa cum sunt).
Utilizați aceeași tehnică pe butonul de redare.
După finalizarea formei playerului, exportați-l ca pe un .PSD pentru a adăuga câteva detalii în Photoshop.
Creați un fișier nou în Photoshop (am folosit 800 x 800 px) și aduceți fișierul pe care l-ați exportat din Illustrator (mini player). Selectați stratul "mare buton", deschideți fereastra "Straturi de strat", făcând dublu clic pe partea dreaptă a stratului și începeți să adăugați următoarele stiluri ca mine. (puteți urmări fotografiile).
Ascundeți toate straturile, cu excepția stratului "mare buton", a stratului de "umbre de fund" și a stratului "stralucitor". Selectați layerul "bottom shadow", mergeți la Filter> Blur> Gaussian Blur, dați-i o rază de 4 px și apoi faceți clic pe OK. Faceți același lucru cu stratul de "strălucire superioară".
Apoi, faceți un strat nou, Command + Faceți clic pe butonul "big button" degetul mare, pentru a face o selecție a acelei forme, apoi, cu "Polygonal Lasso Tool", tăiați jumătatea superioară a selecției. Umpleți-o cu o culoare (nu contează ce culoare vom da la 0% umplere) și adăugați un strat de strat de suprapunere Gradient.
Faceți vizibil butonul "Redare" (inclusiv umbra de jos și stralucirea de sus). Selectați stratul "Play Button" și adăugați cele două stiluri de strat (Gradient Overlay și Inner Glow). Selectați stratul "bottom shadow" și mergeți la Filter> Blur> Gaussian Blur, dați-i o rază de 5 px și faceți clic pe OK. Repetați această acțiune la stratul de "strălucire superioară".
Creați un strat nou, faceți o selecție dreptunghiulară și cu "Gradient Tool" (G) faceți un gradient. Control + D pentru a deselecta. Setați modul de amestecare la "Suprapunere" și 20% la opacitate.
Creați un nou strat sub stratul butonului de redare și faceți o selecție pentru umbra butonului. Completați-l cu negru și mergeți la Filter> Blur> Gaussian Blur și dați-i o rază de 1,5 px. Setați modul de amestecare la "Color Burn" și 40% la opacitate.
Selectați "Eraser Tool" (E), setați diametrul la 125 px și duritatea la 25% și glisați orizontal peste mijlocul stratului de umbră.
Selectați stratul de icoane "următor și anterior" și completați-le cu această culoare; # 0096A4. După aceea, deschideți fereastra "Straturi de straturi" și începeți să adăugați aceleași stiluri ca și mine.
Faceți același lucru cu stratul "pictogramă de redare". Dar de această dată utilizați această culoare ca și fundal: # FFDB94
Utilizați "Instrumentul Linie" pentru a crea un efect de strălucire. Poziționați linia sub stratul "Play Button" și creați o linie orizontală (1 px) în partea inferioară a stratului "mare buton". Faceți forma 0% completă și adăugați o "Suprapunere cu gradient".
Creați un nou strat în spatele stratului "Play Button". Control + Faceți clic pe butonul "mare buton" degetul mare, pentru a face o selecție a acelei forme, apoi faceți un gradient negru simplu în stânga. Setați "Suprapunere" ca mod de amestecare și opacitate de 60%. duplicați stratul, rotiți-l orizontal și mutați-l spre dreapta.
Utilizați "Ellipse Tool" pentru a crea un oval în partea stângă a "butonului mare". Rearanjați-o astfel încât să pară imaginea de mai jos (ar trebui să fie plasată în partea stângă sus a "butonului mare"). Faceți umplere 0% și adăugați un stil "Overlay Gradient".
Duplicați stratul și plasați-l în partea din dreapta-jos a "butonului mare" adăugând al doilea stil "Overlay Gradient".
Creați un strat nou deasupra butonului "Play button". Control + Faceți clic pe butonul "Play Button" degetul mare, pentru a face o selecție a acelei forme, apoi mergeți la Selectare> Modificare> Contract și contractați selecția cu 3 px. După aceasta, luați "Gradient Tool" și faceți un mic diagonală în colțul din stânga sus. Setați modul de amestecare a straturilor la "Suprapunere", iar opacitatea la 40%.
Faceți un strat nou deasupra celui pe care tocmai l-ați făcut. Efectuați o selecție în partea stângă a butonului "Redare" (ca în imagine). Umpleți-l cu culoarea pe care o doriți și vom seta umplerea la 0%. Adăugați stilul "Gradient Overlay" și efectul de strălucire este complet. Duplicați acest strat, răsuciți-l orizontal și mutați-l în partea dreaptă.
Selectați jumătate din butonul "Redare" și pe un nou strat, folosind "Gradient Tool" (G), faceți un gradient (folosind culoarea neagră ca culoare). După aceea, setați modul de amestecare la "Color Burn" și opacitatea la 10%. Utilizați aceeași tehnică pentru "pictograma de joc" (singurul lucru care se schimbă este plasarea straturilor - deasupra stratului "pictogramă de redare" - și opacitatea stratului - 20%).
Crearea texturii "Play Button" este foarte simplă. După crearea unui strat nou deasupra butonului "Play Button" Control (Comandă pe Mac) + faceți clic pe butonul "Play Button", umpleți-l cu negru, mergeți la Filter> Noise> Add Noise, "O.K".
Dacă selecția este activă, mergeți la Filter> Blur> Motion Blur și utilizați setările indicate. Deselectați și setați modul de amestecare la "Suprapunere", iar opacitatea la 45%.
Adăugați câteva detalii detaliate în "pictograma de redare". Pe un nou strat veți face, cu "Elliptical Marquee Tool" (M), cercuri de dimensiuni aleatorii în interiorul "pictogramei de redare". Faceți-le negru, deselectați-le și mergeți la Filter> Blur> Gaussian Blur, după ce adăugați setările, setați modul de amestecare la "Color Burn" și opacitatea la 15% și ați terminat.
Creați un alt strat și faceți exact același lucru. Singurul lucru de schimbat este culoarea cercurilor aleatoare (am făcut cercurile albe).
Începeți să creați fundalul. Selectați stratul de fundal și completați-l cu # 363D41 și adăugați un stil "Overlay Gradient". Folosind "Eliptical Marquee Tool" (M) creați o oval pe un nou strat și umpleți-l cu alb. Apoi treceți la Filter> Blur> Blur Gaussian, introduceți setările și apăsați ok. Schimbați modul de amestecare în "Overlay" și dați-i o opacitate de 65%.
Începeți să creați umbra pentru mini-player. Faceți un strat nou, folosind "Elliptical Marquee Tool" (M), creați o oval sub player și umpleți-l cu negru. Mergeți la Filter> Blur> Blur Gaussian și efectuați setările necesare. Selectați "Eraser Tool" (E) și efectuați următoarele setări: Diametru - 150px; Duritate - 0%; Opacitate - 10%, apoi folosiți-o pentru a șterge o mică parte a laturilor umbrelor. Setați modul de amestecare la "Color Burn" și setați opacitatea la 60%.
Efectuați o selecție completă a butoanelor. Faceți asta prin Command + Faceți clic pe stratul "mare buton", apoi apăsați Command + Shift + Faceți clic pe butonul "Play". Cu selecția activă creați un strat nou și completați-l cu negru. Mutați-o și mergeți la Filter> Blur> Gaussian Blur și faceți setările ca în imagine. Utilizați "Free Transform" (Control + T) pentru a denatura umbra din spate. Utilizați "Eraser Tool" (E) cu următoarele setări: Diametru - 150px; Duritate - 0%; Opacitate - 10%, pentru a șterge umbra pe laturi. Reglați opacitatea la 50%.
Pictograma Mini-Player este acum pregătită. Multe dintre aceste tehnici pot fi recreate pentru a fi vector 100%, acesta este doar un alt mod de a face lucruri care utilizează capabilitățile Photoshop. Din nou, acesta este un tutorial deosebit de util pentru persoanele care doresc să facă elemente pentru utilizare în desene web și UI, deoarece deseori utilizează deja Photoshop.
Sper că v-ați bucurat de acest tutorial și că a fost de ajutor.
Accentsconagua