Cum se creează elemente de joc cu stiluri grafice

În tutorialul de astăzi vă voi arăta cum să pregătiți și să creați o varietate de stiluri grafice în Adobe Illustrator CS6 pentru a le utiliza apoi într-un joc. Beneficiile folosirii stilurilor grafice sunt că puteți continua să le aplicați la o multitudine de forme fără a fi nevoie să recreați fiecare aspect. Deci, hai să intrăm în acest tutorial distractiv!


Pasul 1

Voi folosi Adobe Illustrator CS5 pentru părțile inițiale ale acestui tutorial, aceasta este o preferință pur personală, deoarece mi se pare un pic mai stabil pe PC-ul meu. Cu toate acestea, folosind AI CS6 de la început până la sfârșit este complet. Începeți prin crearea unui document nou în modul color RGB.



Pasul 2

O să încerc ceva nou pentru mine și este un mod diferit de a pregăti o paletă de culori. Am primit acest sfat din tutorialele lui Beto Garza, despre care are mai multe aici pe Vectortuts +. Începeți prin desenarea a două forme distanțate și creați pași specifici de 3 amestec de la ei (Ctrl + Alt + B). Modificați culoarea de început și de sfârșit pentru a obține o schimbare graduală a culorii. Acestea sunt elementele de bază ale obținerii unei palete de culori.


Îmbinați-l și încercați să alegeți o culoare din panoul Swatches implicit, dar apoi să intrați în panoul Color Guide și să alegeți o culoare de acolo. Acest lucru vă poate oferi o altă varietate de culori de jucat.



Pasul 3

Înainte de a merge mai departe cu pregătirea paletelor mele, trebuie să știu ce seturi de culori voi avea nevoie pentru varietatea elementelor pe care le voi crea. Deci, începeți cu o schiță de bază a unei scene de joc. Aici am adăugat șase zone potențiale care urmează să fie create.


Astfel, cu cele șase zone, voi crea o combinație de culori pentru fiecare element. Tocmai am duplicat Blendul original și apoi am modificat culorile de început și sfârșit.



Pasul 4

Odată ce sunteți mulțumit de paletele dvs., Object> Extindeți-le astfel încât amestecul să fie eliminat și veți rămâne cu cinci culori pentru fiecare element. Selectați fiecare grup de culori în mod individual și faceți clic pe Grupul de culori noi din partea de jos a panoului Swatches. Aceasta va adăuga culorile din acel grup în propriul dosar palet. Apoi, puteți face dublu clic pe folderul paletei și îl puteți numi Sol / Rocks, Grass etc ... pentru a face mai ușor să vă referiți mai târziu.



Pasul 5

Element după element, vă voi arăta cum să creați fiecare stil grafic. Vom începe pe "Grass". Începeți prin desenarea unei linii curbe cu instrumentul Pen (P) sau Arc Tool. Dați-i o culoare neregulată și apoi aplicați o greutate de 4 ori a cursei. În panoul Stroke, adăugați profilul Profil: profil lățime 1.


În timp ce selectați, în panoul Perii selectați Adăugați o pensulă nouă> Pensulă scatter și utilizați opțiunile de mai jos. Schimbați metoda de colorare la Tints și faceți clic pe OK.



Pasul 6

Desenați o linie cu instrumentul de segmentare a liniei (\) de pe tabloul de bord și în panoul Aspect doriți să adăugați nouă curse cu cea mai ușoară verde din partea de sus și cel mai întunecat din partea de jos. Aplicați peria de iarbă la fiecare lovitură și apoi de sus în jos următoarele greutăți ale cursei: 0.5, 0.75, 0.75, 1.0, 1.25, 1.25, 1.5, 1.5, 1.75pt.

După ce ați terminat, în panoul Stiluri grafice, faceți clic pe Stil grafic nou pentru ao adăuga la panou. Faceți dublu clic pe pictograma pe care o creează și redenumiți-o la ceva mai memorabil.



Pasul 7

Acum avem primul nostru element, am de gând să-mi instalez panoul Straturi astfel încât să existe un strat pentru fiecare element.


Am adăugat apoi forme de bază pentru fiecare element folosind culorile paletelor personalizate. Pot vedea de aici dacă culorile funcționează bine împreună. Chiar acum, nu sunt prea sigur de roz, dar o voi schimba mai târziu când am o idee mai bună despre modul în care elementele lucrează împreună.



Pasul 8

Continuând, vom începe să creăm solul / pietrele noastre. Acest stil este în cazul în care Adobe Illustrator CS6 începe să câștige eticheta de preț, din cauza minunat Pattern Tool. Vom începe prin a desena mai multe forme cu Instrumentul rotunjit dreptunghi. Am adăugat o greutate de 4 ori și am folosit culori medii din acest grup de culori pentru umplere și accident vascular cerebral.

