Share
În acest tutorial, vom folosi o combinație de stiluri de straturi, texturi și un pic de desen manual pentru a crea un skin player în stil Winamp.
Următoarele bunuri au fost utilizate în timpul producerii acestui tutorial.
Pentru a obține o dimensiune exactă, vom folosi grila pentru a ne ajuta să proiectăm. Deschideți caseta de dialog Preferințe (Command / Ctrl + K). În setările pentru ghidaje, grilă și felii, setați Gridline fiecare: 100 pixeli și subdiviziuni: 5.
Creați o formă dreptunghiulară cu dimensiunea 400px x 200px și culoarea: # 4f4834.
Activați instrumentul stiloului. Faceți clic pe cale pentru a adăuga două puncte pe fiecare colț. Vedeți imaginea de mai jos pentru plasarea sa.
Țineți apăsat pe Alt pentru a schimba temporar Pen Tool pentru a converti instrumentul Point. Alt-clic pe toate punctele noi pe care tocmai le-am creat.
Cu ajutorul instrumentului Pen, faceți clic pe toate punctele de colț pentru a le șterge.
Faceți clic pe linia de sus pentru a adăuga 4 puncte. Alt-clic pe fiecare punct pentru a le converti în puncte clare.
Deplasați în sus două puncte medii la fel de mari ca o cutie.
Creați o cale dreptunghiulară în calea noastră și selectați Scădere din bara de opțiuni. Adăugați două puncte ascuțite pe fiecare colț, după care ștergeți toate colțurile.
Colțul nostru este prea gros. Vom încerca să păstrăm dimensiunea uniformă, cu o lățime a coloanei. Pentru a ne ajuta, trageți o dimensiune a unei coloane în formă dreptunghiulară, rotiți-o cu 45 de grade și plasați-o pe colț.
Manual, mutați punctele folosind un instrument de selecție directă.
Repetați pașii 8 și 9 în alte colțuri pentru a le oferi o dimensiune egală.
Adăugați aceste stiluri de straturi.
Creați un nou strat și plasați-l deasupra formei. Utilizați o pensulă pentru a scoate niște murdărie. Apăsați Comandă / Ctrl + Alt + G pentru a transforma stratul în Mască de tăiere.
Adăugați texturi metalice zgâriate
pe partea de sus a formei. Faceți clic pe Imagine> Ajustări> Desaturați pentru a elimina culoarea. Setați modul de amestecare la Ecran cu Opacitate: 45%. Apăsați Comandă / Ctrl + Alt + G pentru a converti stratul de textură în Mască de tăiere. Textura este acum în interiorul formei.
Bevel și stilurile de strat Emboss adaugă efect 3D asupra formei noastre. Cu toate acestea, deoarece nu sunt mulțumit de rezultat, voi adăuga mai multă lumină pe partea sa. Deci, selectați partea folosind lasso poligonal, creați un nou strat și trageți un gradient alb-negru. Modificați modul Blend la Ecran și reduceți opacitatea la 20%. Mai jos, puteți vedea diferența înainte și după adăugarea unui gradient.
Scrie PLAYLIST pentru titlul acestei forme. Adăugați următoarele stiluri de straturi.
Desenați o formă de cerc. Setați stratul Umpleți la 0%, adăugați stiluri de straturi.
Observ că partea inferioară a formei este prea întunecată. Nu se vede nimic. Pentru a rezolva asta, voi desena manual. Comandă / Ctrl-clic pe stratul de formă. Utilizați o perie moale, apoi o vopsiți cu alb. Puteți vedea diferența înainte și după pictura albă.
În prezent, folosim fundal alb. Acest lucru nu ajută, deoarece albul tinde să facă totul în jurul lui mai ușor. Deci, să adăugăm fundal acum. Faceți dublu clic pe Fundal pentru ao converti în strat. Faceți clic pe Editați> Umpleți și selectați Culoare: # 332c1c. Adăugați textură pe strat. Puteți face acest lucru prin adăugarea unei texturi pe strat și setarea modului său de amestecare la ecran sau înmulțire sau puteți adăuga suprapunerea modelului de strat și utilizați unul dintre modelele disponibile.
Desenați o formă dreptunghiulară și plasați-o în spatele formei. Setați Completați la 0%. Adăugați o suprapunere în stilul stratului.
Duplicați calea pe care tocmai am creat-o. Dați clic pe Adăugați stratul de ajustare și selectați Gradient Fill. Desenați o altă cale exact descrisă așa cum se vede în imaginea de mai jos și selectați Intersect. Combinația dintre cele două căi ne va da o reflecție frumoasă în colțul din stânga sus.
Să adăugăm un alt gradient pentru a face ecranul superior mai strălucitor. Desenați un dreptunghi rotunjit deasupra. Setați Completați la 0%. Adăugați stiluri de straturi Gradient Overlay cu mod de amestecare Ecran pentru a păstra pixelul mai ușor.
Adăugați mai multe umbre în partea inferioară a ecranului. Trebuie doar să repetăm procesul anterior. Desenați un dreptunghi rotunjit, setați Completați la 0%. Adăugați o suprapunere cu strat de stil, dar de data aceasta alegeți modul de amestecare Multiplicați pentru a ascunde toți pixelii mai buni.
Utilizați unealta pen-ului pentru a desena niște forme și a le plasa în spatele ecranului. Adăugați stiluri de straturi.
Reduceți opacitatea stratului la 50%. Adăugați textura stratului deasupra ornamentului. Setați modul de amestecare la Ecran și reduceți opacitatea la 45%. Conversia texturii stratului la Masca de tăiere.
Duplicați ornamentul și plasați-l pe partea opusă. Apăsați Comandă / Ctrl + T, faceți clic dreapta și alegeți Flip orizontal.
Să adăugăm mai multe detalii pe ecran. Începeți prin adăugarea evidențierii. Creați o formă de semilună și plasați-o în colțul din stânga sus. Dați clic pe pictograma Adăugați stratul de ajustare și selectați Gradient Completați de la alb la transparent. Setați opacitatea la 50%.
Dublați evidențiați și plasați-o în colțul din dreapta sus. Apăsați Comandă / Ctrl + T, faceți clic dreapta și selectați Flip orizontal. Dacă observați, în viața reală, iluminarea nu este niciodată perfectă. Este aproape imposibil să aveți același punct culminant pe ambele părți. Deci, pentru această evidențiere dublă, schimbați opacitatea la 20%.
Repetați pașii anteriori, dar de această dată utilizați negru pentru a crea o umbră.
Îmi plac mereu detaliile mici. Detaliile mici vă oferă o impresie perfectă asupra muncii dvs. Un lucru pe care îl puteți face pentru a adăuga realismul la munca dvs. este adăugarea unor imperfecțiuni, în cazul nostru, o fisură. Este destul de ușor de fapt. Începeți prin a crea un strat nou, desenați linia neagră 1px folosind instrumentul Creion. Strat duplicat (Command / Ctrl + J), mutați-l 1px. Apăsați comanda / Ctrl + I pentru a inversa culoarea albului. Reduceți linia neagră Opacitatea la 30% și linia albă la 20%. Ștergeți ambele capete ale liniilor folosind un instrument mic Eraser mic.
Repetați același proces cu altul.
La zoom 100%, puteți vedea crăpăturile noastre mici.
Să adăugăm o evidențiere aleatorie. Începeți prin desenarea unui punct alb folosind o perie moale de 2 pixeli. Apăsați Comandă / Ctrl + T și întindeți-o orizontal. Ștergeți capetele folosind un instrument Eraser moale.
Dublați evidențiați și puneți-o pe alte poziții.
Adăugați text pentru playlist. Adăugați un stil îndrăzneț la unul dintre melodii pentru a indica că este activ. Utilizați culoarea # ffffc5 și adăugați următoarele stiluri de straturi.
Pentru a estompa lista de redare, adăugați masca stratului și trageți gradientul de la alb la gri.
Desenați o formă poligonală și plasați-o în partea inferioară a playlistului. Trebuie să repetăm pasul 11 la 13 pentru a adăuga texturi similare pe formă. Adăugați texturi metalice zgâriate, desaturați culoarea (Command / Ctrl + Shift + U). Setați modul de amestecare la ecran, reduceți opacitatea la 45%. Apăsați Comandă / Ctrl + Alt + G pentru a transforma stratul în Mască de tăiere. Adăugați următoarele stiluri de straturi.
Duplicată formă circulară din colțul listei de redare. Plasați-o pe ambele margini ale formei noi. Redimensionați-l la 90%.
Desenați o formă dreptunghiulară. Setați Nivelul de umplere la 0%. Adăugați următoarele stiluri de straturi.
Vreau să adaug mai multă definiție în partea inferioară a formei dreptunghiulare prin adăugarea mai multor lumini. Pentru a face acest lucru, trebuie doar să desenați o linie de 1px cu ajutorul creionului și să setați opacitatea la 20%.
Mai jos, puteți vedea diferența ușoară înainte și după adăugarea liniei de 1px.
Utilizând un instrument dreptunghiular, desenați + semnul și adăugați următoarele stiluri de straturi.
Duplicați + semnul și eliminați forma orizontală pentru ao transforma într-un semn.
Desenați o formă dreptunghiulară mai lungă lângă butonul -.
În interiorul formei, adăugați text pentru Timpul curent de urmărire / timpul total al redării.
Duplicată playlist interfață. Schimbați titlul la +JUCĂTOR. Nu avem nevoie de playlistul melodiei, deci ștergeți textul.
Desenați o cale dreptunghiulară și selectați Adăugare în formă. Desenați o cale poigonală, plasați-o în partea inferioară a playerului și selectați Scădere.
Nu vrem ca această interfață să fie duplicată exactă a listei de redare. Pentru a face acest lucru unic, să adăugăm unele diferențe. Mutați texturile, mutați evidențiați și adăugați mai multe fisuri.
Nu uitați să repoziționați ecranul. Mutați punctele sale de interes, umbrele și accesoriile din colțul inferior.
Desenați o formă subțire dreptunghiulară și adăugați niște forme de strat.
Vom desena un indicator de timp. Desenați forma formată din dreptunghi rotunjit și un triunghi. Pentru utilizarea culorii: # 4f4834.
Adăugați textura deasupra, setați modul de amestecare la Ecran cu opacitate 45%. Conversia stratului de textură în Masca de tăiere. Adăugați următoarele stiluri de straturi.
Desenați un alt poligon deasupra interfeței playerului. Repetați pasul 36, adăugând stiluri de texturi și straturi.
Desenați o formă dreptunghiulară, setați Umplere la 0%. Adăugați următoarele stiluri de straturi.
Deseneaza forma formata din dreptunghi si triunghi. Adăugați următoarele stiluri de straturi.
Utilizați aceeași tehnică pentru a crea un alt buton.
Desenați o mică formă de pictogramă de difuzor. Alături de aceasta, creați o formă semilună formată din două cercuri suprapuse. Adăugați următoarele stiluri de straturi, similare cu butoanele anterioare.
Desenați niște forme rectangulare. Adăugați următoarele stiluri de straturi.
Duplicați forma stratului (Command / Ctrl + J) și ștergeți unele dintre ele. Eliminați toate stilurile de straturi folosite și adăugați următorul text Color Overlay.
Adăugați o formă circulară pe ambele capete ale formei. Consultați Pasul 37 pentru a afla cum să faceți acest lucru.
Adăugarea textului conține informații privind pista. Adăugați masca de strat. Desenați gradientul negru pentru a face să se estompeze.
Am terminat cu interfața.
De asemenea, putem schimba culoarea. Adăugați Hue / Saturation Layer Adjustment și plasați-o pe partea de sus a interfeței. Modificați setările.
După cum puteți vedea, proiectarea interfețelor nu înseamnă doar adăugarea de stiluri de straturi. Există mult mai multe procese. Sper că puteți învăța câteva tehnici noi din acest tutorial. Dacă aveți întrebări, nu ezitați să întrebați în formularul de comentarii de mai jos.
Accentsconagua