Cum se creează activele de jocuri de noroc izometrice în Adobe Illustrator

Ce veți crea

Arta izometrica este un stil foarte trendy care a devenit foarte raspandit si este folosit de designeri pentru reclame, design web, jocuri si in multe alte domenii. 

Poate părea o provocare pentru a crea un obiect izometric, deoarece trebuie să construiți o rețea și să urmați geometria obiectelor, așezând liniile în mod corespunzător. Dar destul de mult! În acest tutorial vom vedea cum să realizăm un obiect izometric cu câteva clicuri, cu ajutorul funcțiilor Adobe Illustrator încorporate, concepute special pentru crearea unei imagini izometrice. Să începem!

1. Creați o monedă izometrică

Pasul 1

Să începem prin a face un cerc galben strălucitor 100 x 100 px mărimea. Cu un singur clic cu Instrument de elipsă (L) oriunde pe tabloul de bord și setați dimensiunea în fereastra de opțiuni. Adăugați un cerc mai mic (75 x 75 px) deasupra primului, umplând-o cu portocaliu mai închis.

Pasul 2

Acum, că avem baza monedei noastre, să o transformăm într-o monedă izometrică! Selectați ambele cercuri și mergeți la Efect> 3D> Extrude & Bevel și veți vedea fereastra de opțiuni pop-up. Deschideți meniul derulant Poziţie meniul din partea de sus a ferestrei de opțiuni și selectați Stânga izometrică.

Pasul 3

Seteaza Extrude Adâncime la 10 pt. După cum puteți vedea, moneda noastră a devenit tridimensională și arată grozav, deși nu avem nevoie de toate acele umbre "reale" și subliniază cum vrem să facem o colorare în stil plat. Deci haideți să setăm Suprafaţă la Fără umbrire.

Pasul 4

După ce ați aplicat 3D efect, duplicați moneda și păstrați copia undeva în apropiere, deoarece este posibil să aveți nevoie ulterior. În acest fel vă puteți întoarce întotdeauna Extrude 3D și opțiuni teșitură pentru a modifica setările dacă decideți să modificați setările Poziție, Extrude Adâncime, utilizare Harta Art sau alți parametri. Puteți face acest lucru cu câteva clicuri atingând efectul aplicat în Aspect panou și clicla Editați | × Efect.

Obiect> Extindeți aspectul din prima monedă (cea pe care vom lucra), transformându-o astfel într-un set de elemente separate.

Pasul 5

Selectați marginea monedei și faceți-o Completati culoare puțin mai ușoară. Dacă marginea este împărțită în mai multe părți după tine Extinde acesta, apoi selectați toate piesele și Uni pe ei inauntru deschizător de drumuri.

Pasul 6

Dacă deschideți straturi panou și uita-te prin obiecte, s-ar putea să observați că există o mulțime de "junk" bucăți rămase. Acestea sunt ascunse în spatele părții frontale a monedei noastre și de fapt nu avem nevoie de ele. Selectați aceste bucăți și le ștergeți, lăsând doar partea frontală a monedei, marginea și marginea galben deschis.

Pasul 7

Să adăugăm un simbol de dolar monedei noastre. Am folosit fontul Uni Sans Free pentru a face un simbol îndrăzneț și apoi a aplicat același lucru Extrude & Bevel setări pentru moneda noastră. Pentru a face acest lucru, du-te la Efect> Aplicați Extrude & Bevel. În acest fel aplicați efectul utilizat anterior doar cu un singur clic. Obiect> Extindeți aspectul a simbolului și completați partea din față cu galben mai deschis.

Pasul 8

Acum putem combina moneda și simbolul dolarului plasând-o una deasupra celeilalte. Grupați obiectele și duplicați grupul de mai multe ori pentru a face un teanc de monede.

2. Creați cărți izometrice de redare

Pasul 1

Mai întâi de toate, să formăm baza cardului nostru de la 80 x 110 px gri-dreptunghi gri, cu ajutorul Instrumentul dreptunghiular (M). Folosește Live Corners caracteristică a Adobe Illustrator CC pentru a face colțurile cărții rotunjite 10 px Radius colț. În acest scop, selectați cardul cu Instrumentul de selecție directă (A) (trebuie să fie selectate toate punctele de ancorare ale colțurilor) și trageți indicatorul de cerc mic lângă orice colț mai aproape de centrul cardului, făcând colțul neted.

