Share
În acest tutorial veți învăța cum să utilizați o combinație între metoda SSR (Scale, Shear, Rotate) și ghidurile Adobe Illustrator pentru a face un robot izometric. Imaginile izometrice sunt perfecte pentru diagrame și sprite de joc. Să vedem cum să facem acest robot izometric drăguț ...
Deschideți un nou document Illustrator. Dimensiunea și rezoluția documentului nu sunt prea importante, deci alegeți ceva ce vă convine.
Înainte de a începe, este important să definiți ce înțelegem atunci când spunem că vom desena Izometrică obiect.
O perspectivă izometrică este o modalitate de a desena un obiect 3D în 2D. Este folosit în desene tehnice, în orașele de desene animate și în jocuri 2D care doresc să arate 3D. O perspectivă izometrică este preferabilă în perspectivă normală, deoarece toate obiectele vor avea aceeași dimensiune, indiferent cât de departe de spectator sunt.
Vom începe prin crearea unei rețele izometrice pentru a acționa ca ghizii noștri. Tehnicile pe care vi le voi arăta în acest articol se bazează pe metoda SSR, care reprezintă standardul scară, foarfece, roti. În plus față de această metodă, ghizii Illustrator vor veni la îndemână mai târziu, atunci când se aliniază forme în perspectivă izometrică.
Creați ghidajele folosind acest sfat rapid: Cum puteți crea o rețea izometrică în mai puțin de 2 minute. Apoi, activați Ghidurile inteligente sub Vizualizare> Ghiduri inteligente.
Ca o reîmprospătare rapidă a metodei SSR, vom face partea frontală, partea și vârful unui cub. Începeți prin desenarea unui pătrat folosind Instrumentul dreptunghi (M) și menținând Shift în timp ce trageți mouse-ul. Faceți trei copii ale pătratului, care vor deveni partea de sus și cele două părți ale unui cub izometric.
Vom începe prin a face partea de sus. Faceți clic dreapta pe cub și selectați Transformați> Scalare și introduceți o valoare de 86.062% în câmpul Non-Uniform> Intrare verticală. Apoi, faceți din nou clic dreapta și selectați Transformare> Tăiere și introduceți un unghi de tăiere de 30 de grade. Pentru ultimul pas, faceți clic dreapta și selectați Transformați> Rotire și introduceți un unghi de -30 de grade.
Alternativ, puteți utiliza fereastra Transformare cu aceeași procedură - schimbați pur și simplu înălțimea (notată H) la 86.062%, apoi forfecarea la 30 de grade și în final rotația la -30 grade. Ambele metode vor produce aceleași rezultate.
Pentru a face părțile stângi și drepte ale cubului, putem urmări aceeași procedură, cu diferite unghiuri de forfecare și rotire. Aceste valori sunt rezumate în imaginea de mai jos.
Cu aceste tehnici sub centurile noastre putem trece la a face caracterul robotului nostru. Robotul pe care îl voi face în acest tutorial este personajul principal într-un joc izometric pe care am lucrat, Robotok.io.
Începeți prin a activa grila 2D, făcând clic pe Afișați> Afișați grilă (Ctrl +). Deoarece robotul este destul de dreptunghiular, putem folosi instrumentul Rectangle (M) pentru a detalia caracteristicile principale. și Instrumentul de selecție directă (A), de asemenea, sunt la îndemână și ne permit să dăm robotului un pic de caracter.
Folosind partea frontală a robotului ca referință, putem trage partea robotului. Aici am folosit Instrumentul pentru segmentul de linie (\) pentru a pune niște linii albastre în spatele imaginii pentru a ajuta la alinierea secțiunilor corpului robotului. Puteți muta liniile în sus și în jos în orice parte a desenului pe care lucrați în prezent. Având părțile aliniate corect, pașii ulteriori vor fi mult mai ușori atunci când vom folosi aceste vederi pentru a face robotul izometric.
Faceți o copie a vederii laterale și schimbați culoarea cursei în gri. Acum putem trage armele deasupra vederii laterale, făcând mai ușor să vedem liniile noi. De asemenea, putem ajusta plasarea liniilor noastre orizontale albastre pentru a ne ajuta să aliniem vederea laterală a brațului cu fața.
De asemenea, robotul are nevoie de un rucsac pentru a ține toate lucrurile, așa că haideți să o tragem pe vederi laterale utilizând aceeași metodă.
În cele din urmă, trageți partea din spate a robotului folosind partea frontală și cea laterală ca referință. Aici am folosit linii mai ușoare pe spatele capului pentru a ajuta aceste linii să iasă de la ceilalți, deoarece arată volumul capului.
Acum că avem planurile în vigoare, putem începe să construim robotul 3D utilizând metoda izometrică SSR și ghidurile pe care le-am făcut mai devreme. Să începem prin a lucra doar cu capul și corpul (lăsați acum brațele și rucsacul) robotului pentru a construi o vedere frontală izometrică.
Faceți o copie a părții frontale a robotului, scoateți brațele și SSR să fie o parte stângă (Scale: 86.062%, Shear: -30, Rotire: -30). Repetați procesul SSR cu partea din spate a robotului, asigurându-vă că ați înlăturat brațele.
Acum vom face același lucru cu partea robotului (fără brațe), dar îl vom transforma în partea dreaptă (Scale: 86.062%, Shear: 30, Rotate: 30). Faceți o copie pe care o putem folosi pentru cealaltă parte a robotului.
Pentru a poziționa cele două părți ale robotului, selectați întreaga parte a robotului folosind Instrumentul de selecție (V) și apoi treceți la Instrumentul de selectare directă (A).
Trageți punctul de ancorare din partea stângă sus pentru a se suprapune cu colțul corespunzător din față. Când spune ghidul inteligent ancoră (în textul cyan), eliberați butonul mouse-ului.
Faceți același lucru cu partea din față a robotului. Odată ce partea exterioară a robotului a fost plasată, mențineți-o selectată și apăsați pe Ctrl + Shift + [pentru a muta acele forme în spatele celorlalte.
Alinierea spatelui capului robotului este puțin mai complicată. În acest moment ar trebui să oprim grila (Ctrl +) și să pornim ghidajele izometrice (Ctrl +;). Selectați întregul robot (V) și comutați la Instrumentul de selectare directă (A). partea superioară a capului robotului și trageți-o pentru a fixa cu ghidajul. Putem folosi această linie de ghidare pentru a alinia partea din spate a robotului cu fața.
Selectați spatele (V) și comutați la Instrumentul de selecție directă (A). Trageți robotul dintr-un punct de pe vârful capului său pe aceeași linie pe care am aliniat frontalul. Acum glisați-o de-a lungul acestei linii până când conturul spate se aliniază doar cu părțile laterale ale capului robotului.
Acum putem selecta punctele din spate (vezi imaginea) cu Instrumentul de selecție directă (A), folosind Shift-click pentru a obține ambele puncte simultan. Trageți aceste puncte pentru a se potrivi cu partea din spate a capului (din nou, așteptați până la cuvânt ancoră apare în textul cyan înainte de eliberare). Odată ce aceste puncte sunt în loc, nu mai avem nevoie de partea din spate a robotului și îl putem șterge selectând toate formele cu Instrumentul de selecție (V) și apăsând Delete.
Pentru a finaliza forma capului, putem folosi instrumentul Pen (P) pentru a desena în partea de sus. Faceți clic pe fiecare din cele 4 puncte care alcătuiesc capul robotului, de fiecare dată când așteptați cuvântul ancoră a aparea. În cele din urmă, conectați ultima margine. Apăsați Ctrl + [de câteva ori pentru a muta această nouă formă înapoi până când puteți vedea toate formele antenei. Dacă mergeți prea departe, utilizați Ctrl +] pentru ao aduce din nou înainte.
Antena robotului este compusă din două bucăți: un con și o sferă.
Pentru a face un con izometric, începem cu două cercuri suprapuse (pasul a), cu unul mai mare decât celălalt și noi SSR ele sunt plate ca vârful unui cub (pasul b). Ținând schimbarea, mutați cercul mai mic în sus până când forma este înălțimea dorită (pasul c). Cu ajutorul instrumentului Adăugare puncte de ancorare (+), adăugați puncte pe laturile cercului inferior așa cum se arată (pasul d). Apoi utilizați Instrumentul de selecție directă (A) pentru a selecta punctele interioare ale ambelor cercuri și pentru a le șterge folosind tasta Ștergere (pasul e). Reveniți la instrumentul Pen (P) și conectați punctele rămase (pasul f) pentru a vă face conul (pasul g).
Apoi putem face sfera izometrică pentru partea superioară a antenei. Desenați un cerc și asta este! O sferă izometrică este pur și simplu un cerc obișnuit (pasul h). Poziționați antena deasupra capului robotului.
Apoi putem poziționa corpul robotului folosind aceleași tehnici pe care le-am folosit pentru a face capul. Ștergeți forma gâtului (deoarece nu putem vedea gâtul din această vedere) și partea din față a corpului care nu mai este vizibilă. Acest lucru va ajuta la curățarea vederii noastre despre robot.
Utilizați instrumentul de selecție (V) pentru a selecta partea apropiată a robotului (picioarele și corpul). Treceți la Instrumentul de selecție directă (A) și trageți partea laterală a corpului printr-un colț pentru alinierea cu colțul corespunzător din față.
Acum faceți o copie a laturii (Ctrl + C, Ctrl + V) și trageți copia respectivă pe partea din față a robotului folosind aceeași metodă pentru alinierea punctelor (vezi partea stângă a imaginii).
Pentru a trage în partea superioară a corpului, comutați la Vedere de ansamblu folosind Ctrl + Y și utilizați instrumentul Pen (P) pentru a conecta cele patru puncte de pe partea superioară a corpului (la fel cum am făcut partea superioară a capului). Schimbați vizualizarea prin apăsarea din nou a Ctrl + Y.
Acum ne vom concentra pe picioare. Vederea laterală a piciorului este deja în poziție, astfel încât să o putem folosi ca ghid pentru partea din față. Utilizați Instrumentul de selectare directă (A) pentru a selecta puncte în perechi, putem muta formele să se alinieze cu laturile. Utilizați butonul Shift pentru a selecta două puncte simultan și trageți-le pentru a se alinia cu partea laterală a piciorului. Ghidajele inteligente vă vor ajuta să aliniați exact punctele.
Când ați terminat un picior, folosiți Instrumentul de selecție (V) pentru a selecta toate formele și a face o copie (Ctrl + C, Ctrl + V). Poziționați noua copie ca celălalt picior pe robot. Acum, apăsați Ctrl + Shift + [pentru a muta acest picior în stratul cel mai de jos, astfel încât acesta se află în spatele corpului robotului. Ștergeți formele neutilizate pentru a curăța imaginea.
În acest moment, corpul robotului ar trebui să fie complet, iar noi putem merge în brațe.
Mai întâi, faceți o copie a robotului și grupați capul și corpul separat. Modificați culoarea stroke la gri. Izolați diferitele forme de brațe și SSR-le în vederea din față și laterală.
Brațul este compus din patru părți: umărul, brațul superior, antebrațul și gheara.
Vom începe prin a lucra pe antebraț, deoarece este cel mai simplu de manipulat. Linia frontala si forma laterala a bratelor cu corpul gri si unul cu celalalt. Reglați punctele de pe partea antebrațului pentru a alinia cu partea din față, asigurându-vă că selectați punctele în perechi pentru a menține perspectiva.
Utilizați instrumentul Pen (P) pentru a umple restul antebrațului. Pentru acest pas, ajută la realizarea de copii de forme care să fie folosite ca ghizi (așa cum am făcut-o cu capul și corpul).
Partea dificilă a brațelor este cilindrul care leagă umărul de antebrațul robotului. Pentru a face această formă, vom începe prin desenarea unui cerc și realizarea unei copii a acestuia (Ctrl + C, Ctrl + V). Acum SSR un cerc pentru a se potrivi pe partea robotului, iar SSR celălalt pentru a se potrivi pe partea superioară a antebrațului. Poziționați aceste cercuri pe umăr și pe partea superioară a antebrațului, după cum se arată.
Utilizați instrumentul Pen (P) pentru a crea o nouă formă care pare să se conecteze la cele două cercuri (după cum se arată). Selectați cele două cercuri și forma care le conectează cu Instrumentul de selecție (V) și faceți clic pe Pathfinder> Adăugați în zona de formare, apoi pe Expand pentru a le îmbina într-o singură formă.
Utilizați Ctrl + [și Ctrl +] pentru a poziționa corect această formă în spatele creastei de pe antebraț.
Făcând cilindrul gol pentru umăr ne cere să-l împărțim în două bucăți: partea din fața brațului și partea din spatele lui.
Începeți prin a face o copie a cercului umărului de pe partea corpului robotului (Ctrl + C, Ctrl + F). Folosind ghidajele (apăsați Ctrl +; pentru a le aprinde), glisați cercul secunde puțin pentru a da cilindrului umerilor o adâncime (vezi diagrama de mai jos).
Utilizați instrumentul Add Anchor Point (+) pentru a adăuga puncte pe marginile celor două cercuri (vezi diagrama, adăugați puncte la cercurile roșii). Faceți acum o copie a formelor. O singură copie va fi folosită pentru a face partea din față a umărului, iar cealaltă pentru a face spatele.
Utilizați Instrumentul de selecție directă (A) pentru a șterge punctele inutile de pe ambele copii pentru a ajunge la două rânduri în fiecare caz. Utilizați instrumentul Pen (P) pentru a reconecta punctele. Repoziționați piesele împreună și acolo le aveți: o față și o spate pentru umăr.
Acum putem face gheara robotului folosind o tehnica similara cu modul in care am facut umarul.
Luați formele de gheare SSR și le aliniați pe ghidaje. Atunci când întindeți forme, pur și simplu alegeți orice punct pe o formă, aliniați-o cu o linie de ghidare și apoi asigurați-vă că ați plasat punctul corespunzător celui de-al doilea obiect în același loc. Aici am ales colțul din stânga sus al pătratului de pe fiecare gheară drept punct de referință și, după cum puteți vedea, ambele sunt poziționate pe aceeași linie de ghidare.
Efectuați o copie a părții frontale a ghearei și folosiți-o ca referință la lățime (după cum se arată mai jos) pentru a poziționa această copie ca partea din spate a obiectului.
După ce am folosit vedeta laterală a ghearei pentru a determina lățimea, forma nu mai este necesară și o putem șterge.
Vom începe să umpleți gheara făcând forma verde în obiectul de mai jos. Efectuați o copie a celor două jumătăți ale ghearei și ștergeți toate punctele care nu formează partea ghearei utilizând Instrumentul de selectare directă (A) și tasta Ștergere. Apoi, utilizați instrumentul Pen (P) pentru a conecta cele două jumătăți. Acum putem plasa partea ghearei înapoi în obiectul nostru.
Folosind aceeasi tehnica putem sa umplem interiorul ghearei (purpuriu), iar pentru completare putem sa facem marginea de jos (albastru).
Cu brațul din față, putem folosi aceleași metode pentru a construi celălalt braț al robotului.
Majoritatea acestui braț poate fi copiată direct de la primul braț și ajustată utilizând Instrumentul de selecție directă. Mâna robotului, de exemplu, este complet identică, astfel încât nu este nevoie să o reproiectăm. Amintiți-vă că obiectele izometrice sunt de aceeași mărime, indiferent cât de departe sunt de la vizualizator, spre deosebire de perspectiva adevărată, astfel încât gheara din brațul cel mai mare va avea aceeași dimensiune ca cea apropiată.
Ultimul lucru pe care îl vom adăuga la robot este rucsacul lui. Îmi place să fac o copie a totului până acum, grupați fiecare braț independent (Ctrl + G) și ajustați culoarea stroke pentru a fi mai ușoară. În acest fel, putem păstra fiecare parte a corpului separat pentru editări viitoare (cum ar fi realizarea vederii din spate sau dacă vrem să animăm robotul) și vă ajută să vedeți la ce lucrați acum.
Utilizați metoda SSR în vederea laterală a rucsacului pe care l-am remorcat mai devreme și apoi o poziționați pe partea laterală a robotului. Din moment ce rucsacul este curbat, nu are nevoie de prea multa munca pentru a se potrivi in perspectiva izometrica. Dacă nu pare corect, utilizați Instrumentul de selecție directă (A) pentru a ajusta punctele individuale.
Utilizați instrumentul Pen (P) pentru a desena partea din față a curelei peste umărul robotului.
Aici am mutat capul și brațul din față, astfel încât să putem vedea cu ușurință unde va merge rucsacul. Odată ce rucsacul a fost desenat, putem adăuga aceste forme înapoi.
Și acolo este! Pentru al uni un pic, selectați întregul robot și modificați lățimea cursei la o singură valoare. În acest caz, am ales 1 pt, dar depinde de cât de mare ți-ai atras scutul.
Acest robot este acum pregătit pentru anumite culori!
Primul pas este să schimbați culoarea stroke-ului la ceva mai puțin dur, apoi negru. Aici am ales gri închis, dar, în funcție de sprite, poate doriți să amestecați într-o anumită culoare.
Apoi putem completa câteva culori de bază. Utilizați instrumentul de selectare (V) pentru a selecta întregul robot (cu excepția ochilor) și modificați culoarea de umplere la gri.
Selectați ochii, gura, butonul și ecranul și schimbați-le pentru a avea o culoare de umplere albă. Colorați rucsacul portocaliu și faceți butonul roșu.
Următorul pas este să alegeți o direcție pentru sursa de lumină. M-am hotărât să-l fac să vină de la stânga, așa că în față cu robotul.
Umbrirea de aici poate fi la fel de detaliată sau cât de simplă doriți. Am optat să păstrez umbrirea relativ simplu și să ignor faptul că unele obiecte pot arunca umbre asupra altora. Acest lucru va face mai ușor să utilizați sprite în animații mai târziu.
Începeți prin selectarea tuturor formelor care vor fi în umbră și schimbarea culorii lor de umplere la un gri mai închis. Apoi, selectați toate formele care vor fi direct în lumină și completați-le cu o culoare mai deschisă. Pentru formele plate, acest lucru este ușor, dar umbrele de pe suprafețele curbe vor necesita mai multă muncă.
Pentru a ilustra modul în care putem umbri suprafețele curbe, luați în considerare corpul rucsacului.
Copiați această formă și inserați-o în față utilizând Ctrl + C, Ctrl + F. Acum, eliminați cursa și setați culoarea de umplere într-un portocaliu închis.
Acum putem folosi instrumentul Delete Anchor Point (-) pentru a tăia această formă și apoi Instrumentul de selecție directă (A) pentru ao regla în forma unei umbre. Pentru a repara accidentul, vom face o altă copie a corpului rucsacului și îl vom lipi în față. Îndepărtați umplutura acestei noi forme și deplasați-o înainte (Ctrl +)) pentru ao pune în fața formei umbră.
Utilizați această metodă pentru a face umbre pentru restul rucsacului, precum și pentru alte suprafețe curbe, cum ar fi cilindrii din brațe, și antena.
Pentru a da robotului un caracter mai mult, putem adauga cateva evidentieri articulatiilor si picioarelor.
Aici am făcut încheieturile și picioarele mai gri, iar coatele și picioarele mai ușoare. De asemenea, i-am făcut ochii puțin mai întunecați pentru ai face să iasă în evidență. Țineți cont de sursa de lumină atunci când adăugați mai multe culori, deoarece trebuie să păstrați consistența consistentă.
Pentru a face robotul să iasă în evidență, putem să-i oferim un contur ușor mai gros.
Selectați întregul robot, copiați și lipiți în față (Ctrl + C, Ctrl + F). Faceți clic pe Pathfinder> Adăugați în zona de formare, apoi pe Expand pentru a obține o singură formă combinată. Schimbați culoarea de umplere la alb, astfel încât să putem clarifica noua formă.
Această formă va fi probabil dezordonată (cauzată de faptul că unele forme nu sunt perfect aliniate), astfel încât să putem folosi funcția Remove Anchor Point Tool (-) pentru ao curăța puțin, eliminând punctele urâte. Concentrați-vă pe asigurarea faptului că marginile celei mai exterioare sunt netede, deoarece acestea vor fi tot ce putem vedea când suntem gata.
Acum, utilizați fereastra Stroke pentru a schimba tipul colțului ca fiind opțiunea de mijloc, "Round Join". Acest lucru va face colturile netede. Creșteți lățimea cursei acestei forme la 3pt.
Selectați forma conturului și apăsați Ctrl + Shift + [pentru a trimite această formă în spate.
Iată o imagine a celor doi roboți una lângă cealaltă: una cu conturul și una fără. Schița unifică forma robotului și îl va ajuta să se ridice împotriva unui fundal mai complex.
Să dăm robotului ceva să stea pe loc. Deoarece va fi folosit pe o placă de joc izometrică, o piesă de joc pare a fi o alegere bună. Faceți un pătrat și apoi SSR să fie plat ca vârful unui cub. Poziționați țigla de sub robot folosind Ctrl + Shift + [pentru a vă deplasa în spate.
În ultimul pas vom da robotului o umbră simplă. Faceți un cerc și SSR să fie plat ca placa. Schimbați culoarea de umplere la gri închis și apoi setați opacitatea la aproximativ 15%. Poziționați umbra sub orice, cu excepția plăcilor (Ctrl + Shift + [, apoi Ctrl +] pentru a vă deplasa cu un singur nivel).
Și acolo o avem: un robot izometric adorabil. Utilizați aceste tehnici pentru a face sprite-uri izometrice pentru jocuri, pentru diagrame tehnice, sau pentru a adăuga un pumn 3D la desenele dumneavoastră.
Accentsconagua