Odată creat, selectați toate formele și accesați Efecte> Transformare & Distort> Răsturnați și utilizați opțiunile de mai jos. Acest lucru va crea un stil mai neregulat pentru forme.


Apoi, mergeți la Object> Expand Appearance pentru a elimina efectul și pentru a vă oferi forme separate.



Pasul 9

Selectați-vă formele și mergeți la Object> Pattern> Make pentru a pune în funcțiune opțiunile de model.


Folosind Instrumentul de selecție (V), mutați formele în poziție, rotiți-le dacă este necesar și apoi modificați opțiunile de model pentru a da modelul pe care îl înțelegeți. Scopul este de a pune rocile intr-o formatie care sa permita cat mai putine lacune posibil, dar si formele sa nu se atinga reciproc. Nu suntem liniștiți terminați cu crearea acestui tipar ...



Pasul 10

Utilizând instrumentul Pen (P), adăugați umbre la pietre. Acum, ochii vulturului vor fi primii care vor spune "cum pot fi umbriri pe pietre, pentru ca sunt toate sub pamant", raspunsul meu este ... "licentiere artistica prietenul meu pooper!". Adăugați umbrirea va crea o textură mai mult ca rock. Deci, mai întâi adăugați una dintre culorile dvs. mai deschise la roci, amintindu-vă să desenați forme neregulate.


Apoi, folosind o culoare mai deschisă, adăugați în continuare alte evidențieri ale rocilor. Odată ce sunteți mulțumit de modelul dvs., faceți clic pe Terminat și va adăuga modelul nou în panoul dvs. Swatches, gata de utilizare.



Pasul 11

Când am aplicat modelul în zona de sol a jocului, modelul era prea mare. Deci, în timp ce forma este selectată mergeți la Object> Transform> Scale și reduceți scala modelului doar cu 50%.


Apoi, folosind culorile numai din paleta de amestecuri pe care am creat-o, am realizat un stil grafic cu un gradient liniar transparent care vine din partea de sus și apoi un solid mediu de culoare maro deschisă în spatele modelului. După ce am terminat, am salvat acest Stil grafic ca "Stânci de sol".



Pasul 12

Trecem pe munții / dealurile noastre în fundal. Începeți prin desenarea unui dreptunghi lung cu instrumentul Rectangle (M). Apoi utilizați efectul Efect> Transformare & Distort> Zig Zag cu puncte Smooth pentru a crea un val.


Apoi obiect> Extindeți-vă la forma singură.



Pasul 13

Acum, pentru a elimina aceste sfaturi. Desenați două dreptunghiuri (M) de-a lungul fiecărui capăt al formei și selectați-le pe ambele și faceți o Cale compusă (Ctrl + 8).


Apoi folosiți Pathfinder> Minus Front pentru a elimina acele capete urâte.



Pasul 14

Să folosim acum Instrumentul Pattern pentru a crea un model ondulat frumos. Mai întâi modificați opțiunile pentru a vă asigura că aveți curbe netede pe fiecare vârf fără colțuri inutile.


Duplicați valul și lipiți în față (Ctrl + F) și apoi modificați culorile culorii cu culorile din paleta de munte. Faceți clic pe Terminat când sunteți mulțumit de rezultat.



Pasul 15

Am desenat niște munți / dealuri în stilul desenelor animate în fundal cu Pen Tool (P). Desenați apoi individual, mai degrabă decât ca parte a unei forme mari.


Am urmat apoi crearea următorului stil grafic cu opțiunile din panoul de afișare de mai jos. Gradientul mai întunecat are o Cale Offset de -4pt în timp ce bricheta care vine din partea de sus a dealurilor este setată la -10pt.



Pasul 16

Să reciclăm stilul grafic al munților și să îl aplicăm cerului.


În timp ce este selectat, mergeți în Recolor Artwork și faceți clic pe Sky Color Group din lateral, apoi faceți clic pe OK.



Pasul 17

Am eliminat o parte din Efecte și lovituri la forma, deci este doar un model și două gradienți liniari.



Pasul 18

Am de gând să intru în elementul de model în sine și să îl modific, deoarece combinația de culori curentă este puțin prea îndrăzneață pentru cer.


Am folosit cele două cele mai ușoare bluze din paletă pentru a crea un model de două valuri.



Pasul 19

Pentru a face un fluier mai mare, voi aplica un Smooth Point Zig Zag Effect la formele cu setările de mai jos.


Apoi, utilizați Object> Expand pe forme.



Pasul 20

Dacă vă apropiați imediat, puteți vedea că avem o problemă din nou cu aceste margini spinoase!


Totuși, de această dată, intrați cu instrumentul Pen (P) și eliminați doar punctele inutile. Nu trebuie să le eliminați pe toate, doar pe cele care cauzează o distorsiune asupra modelului. Faceți clic pe Terminat când sunteți mulțumit de rezultat.



Pasul 21

Spre deosebire de roci / sol, acest model este prea mic pentru cer. Deci voi schimba amploarea modelului și o voi crește cu 200%.