Dacă utilizați o versiune anterioară de Adobe Illustrator, puteți obține același efect aplicând Efecte> Stylize> Colțuri rotunde, setarea dorită Raza de colț a dreptunghiului din meniul de opțiuni pop-up.

Pasul 2

Acum să formăm un simbol al costumului inimii pentru carte. Începe să faci o inimă dintr-un cerc roșu 30 x 30 px mărimea. Selectați punctul de ancorare inferior al cercului nostru și convertiți-l într-un colț ascuțit făcând clic pe butonul corespunzător (Conversia punctelor de ancorare selectate în colț) în panoul de control superior sau făcând un singur clic pe punctul de ancorare însuși Ancora Punct Tool (Shift-C).

Acum, squash forma un pic prin mutarea punctul de ancorare superioară în jos cu tasta săgeată jos, și utilizați Ancora Punct Tool (Shift-C) din nou pentru a trage mânerele punctului de ancorare, așa cum se arată în imaginea de mai jos. Țineți apăsată tasta Schimb și trageți pentru a muta mânerele 45 grade unghi.

Pasul 3

Dacă nu puteți face ambele părți ale formei inimii egale prin mișcarea mânerelor, utilizați următorul truc simplu: luați Instrumentul de ștergere (Shift-E), tine Alt cheie și trageți, făcând un dreptunghi alb care acoperă jumătatea dreaptă a formei inimii. Eliberați butonul mouse-ului, ștergând piesa. Selectați piesa rămasă și utilizați Reflect Tool (R) pentru a răsuci forma peste Axa verticala. În cele din urmă, faceți clic pe Copie pentru a face o copie simetrică reflectată și așezați-o în poziția corectă, formând o inimă uniformă. Folosește Uni funcția de deschizător de drumuri pentru a îmbina jumătățile într-o singură formă.

Pasul 4

Trageți puțin un punct de ancorare inferior, extrudând forma inimii.

Pasul 5

Să trecem la simbolul costumelor de pe picioare. Faceți o copie a inimii și rotiți-o 180 de grade cu Instrument de selecție (V), punându-l cu capul în jos și schimbând Completati culoare până la negru. Luați Instrumentul pentru poligoane, faceți un singur clic pe Artboard pentru a apela fereastra de opțiuni pop-up și a seta feţe valoare pentru 3. Creați un triunghi mic și Alinia pe orizontală cu forma neagră pe care am creat-o.

Pasul 6

