Share
În acest tutorial, vom proiecta o interfață MP3 elegantă și curată. Procesul implică o mulțime de desen manual și o mulțime de stiluri de straturi. Să începem!
Următoarele bunuri au fost utilizate în timpul producerii acestui tutorial.
Să începem prin crearea unui fundal pentru playerul nostru mp3. Desenați un gradient radial de la alb la gri.
Înclinați gradientul prin adăugarea nuanței de ajustare a stratului / saturației. Reduceți setarea Luminozitate.
Creați un strat nou și completați-l cu alb. Asigurați-vă că aveți alb și negru ca fundal și fundal apăsând D. Faceți clic pe Filter> Noise> Add Noise. Setați Distribuția la uniformă și selectați Monocromatic.
Schimbați modul de amestecare a stratului cu Multiplicare.
Duplicați stratul apăsând Command / Ctrl + J. Inversați stratul apăsând Ctrl + I. Deplasați stratul 1 px la stânga și la 1 cm în jos prin activarea mișcării instrumentului, apoi apăsați săgeata spre stânga, apoi săgeata în jos. Modificați modul de amestecare la ecran.
Puneți ambele straturi de zgomot într-un dosar de grup și reduceți opacitatea la 50%.
Creați un dreptunghi rotunjit pe panza. Utilizați # 3b484f drept culoarea sa. Adăugați următoarele stiluri de straturi.
Desenați un dreptunghi rotunjit mai mic. Adăugați următoarele stiluri de straturi.
Adăugați un mic dreptunghi rotunjit. Îl vom folosi ca un container pentru acoperirea albumului. Adăugați următoarele stiluri de straturi.
Lipiți o imagine deasupra dreptunghiului rotunjit. Apăsați Comandă / Ctrl + Alt + G pentru al converti în masca de tăiere și a pune-o în interiorul dreptunghiului rotunjit.
Adăugați informații despre artist, numele albumului și anul său sub coperta albumului.
Din bara de opțiuni, trebuie să selectați cele mai bune metode de aliniere pentru a preveni apariția neclară. Nu pot spune care este mai bine pentru că este diferit pentru fiecare tip de font și mărime. Trebuie să experimentați cu fiecare setare. Așa cum puteți vedea mai jos, în acest caz Nimic nu funcționează cel mai bine.
Desenați un dreptunghi rotunjit. Adăugați următoarele stiluri de straturi.
Creați un nou strat. Vopsea albă folosind o perie moale (Duritate: 0%) cu Opacitate scăzută (10-15%). Aceasta va adăuga o sursă de lumină sub egalizator.
Selectați instrumentul de linie și setați greutatea la 1 px.
Desenați o linie albă în interiorul egalizatorului. Activați instrumentul de zoom și faceți clic de câteva ori pentru a mări vizualizarea maximă. Trebuie să ne asigurăm că linia nu este neclară. Așa cum puteți vedea mai jos, există un loc neclar la ambele capete ale liniei.
Există două moduri de a remedia această neclaritate. Mai întâi trebuie să rotunjim mărimea. Al doilea este fixarea plasamentului.
Apăsați Command / Ctrl + T pentru a transforma linia. Faceți clic dreapta pe Lățime (W) caseta și selectați pixeli. Faceți același lucru cu caseta Înălțime (H).
Trebuie să rotunjim mărimea. În acest caz, va trebui să modificăm 11,97 px la 12 px.
Apoi, să ne fixăm poziția. Selectați forma liniei cu calea instrumentului. Apăsați tasta săgeată pentru a fixa poziția sa. Faceți acest lucru până când nu avem un loc neclare.
Duplicați și transformați linia apăsând comanda / Ctrl + Alt + T. Deplasați-o în sus 3 px?
Repetați procesul de duplicare și transformare apăsând comanda / Ctrl + Shift + Alt + T.
Selectați toate liniile, duplicați-o și plasați-o spre dreapta. Amintiți-vă să o păstrați ascuțită Asigurați-vă că poziția este perfectă pentru a evita fața neclare.
Repetați acest proces până când avem câteva coloane cu linii de înălțime de 1 px.
Ștergeți câteva dintre linii până când obținem o formă naturală de egalizator. Adăugați următoarele stiluri de straturi. Setați umplerea la 0%.
Adăugați numele artistului, titlul melodiei și timpul total de urmărire în partea de sus a egalizatorului. Eu folosesc tipul de telefon tip LCD aici. Metoda Anti-aliată folosită aici este Niciuna.
Mai jos, puteți vedea rezultatul cu fiecare metodă Anti-aliată.
Adăugați mai mult text pentru mai multe informații în partea superioară a ecranului LCD. Utilizați instrumentul Creion pentru a desena o linie mică de 1 pix negru care separă fiecare text. Ștergeți ambele capete ale acestor linii.
Apăsați Comandă / Ctrl + 1. Să revenim și să vedem rezultatul pe care l-am avut până acum în vizualizarea de 100%. Acest lucru este important pentru a face ca nu exista spoturi neclare in designul nostru.
Desenați un mic dreptunghi rotunjit pentru buton.
Din nou, trebuie să verificăm dimensiunea și poziția sa pentru a evita pete neclare. Apăsați Command / Ctrl + T și asigurați-vă că ați rotunjit mărimea acesteia.
Asigurați-vă că ați verificat poziția sa, nu vrem să vedem muchiile neclare.
Adăugați următoarele stiluri de straturi.
Desenați un triunghi negru deasupra butonului. Adăugați Drop Shadow cu următoarele setări.
Repetați procesul pentru a crea mai multe butoane.
Creați un fundal al butonului realizat din două dreptunghiuri rotunjite suprapuse. Adăugați următoarele stiluri de straturi.
Hai să ne întoarcem din nou și să aruncăm o privire la design în viziunea de 100%. Trebuie să ne asigurăm că nu există pete neclare.
Creați un dreptunghi rotunjit lung. Adăugați următoarele stiluri de straturi.
Duplicată formă de strat pe care tocmai am creat-o și adăugăm aceste stiluri de straturi.
Adăugați masca de strat. Selectați jumătate din formă și umpleți-o cu negru.
În prezent, stilurile de straturi sunt aplicate masca stratului și ele adaugă o formă rotunjită la capătul drept al formei. Pentru a elimina acest lucru, activați Efecte de ascundere a maselor de straturi din caseta de dialog stil.
Puteți vedea diferența de mai jos. Efectul din stilul stratului este acum ascuns de masca stratului.
Creați un dreptunghi rotunjit mai mare în spatele indicatorului de timp pentru fundalul acestuia. Adăugați acest stil de strat.
Creați un nou strat pe fundalul indicatorului de timp. Vopsea câteva culori și umbre. Puteți vedea progresul pe care l-am făcut mai jos.
Creați un dreptunghi rotunjit și plasați-l pe partea dreaptă în spatele formei principale. Adăugați următoarele stiluri de straturi.
Creați un strat nou pe partea de sus a formei dreptunghiului rotunjit. Vopsea câteva puncte și umbre.
Creați niște triunghiuri și plasați-le în partea dreaptă a formei. Adăugați stilul următor al stratului.
Utilizați un instrument creion pentru a desena o linie de 1 pix, alb-negru. Setați opacitatea la 10%.
Adăugați masca de strat și vopsiți unele părți ale liniei cu negru. Mai jos puteți vedea masca folosită aici.
Desenați un dreptunghi rotunjit și adăugați următoarele stiluri de straturi. Setați Nivelul de umplere la 0%.
Adăugați titluri de melodii. Setați unul dintre melodii cu caractere aldine pentru a indica că este o melodie activă.
Adăugați Drop Shadow pentru a da efectul de inserție.
Desenați un dreptunghi rotunjit. Adăugați următoarele stiluri de straturi și setați stratul de umplere la 0%.
Creați un semn plus realizat din două forme de linie suprapuse. Setați Umplere la 0% și adăugați aceste stiluri de straturi.
Repetați procesul pentru a crea alte butoane.
Formă de bază duplicată pentru playlist. Apăsați Comandă / Ctrl + T, faceți clic dreapta și alegeți Flip orizontal. Mutați-o în partea stângă.
Desenați un dreptunghi subțire rotunjit și adăugați aceste stiluri de straturi.
Creați un mic dreptunghi rotunjit pentru cursor. Adăugați următoarele stiluri de straturi.
Aceste stiluri de straturi încă nu sunt suficiente pentru a obține o imagine 3D convingătoare. Utilizând un instrument creion, trebuie să adăugăm un detaliu al liniei de 1 pixel pe cursor. Vedeți imaginea de mai jos pentru referință.
Să mergem înapoi și să vedem rezultatul în vizualizare de 100%.
Vopsiți niște dungi negre în spatele glisorului.
Să adăugăm eticheta "VOLUME" pentru cursor. Fontul utilizat este Digital-7. Adăugați Drop Shadow.
Creați un alt cursor prin duplicarea cursorului anterior și modificați eticheta acestuia.
Acum, să ne concentrăm asupra creării cursorului de echilibru, deoarece acest lucru este puțin diferit. Adăugați mai mult spațiu între glisor și etichetă. Ștergeți dungi în spatele glisorului. Folosiți creionul pentru a desena linia alb-negru de 1 px. Setați Opacitatea stratului la 10%.
Adăugați caractere plus (+) și minus (-) în ambele capete și adăugați Drop Shadow.
Apăsați Comandă / Ctrl + 1 pentru a vedea rezultatul la vizualizare de 100%.
Designul nostru este pur și simplu prea curat și nenatural. Pentru a rezolva aceasta, să adăugăm câteva aspecte importante. Desenați o linie albă de 1 pixel folosind un instrument creion. Ștergeți ambele capete.
Repetați acest proces pentru a crea alte evidențe.
Țineți comanda / Ctrl și faceți clic pe forma de bază, formatul playlistului și formatul setărilor playerului pentru a crea o nouă selecție în funcție de forma playerului mp3. Apăsați de câteva ori săgeata în jos pentru a împinge selecția.
Creați un strat nou sub toate celelalte straturi. Completați selecția cu negru. Comanda Presst / Ctrl + Shift + I pentru a deselecta. Se înmoaie umbra prin adăugarea filtrului Gaussian Blur.
Să adăugăm reflecția pe suprafața playerului mp3. Copiați calea ecranului (1). Faceți clic pe pictograma Layer Adjustment și selectați Solid Color. Puteți folosi orice culoare aici. Creați o altă cale care acoperă partea superioară a ecranului și setați-o pe Intersecte (2). Schimbați opacitatea la 2% și completați la 0%.
Acum vom crea o altă reflecție pe partea exterioară a ferestrei principale. Creați o nouă cale care acoperă partea superioară a ferestrei principale (1). Faceți clic pe pictograma Layer Adjustment și selectați Solid Color. Îndepărtați-l cu o cale de formă a ecranului (2). Intersectează-l cu calea principală a formei ferestrei (3).
Setați Opacitatea la 23% și Umpleți la 0%. Adăugați următoarele stiluri de straturi.
Mai jos, puteți vedea diferența cu și fără reflecție.
Apoi vom adăuga reflecție pe fereastra stângă și dreaptă. Copiați calea ferestrei stânga și dreapta, setați modul la Adăugare (1). Faceți clic pe pictograma Reglare strat și selectați Solid Color. Strapați calea cu calea ferestrei principale (2). Creați o nouă cale care acoperă partea superioară a interfeței și o setați să intersecteze (3).
Setați Opacitatea la 10% și Completați 0%.
Mai jos, puteți diferența cu și fără reflecție. Foarte subtil, dar oferă mai multă profunzime formei.
Puneți toate formele și stratul care creează playerul mp3 într-un dosar de grup. Duplicați grupul și mutați ferestrele din stânga și din dreapta până când sunt închise.
Am incercat sa ascutiti fiecare pixel pe interfata, inca mai trebuie sa-l ascuti din nou. Creați un strat nou pe stratul superior. Apăsați Command / Ctrl + Shift + Alt + E pentru a îmbina toate straturile vizibile. Acum avem un duplicat exact al imaginii într-un singur strat.
Faceți clic pe Filtrare> Sharpen> Unsharp Mask. Acest filtru va ascuți toți pixelii de pe strat.
Accentsconagua