How å lage en Cute Robot spill Sprite bruker SSR i Adobe Illustrator

I denne opplæringen vil du lære å bruke en kombinasjon av SSR (Scale, Shear, Roter) metode og Adobe Illustrator guider for å gjøre en isometrisk robot. Isometriske bilder er perfekt for diagrammer og spill sprites. Så la oss se hvordan du gjør denne søte isometrisk robot ...

Trinn 1

Åpne opp en ny Illustrator dokument. Størrelsen og oppløsningen av dokumentet er ikke så viktig, så velg noe du er komfortabel med.

Trinn 2

Før vi begynner, er det viktig å definere hva vi mener når vi sier at vi skal tegne en isometrisk
objekt.

isometrisk perspektiv er en måte å trekke et 3D-objekt i 2D. Det er brukt i tekniske tegninger, tegneserie byer og 2D-spill som ønsker å se 3D. Isometrisk perspektiv er å foretrekke fremfor normal perspektiv fordi alle objekter vil være av samme størrelse, uansett hvor langt unna betrakteren de er.

Vi vil starte med å sette opp en isometrisk nettet til å fungere som våre guider. Teknikkene jeg skal vise deg i denne artikkelen bygger på SSR-metoden, som står for skala
, skjær
, rotate
. I tillegg til denne metoden, vil Illustrator guider komme godt med senere når fôr opp figurene i isometrisk perspektiv

Opprett guidene bruker denne hurtig. Tips: Hvordan lage en isometrisk Grid i mindre enn 2 minutter. Deretter slår du på Smart Guides under Vis> Smart Guides.

Trinn 3

Som en rask oppfriskning av SSR-metoden, vil vi sørge front, side, og toppen av en kube. Start med å tegne en firkant med rektangelverktøyet (M) og holde nede Skift mens du drar musen. Lag tre kopier av plassen, som vil bli den øverste og to sider av en isometrisk kube.

Vi vil starte med å lage toppen. Høyreklikk på kuben og velg Transform> Scale og angi en verdi av 86,062% inn i Non-Uniform> Vertical feltet innspill. Deretter høyreklikker du igjen og velg Transform> Shear, og skriv en skjærvinkel på 30 grader. For det siste trinnet, høyreklikk og velg Transform> Roter, og skriv en vinkel på 30 grader

Alternativt kan du bruke Transform vindu med samme prosedyre &ndash.; ganske enkelt å 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 å gjøre venstre og høyre side av kuben vi kan følge samme prosedyre, med forskjellige skjær og rotere vinkler. Disse verdiene er oppsummert i bildet nedenfor.

Trinn 4

Med disse teknikkene under våre belter vi kan gå videre til å gjøre vår robot karakter. Roboten jeg skal gjøre i denne opplæringen er hovedpersonen i en isometrisk spillet jeg har jobbet med, Robotok.io.

