Share
Învățați pașii de creare a interfeței profesionale, de la proiectare până la descrierea detaliată a creării fiecărui element. Toate tehnicile descrise aici nu sunt greu de înțeles; cu toate acestea, ele vă arată cum să adăugați un aspect profesional proiectelor dvs. de proiectare a interfeței.
Cu ajutorul instrumentului dreptunghi (M), faceți dreptunghiul cu dimensiunile de 1024 x 768 px. Dimensiunea de mai sus se va potrivi unui ecran iPad.
Atunci când se lucrează cu interfețe, toate elementele create sunt recomandate a fi la scara naturală la care vor fi utilizate. Scara de mai sus ne permite să creăm o grafică extrem de clară, evitând necesitatea de a face elemente suplimentare.
Acum vom crea fundalul interfeței dvs. Fundalul creat în etapa inițială a proiectului nostru va permite selectarea corectă a celorlalte culori ale elementelor. Umpleți fundalul cu un gradient gri până la culoarea închisă, având centrul de gradient aflat sub fundal.
Deschideți panoul Aspect, apoi adăugați o umplutură nouă, aplicând un gradient gri până la gri închis. Gradientul gri închis al unui astfel de gradient trebuie să aibă opacitatea de 0%. Localizați centrul său deasupra fundalului.
Adăugați noua umplutură ca o culoare gri închis în panoul Aspect
Selectați-l și mergeți la Efect> Artistic> Burete ... Acum, setați parametrii efectului afișat în figura de mai jos.
Setați modul de amestecare a suprapunerii la opacitate de 80% pentru o astfel de umplere.
Acum, să ne gândim la aranjamentul elementelor de interfață. Înainte de a face acest lucru, trebuie să examinați interfețele similare existente și să înțelegeți caracteristicile sale funcționale. Mai mult, elementele menționate trebuie să fie amplasate într-un mod convenabil pentru utilizatori.
Elementele principale ale unei aplicații DJ sunt plăcile turntable Vinyl Record. Folosind instrumentul Ellipse (L) creați două circumferințe având aceeași dimensiune. Pentru a localiza elementele de interfață într-un mod simetric, este necesar să se creeze mai multe linii directoare.
Unele variante de chei au fost aplicate de mine înainte de a-mi face alegerea așa cum se arată în figura de mai jos.
Pe măsură ce încercăm să creăm interfața la o scară naturală, vă vom oferi o opțiune de a vă pune mâna pe ecranul monitorului pentru a verifica dacă elementele create sunt situate convenabil. În afară de locația convenabilă, interfața dvs. ar trebui să aibă un aspect frumos.
Simetria este considerată a fi partenerul dvs. de încredere pentru a atinge obiectivele stabilite. Selectați tastele din partea stângă a interfeței și mergeți la Object> Transform> Reflect ..., apoi alegeți opțiunea Vertical și apăsați tasta Copy în caseta de dialog.
Acum mutați circumferința în partea dreaptă a interfeței.
Utilizați instrumentul Rectangle (M) pentru a marca pozițiile indicatorilor glisante și ale altor taste.
Acum, puteți continua cu crearea elementelor de interfață.
Umpleți circumferința creată în etapele de mai sus cu o culoare neagră.
Copiați o astfel de circumferință și o lipiți în față (Command + C; Command + F), umpleți copia cu o culoare gri și micșorați-o cu 3 px.
Creați noua circumferință și completați-o cu un gradient vertical vertical format din două nuanțe de culoare gri. Și se formează formularul de bază de bază.
Acum, să creăm indenturile pe suprafața laterală a mesei rotunde. Utilizați instrumentul Ellipse (L) pentru a desena o elipsă.
Trageți această elipsă în panoul Perii și salvați noua perie ca o pensulă de model.
Creați circumferința necompletată cu cursa setată în culori aleatorii.
Aplicați peria creată în pasul anterior la circumferință.
Modificați parametrii periei de model; în acest scop, faceți dublu clic pe imaginea din panoul Perie. Setați noii parametri în caseta de dialog urmând progresul modificărilor.
Lăsând circumferința selectată, mergeți la Object> Expand Appearance. Acum, tălpile de pe platan au un aspect separat.
Umpleți fiecare obiect cu un gradient radial format din culori negre și albe.
Centurile gradientilor trebuie mutate sub obiectele de mai jos.
Să creăm spoturile uzate din jurul tălpilor. Copiați toate aceste liniuțe și lipiți-le înapoi (Command + C; Command + B). Umpleți-le cu o culoare gri (vizibilitatea obiectelor superioare trebuie dezactivată).
Cu obiectele selectate, mergeți la Object> Blur> Gaussian Blur și setați valoarea razei în caseta de dialog.
Poziția declivelor în cadrul acestor linii reprezintă direcția ușoară. În cazul meu, lumina este îndreptată în jos și spre dreapta. Să creăm lumina-și-umbra pe platan. Creați noua circumferință, cu condiția să acoperi complet platanul. Umpleți această circumferință cu gradientul radial alb-gri.
Setați modul Multiplicare amestecare pentru circumferință în panoul Transparență.
Creați noua circumferință plină cu o culoare neagră.
Acum, vom crea circumferința, care va fi umplută cu un gradient conic. În scopul acestui proiect, majoritatea obiectelor ar trebui să aibă o umplere similară și, prin urmare, se recomandă învățarea detaliată a acestui proces. Creați dreptunghiul care urmează să fie umplut cu un gradient liniar.
Dimensiunea dreptunghiului și culorile gradientului pot fi setate pe orice pentru moment. Condiția unică care trebuie îndeplinită: glisoarele inițiale și cele finale ale gradientului trebuie să aibă aceeași culoare. Creați circumferința și umpleți-o cu un gradient radial de la alb la gri.
Lăsând circumferința selectată, mergeți la Object> Expand ... și selectați opțiunea Gradient Mesh din caseta de dialog.
Acum, mergeți la Object> Mască de tăiere> Eliberați
Apoi mergeți la Object> Path> Clean Up ...
... și Ungroup obiectul mesh gradient.
Selectați dreptunghiul umplut cu gradientul liniar și obiectul mesh gradient. Acum aplicați Object> Distortare plicuri> Faceți cu obiectul de sus.
Astfel, este creat gradientul conic; să vedem cum să-l controlam. Pentru a selecta modul de editare, apăsați tasta Editare conținut din bara de control.
Acum, puteți regla gradientul conic, la fel și cel liniar. Creați un gradient liniar similar cu cel prezentat în figura de mai jos.
Creați circumferința, selectați obiectul cu gradientul conic împreună cu circumferința menționată și mergeți la Object> Mask Clipping> Make sau utilizați comanda rapidă Command + 7
Aplicând tehnica de mai sus, creați un obiect plin cu un gradient conic.
Puteți duplica obiectul existent umplut cu gradientul conic, făcând noile setări pentru acesta schimbând poziția și culoarea glisoarelor gradientului liniar. În cazul meu, am adăugat două albastru închis și două glisante galben închis.
Să creăm piesele audio ale suprafeței înregistrate. Creați două circumferințe nefolosite, cu un accident vascular cerebral, o culoare gri închis.
Lăsând circumferințele selectate, mergeți la Object> Blend> Make și apoi la Object> Blend> Blend Options ... și apoi setați numărul pașilor specificați.
Acum, mergeți la Object> Blend> Expand. Selectați și ștergeți unele piese.
Selectați grupul alcătuit din piste audio și setați pentru acesta modul Blending de suprapunere în panoul Transparență.
Să creăm ochii de pe suprafața recordului. Creați două circumferințe umplute cu gradientul radiant alb-negru, apoi setați pentru acesta modul de amestecare a ecranului în panoul Transparență.
Limitați iluminarea strălucirii cu ajutorul unei măști de tăiere.
Utilizând instrumentul Ellipse (L), creați circumferința plină cu o culoare gri închis. Setați modul de amestecare a suprapunerii pentru circumferință.
Brațul de ton trebuie să aibă structura radială. Să învățăm inițial procesul de creare a atașamentului.
Partea superioară a atașamentului trebuie să găzduiască circumferința umplută cu un gradient conic.
Acum, să creăm ochii și umbrele pe suprafața atașamentului.
Obrazurile și umbrele vor fi reținute cu ajutorul unei măști de tăiere.
Să creăm bratul tonic. Desenați o elipsă și duplicați-o de 4 ori prin menținerea tastelor Alt și Shift în timp ce aplicați decalajul orizontal.
Folosiți instrumentul pentru foarfece (C) pentru a tăia elipsele numerotate ca 1, 3 și 5 în punctele lor superioare și inferioare.
Ștergeți partea stângă a elipsei.
Utilizați instrumentul Pen (P) pentru a continua desenarea celorlalte jumătăți de elipsă, creând astfel suprafețele cilindrice ale brațului tonului.
În cursul creării, țineți apăsată tasta Shift.
Aplicând tehnica de mai sus, creați miezul bratului tonic.
Pentru ao aranja în mod corespunzător, umpleți suprafețele cu culori diferite.
Umpleți suprafețele cilindrice cu un gradient liniar format din nuanțe de contrast de culoare gri.
Aplicând acest gradient, trebuie să obținem strălucirea metalică a suprafeței. Suprafețele de capăt vor fi umplute cu o culoare gri închis.
Umpleți suprafața miezului cu gradienți liniari. Partea din stânga a miezului trebuie să fie iluminată și, prin urmare, gradientul liniar trebuie să aibă un culisor de culoare roșu închis.
Desenați linia orizontală cu conturul unei culori roșii.
Dacă părăsiți linia selectată, mergeți la Efect> Blur> Gaussian Blur ... și setați valoarea razei în caseta de dialog.
Utilizați panoul Aspect pentru a crea încă două curse: roșu și roz. Grosimea cursei finale ar trebui să fie mai mică decât cea anterioară.
Aplicând tehnica de mai sus, creați linia de pe partea dreaptă. Setați această linie ca pe o culoare gri.
Să creați indicatorii de pe partea centrală a brațului de ton. Creați circumferința, care trebuie umplută cu un gradient radial format dintr-o culoare albă și două nuanțe de culoare verde.
Iluminarea din spate a indicatorului ar trebui să fie creată cu ajutorul a două elipse intercrossate umplut cu gradiente radiale, elipsoid verde spre negru.
Setați modul de amestecare a ecranului pentru elipsele din panoul Transparență.
Grupați toate elementele indicatorului și duplicați-le.
Poziționați brațul tonic sub elementele atașate și rotiți-l cu ajutorul instrumentului Rotate ®.
Să creăm umbra picăturii de pe brațul tonic. Copiați-l și inserați-l înapoi (Command + C; Command + B), apoi utilizați instrumentul Rotate (R) pentru ao roti, după cum se arată în figura de mai jos:
Lăsați grupul selectat și apăsați butonul Unite din panoul Pathfinder.
Umpleți forma umbrei cu un gradient de la negru la gri.
Acum setați modul Overly Blending pentru obiect.
Mergeți la Efect> Blur> Gaussian Blur ... și setați valoarea razei în caseta de dialog.
Acum, toate elementele platanului sunt gata; continuați cu gruparea sa. Duplicați platanul și lipiți copia acestuia în partea dreaptă a interfeței.
Butoanele metalice constau din două circumferințe.
Forma umplută cu gradientul conic este situată pe partea superioară.
Plasați butoanele în zonele afișate în prima parte a acestui tutorial.
Să creăm tălpile sub niște butoane. Utilizați instrumentul Pen (P) pentru a desena linia dintre centrele butoanelor adiacente. Selectați lățimea cursei și setați capacul rotund. Plasați această linie sub butoanele.
Lăsați obiectul așa cum este selectat, apoi aplicați Object> Expand. Copiați formularul și lipiți-l înapoi (Command + C; Command + B). Acum, hai să mutăm copia puțin în stânga și în jos.
Copiați formularul superior și lipiți-l în față (Command + C; Command + F). Selectați formele superioare și inferioare, apoi apăsați butonul Minus Front din panoul Pathfinder.
Umpleți formatul indent cu un gradient liniar de la alb la gri și aplicați modul Multiply Blending.
Lumina strălucitoare în limitele formularului trebuie umplută cu o culoare gri.
Creați liniuțe similare în zonele prezentate în figura de mai jos:
Utilizând instrumentul Pen (P), trageți linia dreaptă cu capacul rotund.
Accesați Obiect> Extindeți. Umpleți obiectul cu gradientul de culoare orizontală orizontală la gri închis.
Creați încă o completare în panoul Aspect și umpleți-l cu gradientul vertical vertical așa cum se arată:
Aplicați modul de amestecare multiplă pe umplere.
Utilizați Instrumentul rotunjit dreptunghi pentru a crea forma mânerului cursorului. Completați acest formular cu un gradient liniar vertical care staționează pentru a simula jocul luminos pe suprafețele mânerului.
Creați dreptunghiul umplut cu gradientul liniar alb-negru. Plasați-l sub mânerul glisorului și aplicați modul Multiplicare amestecare.
Acum avem forma umbrei mânerului creat.
Să creăm partea luminiscente a cursorului. Forma prezentată în figura de mai jos trebuie umplută cu un gradient liniar compus din două culori negre și un albastru. Aplicați modul de amestecare a ecranului în formularul menționat.
Creați celelalte glisoare ale interfeței prin aplicarea tehnicii de mai sus.
Să creăm scara care trebuie localizată sub glisoarele orizontale. Utilizați instrumentul Rounded Rectangle pentru a crea două forme, după cum se arată în figura de mai jos:
Selectați ambele formulare și mergeți la Object> Blend> Make, apoi la Object> Blend> Blend Options ... și setați în final numărul pașilor specificați.
Lăsând obiectul de amestec selectat, apoi mergeți la Object> Blend> Expand.
Creați obiectul similar dintr-o altă parte a cursorului prin aplicarea tehnicii de mai sus.
Selectați ambele elemente ale scalei și accesați Object> Blend> Make, apoi Object> Blend> Blend Options ... și setați în final numărul Pașii specificați.
Pentru a crea strălucirea pe marginea elementelor scării, creați un dreptunghi rotunjit, plin cu o culoare gri deschis, care trebuie plasat sub primul și ultimul element al scalei. Selectați obiectele de mai sus și aplicați un instrument Blend to it.
O scală similară trebuie creată sub al doilea cursor orizontal.
Proiectarea capului indicatorului laser ar trebui să fie identică cu butonul.
Plasați copia redusă a capului în punctul de ieșire a razei.
Creați umbra de pe indicator cu ajutorul elipsei umplută cu gradientul alb al elipsoidului până la alb. Aplicați acum modul Multiply Blending la obiect.
Creați circumferința umplută cu gradientul radial roșu până la negru în punctul de ieșire a razei. Aplicați modul de amestecare a ecranului pe circumferință.
Utilizați instrumentul Pen (P) pentru a crea forma dreptunghiulară deasupra suprafeței laterale a plăcii grafice. Completați acest formular cu gradientul liniar format din două culori negre și un cursor roșu. Aplicați modul Blending ecran la obiectul creat.
Restrângeți raza laser cu ajutorul măștii de decupare cu forma circumferențială și mărimea plăcii grafice.
Radiația laser din înregistrare ar trebui să fie creată cu ajutorul obiectului de amestec. Forma exterioară a obiectului ar trebui să fie circumferința distorsionată și să aibă Opacitate 0%.
Forma interioară trebuie să fie circumferința umplută cu o culoare roșie la care se aplică modul Blending ecran și opacitate 50%.
Radiația laser trebuie direcționată către centrul de placă turnantă.
Utilizați instrumentul Rectangle (M) pentru a crea două dreptunghiuri. Primul ar trebui să aibă o umplutură de culoare neagră, în timp ce al doilea ar trebui să fie umplut cu un gradient radial alcătuit din două nuanțe de culoare albastră.
Desenați o linie orizontală cu ajutorul instrumentului Pen (P). Linia trebuie să aibă grosimea de 1px și să fie prezentată cu o culoare albastră.
Lăsați linia selectată, mergeți la Efect> Stylize> Scribble ... și setați parametrii de efect prezentați în figura de mai jos.
Acum mergeți la Efect> Distort & Transform> Zig Zag ... și setați parametrii de mai jos.
Să creăm un val sonic, care urmează să fie situat deasupra primului. Aplicați modul de amestecare a ecranului.
Restrângeți vizibilitatea undelor sonice cu ajutorul unei măști de tăiere.
Creați un indicator similar pe platoul drept. Este de preferat ca parametrii efectelor aplicate celui de-al doilea indicator să fie ușor diferiți.
Valul sonic are un aspect unic, mai ales dacă sunt redate piesele diferite.
Creați dreptunghiul umplut cu o culoare neagră. Mergeți la Efect> Stylize> Round Corners ... și setați valoarea rotunjirii razei în caseta de dialog.
Acum mergeți la Efect> Stylize> Outer Glow ... și setați parametrii efectului.
Să adăugăm noua umplutură în panoul Aspect și să o umplem cu un gradient vertical vertical.
Selectați această umplere în panoul Aspect și mergeți la Efect> Cale> Cale de decalare și, în final, setați valoarea de compensare în caseta de dialog.
Adăugați noua umplutură de gradient în panoul Aspect și apoi mergeți la Efect> Cale> Cale de decalare și setați valoarea de compensare în caseta de dialog.
Pentru a evita reluarea continuă a procedurilor descrise în pasul anterior, să creăm noul stil grafic.
Acum, suntem capabili să aplicăm stilul menționat elementelor care au orice formă.
Simbolurile afișate pe butoane trebuie să fie create cu ajutorul formularelor simple, utilizând instrumente cum ar fi Tool Rectangle (M) și Polygon Tool. Aceste obiecte ar trebui să fie umplut cu gradienți liniari sau radiali constând din nuanțe întunecate de culoare gri.
Pentru a crea strălucirea marginilor simbolului, copiați-l și lipiți-l în spate. Umpleți noile formulare cu alb și deplasați-le puțin mai jos.
Inscripțiile ar trebui create cu ajutorul instrumentului de tip (T). După introducerea comenzii Type> Create Outline, trebuie să procedați la aceleași proceduri ca cele indicate pentru simboluri.
În cazul meu, a fost folosit un font Liquid Crystal pentru indicarea indicației de redare a melodiilor; acesta poate fi descărcat aici.
Pentru a crea strălucirea pe afișaj, creați formularul prezentat mai jos cu ajutorul Instrumentului Pen. Completați acest formular cu gradientul liniar format din culori negre și gri închis și aplicați modul de amestecare a ecranului.
Pentru a furniza luminii de fundal active a interfeței, creați circumferința umplută cu un gradient radial de la albastru la negru. Aplicați modul de amestecare a ecranului pe circumferință.
Deci, proiectul destul de complicat se face. Se poate presupune că unele detalii sunt omiteți și că, în acest caz, acest lucru ar putea face ca executarea proiectului să fie mai complicată. Voi fi foarte bucuros să vă ajut în rezolvarea oricăror probleme. Simțiți-vă liber să lăsați un comentariu sau o întrebare.
Accentsconagua