Share
Să ne construim un Element UI plin de umor. Vom folosi Photoshop pentru a explora texturile subtile și pentru a trage împreună un cadran de volum cu aspect deosebit. Sa mergem!
Deschideți un nou document RGB de 800 x 600 pixeli și o rezoluție de 72 dpi.
Selectați culoarea albastru închis pentru fundal (în acest caz codul de culoare este # 1b1c20) și apoi utilizați instrumentul pentru vopsea de vopsea pentru a umple fundalul.
Aplicați un anumit zgomot în fundal, pentru a da o textură moale (1% zgomot Gaussian și monocromatic).
Acum, verificați descărcarea sursei - veți găsi un fișier de tipar acolo, pe care va trebui să faceți dublu clic pentru a instala în Photoshop. Aplicați modelul pe un strat nou și umpleți întregul strat cu modelul.
Întoarceți opacitatea de suprapunere a modelului la 15-20%, în funcție de preferințele dvs., pentru a ajunge la ceva de genul:
Creați un nou grup cu numele "buton" și adăugați o formă de cerc (faceți acest lucru selectând instrumentul de formă eliptică și ținând apăsată tasta de deplasare pentru ao face perfect circulară). Dați-i o culoare vie, astfel încât să puteți vedea stratul în mod clar în jos pe linie?
Modificați opacitatea de umplere a stratului până la 0% și aplicați o umbră de cădere cu următoarele proprietăți:
Apoi, aplicați o umbra interioară ușoară pentru a face să pară indentată.
Apoi se aplică o strălucire interioară pentru a face baza să arate plină.
Pentru pasul următor, faceți un alt cerc și dați-i o culoare albă, acesta va fi forma de bază a elementului dvs. de utilizator și va servi pentru câteva straturi de detaliu, astfel încât să faceți o dimensiune cu care vă bucurați cu adevărat! Denumiți-o "button_base" sau ceva similar.
Aplicați o suprapunere cu un gradient înclinat, începeți cu alb și adăugați două opriri de culoare gri deschis. Utilizați cele două opreri albe din mijloc pentru a juca cu claritatea butonului și, pe măsură ce lucrați, continuați să previzualizați elementul pentru a vedea cum arată.
Aplicați o înclinare și un relief la bază, pentru a face să pară un pic 3d-ish.
Acum pentru detalii. Faceți o copie a stratului de bază și puneți-o sub baza butonului. Acum, întoarceți umplerea la 0% pentru a vedea numai filtrele pe care le aplicați stratului respectiv, și nu conținutul. Creați o umbră cu următoarele setări:
Pentru a face butonul să apară mai mult, copiați din nou baza butonului, plasându-l sub baza butonului și deasupra umbrelor. Dați-i o acoperire de culoare închisă pentru a face să arate minunat.
Acum faceți o altă copie a stratului de bază al butonului, dar transformați-l la o dimensiune mai mare. Puneți-l peste stratul de bază al butonului și rasterizați-l!
Cu acest lucru, du-te la panoul de filtre și să-i dea un filtru de zgomot maxim (așa că crezi că te uiți la un TV rupt).
Apoi, aplicați un filtru Radial Blur și setați-l la valoarea maximă pentru a obține un efect frumos.
Ar trebui să reduceți opacitatea acestui strat la aproximativ 20-40%, apoi să centrați mijlocul cu ajutorul butonului. Când îl aveți în centru, selectați stratul butonului și alegeți> invers. Apoi, selectați stratul de zgâriat și apăsați Ștergeți. Ar trebui să aveți un efect de zgâriat frumos pe buton.
Pentru a verifica dacă facem totul bine, ar trebui să aveți ceva similar cu acesta:
Efectuați un cerc mic pentru notch (sau indicator) de pe buton.
Dați-i o umbră albă de picătură pentru ao da în relief.
Dați creasta o mică umbră interioară.
Și, în cele din urmă, aduceți-o la viață cu o culoare aleasă de dumneavoastră.
Ar trebui să aveți ceva de genul:
Acum hai să rămânem în ultimele mici detalii! Faceți un mic dreptunghi pentru crestăturile de la baza butonului.
Întoarceți din nou umplerea la 0% și dați-i o umbră albă de picătură.
Are nevoie de un pic de umbrire și în interior, deci dă-i o umbra interioară mică.
Acum copiați-l și răsturnați-l în cealaltă parte.
Puneți conținutul dvs. textual acolo, utilizând un font de alegere (am optat pentru Myriad Pro).
Aplicați o umbră la text, pentru a face să pară indentată.
Apoi aplicați o ușoară umbra interioară.
Aceasta ar trebui să fie ceea ce vedeți în fișierul dvs.:
Și acesta este elementul nostru UI final, un volum simplu de volum pentru pomparea muzicii!
Sper că ți-a plăcut acest tutorial, acesta va fi primul dintre multe, deci nu ezitați să mă urmați pe twitter sau să vă abonați la newsletter-ul site-ului meu. Proiectați fericit și stați liniștit!
Accentsconagua