Start ved å slå på normal, 2D Grid ved å klikke Vis> Vis rutenett (Ctrl + "). Siden roboten er ganske rektangulære, kan vi bruke rektangel Tool (M) til kjøttet ut de viktigste funksjonene. The Pen Tool (P) og Direct Selection Tool (A) også komme godt med, og la oss å gi roboten en bit av karakter.

Trinn 5

Ved hjelp av fronten av roboten som en referanse, kan vi trekke den siden av roboten. Her har jeg brukt Line Segment Tool (\\) for å sette noen blå streker bak bildet for å stille opp deler av robotens kropp. Du kan flytte linjene opp og ned til den delen av tegningen du for øyeblikket arbeider med. Å ha de delene stilt opp riktig vil gjøre de senere trinnene mye enklere, når vi bruker disse synspunktene å gjøre roboten isometrisk.

Trinn 6

Ta en kopi av den fra siden og endre strøkfargen til grå. Nå vi kan trekke armene på toppen av side-visning, 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 å stille opp side-visning av armen med fronten.

Roboten trenger også en ryggsekk til å holde alle sine ting, så la oss trekke det på visningen side ved hjelp av samme metode.

Trinn 7

Til slutt trekke baksiden av robot ved hjelp av fronten og på siden som referanse. Her har jeg brukt lettere linjer på baksiden av hodet for å hjelpe disse linjene skiller seg ut fra de andre, som de viser volumet av hodet.

Trinn 8

Nå som vi har skissene på plass, kan vi begynne å bygge 3D-robot ved hjelp av vår isometrisk SSR metode og guidene vi har gjort tidligere. La oss starte med å jobbe med bare hodet og kroppen (la armene og ryggsekk av for nå) av roboten til å konstruere en isometrisk forfra.

Lag en kopi av forsiden av roboten, fjerne armene og SSR det å være en venstre side (Scale: 86,062%, Shear: -30, Roter: -30). Gjenta SSR prosessen med baksiden av roboten, og pass på å fjerne armene.

Nå vil vi gjøre det samme med den siden av (armless) robot, men vi vil forvandle det til den høyre side (Scale: 86,062%, Shear: 30, Roter: 30). Lag en kopi som vi kan bruke for den andre siden av roboten.

Hvis du vil plassere de to sidene av roboten, velger hele siden av roboten ved hjelp av Selection Tool (V) og deretter bytte til Direct Selection Tool (A).

Dra øverst til venstre ankerpunkt for å overlappe med tilsvarende hjørne på forfra. Når smart guide sier anker product: (i cyan tekst), slipp museknappen.

Gjør det samme med den andre siden av roboten. Når den andre siden av roboten har blitt plassert, holder det valgt og trykk Ctrl + Shift + [for å flytte disse formene bak de andre.

Trinn 9

Justere bakhodet robotens er litt mer komplisert. På dette punktet bør vi slå av rutenettet (Ctrl + ") og slå på våre isometriske guider (Ctrl +;). Velg hele robot (V) og bytte til Direct Selection Tool (A) Velg ett av punktene på. toppen foran på hodet robotens, og dra den over til å knipse med guide. Vi kan bruke denne guiden linje til linje opp på baksiden av roboten med fronten.

Velg den tilbake (V) og switch til Direct Selection Tool (A). Dra roboten fra et punkt på toppen av hodet til den samme linjen vi justert forsiden med. Nå drar den langs denne linjen til baksiden disposisjons bare på linje med de sidene av robotens hode.

Nå kan vi velge back-of-the-head punkter på side view (se bilde) med Direct Selection Tool (A), bruker Shift-klikk for å få begge punkter på en gang. Drag disse punktene for å matche opp med baksiden av hodet (igjen, vente til ordet vises anker
i cyan teksten før du slipper). Når disse punktene er på plass, vi trenger ikke lenger baksiden av roboten og kan slette den ved å velge alle figurer med Selection Tool (V) og treffer Slett.

Til slutt av formen på hodet vi kan bruke Pen Tool (P) til å trekke i toppen. Klikk på hver av de 4 punktene som utgjør toppen av hodet robotens, hver gang venter på ordet anker
skal vises. Til slutt kobler den siste kanten. Trykk Ctrl + [noen ganger for å flytte denne nye formen tilbake til du kan se alle antenne former. Hvis du går for langt, bruker du Ctrl +] for å hente den frem igjen

Trinn 10

Roboten antennen er sammensatt av to deler:.. En kjegle og en kule

For å gjøre en isometrisk kjegle, starter vi med to sirkler kledde (trinn a), med ett større enn den andre, og vi SSR dem til å være flat som toppen av en kube (trinn b). Holder shift, flytter mindre sirkel opp vertikalt inntil formen er den høyden du ønsker (trinn c). Bruke Legg Anchor Point Tool (+), legge peker til sidene av bunnen sirkel som vist (trinn d). Deretter bruker Direct Selection Tool (A) for å velge innsiden interessante både sirkler og slette dem ved hjelp av Delete-tasten (trinn e). Bytt tilbake til Pen Tool (P) og koble de andre punktene (trinn f) for å gjøre ditt kjegle (trinn g).

Det neste vi kan gjøre 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 hodet robotens.

Trinn 11

Det neste vi kan posisjonere kroppen av roboten ved hjelp av de samme teknikkene som vi pleide å gjøre i hodet. Slett nakken figurer (siden vi ikke kan se halsen fra dette synet) og den andre siden av kroppen som ikke lenger er synlig. Dette vil bidra til å rydde opp vårt syn på roboten.

Bruk Selection Tool (V) for å velge den nære side av roboten (ben og kropp). Bytt til Direct Selection Tool (A) og dra på siden av kroppen ved et hjørne for å stille opp med tilsvarende hjørne på forsiden.

Nå lage en kopi av den siden (Ctrl + C, Ctrl + V) og dra som kopi til den andre siden av roboten ved hjelp av samme metode for å justere punkter (se venstre side av bildet).

Å trekke i toppen av kroppen, bytte til disposisjonsvisning ved hjelp av Ctrl + Y og bruke Pen Tool (P) for å koble de fire poeng på toppen av kroppen (på samme måte som vi gjorde toppen av hodet). Slå visningen tilbake ved å trykke Ctrl + Y igjen.

Trinn 12

Vi overvåker nå kommer til å fokusere på beina. Visningen side av benet er allerede på plass, slik at vi kan bruke den som en guide for forsiden. Bruk Direct Selection Tool (A) for å velge punkter i par, kan vi flytte figurene til å stille opp med sidene. Bruk Shift-klikk for å velge to punkter på en gang, og drar dem til å stille opp med siden av beinet. De smarte guider vil hjelpe deg å stille opp poengene nøyaktig.

Når du er ferdig ett ben, bruker Selection Tool (V) for å velge alle former og lage en kopi (Ctrl + C, Ctrl + V). Plasser den nye kopien som det andre benet på roboten. Nå trykke Ctrl + Shift + [for å flytte dette beinet til det nederste laget, slik at det er bak roboten kropp. Slett ubrukte figurer til å rydde opp i bildet.

Trinn 13

På dette punktet kroppen av roboten skal være komplett, og vi kan gå videre til armene.

Først må en kopi av roboten og gruppe hode og kropp separat. Endre strøkfargen til grå. Isolere de ulike arm former og SSR dem inn i front- og sidevisninger

Armen består av fire deler:.. Skulderen, overarmen, underarmen, og den klo

Vi vil begynne ved å arbeide på underarmen, som det er lettest å manipulere. Linje front- og side former av armene opp med den grå legemet og hverandre. Juster punktene på siden av underarmen til å stille opp med fronten, og pass på å velge punktene i par for å opprettholde perspektiv.

Bruk Pen Tool (P) for å fylle i resten av underarmen . For dette trinnet, hjelper det å lage kopier av figurer å bruke som guider (som vi gjorde med hodet og kroppen).

Trinn 14

Den vanskelige delen av armene er sylinderen tilkobling skulder til robotens underarm. For å gjøre denne formen vi vil starte med å tegne en sirkel og lage en kopi av det (Ctrl + C, Ctrl + V). Nå SSR en sirkel som skal passe inn på den side av roboten, og SSR den andre til å passe på toppen av underarmen. Posisjon disse sirklene på skulderen og toppen av underarmen som vist.

Bruk Pen Tool (P) for å lage en ny figur som ser ut som det ville koble de to sirklene (som vist). Velg de to sirklene og formen forbinder dem med Selection Tool (V) og klikk Pathfinder> Legg til Shape-området, deretter Utvid å flette dem inn i en form.

Bruk Ctrl + [og Ctrl +] til riktig posisjon denne formen bak ryggen på underarmen

Trinn 15

Å gjøre det hul sylinder for skulderen krever at vi skal dele den i to deler. den delen foran armen og del bak det.

Start med å lage en kopi av skulderen sirkel på siden av robotens kropp (Ctrl + C, Ctrl + F). Ved hjelp av guidene (trykk Ctrl +; for å slå dem på), drar den andre sirkelen ut litt for å gi sylinderen skulder litt dybde (se diagrammet nedenfor)

Bruk Legg Anchor Point Tool (+) til. legge til punkter på kantene av de to sirklene (se diagram, legge til punkter på de røde sirklene). Nå lage en kopi av figurene. Ett eksemplar av vil bli brukt til å lage forsiden av skulderen, og den andre til å gjøre det igjen.

Bruk Direct Selection Tool (A) for å slette unødvendige poeng på begge eksemplarene til å ende opp med to linjer i hvert enkelt tilfelle. Bruk Pen Tool (P) for å koble til poeng. Omplassere bitene sammen, og der har du det: a. Front og en back for skuld

Trinn 16

Nå kan vi gjøre robotens klo hjelp av en teknikk som ligner på hvordan vi har gjort det skulder.

Ta SSR'd klore former og line dem opp på skinnene. Når kø former, bare plukke noen poeng på én form, linje den opp med en snor, og deretter sørge for å plassere tilsvarende punkt på det andre objektet på samme sted. Her har jeg valgt øverst i venstre hjørne av plassen på hver klo som referansepunkt, og som du kan se de begge er plassert på samme guide linje.

Lag en kopi av forsiden av klo og bruke den side som et bredde-referanse (som vist nedenfor) for å posisjonere denne kopien som på baksiden av gjenstanden.

Etter at vi har brukt den fra siden av klo for å bestemme bredden, formen er ikke lenger nødvendig, og vi kan slette den.

Vi begynner å fylle i sentralen ved å gjøre den grønne form i gjenstanden under. Lag en kopi av de to halvdelene av klo, og slette alle de punktene som ikke vil gjøre opp på siden av klo bruke Direct Selection Tool (A) og på slettetasten. Deretter bruker Pen Tool (P) for å koble de to halvdelene. Nå kan vi posisjonere siden av klo tilbake til vårt formål.

Ved hjelp av den samme teknikken vi kan fylle på innsiden av klo (lilla), og for fullstendighet vi kan gjøre den nederste kanten også (blå ).

Trinn 17

Med den fremre armen gjort, kan vi bruke de samme metodene for å konstruere robotens andre armen.

De fleste av denne armen kan kopieres direkte fra den første armen, og forskjøvet med Direct Selection Tool. Robotens hånd, for eksempel, er helt identiske, så vi trenger ikke å tegne den. Husker at isometrisk objekter er av samme størrelse uansett hvor langt de er fra betrakteren, i motsetning sant perspektiv, så langt armlengdes klo vil være samme størrelse som den nære en.

Trinn 18

Det siste vi kommer til å legge til roboten er hans ryggsekk. Jeg liker å lage en kopi av alt så langt, konsern hver arm uavhengig (Ctrl + G), og juster strøkfargen til å bli lysere. På den måten kan vi holde hver kroppsdel ​​separat for fremtidige endringer (som å lage den bakfra, eller hvis vi ønsket å animere roboten), og det hjelper deg å se hva du jobber med akkurat nå.

Bruk SSR metoden på sideriss av ryggsekken vi tegnet tidligere, og deretter plassere det på siden av roboten. Siden sekken er buet, trenger det ikke mye arbeid å gjøre det passer inn i isometrisk perspektiv. Hvis det ikke ser helt riktig, bruker Direct Selection Tool (A) for å justere de enkelte punktene.

Bruk Pen Tool (P) å trekke foran stroppen over roboten skulder.

Her har jeg flyttet hodet og fremre arm ut av veien slik at vi lett kan se hvor sekken kommer til å gå. Når ryggsekken som er trukket, kan vi legge disse formene tilbake.

Trinn 19

Og det er han! Å forene ham litt, velger hele roboten og endre strekbredde til én verdi. I dette tilfellet valgte jeg en pt, men dette avhenger av hvor stor du har tegnet din sprite.

Denne roboten er nå klar for noen farger!

Trinn 20

Det første trinnet er å endre strøkfargen til noe mindre harde deretter svart. Her har jeg valgt mørk grå, men avhengig av sprite det kan være lurt å blande i litt farge.

Det neste vi kan fylle noen basisfarger. Bruk Selection Tool (V) for å velge hele robot (unntatt øynene), og endre fyllfargen til grå.

Velg øyne, munn, knapp, og skjermen og endre disse til å ha en fyllfarge av hvitt. Farge ryggsekk oransje, og gjøre knappen rødt.

Trinn 21

Det neste trinnet er å velge en retning for lyskilden. Jeg har bestemt meg for å gjøre det kommer fra venstre, så ansikt-til roboten.

shading herfra videre kan være så detaljert eller så enkelt som du vil. Jeg har valgt å holde shading relativt enkel, og ignorere det faktum at enkelte objekter kan kaste skygger på andre. Dette vil gjøre det enklere å bruke sprite i animasjoner senere.

Start med å velge alle former som vil være i skyggen og endre deres fyllfarge til en mørkere grå. Deretter velger du alle fasonger som vil være direkte i lys og fylle dem med en lysere grå. For de flate former, er dette enkelt, men skyggene på buede overflater vil kreve mer arbeid.

Trinn 22

For å illustrere hvordan vi kan skygge de buede flater, vurdere kroppen av sekken .

Kopier denne formen, og lim-i-front ved hjelp av Ctrl + C, Ctrl + F. Nå kvitte seg med hjerneslag, og angi fyllfarge til en mørk oransje.

Nå vi kan bruke Delete Anchor Point Tool (-) for å trimme ned denne formen, og deretter Direct Selection Tool (A) for å justere den i form av en skygge. Å fikse slag, gjør vi en annen kopi av sekken kropp og lim den inn i front. Fjern påfyllings på denne nye formen, og flytte den fremover (Ctrl +]) for å sette den foran skyggen form.

Bruk denne metoden til å lage skygger for resten av sekken, så vel som for de andre buede overflater som sylindrene i armene, og antennen.

Trinn 23

For å gi roboten litt mer karakter, kan vi legge til noen høydepunkter til sine ledd og føtter.

Her har jeg laget håndledd og føtter en mørkere grå, og albuene og føtter lysere. Jeg har også gjort øynene litt mørkere for å gjøre dem skiller seg ut. Husk lyskilden når du legger til flere farger, som du trenger for å holde shading konsekvent.

Trinn 24

For å gjøre roboten skiller seg ut litt mer, vi kan gi ham en litt tykkere disposisjon.

Velg hele roboten, Kopier og lim i Front (Ctrl + C, Ctrl + F). Klikk Pathfinder> Legg til Shape-området, deretter Utvid for å få et enkelt kombinert form. Endre fyllfargen til hvit, slik at vi kan tydelig den nye formen.

Denne formen vil trolig være litt rotete (forårsaket av det faktum at enkelte former ikke er perfekt justert), slik at vi kan bruke Fjern Anchor Point Tool (-) for å rydde opp litt ved å fjerne de stygge poeng. Fokuser på å sørge for at det ytterste kantene er jevne, som det vil være alt kan vi se når vi er ferdige.

Nå bruker Strek vinduet for å endre hjørne typen til å være midt alternativet, " Round Join ". Dette vil gjøre hjørnene glatt. Øke hjerneslag Bredden på denne formen for 3pt.

Velg omrisset formen og trykk Ctrl + Shift + [for å sende denne formen til svært tilbake.

Her er et bilde av de to robotene side-ved-side: en med omrisset og en uten. Omrisset forener robotens form, og vil hjelpe ham skille seg ut mot en mer kompleks bakgrunn.

Trinn 25

La oss gi roboten noe å stå på. Siden han kommer til å bli brukt på en isometrisk spillbrettet, synes et spill flis som et godt valg. Lage en firkant og deretter SSR det å være flat som toppen av en kube. Plasser flis under robot ved hjelp av Ctrl + Shift + [for å flytte den til svært tilbake.

Trinn 26

I det siste trinnet vil vi gi roboten en enkel skygge. Lag en sirkel, og SSR det å være flat som flis. Endre fyllfarge til mørk grå, og deretter sette sin Opacity til å være ca 15%. Plasser skyggen under alt unntatt fliser (Ctrl + Shift + [, deretter Ctrl +] for å flytte den opp ett nivå)

Konklusjon

Og der vi har det.: En søt isometrisk robot . Bruk disse teknikkene for å gjøre isometriske sprites for spill, for tekniske diagrammer, eller for å legge til en 3D-punch til din design. Anmeldelser