Share
În tutorialul de astăzi vă voi arăta cum să creați o interfață de utilizator pentru un joc quiz de telefon inteligent în Adobe Illustrator CS6. Voi crea un interfață similară cu o placă de cretă publică și pentru a crea un model de lemn cu instrumentul de model pentru a adăuga un cadru din lemn. Acest tutorial este prima parte dintr-o cruce Tuts +, unde puteți afla cum să construiți jocul pe Mobiletuts+.
Înainte de a începe să creez UI, trebuia să știu ce elemente au fost necesare de la designerul jocului pentru a crea ceea ce căutau. Am fost într-un termen limită, așa că am folosit imagini de comunicare și concepte anterioare pentru a vă ajuta.
Prima imagine a conceptului a fost creată de designerul jocului, care a declarat că dorește o imagine de fundal, butoane, o zonă pentru un banner / antet, o zonă pentru o întrebare și variații ale modului în care textul ar putea să arate atunci când răspunde la întrebări corecte.
Mi sa dat apoi o machetă de un alt designer care anterior a fost de acord cu o tematică de tablă de cretă pentru test și a fost aprobat de designerul jocului.
Deci, destul de vorbăreț, hai să mergem mai departe, avem un termen limită de făcut! Deoarece nu mi s-au dat dimensiuni specifice pentru UI, m-am dus pentru un 600 x 800 pixel, RGB, aliniat la Pixel Grid, Document Nou. Fiind a fi vector, va fi ușor să modificați dimensiunile ulterior când clientul se întoarce la mine. Până atunci, să lucrăm la designul nostru și să scoatem cea mai mare parte a lucrărilor.
Cu informațiile pe care ni le-am dat, să facem o machetă cu o serie de curse neagră, forme de umplere albe create cu instrumentul Rectangle (M). Știu că vreau un cadru din lemn, un fundal, o zonă pentru imaginea antetului și întrebări. Există, de asemenea, posibilitatea ca designerul să dorească să aibă o pictogramă de tip pop-up și o lansare. Am decis să merg în direcția unui tabel de cretă publică în stil de casă, în loc de un stil de școală. Diferența este că versiunea publică a casei va fi un pic mai aspră și mai tradițională.
Voi începe mai întâi cele mai multe articole statice, care nu vor fi modificate în timpul jocului. Domenii cum ar fi textul și butoanele se vor modifica, dar cadrul, antetul și fundalul nu vor fi modificate. Așa că am de gând să încep cu scheletul din lemn. Desenați un dreptunghi lung (M) cu o umiditate medie brună și apoi mergeți la Object> Pattern> Make pentru a deschide caseta de dialog Opțiuni model. Nu am modificat Lățimea și Înălțimea modelului, pe măsură ce voi desena direct deasupra zonei deja definite.
Obiectivul nostru este de a obține un model de lemn cu aspect organic, cu grosimi variate în cereale. Unul dintre instrumentele mele preferate este Blob Brush Tool (Shift + B) cu o tabletă grafică. Începeți prin a trage un nod în lemn prin tragerea unui vârtej, apoi extindeți vârtejul peste zona modelului. Acest sfârșit de suprapunere va apărea apoi în partea de jos a zonei dvs. de model.
Utilizați acest scop pentru a vă curba în jurul nodului original. Am modificat apoi Tipul de Placi de Caramida dupa Coloana, astfel incat nodul este compensat unul fata de celalalt.
Cu o metodă similară de suprapunere a granulelor dincolo de limita modelului, trageți mai multe linii în aceeași culoare. Adăugați o linie care se suprapune în partea de margine a modelului, astfel încât să se leagă orizontal în celelalte plăci.
Odată ce sunteți fericiți, adăugați o culoare mai deschisă pentru detalii suplimentare. După ce ați terminat modelul, faceți clic pe Terminat și îl va salva automat în panoul dvs. Swatches.
Desenați un dreptunghi de 600 x 800 (M) de-a lungul tabloului de bord. Dacă ați activat ghidurile inteligente (Ctrl + U), veți găsi totul ușor de creat în elementele de bază, deoarece elementele se fixează eficient. Deoarece nu dorim să mergem dincolo de tabloul de bord, dați dreptunghiului o greutate de 45 de ori greutate care este setată să Aliniați Accident vascular cerebral la interior.
În timpul selectării, accesați Object> Expand pentru a transforma cursa într-o formă umplută.
Utilizând instrumentul pentru segmentul de linie (\), desenați linii diagonale în colțurile cadrului la unghiuri de 45 de grade. Selectați Toate (Ctrl + A) dintre componente și utilizați Pathfinder> Divide pentru a împărți forma în patru.
Aplicați modelul de lemn pe cadru. Când l-am aplicat, a fost prea mare pentru a obține toate detaliile. Pentru a remedia acest lucru, am redus scara modelului doar prin accesarea Obiect> Transformare> Scală și doar bifând modelul de transformare. Aceasta va scădea scara modelului, nu obiectul.
Am de gând să lucrez în panoul Aspect pentru a da o limită subtilă formei cadrului. Folosind culorile întunecate și luminoase din modelul din lemn, am adăugat două umpluturi sub umplutura de model de lemn. Primul este întunericul, cel de-al doilea este mai ușor, iar acesta este Offset Path by -2pt. Am setat apoi umplutura de model la o Cale Offset de -4pt.
Motivul pentru care am făcut acest lucru este dacă ați aplica un accident vascular cerebral forțelor așa cum este, colțurile de formă pot produce puncte în cursa care ies în afara zonei cadrului. Vreau ca toate acestea să fie conținute în tabloul de artă dacă vă amintiți, așa că, mai degrabă decât să păcătuim cu mitrele și să ajustăm unghiurile colțurilor, am optat să creez un accident vascular cerebral "fals" prin utilizarea căilor Offset. Este un sfat util dacă lucrați cu acele colțuri încăpățânate care nu se joacă corect sau dacă doriți să aplicați un gradient "fals" unui accident vascular cerebral fără a avea Adobe Illustrator CS6.
Pun pariu că credeai că voi părăsi secțiunile de sus și de jos ale cadrului cu aceeași orientare a modelului drept? Deoarece puteți schimba modelul fără a modifica forma, puteți roti și un model fără rotirea formei. Selectați formele pe care doriți să le modificați și mergeți la Object> Transform> Rotate. Am intrat într-un unghi de 90 de grade și apoi am bifat doar Modele de transformare.
Înapoi în panoul Aspect, selectați ramele laterale și elementul Duplicat pe umplerea modelului. Aceasta va menține valorile Path Offset. Apoi, se umple cu un gradient liniar transparent transparent. Faceți același lucru pentru partea superioară și cea inferioară a cadrului și modificați doar unghiul de înclinare la 90 de grade.
În panoul Stiluri grafice, în timp ce sunt selectate formele superioare și inferioare ale cadrului, adăugați Stilul grafic nou. Aplicați apoi forma care va fi folosită pentru antetul / banner-ul interfeței utile. Modificați umplutura de gradient apoi la un gradient radial.
Voi crea fundalul de cretă acum folosind panoul Aspect și o versiune vectorală de 100% a strălucirii interioare. Puteți afla cum să faceți acest lucru prin verificarea următorului tutorial video.
În panoul Perii, dați clic pe meniul derulant și mergeți la Deschidere bibliotecă> Artistic> Artistic_ChalkCharcoalPencil și utilizați peria de cretă pentru a trage curse albe peste placa setată pe ecranul Mod de amestecare, Opacitate 5%. După ce ați terminat, grupați-le împreună (Ctrl + G).
Duplicați fundalul plăcii de cretă și utilizați-l cu grupul de crestări pentru a crea o mască de tăiere (Ctrl + 7).
Voi folosi un font Freeware pentru întrebările și răspunsurile de pe forum. Utilizați instrumentul Tip (T) pentru a adăuga textul. Am folosit "Film Cryptic" la dimensiunea fontului de 48pt.
Am adaugat alte elemente, cum ar fi o cutie in jurul raspunsurilor, o bifare si o linie peste un raspuns, folosind Perie de arbu Pentru caseta de jos, am setat opacitatea la 30%.
Acum, pentru a adăuga o umbră subțire de picătură sub panoul antet / banner. Utilizați Instrumentul pentru segmentul de linie (\) pentru a desena o linie orizontală în partea de jos a plăcii și duplicați-o. Setați cursa din partea de jos a Greutății în Stroke 18pt și Opacitate 0%, iar partea de sus la 1pt, 100%. Ambele lovituri trebuie să folosească Profil: Lățimea profilului 1 și să aibă o culoare neagră.
Selectați ambele cursuri și creați o combinație (Ctrl + Alt + B). Apoi mergeți la Object> Blend> Blend Options și schimbați Spacing to Pași specificați și valoarea la 10. Faceți clic pe OK când ați terminat. Apoi schimbați Modul de amestecare al amestecului la Multiplicare și mutați-l pe loc.
Duplicați-o și plasați-o sub partea superioară a plăcii antet / banner.
Voi adăuga niște nituri mici pe laturile plăcii care se leagă de cadru. Acest lucru este din nou folosind panoul Aspect cu setările de mai jos într-un cerc uniform folosind instrumentul Ellipse (L).
Adăugați o indentare în nit, trasând o linie diagonală peste șurub și fixând-o în modul Multiplicare amestecare. Grupează împreună nituirea și linia (Ctrl + G) și apoi duplicați-o de trei ori și mutați-o. Pentru a vă asigura că totul este paralel și aliniat, utilizați panoul Aliniere.
Designerul nostru de jocuri a intrat în contact! Oh noes, avem dimensiunile greșite pentru jocul nostru și nu are același raport. Dimensiunile pe care ni le-am dat sunt de 480 x 800 pixeli. Aceasta nu este o afacere mare pentru că lucrăm în vector și este ușor de rezolvat. Primul lucru pe care trebuie să îl faceți este să modificați mărimea Artboardului la noua dimensiune și apoi să trageți un dreptunghi de ghidare cu instrumentul Rectangle (M) de 480 x 800.
Duplicați laturile cadrului și faceți o Cale compusă din acestea (Ctrl + 8). Apoi, utilizați această formă pentru Pathfinder> Împărțiți din cadrul superior și inferior și ștergeți formele excesive.
Mutați elementele laterale pe loc, permițându-vă să vă ajute Smart Guides (Ctrl + U).
Pentru panoul de antet, adăugați atributele panoului Aspect în panoul Stiluri grafice și apoi aplicați-le unei noi forme. Fundalul bordelui de cretă poate fi redimensionat utilizând instrumentul Free Transform Tool (E), dar nu uitați să schimbați și grupul Mască de tăiere cu curbele de cretă. Am redus dimensiunea fontului corespunzător pentru a compensa noua lățime. Această modificare a dimensiunii mi-a luat întreaga 5 minute, inclusiv verificarea dublă a previzualizării, pentru a vă asigura că am dimensiunile corecte.
Să continuăm cu antetul / bannerul. Voi juca pe stilul casei publice și voi adăuga o placă de alamă designului. Desenați un dreptunghi (M) cu colțurile sale care se întâlnesc cu centrele niturilor. Apoi trageți un cerc uniform (L) pe unul din centrele niturilor și duplicat / loc pentru celelalte nituri. Utilizați Pathfinder> Minus Front pentru a crea apoi forma plăcii de alamă.
Aplicați Stilul grafic pentru șuruburi pe plăcuță și apoi Adăugați o nouă umplere și utilizați un gradient liniar cu o varietate de griuri. Nu contează exact unde plasați glisoarele pentru acest gradient, atâta timp cât afișați contrast de evidențiere și de umbrire în gradient.
Apoi am modificat atributele pentru a adăuga un ton alamă / auriu.
Nu m-am bucurat de culorile cu nituri, așa că am mers înainte și am modificat culorile niturilor folosind aceleași culori ca și placa din alamă. Acum se potrivesc mai bine.
În final, voi adăuga textul antetului / bannerului. Designerul de jocuri dorește titlul "Joc Android" în titlul de banner, așa că voi adăuga un text gravat textului ... și acest lucru este atât de ușor de făcut. Mai întâi adăugați textul, am folosit "Engravers MT" și l-am setat pe Multiply Mode Mixing. Dați-i aceeași culoare din alamă pe care ați folosit-o în farfurie. Duplicați textul și utilizați tastele săgeți de pe tastatură, împingeți textul cu două locuri în jos și două locuri dreapta. Apoi schimbați modul de amestecare pe ecran.
Acum ți-ai creat UI-ul pentru bordul cretei pentru un joc de telefon inteligent! Acum se termină la Mobiletuts + pentru a doua parte a acestui tutorial cu privire la modul de creare a jocului real. Veți putea descărca grafica necesară pentru a crea singur jocul acolo. A se distra!
Accentsconagua