Luați Instrumentul de curbură (Shift- ') și îndoiți partea stângă a triunghiului trăgând partea din mijloc a acestuia, făcând un arc neted. Repetați același lucru cu a doua parte, formând semnul picelor.

Pasul 7

Semnul costumului de diamant este unul simplu: formează un pătrat parțial cu Instrumentul dreptunghiular (M) și rotiți-l 45 de grade, fie folosind Rotiți instrumentul (O) sau ținând apăsată tasta Schimb și glisați forma cu Instrument de selecție (V).

Păstrați forma selectată, mergeți la Efect> Distort & Transform> Pucker & Bloat și mutați glisorul spre stânga, fixându-l -20% Pucker valoare. Obiect> Extindeți forma, formând simbolul costumului de diamant.

Pasul 8

Ultimul nostru simbol este costumul cluburilor. Se compune din trei cercuri 15 x 15 px mărime, așezată ca o piramidă - două cercuri în partea de jos și una deasupra. Luați elementul triunghi din simbolul picelor pentru a forma partea de jos și a completa simbolul cluburilor.

Pasul 9

Faceți litera A pentru ace, folosind același font Uni Sans Free (sau oricare altul după preferințele dvs.) și Obiect> Extindeți Forma.

Pasul 10

Plasați simbolul inimii sub litera A și ajustați dimensiunea acestuia pentru a se potrivi cu scala cardului. Grup (Control-G) formele. Folosește Reflect Tool (R) pentru a răsuci forma peste Orizontală axă. Acum trebuie să repoziționăm simbolurile, punându-le în locul potrivit. În primul rând, mergeți la Alinia panou, folosind baza de card ca Obiect cheie (tine Alt și faceți clic pe baza cartelei) pentru a lipi formele în colțurile bazei cartelei.

Pasul 11

Selectați grupul superior de simboluri roșii și apăsați pe introduce cheia pentru a apela pop-up-ul Mișcare fereastră de opțiuni și setați Orizontală și Pozitie verticala valori pentru 10 px fiecare. Repetați aceeași acțiune cu grupul inferior de simboluri roșii, dar de această dată setați Poziţie valori pentru -10 px fiecare.

Pasul 12

Formați vederea finală a asului inimilor și faceți setul complet de ași, folosind aceeași tehnică.

Pasul 13

Acum să ne transformăm cardurile plate în obiecte izometrice! Selectați un card cu toate elementele sale și mergeți la Efect> 3D> Extrude & Bevel. Seteaza Poziţie la Stânga izometrică, Extrude Adâncime la 3 pct (deoarece cardul este mai subțire decât elementele anterioare pe care le-am făcut) și Suprafaţă la Fără umbrire.

Nu uitați să păstrați copia cardului cu 3D efect aplicat în cazul în care doriți să modificați mai târziu unele dintre setări. Obiect> Extindeți aspectul a cardului și Uni piesele sale de margine deschizător de drumuri. Apoi, completați marginea cu o culoare mai închisă pentru a face cardul mai tridimensional.

Pasul 14

Folosește Instrumentul de selecție directă (A) pentru a selecta formele negre de pe suprafața frontală. Dupa tine Grup (Control-G) și ascundeți-le (împreună baza de carduri) făcând clic pe pictograma ochi din straturi panou, puteți observa că există o mulțime de piese nefolositoare rămase, care sunt invizibile sub carte. Puteți șterge aceste piese pentru a vă face munca mai curată și mai organizată.

Pasul 15

Utilizați aceeași tehnică pentru a forma un teanc de ași.

3. Refaceți un set de plăci de domino izometrice

Pasul 1

Mai întâi de toate, să formăm o bază a plăcilor domino de la un dreptunghi înalt 60 x 110 px mărimea. Faceți un cerc negru mic 11 x 11 px și plasați-o în colțul din dreapta sus al plăcii domino. Selectați cercul, apăsați pe introduce cheie și utilizați Mișcare funcția, setarea Orizontală poziția la -5 px și Vertical poziția la 5 px, astfel încât cercul nostru să nu rămână pe marginea plăcii. 

Țineți amândouă Schimb și Alt, și trageți cercul în jos și în stânga de-a lungul liniei diagonale imaginare, formând o copie. presa Control-D pentru a repeta ultima acțiune, formând o altă copie. În acest fel avem trei puncte negre în partea superioară a plăcii de domino.

Pasul 2

Acum, să formăm divizorul între două jumătăți ale plăcilor de domino. Copiați partea de bază a plăcii și puneți-o pe partea de sus a bazei (Control-C> Control-F). Faceți-o la jumătate din înălțimea formei inițiale, setând dimensiunea la 60 x 55 px, și apoi squash forma prin glisarea partea sa inferioară în sus și de a face o linie subțire, împărțind placa de domino în două jumătăți.

Folosește Reflect Tool (R) pentru a răsturna copia punctelor deasupra Orizontală axă, plasând copia în oglindă în partea de jos a plăcii. Plasați o altă copie oglindă în același loc, formând un grup de cinci puncte.

Pasul 3

Formați mai multe combinații de puncte pentru țiglele noastre domino viitoare și puneți-le pe aceeași bază dreptunghiulară. În acest fel avem trei baze pregătite. Acum putem merge la Efect si doar Aplicați Extrude & Bevel din partea de sus a meniului drop-down, aplicând același 3D stabilind așa cum am avut pentru cărțile de joc. 

4. Faceți o ruletă izometrică

Pasul 1

Începem prin a forma baza ruletei noastre de la un maro 200 x 200 px cerc. Apoi adăugați un cerc galben mai mic pe partea de sus a primului și, în final, un cerc verde mai mic pe partea superioară a celor doi anteriori. Luați Instrumentul pentru segmentul de linie (\) și puneți o linie dreaptă verticală în cercuri, aliniați-o la mijloc. Adăugați o linie orizontală, formând o cruce deasupra cercurilor.

Pasul 2

Selectați liniile pe care le-am creat, faceți dublu clic pe Rotiți instrumentul (R) pentru a afișa meniul de opțiuni și a seta Unghi valoare pentru 18 grade. apasă pe Copie și apoi Control-D de mai multe ori pentru a face mai multe copii ale liniilor.

Duplicați cercul galben de două ori, selectați unul dintre exemplare împreună cu liniile și utilizați Divide funcția deschizător de drumuri panou pentru a tăia cercul galben în bucăți, ca o plăcintă.

Pasul 3

Umpleți sectoarele cercului divizat cu roșu și negru și umpleți una din piese cu verde. Rearanjați formele, astfel încât să avem cercul verde deasupra (Shift-Control-]) din nou. Schimbați umplerea și cursa din cercul verde, transformându-l într-o linie și creând un alt cerc verde mai mic înăuntru.

