Share
I denne opplæringen lærer du hvordan du bruker en kombinasjon av SSR (Scale, Shear, Rotate) og Adobe Illustrator-guider for å lage en isometrisk robot. Isometriske bilder er perfekte for diagrammer og spillsprites. Så la oss se hvordan du lager denne søte isometriske roboten ...
Åpne et nytt Illustrator-dokument. Størrelsen og oppløsningen til dokumentet er ikke så viktig, så velg noe du er komfortabel med.
Før vi begynner, er det viktig å definere hva vi mener når vi sier at vi skal tegne en isometrisk gjenstand.
Isometrisk perspektiv er en måte å tegne et 3D-objekt på i 2D. Den brukes i tekniske tegninger, tegneseriebyer og 2D-spill som vil se 3D. Isometrisk perspektiv er å foretrekke over normalt perspektiv fordi alle objekter vil være i samme størrelse, uansett hvor langt unna seeren de er.
Vi starter med å sette opp et isometrisk rutenett for å fungere som våre guider. Teknikkene jeg skal vise deg i denne artikkelen bygger på SSR-metoden, som står for skala, klippe, rotere. I tillegg til denne metoden vil Illustrator-veiledningene komme til nytte senere når du forbereder figurer i isometrisk perspektiv.
Opprett veiledningene ved hjelp av denne raske tipsen: Hvordan lage et isometrisk rutenett på mindre enn 2 minutter. Slå deretter på Smart Guides under Vis> Smart Guides.
Som en rask oppdatering av SSR-metoden, lager vi fronten, siden og toppen av en terning. Start med å tegne et firkant ved hjelp av rektangulærverktøyet (M) og hold Shift mens du drar musen. Lag tre eksemplarer av torget, som vil bli topp og to sider av en isometrisk terning.
Vi starter med å lage toppen. Høyreklikk på terningen og velg Transform> Skala og skriv inn en verdi på 86.062% i Non-Uniform> Vertical input-feltet. Høyreklikk deretter på nytt og velg Transform> Skjær, og skriv inn en skjærvinkel på 30 grader. For det siste trinnet, høyreklikk og velg Transform> Rotate, og skriv inn en vinkel på -30 grader.
Alternativt kan du bruke Transform-vinduet med samme fremgangsmåte - bare endre høyden (betegnet H) til 86.062%, deretter skjær til 30 grader, og til slutt rotasjonen til -30 grader. Begge metodene vil gi de samme resultatene.
For å lage venstre og høyre side av kuben kan vi følge samme fremgangsmåte, med forskjellige skjær og roter vinkler. Disse verdiene er oppsummert i bildet nedenfor.
Med disse teknikkene under våre belter kan vi fortsette å lage vår robott karakter. Roboten jeg skal gjøre i denne opplæringen er hovedpersonen i et isometrisk spill jeg har jobbet med, Robotok.io.
Start med å slå på det vanlige, 2D-gridet ved å klikke på Vis> Vis grid (Ctrl + "). Siden roboten er ganske rektangulær, kan vi bruke rektangulærverktøyet (M) til å utheve de viktigste funksjonene. Penverktøyet (P) og direkte utvalgsverktøyet (A) kommer også til nytte, og lar oss gi roboten litt karakter.
Ved hjelp av forsiden av roboten som referanse, kan vi tegne siden av roboten. Her har jeg brukt Linjesegmentverktøyet (\) til å sette noen blå linjer bak bildet for å hjelpe linje opp i delene av robotens kropp. Du kan flytte linjene opp og ned til hvilken del av tegningen du for tiden jobber med. Å ha delene lined opp riktig vil gjøre de senere trinnene mye enklere, når vi bruker disse visningene for å gjøre roboten isometrisk.
Lag en kopi av sidevisningen og endre slagfargen til grå. Nå kan vi trekke armene på toppen av sidevisningen, noe som gjør det lettere å se våre nye linjer. Vi kan også justere plasseringen av våre blå horisontale linjer for å hjelpe oss med å justere sidevisningen på armen med forsiden.
Roboten trenger også en ryggsekk for å holde alle sine ting, så la oss tegne det på sidebildet ved hjelp av samme metode.
Til slutt trekker du baksiden av roboten ved hjelp av forsiden og siden som referanse. Her har jeg brukt lettere linjer på baksiden av hodet for å hjelpe disse linjene skiller seg ut fra de andre, da de viser volumet av hodet.
Nå som vi har tegningene på plass, kan vi begynne å bygge 3D-roboten ved hjelp av vår isometriske SSR-metode og de guider vi laget tidligere. La oss starte med å jobbe med bare hodet og kroppen (forlatt armene og ryggsekken av for nå) av roboten for å bygge en isometrisk forside.
Lag en kopi av forsiden av roboten, fjern armene, og SSR er den til venstre (Skala: 86,062%, Skjær: -30, Roter: -30). Gjenta SSR prosessen med baksiden av roboten, sørg for å fjerne armene.
Nå skal vi gjøre det samme med siden av den (armløse) roboten, men vi forvandler den til høyre side (Skala: 86.062%, Skjær: 30, Rotere: 30). Lag en kopi som vi kan bruke til den andre siden av roboten.
For å plassere robotens to sider, velg hele siden av roboten ved hjelp av seleksjonsverktøyet (V) og deretter bytte til direkte utvalgsverktøyet (A).
Dra det øverste venstre ankerpunktet for å overlappe det tilhørende hjørnet på forsiden. Når den smarte guiden sier anker (i cyan tekst), slipp av museknappen.
Gjør det samme med robotens overkant. Når robotens bakside er plassert, hold den markert og trykk Ctrl + Shift + [for å flytte disse figurene bak de andre.
Justere baksiden av robotens hode er litt vanskeligere. På dette punktet bør vi slå av nettverket (Ctrl + ") og slå på isometriske guider (Ctrl +;). Velg hele roboten (V) og bytt til Direct Selection Tool (A). Velg ett av punktene på den øverste fronten av robotens hode, og dra den over for å snakke med guiden. Vi kan bruke denne guidelinjen til å rage opp baksiden av roboten med forsiden.
Velg baksiden (V) og bytt til Direct Selection Tool (A). Dra roboten fra et punkt på toppen av hodet til samme linje som vi justerte fronten med. Dra nå den langs denne linjen til baksiden er rett opp med sidene av robotens hode.
Nå kan vi velge toppunktene i sidevisningen (se bildet) med Direct Selection Tool (A), ved å bruke Shift-klikk for å få begge punktene samtidig. Dra disse punktene for å samsvare med baksiden av hodet (igjen, venter til ordet anker vises i cyan tekst før utgivelse). Når disse punktene er på plass, trenger vi ikke lenger baksiden av roboten og kan slette den ved å velge alle former med valgverktøyet (V) og trykke Slett.
For å fullføre formen på hodet kan vi bruke pennverktøyet (P) til å trekke i toppen. Klikk på hvert av de 4 poengene som står øverst på robotens hode, hver gang du venter på ordet anker å vises. Til slutt kobler du den siste kanten. Trykk Ctrl + [noen ganger for å flytte denne nye figuren tilbake til du kan se alle antenneformene. Hvis du går for langt, bruk Ctrl +] for å få det frem igjen.
Robotens antenne består av to deler: en kjegle og en kule.
For å lage en isometrisk kjegle starter vi med to sirkler overlaid (trinn a), med en større enn den andre, og vi SSR dem til å være flate som toppen av en terning (trinn b). Hold skift, flytt den minste sirkelen opp vertikalt til formen er ønsket høyde (trinn c). Ved hjelp av Add Anchor Point Tool (+) legger du til punkter på sidene av bunnsirkelen som vist (trinn d). Bruk deretter Direct Selection Tool (A) til å velge innvendige punkter i begge sirkler og slette dem med Slett-tasten (trinn e). Bytt tilbake til pennverktøyet (P) og koble de resterende punktene (trinn f) for å lage kona (trinn g).
Deretter kan vi lage isometrisk sfære for toppen av antennen. Tegn en sirkel, og det er det! En isometrisk sfære er rett og slett en vanlig sirkel (trinn h). Plasser antennen på toppen av robotens hode.
Deretter kan vi posisjonere robotens kropp ved hjelp av de samme teknikkene som vi pleide å gjøre på hodet. Slett nakkeformene (siden vi ikke kan se nakken fra denne visningen) og den andre siden av kroppen som ikke lenger er synlig. Dette vil bidra til å rydde opp vårt syn på roboten.
Bruk markeringsverktøyet (V) til å velge robotenes nærside (bein og kropp). Bytt til Direct Selection Tool (A) og dra siden av kroppen med et hjørne for å rette opp med det tilsvarende hjørnet på forsiden.
Gjør nå en kopi av siden (Ctrl + C, Ctrl + V) og dra den kopien til den andre siden av roboten ved hjelp av samme metode for å justere punktene (se venstre side av bildet).
For å trekke i toppen av kroppen, bytt til Oversikt over visning med Ctrl + Y og bruk pennverktøyet (P) for å koble de fire punktene på toppen av kroppen (på samme måte som vi gjorde toppen av hodet). Bytt visningen tilbake ved å trykke Ctrl + Y igjen.
Vi skal nå fokusere på beina. Sett på siden av leggen er allerede på plass, så vi kan bruke den som en guide til forsiden. Bruk Direct Selection Tool (A) til å velge poeng i par, vi kan flytte figurene til linje med sidene. Bruk Shift-klikk for å velge to punkter samtidig, og dra dem for å rette opp med siden av beinet. De smarte støttelinjene hjelper deg med å justere punktene nøyaktig.
Når du er ferdig med ett ben, bruk markeringsverktøyet (V) til å velge alle figurene og lag en kopi (Ctrl + C, Ctrl + V). Plasser den nye kopien som det andre benet på roboten. Klikk nå Ctrl + Shift + [for å flytte dette beinet til det laveste laget, slik at det ligger bak robotens kropp. Slett ubrukte figurer for å rydde opp bildet.
På dette tidspunktet bør robotens kropp være komplett, og vi kan bevege oss videre til armene.
Først gjør du en kopi av roboten og grupperer hodet og kroppen separat. Endre slagfargen til grå. Isoler de ulike armformene og SSR dem i front- og sidevisninger.
Armen består av fire deler: skulderen, overarmen, underarmen og kløen.
Vi starter med å arbeide på underarmen, som det er den enkleste å manipulere. Linje for- og sideformene av armene opp med den grå kroppen og hverandre. Juster punktene på siden av underarmen for å rage opp med forsiden, pass på å velge punkter i par for å opprettholde perspektivet.
Bruk pennverktøyet (P) for å fylle resten av underarmen. For dette trinnet bidrar det til å lage kopier av former som guider (som vi gjorde med hodet og kroppen).
Den vanskelige delen av armene er sylinderen som forbinder skulderen med robotens underarm. For å gjøre denne formen begynner vi ved å tegne en sirkel og lage en kopi av den (Ctrl + C, Ctrl + V). Nå er SSR en sirkel som passer på siden av roboten, og SSR den andre til å passe på underarmen. Plasser disse kretsene på skulderen og toppen av underarmen som vist.
Bruk pennverktøyet (P) til å lage en ny form som ser ut som om den ville koble de to kretsene (som vist). Velg de to sirkler og formen som forbinder dem med utvalgsverktøyet (V), og velg Pathfinder> Add to Shape Area, deretter Utvid for å slå dem sammen i en form.
Bruk Ctrl + [og Ctrl +] for å riktig plassere denne formen bak ryggen på underarmen.
Å lage hulcylinderen for skulderen krever at vi deler den i to deler: delen foran armen og delen bak den.
Start med å lage en kopi av skulderkretsen på siden av robotens kropp (Ctrl + C, Ctrl + F). Bruk guidene (trykk Ctrl +; for å slå dem på), dra den andre sirkelen ut litt for å gi skuldercylinderen litt dybde (se diagram nedenfor).
Bruk Add Anchor Point Tool (+) for å legge til punkter på kantene til de to sirkler (se diagram, legg til punkter i de røde sirkler). Gjør nå en kopi av figurene. En kopi av vil bli brukt til å gjøre fremsiden av skulderen, og den andre til å gjøre ryggen.
Bruk Direct Selection Tool (A) for å slette unødvendige punkter på begge kopiene for å ende opp med to linjer i hvert tilfelle. Bruk pennverktøyet (P) for å koble til punktene igjen. Sett brikkene sammen, og der har du det: en front og en bakside for skulderen.
Nå kan vi lage robotens klo ved hjelp av en teknikk som ligner på hvordan vi gjorde skulderen.
Ta SSR'd kloformene og lenk dem opp på støttelinjene. Når du legger på figurer, velg bare et punkt i en form, sett det opp med en styrelinje, og sørg for å plassere det tilsvarende punktet på det andre objektet på samme sted. Her har jeg valgt det øverste venstre hjørnet av torget på hver klo som referansepunkt, og som du kan se er de begge plassert på samme styrelinje.
Lag en kopi av klaffens forside, og bruk siden som en breddereferanse (som vist nedenfor) for å plassere denne kopien som baksiden av objektet.
Etter at vi har brukt sidevisningen til kløen for å bestemme bredden, er formen ikke lenger nødvendig, og vi kan slette den.
Vi begynner å fylle kløen ved å lage den grønne formen i objektet under. Gjør en kopi av klovnens to halvdeler, og slett alle punktene som ikke kommer til å klappe på siden ved hjelp av Direct Selection Tool (A) og Delete-tasten. Deretter bruker du pennverktøyet (P) for å koble de to halvdelene. Nå kan vi plassere siden av klaven tilbake i objektet vårt.
Ved hjelp av samme teknikk kan vi fylle inn kløenes innside (lilla), og for fullstendighet kan vi også lage nederste kant (blå).
Med den fremre armen gjort, kan vi bruke samme metoder for å konstruere roboten sin andre arm.
Størstedelen av denne armen kan kopieres direkte fra den første armen, og tweaked ved hjelp av Direct Selection Tool. Robots hånd, for eksempel, er helt identisk, slik at vi ikke trenger å repetere den. Husk at isometriske objekter er like store, uansett hvor langt de er fra betrakteren, i motsetning til sant perspektiv, så vil armens klo være den samme størrelsen som den nære.
Den siste tingen vi legger til roboten, er hans ryggsekk. Jeg liker å lage en kopi av alt så langt, grupper hver arm uavhengig (Ctrl + G), og juster slagfargen for å være lettere. På den måten kan vi holde hver kroppsdel skilt for fremtidige redigeringer (som å lage baksiden, eller hvis vi ønsket å animere roboten) og det hjelper deg å se hva du jobber med akkurat nå.
Bruk SSR-metoden på siden av ryggen vi tegnet tidligere, og plasser den på siden av roboten. Siden ryggsekken er buet, trenger den ikke mye arbeid for å få det til å passe inn i isometrisk perspektiv. Hvis det ikke ser riktig ut, bruk direkte utvalgsverktøyet (A) til å justere de enkelte punktene.
Bruk pennverktøyet (P) for å trekke fremsiden av stroppen over robotenes skulder.
Her har jeg flyttet hodet og forarmen ut av veien, slik at vi lett kan se hvor ryggsekken skal gå. Når ryggsekken er blitt trukket, kan vi legge til disse figurene tilbake.
Og der er han! For å forene ham litt, velg hele roboten og endre strekkbredden til en verdi. I dette tilfellet valgte jeg 1 pt, men dette avhenger av hvor stor du har trukket spriteen din.
Denne roboten er nå klar for noen farger!
Det første trinnet er å endre slagfargen til noe mindre hard enn svart. Her har jeg valgt mørkegrå, men avhengig av spritet ditt vil du kanskje blande i noen farge.
Deretter kan vi fylle ut noen grunnfarger. Bruk markeringsverktøyet (V) til å velge hele roboten (unntatt øynene), og endre fyllfargen til grå.
Velg øynene, munnen, knappen og skjermen og endre disse for å ha en fyllfarge på hvitt. Farg ryggsekken oransje, og gjør knappen rød.
Det neste trinnet er å velge retning for lyskilden. Jeg har bestemt meg for at den kommer fra venstre, så motsatt til roboten.
Skyggen herfra kan være så detaljert eller så enkelt som du vil. Jeg har valgt å holde skyggen relativt enkel, og ignorere det faktum at noen objekter kan kaste skygger på andre. Dette vil gjøre det enklere å bruke sprite i animasjoner senere.
Start med å velge alle former som kommer i skygge og endre fyllfarge til mørkere grå. Deretter velger du alle former som vil være direkte i lyset og fylle dem med en lysere grå. For de flate fasongene er dette enkelt, men skyggene på buede overflater vil kreve mer arbeid.
For å illustrere hvordan vi kan skygge de buede flatene, bør du vurdere ryggsekkets kropp.
Kopier denne formen og lim inn med Ctrl + C, Ctrl + F. Nå bli kvitt slaget og sett fyllfarge til mørk orange.
Nå kan vi bruke verktøyet Slett ankerpunkt (-) for å trimme ned denne formen, og deretter Direktevalgverktøyet (A) for å justere det i form av en skygge. For å fikse slaget, lager vi en annen kopi av ryggsekklegemet og lime den inn foran. Fjern fyllingen på denne nye formen, og flytt den fremover (Ctrl +]) for å sette den foran skyggeformen.
Bruk denne metoden til å lage skygger for resten av ryggsekken, så vel som for de andre buede flater som sylindrene i armene og antennen.
For å gi roboten litt mer karakter, kan vi legge til noen høydepunkter i ledd og føtter.
Her har jeg gjort håndleddene og føttene mørkere grå, og albuene og føttene lettere. Jeg har også gjort øynene litt mørkere for å få dem til å skille seg ut. Husk lyskilden når du legger til flere farger, da du trenger å holde skyggen konsistent.
For å få roboten til å skille seg litt mer, kan vi gi ham en litt tykkere oversikt.
Velg hele roboten, Kopier og lim inn foran (Ctrl + C, Ctrl + F). Klikk Pathfinder> Add to Shape Area, deretter Utvid for å få en enkelt kombinert form. Bytt fyllfarge til hvit, så vi kan tydelig den nye formen.
Denne formen vil sannsynligvis være litt rotete (forårsaket av at noen former ikke er perfekt justert), slik at vi kan bruke Fjern Anchor Point Tool (-) for å rydde opp litt ved å fjerne de stygge punktene. Fokuser på å sørge for at ytre kantene er glatte, da det blir alt vi kan se når vi er ferdige.
Bruk nå Stroke-vinduet til å endre hjørnetypen for å være midtalternativet, "Round Join". Dette vil gjøre hjørnene glatte. Øk strekbredden på denne formen til 3pt.
Velg konturformen, og trykk Ctrl + Shift + [for å sende denne formen til helt baksiden.
Her er et bilde av de to robotene side ved side: ett med omrisset og en uten. Skissen forener robotens form, og vil hjelpe ham til å skille seg ut mot en mer komplisert bakgrunn.
La oss gi roboten noe å stå på. Siden han kommer til å bli brukt på et isometrisk spillbrett, ser et spillflis ut som et godt valg. Lag en firkant og deretter SSR den å være flat som toppen av en terning. Plasser flisen under roboten ved hjelp av Ctrl + Shift + [for å flytte den helt bak.
I det siste trinnet gir vi roboten en enkel skygge. Lag en sirkel, og SSR skal være flatt som flisen. Endre fyllfarge til mørkegrå, og sett deretter Opacity til omtrent 15%. Plasser skyggen under alt unntatt flisen (Ctrl + Shift + [, deretter Ctrl +] for å flytte den opp ett nivå).
Og der har vi det: en bedårende isometrisk robot. Bruk disse teknikkene til å lage isometriske sprites for spill, for tekniske diagrammer, eller for å legge til en 3D-punch for designene dine.
Accentsconagua