Am modificat apoi gradientele pentru a crea un model mult mai subtil. Cu cerul, nu doriți ca modelul să iasă în evidență atât de mult încât să vă distragă atenția de la jocul / acțiunea reală. Odată ce sunteți mulțumit de rezultat, creați noul stil grafic și denumiți-l corespunzător.



Pasul 22

Vreau ca dealurile din fundal să pară mai detașate de prim plan, așa că voi adăuga un alt gradient stilului grafic pe care îl avem deja. Folosind gradientul folosit pentru partea de jos a stilului Sky Graphic, o să adaug acest lucru peste loviturile și umplerile stilului grafic Hill. Cu aceasta aplicată și salvată, aceasta separă cu siguranță fundalul și fundalul acum.



Pasul 23

Acum să facem stilul grafic pentru cutiile de mister. Desenați două dreptunghiuri (M) pe două dintre ele și aplicați două nuanțe diferite din paleta Mystery Box.


Folosind panoul Transformare, rotiți cu 45 de grade.



Pasul 24

Să creăm un model cu aceste forme cu ajutorul instrumentului Pattern. Am una dintre forme și am adăugat o culoare mai închisă în spatele celor două dreptunghiuri originale pentru a da un efect triplă. Acum că sunt mulțumit de model, faceți clic pe Terminat.



Pasul 25

Finalizând stilul nostru grafic Mystery Box, am adăugat lovituri de momeală într-un stil similar al munților, precum și un gradient de lumină care este Offset Path by -4pt.



Pasul 26

Soarele este creat folosind efecte Zig Zag cu diferite setări și culori. Începeți cu un cerc uniform creat cu instrumentul Ellipse (L). Mai jos sunt setările primului efect.


Cu o culoare mai închisă, se adaugă New Fill în spatele primului.


Apoi adăugați o nouă umplere deasupra ambelor umpluturi cu o culoare mai deschisă.



Pasul 27

Folosind același galben, adăugați un gradient radial transparent sub cea mai strălucitoare galbenă, cu o Cale de decalare de 40pt. Apoi salvați Stilul grafic și numele corespunzător.



Pasul 28

Acum avem stilurile noastre grafice complete, le voi spune. Am adăugat o platformă suplimentară pentru a testa solul nostru și a adăugat o lovitură de iarbă pe partea de sus. Cu toate acestea marginile solului par incomplete.


Am continuat și am modificat stilul grafic al solului prin adăugarea a două lovituri. Acest lucru îi va permite să urmeze un stil similar cu restul scenei noastre.



Pasul 29

După cum se suspectează, cutiile noastre de Mystery nu se potrivesc schemei globale de culori, așa că am selectat casetele și apoi am folosit Recolor Artwork și am folosit Soil Rocks Color Group.


Am modificat ordinea culorilor din grup făcând clic pe meniul derulant și selectând Lightness - light to dark. Acest lucru va crea conturul întunecat, apoi un contur mai ușor în jurul formei.



Pasul 30

Utilizați instrumentul de tip (T) pentru a adăuga un semn de întrebare la una din cutiile de mister și aplicați stilul grafic "Soil 2".



Pasul 31

Voi modifica culorile scenei globale pentru a da o privire diferita jocului nostru, poate pentru un alt nivel fata de acesta. Duplicați toate elementele și le dați propriul strat.



Pasul 32

Mă voi strădui și voi lucra cu Recolor Artwork pe fiecare dintre ele. Pentru cer, am intrat în fila Editare din caseta de dialog opțiuni. Faceți clic pe Culori armonie Link pentru a păstra același raport între culori.


Când mutați una dintre culori, aceasta va modifica toate cele trei. Am de gând să dau un apus de soare / răsărit de soare la scena prin adăugarea unui cer roz roz.



Pasul 33

Nu vreau ca culorile munților să fie prea diferite, așa că voi merge pentru o nuanță similară și voi schimba munții la originalul grupului de culori Mystery Box.


Am intrat apoi pentru a modifica Grassul prin accesarea filei Edit. Același lucru se întâmplă cu cutiile de mister și cu solul / pietrele. De asemenea, am modificat culorile Soarelui și mi-am schimbat poziția pentru a se încadra în schema de culoare apus / soare.



Pasul 34

Odată terminat, nu uitați să adăugați noile stiluri grafice la panou și să le redenumiți corespunzător. Acest lucru va face mult mai ușor de utilizat în viitor.



Concluzie

Sper că te-ai bucurat de tutorialul de astăzi despre cum să creezi niște elemente de joc creând o varietate de stiluri grafice. Aflați cum să profitați de stilul grafic vă pot economisi o mulțime de timp în afara fluxului dvs. de lucru și îl puteți mult mai ușor pentru designerii de jocuri pentru a crea elementele pe care le doresc prin simpla aplicare a unui stil la o formă de bază.