Pasul 4

Selectați cercul și sectoarele prezentate și utilizați Divide funcția de deschizător de drumuri din nou. Acum aveți mai mici segmente mai aproape de centrul ruletei. Selectați-le și adăugați un alb subțire Accident vascular cerebral lor. În cele din urmă, adăugați un alb Accident vascular cerebral la cercul central verde, care este și pe partea de sus.

Pasul 5

Mai avem cercul galben pe fund, nu? Să selectăm segmentele create împreună cu partea centrală și să facem acest grup de forme puțin mai mici, dezvăluind janta galbenă la marginea segmentelor. Schimbați și culoarea părții centrale în galben și faceți-o Accident vascular cerebral mai gros, făcând designul ruletei mai armonios.

Pasul 6

Să transformăm partea centrală a ruletei în a Simbol nou prin glisarea și plasarea acesteia pe simboluri panou.

Deplasați-vă și selectați baza maro a ruletei și faceți-o tridimensională cu Efect> 3D> Extrude & Bevel. Seteaza Poziţie la Stânga izometrică, Extrude Adâncime la 10 pt si Suprafaţă la Fără umbrire.

În timp ce fereastra de opțiuni este încă deschisă, faceți clic pe Harta Art butonul din partea de jos.

Pasul 7

Aici, în fereastra pop-up Harta Art fereastră, selectați partea din față a ruletei noastre din Suprafaţă (va fi marcat cu un contur roșu) și aplicați textura noastră selectând simbolul pe care l-am creat în Simbol meniul derulant. Clic O.K să aplicați efectul și să păstrați o copie a ruletei neexpandate în cazul în care doriți să schimbați ceva mai târziu.

Pasul 8

Obiect> Extindeți aspectul ruletei și aliniați-l puțin, selectând marginea (Uni e in deschizător de drumuri dacă este necesar) și umplerea cu culoare maro închis pentru a adăuga dimensiune.

Pasul 9

Acum trebuie să formăm mânerul ruletei noastre. Începeți prin plasarea unui cerc de culoare gri deschis 84 x 84 px și adăugați două linii de trecere sub ea, de culoare gri mai închisă. Adăugați cercuri mai mici la vârful fiecărui mâner și faceți mai detaliat centrul construcției, plasând acolo un cerc suplimentar.

Aplicați 3D Extrude și Bevel efect cu aceleași setări ca și noi, și Obiect> Extindeți aspectul a mânerului.

Pasul 10

Creați un alt set de cercuri pentru baza mânerului, făcând cercul mai mare 84 x 84 px in marime. Aplicați 3D Extrude & Bevel efect cu setările anterioare și treceți la următorul detaliu. Formați-o mai mică 30 x 30 px cerc și aplicați 3D Extrude & Bevel efect cu 50 pt Extrude Adâncime.

Pasul 11

Să facem câteva lovituri finale aici. Obiect> Extindeți aspectul a părților mânerului și a face ca marginile să fie mai întunecate, creând o umbra blândă și făcându-l mai tridimensional. Combinați împreună părțile mânerului și redimensionați construcția completă, diminuând-o și făcând-o să se potrivească ruletei. Atașați mânerul spre centrul ruletei, făcând ca întregul obiect să se termine.

5. Faceți un set de cipuri de poker izometrice

Pasul 1

Începeți cu a 50 x 50 px chiar și cercul și utilizați Instrumentul dreptunghiular (M) pentru a forma o bandă verticală albastră, traversând cercul. Ținând banda selectată, faceți dublu clic pe Rotiți instrumentul (O) și setați Unghi valoare pentru 360/8, astfel încât Adobe Illustrator să calculeze automat gradul de unghi corespunzător pentru opt copii. Apasă pe Copie apoi apăsați Control-D de mai multe ori, creând opt copii rotite ale benzii noastre.

Selectați dungile albastre create și Uni pe ei inauntru deschizător de drumuri, formând o singură formă. Duplicați baza ciclului cipului, selectați atât copia, cât și forma albastră îmbinată și folosiți intersecta funcția de deschizător de drumuri pentru a tăia părțile nedorite ale dungilor, făcându-le să se potrivească cu baza cipurilor. Plasați un cerc albastru mai mic pe partea superioară a cipului.

Pasul 2

