Share
Una dintre cele mai bune modalități de a învăța cum să creeze interfețe uimitoare pe care să le practici prin crearea de dispozitive electronice în Photoshop. Aceste zile, aproape toată lumea are un fel de dispozitiv MP3 pentru a reda muzică. În acest tutorial vom demonstra cum să creați o interfață MP3 elegantă, elegantă și simplă în Photoshop pentru a reda fișiere audio pentru proiectele Flash.
Primul pas este să creăm un fundal în care să putem aplica un gradient radial întunecat. Împachetați stratul în orice culoare și adăugați un stil de strat cu gradientul prezentat mai jos.
Cu ajutorul instrumentului dreptunghi rotunjit (setați o rază de 20 de pixeli), creați elementul principal al dispozitivului utilizând un strat de formă (faceți clic pe prima opțiune din meniul superior).
Faceți dublu clic pe vectorul acestui strat, editorul de culori se va deschide. Vom selecta o culoare gri deschis # E1E0E0 care ne va permite să adăugăm o anumită strălucire la suprafață. De fiecare dată când doriți să creați obiecte albe, va trebui să adăugați un pic de culoare gri pentru a le lumina sau pentru a adăuga o anumită strălucire pentru a face aceste resurse vizibile.
Acum vom crea o înclinare în jurul dispozitivului. Pentru a face acest lucru, va trebui să creați niște ghiduri de referință utilizând conducătorii Photoshop. Faceți clic pe unghiul de convergență al celor două rigle. Prin glisarea mouse-ului veți putea vizualiza liniile punctate care determină exact unde se află cursorul. Acest lucru ne va permite să creăm un ecartament echidistant în jurul perimetrului dispozitivului.
Acum că avem un nou strat de formă pentru teșitură, trebuie să luăm opacitatea acestui strat la zero, deoarece vrem doar să vedem o suprafață de 2 pixeli pe suprafață.
Aplicați o cursă de 1 pixel în poziția Inside utilizând o culoare mai închisă decât partea frontală a dispozitivului. În acest pas vom crea o linie care reprezintă spațiul comun dintre corp și partea din față a jucătorului.
Aplicați o strălucire interioară cu o linie de 2 pixeli utilizând valorile de mai jos.
Adăugați un gradient moale pentru a da ideea de convexitate la partea frontală a dispozitivului.
Acum ne vom ocupa de marginea jucătorului. Pentru aceasta, adăugați o linie care va funcționa ca o extrudare pentru a da iluzia unui obiect 3D. Adăugați o curgere de 2 pixeli gri în poziția exterioară.
Utilizând stilul Bevel & Emboss, adăugăm lumină în zona superioară a acestei linii. Acum, obiectul pare să aibă o extrudare spre spate, care primește lumină de sus și devine mai întunecată la bază.
Adăugați o umbră moale și interioară mică la acest strat pentru a evidenția chiar și mai mult fața jucătorului.
Prin duplicarea și editarea stratului conic al frontalului, generăm mai multe teșituri care vor reprezenta diferite butoane de control ale dispozitivului.
Acum editați stratul de formă pentru a crea butonul principal Play / Pause al playerului nostru. Să duplicăm prima teșitură și să luăm marginea interioară pentru a face un obiect circular. Apoi măriți-l cu 10%, deoarece avem nevoie doar de înclinările orizontale.
Aplicați o mască moale de 3 pixeli în forma pe care am creat-o la pasul 13, după cum se arată mai jos.
Pentru a face masca să ascundă obiectul și stilul său de strat, faceți clic pe opțiunea "Mască straturi ascunde efecte" în fereastra de stiluri. Dacă nu alegem această opțiune, masca va ascunde numai obiectul, dar va arăta efectul în afara măștii și dorim să păstrăm acel aspect ascuns.
Aceeași mască va fi utilă și pentru celelalte teșite; îl putem lua de pe stratul pe care l-am mascat înainte. Dacă faceți clic pe butonul din dreapta al mouse-ului peste pictograma mască din interiorul stratului, alegeți "Subtract Mask Layer from Selection". Aceasta va crea o selecție identică celei anterioare.
Cu această selecție, repetăm pasul de conversie pentru selecția mască.
Avem deja muchiile de separare ale setului principal de butoane. Acum trebuie să creăm un strat de formă pentru afișajul jucătorului: un ecran acrilic negru în care să fie afișat numele piesei și timpul.
Mai întâi folosim umbră pentru a crea o teșitură inferioară în care lumina care vine de sus va fi lovită. Utilizați valorile afișate în imagine pentru a configura stilul pentru a fi clare și clare și nu întunecate și neclare.
Acum trebuie să creăm un gradient radial. Luați atât culorile alb-negru cât mai apropiate de centru, astfel încât nu există atât de multă blândețe între ambele culori. Locul de amplasare de negru 49%, localizarea de alb 50%.
Debifați opțiunea Aliniere cu strat. Daca nu facem acest lucru, gradientul va fi doar de la centrul obiectului pana la margini si dorim ca acest gradient sa fie mult mai mare si mai larg.
După ce ați produs efectul lucios, terminați acest stil cu câteva teșituri asemănătoare cu cele create pentru pasul butonului. Utilizați o curbă neagră de 1 pixel cu cursa aliniată la interior. Utilizați o strălucire interioară, de 2 px, cu modul de amestecare setat pe ecran.
Am terminat acum partea frontală a playerului nostru MP3. Acum, va trebui să adăugăm câteva pictograme la butoanele și textul din interiorul afișajului.
Acum, să simulăm scrollerul de text pe afișajul nostru. Folosind un font pixelat, trebuie să adăugăm numele interpretului și numele melodiei care va fi redat. Puteți utiliza acest font gratuit. Amintiți-vă să eliminați aliasul din fereastra Caracter în meniul superior al instrumentului de text pentru a păstra clar textul.
Cu un alt font bitmap creăm cronometrul care indică timpul trecut. Acest font este, de asemenea, gratuit și îl puteți obține aici.
Acum utilizați un font care conține pictogramele și simbolurile obișnuite ale unui player audio sau video. Poți folosi asta. Odată instalat, utilizați-l pentru a crea diferite butoane ale player-ului, în acest caz butonul de redare / pauză (va trebui să creați două stări pentru buton atunci când dezvoltați acest player, deoarece butonul Redare devine butonul Pause când este presat și invers).
Pentru acest simbol utilizăm aceeași culoare ca cea pe care am ales-o pentru suprafața frontală a obiectului. Cu ajutorul instrumentului de selectare a culorilor putem vopsi textul.
Acum putem include diferite stiluri care fac acest simbol să arate ca basorelief. Utilizați valorile corespunzătoare de mai jos pentru umbra interioară.
Împingeți înclinarea inferioară folosind aceste valori.
Utilizați un gradient de lățime moale și mici la suprafața depresiunii, deci nu este atât de plictisitor.
Să creăm controlul volumului. Desenați un mic buton cu un finisaj metalic lustruit. Începeți cu un strat cu formă circulară.
Utilizați o umbră pentru a crea iluzia unei extrudări mari.
Cu un gradient în modul Angle și mai multe dungi gri și albe, putem simula polishul circular al acestui tip de buton. Asigurați-vă că culoarea gri inițială în stânga este aceeași cu culoarea gri finală din dreapta.
În cele din urmă, adăugați un accident vascular cerebral cu o umplere cu gradient. Aceasta va adăuga teșitura pe perimetru. Urmați cu atenție valorile din imagine.
Am terminat acum butonul de control al volumului, dar dorim să adăugăm și un buton mut. Puteți face acest lucru folosind stiluri de straturi.
Pictați umbra player-ului într-un nou strat utilizând o selecție circulară de 2 pixeli dedurizată (vedeți meniul superior al instrumentului).
Ascundeți selecția cu ajutorul tastelor Ctrl + H și utilizați o perie de 100 pixeli cu 10% din fluxul vopselei, vopsiți ușor umbra. Acest lucru va face mai intensă în centrul obiectului.
Acum, să adăugăm puțină strălucire pe marginea afișajului jucătorului. Mai întâi, vopsiți o zonă intensă luminată în centrul unei selecții dreptunghiulare, care are o înălțime de 1 pixel. Apoi, cu aceeași perie, dar fără nici o selecție, faceți clic de mai multe ori pentru a crește intensitatea centrului.
Creați un efect de răsturnare pe butonul principal pentru a face suprafața frontală pop atunci când mouse-ul trece. Începem prin a crea o formă circulară în spatele pictogramei Pause.
Acest efect de depresie poate fi realizat cu: umbra de picătură pentru a întuneca și a înmuia marginile obiectului și un gradient pentru a simula faptul că această depresie are o suprafață superioară care este în nuanțe, pe măsură ce butonul a fost apăsat.
De asemenea, ascundem acest rollover cu o mască, așa cum am făcut-o cu teșiturile butonului principal. Rețineți opțiunea de a ascunde efectele stratului în același timp.
Repetând pașii anteriori pe care le maschează rolloverul.
Vom adăuga două efecte de lumină pentru a îmbunătăți rolloverul. Prin pictura cu 2 culori (# 00CCFF pentru marginea efectului și alb pentru centrul său), creăm o margine luminată pe care o vom masca. Duplicați stratul și reflectați-l pe verticală pentru a face ca acesta să pară ca și cum acesta se aprinde în partea de sus și în jos, pe măsură ce trece mouse-ul. Acest strat trebuie să fie setat pe "Ecran" pentru a integra mai bine strălucirea.
În cele din urmă, să adăugăm o sârmă subțire care va da mai multă realitate jucătorului. Pentru a face acest lucru, trageți un strat cu formă curbă utilizând instrumentul stilou.
Luați-l la 0% opacitate și adăugați un accident vascular cerebral cu același ton gri al suprafeței jucătorului.
Separați cursa din stratul de formă pe care l-am creat, deoarece trebuie să adăugăm niște umbre la acest fir. Faceți clic dreapta pe pictograma fx de lângă strat și alegeți Creare strat.
Această acțiune separă cursa într-un nou strat fără a distruge forma desenată anterior. Utilizați o umbră interioară pentru a da ideea unei embosuri cilindrice la această linie.
Playerul nostru MP3 este acum gata să fie exportat ca un PNG transparent și codat în Flash pentru a fi folosit pe site-uri web. Puteți vedea imaginea finală de mai jos sau puteți vedea o versiune mai mare aici.
Accentsconagua