Share
În următorul tutorial veți învăța cum să creați o interfață de joc în bloc în Adobe Illustrator CS5. Grafica grafică a jocului permite o lucrare de artă versatilă. Fluxul de lucru prezentat în acest tutorial vă va învăța cum să creați grafică de joc în Illustrator. Aceste tehnici pot fi aplicate proiectelor de proiectare a interfețelor și proiectelor de joc. Este timpul să sarăți, să învățați să creați aceste forme și să le dați adâncime grafică colorată.
Apăsați Command + N pentru a crea un document nou. Introduceți 660 în caseta de lățime și 600 în caseta de înălțime, apoi faceți clic pe butonul Avansat. Selectați RGB, Ecran (72ppi) și asigurați-vă că caseta Align New Objects to Pixel Grid nu este bifată înainte de a da clic pe OK. Acum, activați Grid (Vizualizare> Grilă) și Glisați la Grilă (Vizualizare> Glisați la Grilă).
Apoi, veți avea nevoie de o rețea la fiecare 5px. Accesați Edit> Preferences> Guides> Grid, introduceți 5 în caseta Gridline în fiecare casetă și 1 în caseta Subdiviziuni. De asemenea, puteți deschide panoul Informații (fereastră> Info) pentru o previzualizare live cu dimensiunea și poziția formelor. Nu uitați să înlocuiți unitatea de măsură pixelilor din Editare> Preferințe> Unitate> Generalități. Toate aceste opțiuni vor crește semnificativ viteza de lucru.
Alegeți instrumentul Rectangle (M) și creați o formă de 350 x 490px. Snap to Grid vă va ușura munca. Umpleți-l cu R = 50, G = 50, B = 50. Acum, eliminați culoarea din cursă și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 5px, faceți clic pe OK și mergeți la Object> Expand Appearance.
Dezactivați grila (Vizualizare> Afișare grilă) și Glisați în grila (Vizualizați> Snap la rețea). Accesați Edit> Preferences> General și asigurați-vă că Incrementul tastaturii este setat la 1px. Resetați forma creată în etapa anterioară și accesați Obiect> Cale> Cale de decalare. Introduceți un decalaj de -3px și faceți clic pe OK.
Selectați forma rezultată și faceți o copie în față (Command + C> Command + F). Selectați această copie și apăsați o dată pe săgeată în jos. Resetați cele două forme create în acest pas și faceți clic pe butonul Minus Front din panoul Pathfinder (Fereastră> Pathfinder). Umpleți forma rezultată cu R = 109, G = 110, B = 113.
Din nou, selectați forma creată în al doilea pas și accesați Obiect> Cale> Cale de decalare. Introduceți un decalaj de -3px și faceți clic pe OK. Selectați forma rezultată și faceți o copie în față (Command + C> Command + F).
Selectați această copie și apăsați o dată pe săgeata sus. Resetați cele două forme create în acest pas și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 109, G = 110, B = 113.
Selectați din nou forma creată în al doilea pas, treceți la panoul Straturi, faceți dublu clic pe ea și denumiți-o "Principal". Asigurați-vă că această formă este încă selectată, treceți la panoul Aspect (Fereastră> Aspect) și faceți clic pe butonul Adăugați umplere nouă. Este pătratul mic din partea de jos a panoului Aspect.
Evident, acest lucru va adăuga o nouă umplere pentru forma. Selectați-l din panoul Aspect și utilizați gradientul liniar prezentat mai jos. Zero galben din imaginea gradientului reprezintă procentajul de opacitate.
Resetați "Principal", adăugați un al treilea umplere și selectați-l din panoul Aspect. Faceți-l negru, trageți-l în partea inferioară a panoului Aspect, micșorați opacitatea la 15% și mergeți la Efect> Cale> Cale de decalare. Introduceți un offset de 1px, faceți clic pe OK și accesați Efect> Distort & Transformare> Transformare. Introduceți datele afișate mai jos și faceți clic pe OK.
Resetați "Principal" și focalizați pe panoul Aspect. Setați culoarea cursei la R = 167, G = 169, B = 172. Asigurați-l 4pt larg și aliniați-l spre interior.
Resetați "Principal" și focalizați pe panoul Aspect. Selectați cursa adăugată în pasul anterior și faceți clic pe elementul selectat duplicat. Este pictograma mică de fișier din partea de jos a panoului Aspect. Evident, acest lucru va adăuga o copie a accidentului vascular cerebral. Selectați această curbă nouă, setați culoarea la R = 35 G = 31 B = 32 și micșorați dimensiunea la 3pt.
Resetați "Principal", focalizați pe panoul Aspect și adăugați două posturi noi. Selectați prima, setați culoarea la R = 128 G = 130 B = 133 și dimensiunea la 1,5pt. Selectați celălalt grafic nou, faceți-l negru, aliniați-l spre exterior și setați dimensiunea la 1pt.
Resetați "Principal" și focalizați pe panoul Aspect. Asigurați-vă că nu este selectată nici o umplere sau cursă și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos și faceți clic pe OK.
Activați din nou Grilă (Vizualizare> Afișare Grilă) și Glisați la Grilă (Vizualizare> Glisați la Grilă). Alegeți instrumentul Rectangle (M), creați o formă de 20 x 20px și umpleți-o cu R = 88, G = 89, B = 91. Selectați acest pătrat și accesați Obiect> Cale> Cale de decalare. Introduceți un decalaj -1px și faceți clic pe OK.
Selectați forma rezultată și reveniți din nou la Object> Path> Path Offset. Introduceți un decalaj de -3px și faceți clic pe OK. Selectați forma rezultată împreună cu forma creată anterior și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 65, G = 64, B = 66.
Alegeți instrumentul Pen (P) și trageți o cale orizontală simplă, așa cum se arată în prima imagine. Snap to Grid ar trebui să vă ușureze munca. Selectați această cale nouă, împreună cu forma întunecată creată în pasul anterior și faceți clic pe butonul Divide din panoul Pathfinder.
Acest lucru va crea un grup cu patru forme simple. Aruncați o privire în panoul Straturi și concentrați-vă asupra acestui grup. Mai întâi, selectați cele două triunghiuri și le ștergeți. Apoi, deselectați celelalte două forme (Shift + Command + G). În cele din urmă, completați forma de sus, stânga cu R = 109, G = 110, B = 113. Asigurați-vă că cealaltă formă este încă umplută cu R = 65, G = 64, B = 66.
Resetați pătratul gri creat în pasul al unsprezecelea, faceți o copie în față (Command + C> Command + F) și aduceți-l în față (tasta Shift + Command + Bracket dreapta). Umpleți această nouă formă cu negru, coborâți Opacitatea la 7%, schimbați modul de amestecare pentru Multiplicare și treceți la Efect> Artistic> Film Grain. Introduceți datele afișate mai jos și faceți clic pe OK.
Resetați forma creată în etapa anterioară și faceți o copie în față (Command + C> Command + F). Alegeți instrumentul Ellipse (L), creați o formă de 40 x 20px și plasați-o după cum se arată în a doua imagine. Selectați acest cerc stins, împreună cu copia proaspătă și faceți clic pe butonul Intersect din panoul Pathfinder. Umpleți forma rezultată cu alb și reduceți opacitatea la 25%.
Resetați pătratul gri creat în pasul al unsprezecelea și focalizați pe panoul Aspect. Adăugați o lovitură neagră de 2 pini și aliniați-o în interior. Selectați toate formele create în ultimii patru pași și grupați-le (Command + G).
Selectați grupul creat în pasul anterior și plasați-l după cum se arată în imaginea următoare. Din nou, Snap to Grid vă va ușura munca.
Resetați grupul mutat în etapa anterioară, micșorați Opacitatea la 15% și mergeți la Efect> Distort & Transformare> Transformare. Introduceți datele afișate în fereastra din stânga, faceți clic pe OK, apoi reveniți la Efect> Distort & Transformare> Transformare. Introduceți datele afișate în fereastra din dreapta și faceți clic pe OK.
Alegeți instrumentul Rectangle (M), creați o formă de 20 x 20px și umpleți-o cu R = 0, G = 165, B = 224. Selectați acest pătrat albastru și accesați Obiect> Cale> Cale de decalare. Introduceți un decalaj -4px și faceți clic pe OK. Selectați forma rezultată, faceți o copie în față (Command + C> Command + F) și dezactivați Snap to Grid (Vizualizare> Snap to Grid).
Selectați această copie și apăsați o dată pe săgeata sus și pe săgeata din dreapta. Resetați această copie, împreună cu forma originală, și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu alb, micșorați opacitatea de top 25% și apucați instrumentul Delete Anchor Point (-).
Asigurați-vă că această formă subțire, albă este încă selectată și faceți clic pe cele două puncte de ancorare (prezentate cu săgeți din a patra imagine prezentată). În final, forma ta ar trebui să arate ca cea de-a cincea imagine.
Reluați pătratul albastru și accesați Obiect> Cale> Cale de decalare. Introduceți un decalaj -1px și faceți clic pe OK. Selectați forma rezultată și reveniți din nou la Object> Path> Path Offset. Introduceți un decalaj de -3px și faceți clic pe OK. Selectați cele două forme create până acum și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 28, G = 117, B = 188.
Activați din nou funcția Snap to Grid (Vizualizare> Snap to Grid). Alegeți instrumentul Pen (P) și trageți o cale orizontală după cum se arată în prima imagine. Selectați-l, împreună cu forma creată în pasul anterior și faceți clic pe butonul Divide din panoul Pathfinder.
Aruncați o privire în panoul Straturi și concentrați asupra grupului rezultat. Mai întâi, ștergeți formele triunghiulare, apoi deselectați celelalte două forme (Shift + Command + G). În cele din urmă, completați forma de sus, stânga cu R = 0, G = 224, B = 255.
Resetați pătratul albastru, adăugați o curbă neagră de 2 pini și aliniați-o în interior. Selectați toate formele create în ultimii trei pași și grupați-i (Command + G). Treceți la panoul Straturi, faceți dublu clic pe acest grup proaspăt și numiți-l "BlueBlock".
Selectați "BlueBlock", faceți șase copii și aliniați-le într-o coloană simplă (după cum arată în imaginea următoare). Focalizați pe aceste copii de grup și înlocuiți culorile existente cu cele prezentate mai jos. După ce ați terminat, treceți la panoul Straturi și redenumiți aceste grupuri noi, în funcție de culoarea blocului general.
Acum că aveți toate blocurile de care aveți nevoie, să creați piesele reale. Începeți cu blocurile albastre și continuați cu restul. Grupați întotdeauna blocurile care formează o piesă bloc. Vă va ușura munca în pașii ulteriori.
Adăugați unele dintre aceste blocuri, după cum se arată mai jos.
Alegeți instrumentul Rectangle (M), creați o formă de 100 × 20px și plasați-o după cum se arată în imaginea următoare. Acum completați-l cu R = 65, G = 64, B = 66. Îndepărtați culoarea din cursa și accesați Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 10 pixeli, faceți clic pe OK și mergeți la Object> Expand Appearance.
Dezactivați funcția Snap to Grid (Vizualizare> Snap to Grid). Selectați forma creată în etapa anterioară, trimiteți-o înapoi (tasta Shift + Command + Stânga) și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de început și apăsați o dată pe săgeata în sus și pe săgeata din stânga. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu negru.
Resetați forma gri creată la pasul 25 și faceți două copii noi în față. Din nou, selectați copia de sus și de această dată atingeți săgeata în sus și săgeata din stânga de două ori. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 147, G = 149, B = 152.
Resetați dreptunghiul rotunjit creat la pasul 25 și focalizați pe panoul Aspect. Adăugați o umplere nouă și utilizați gradientul liniar prezentat în prima imagine. Adăugați un al treilea umplere pentru această formă, transformați-o în negru, micșorați Opacitatea la 10%, schimbați modul de amestecare la Multiplicare și treceți la Efect> Artistic> Film Grain. Introduceți datele afișate mai jos și faceți clic pe OK.
Continuați în panoul Aspect și adăugați primul curs. Asigurați-l 2pt lățime, setați culoarea la R = 209 G = 211 B = 212 și aliniați-l spre interior. Adăugați un al doilea curs pentru această cale, lățimea de 1pt și setați culoarea la R = 147, G = 14, B = 152. Asigurați-vă că este aliniat la interior.
Resetați dreptunghiul rotunjit modificat în etapa anterioară și faceți o copie în față. Selectați această copie și apăsați tasta D de pe tastatură. Aceasta va adăuga proprietățile implicite pentru forma dvs. (umplere albă și 1pt, cursa neagră). Îndepărtați culoarea din cursa.
Acum, selectați această formă albă, împreună cu dreptunghiul original rotunjit, și mergeți la panoul Transparență. Deschideți meniul derulant și faceți clic pe Make Opacity Mask.
Activați din nou funcția Snap to Grid. Selectați toate formele create în ultimii cinci pași și grupați-i. Faceți două copii ale acestui grup și plasați-le după cum se arată în imaginea următoare.
Concentrați-vă pe grupul de vârf creat în etapa anterioară și alegeți instrumentul Rectangle (M). Creați o formă de 90 x 80px și plasați-o după cum se arată în imaginea următoare. Umpleți-l cu R = 65 G = 64 B = 66, îndepărtați culoarea din cursa și aplicați Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 10 pixeli, faceți clic pe OK și mergeți la Object> Expand Appearance.
Dezactivați modul Snap to Grid. Selectați forma creată în etapa anterioară și accesați Obiect> Cale> Cale de decolare. Introduceți un decalaj de -2px și faceți clic pe OK. Selectați forma rezultată și faceți o copie în față. Selectați această copie și apăsați o dată pe săgeata sus. Resetați cele două forme create în acest pas și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 209, G = 211, B = 212.
Resetați dreptunghiul rotunjit creat la pasul 31 și focalizați pe panoul Aspect. Adăugați o umplutură nouă și utilizați gradientul liniar prezentat mai jos. Adăugați un al treilea umplere pentru această formă, transformați-o în negru, micșorați Opacitatea la 10%, schimbați modul de amestecare la Multiplicare și treceți la Efect> Artistic> Film Grain. Introduceți datele afișate mai jos și faceți clic pe OK.
Continuați în panoul Aspect și adăugați primul curs. Asigurați-l 2pt lățime, setați culoarea la R = 147 G = 149 B = 152, și aliniați-l spre interior. Adăugați o a doua lovitură pentru această cale, faceți-o 1pt lățime, setați culoarea la R = 0 G = 0 B = 0 și asigurați-vă că este aliniată la interior.
Resetați dreptunghiul rotunjit modificat în etapa anterioară și faceți o copie în față. Selectați această copie și apăsați tasta D de pe tastatură. Din nou, eliminați culoarea din cursa și utilizați forma albă rămasă pentru a masca dreptunghiul original rotunjit.
Selectați toate formele create în ultimii patru pași și grupați-i. Trimiteți acest grup nou înapoi.
Activați din nou funcția Snap to Grid. Luați grupul de blocuri purpuriu, faceți o copie și plasați-o după cum se arată în imaginea următoare. Selectați-l și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos și faceți clic pe OK.
Alegeți instrumentul Rectangle (M), creați o formă de 90 x 50px și plasați-o după cum se arată în imaginea următoare. Umpleți-l cu R = 65 G = 64 B = 66, îndepărtați culoarea din cursa și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 10 pixeli, faceți clic pe OK și mergeți la Object> Expand Appearance.
Dezactivați modul Snap to Grid. Selectați forma creată în etapa anterioară și accesați Obiect> Cale> Cale de decolare. Introduceți un decalaj de -2px și faceți clic pe OK. Selectați forma rezultată și faceți o copie în față. Selectați această copie și apăsați o dată pe săgeata sus. Resetați cele două forme create în acest pas și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 209, G = 211, B = 212.
Resetați dreptunghiul rotunjit creat la pasul 31 și focalizați pe panoul Aspect. Adăugați o umplutură nouă și utilizați gradientul liniar prezentat mai jos. Adăugați un al treilea umplere pentru această formă, transformați-l în negru, micșorați Opacitatea la 10%, modificați modul de amestecare la Multiplicare și aplicați Efect> Artistic> Film Grain. Introduceți datele afișate mai jos și faceți clic pe OK.
Continuați în panoul Aspect și adăugați primul curs. Asigurați-l 2pt lățime, setați culoarea la R = 147 G = 149 B = 152, și aliniați-l spre interior. Adăugați o a doua lovitură pentru această cale, faceți-o 1pt lățime, setați culoarea la R = 0 G = 0 B = 0 și asigurați-vă că este aliniată la interior.
Resetați dreptunghiul rotunjit modificat în etapa anterioară și faceți o copie în față. Selectați această copie și apăsați tasta D de pe tastatură. Din nou, eliminați culoarea din cursa și utilizați forma albă rămasă pentru a masca dreptunghiul original rotunjit.
Selectați toate formele create în ultimii patru pași și grupați-i. Trimiteți acum acest grup nou înapoi.
Activați din nou funcția Snap to Grid și duplicați grupul creat în pasul anterior. Selectați acest grup de copiere și mutați-l în jos, după cum se arată în a doua imagine. Încă o dată, fixarea în grila va ușura munca.
Dezactivați modul Snap to Grid. Alegeți Instrumentul Tip (T) și adăugați niște text și numere albe. Utilizați fontul Courier New și faceți-l bold. Pentru text setați mărimea la 13 și pentru numărul ridicați-l la 20pt. Selectați textul și numerele și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos și faceți clic pe OK. În cele din urmă, grupați-i pe toți.
Selectați toate formele create în ultimii paisprezece pași și grupați-i. Trimiteți acest grup nou înapoi și accesați Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos și faceți clic pe OK.
În cele din urmă, să adăugăm un fundal simplu. Alegeți instrumentul dreptunghiului (M), creați o formă a dimensiunii tabloului de artă și trimiteți-l înapoi. Completați-l cu alb, apoi adăugați o a doua umplere și utilizați gradientul radial prezentat mai jos.
Selectați din nou forma creată în pasul anterior și adăugați un al treilea umplutură. Selectați-l din panoul Aspect, micșorați opacitatea la 10% și schimbați modul de amestecare la Multiplicare.
Apoi, veți avea nevoie de un model încorporat pentru acest umplere nou. Accesați panoul Swathes (fereastră> Swatches), deschideți meniul derulant și mergeți la Open Swatch Library> Patterns> Graphics Basic> Basic Graphics_Textures.
O fereastră nouă cu o grămadă de modele frumoase ar trebui să se deschidă. Căutați modelul "USGS 19 Land Inundation". Resetați cel de-al treilea umplut, adăugați modelul și mergeți la Efect> Artistic> Film Grain. Introduceți datele afișate mai jos, faceți clic pe OK și ați terminat.
Acum munca ta este finalizată. Iată cum ar trebui să arate.
Accentsconagua