Creați încă trei copii ale chipului și completați elementele cu culori diferite: verde, negru și roșu, care definesc diferite valori ale chips-urilor. Puteți adăuga mai multe elemente decorative, cum ar fi cercul alb prezentat în centrul cipului. Utilizați fontul Uni Sans Free pentru a adăuga numerele la jetoanele noastre (25, 50, 100, 500) și transformați fiecare cip într-un simbol prin glisarea și plasarea acestuia pe simboluri panou.

Pasul 3

Copiați baza de chip necompletată ( 50 x 50 px cerc) și du-te la Efect> Aplicați Extrude și Bevel sau Efect> 3D> Extrude & Bevel cu următoarele setări: setați Poziţie la Stânga izometrică, Extrude Adâncime la 10 pt si Suprafaţă la Fără umbrire.

Apasă pe Harta Art și apăsați simbolul cip pe suprafața frontală. Păstrați copia cipului neexpandat pentru a face mai multe dintre cele cu culori diferite.

Pasul 4

Faceți mai multe jetoane utilizând aceeași tehnică și Obiect> Extindeți aspectul a formei, umplerea marginilor cu culori mai întunecate.

6. Realizați o zaruri izometrice

Pasul 1

Mai întâi de toate, să formăm baza zarurilor noastre. Faceți un pătrat negru chiar și de 50 x 50 px mărimea. Pune a 9,5 x 9,5 px cerc alb pe partea de sus și Alinia cu pătratul, așezându-l în mijloc. Faceți șase copii ale patratei pentru fiecare dintre cele șase laturi ale zarurilor noastre viitoare.

Pasul 2

Formați modelele punctelor de la 1 la 6 așa cum se arată în imaginea de mai jos. Folosește Ghiduri inteligente (Vizualizare> Ghiduri inteligente) si Alinia pentru a facilita poziționarea punctelor în poziția corectă.

Pasul 3

Transformați formele create în simboluri. Mai jos este schema zarurilor, care demonstrează care sunt suprafețele învecinate și care sunt opuse între ele atunci când se formează zarurile.

Pasul 4

Acum să facem o bază tridimensională a zarurilor! Creați un pătrat mai mare de 70 x 70 px dimensiune și mergeți la Efect> 3D> Extrude & Bevel. Acest timp setați Extrude Adâncime la 70 pt pentru a face forma chiar.

Pasul 5

Mergeți la Harta Art opțiunile zarurilor noastre (amintiți-vă că puteți întotdeauna să vă întoarceți la 3D Extrude & Bevel fereastră de opțiuni din Aspect panou înainte de a extinde forma). 

Aplicați simbolurile create pe suprafețele vizibile ale zarurilor noastre, conform schemei. De exemplu, după cum puteți vedea mai jos, suprafața cu trei puncte din partea dreaptă se află lângă suprafața cu un punct din partea de sus. Păstrați o copie a formei de zaruri neexpandate pentru a schimba poziția suprafețelor pentru zarurile următoare, făcând setul mai divers.

Pasul 6

Faceți încă două copii ale zarurilor, schimbând poziția suprafețelor punctelor. Obiect> Extindeți aspectul de obiecte și să se joace cu culorile. Mai întâi, editați zarurile negre, făcând partea lor de sus cea mai ușoară, umplând-o cu culoarea gri mai deschisă, iar partea stângă cea mai întunecată, umplând-o cu culoare neagră.

Umpleți celelalte două zaruri cu alb și roșu.

Pasul 7

Grozav! Avem setul complet de obiecte de jocuri de noroc de care aveam nevoie. Acum le putem muta în jurul Tabloului Artboard, făcând mai multe copii și construind diverse compoziții.

Pasul 8

Rotiți unele dintre obiecte, poziționându-le orizontal pentru a face compoziția mai dinamică. De asemenea, putem adăuga câteva fundaluri luminoase și elemente de conectare, cum ar fi linii sau căi distanțate, realizate cu Instrument Pen (P). Folosește Accident vascular cerebral pentru a edita aspectul căilor.

Voila! Setul nostru de jocuri isometrice este finalizat!

O slujbă grozavă, băieți fete! Sper că v-ați bucurat de acest tutorial și ați descoperit câteva sfaturi și trucuri noi privind crearea obiectelor izometrice în modul simplu, utilizând funcțiile încorporate ale Adobe Illustrator. Aceste tehnici pot fi folosite pentru a face orice alte obiecte și bunuri, cum ar fi clădiri, vehicule și multe altele. Mult noroc cu arta ta!