Kandi Runner Lag en Klar-å-animere Vector Game Sprite

Det er få prosjekter morsommere enn å tegne tegneseriebegreper. Fargene, klærne og den overordnede designen har få begrensninger for konseptet. Vi skal tegne et vektorkarakter som er klar for animering i Adobe Illustrator og mer i denne tredelte opplæringen med Etter Effects and Game Development-teamene på Tuts+.


Lag Kandi Runner Game

Vår Kandi Runner-serie er spredt over tre opplæringsprogrammer. I denne delen lærer du hvordan du lager vektor-sprite, men du bør også sjekke ut de to andre opplæringsprogrammene i serien..

  • Slik animerer du en Vector Game Sprite Character Walk Cycle
  • Hvordan lage et Vector Character Side Scrolling Game ved hjelp av et Sprite Sheet

Truffet Rom å hoppe.

Tutorial Asset

Hvis du vil følge med denne opplæringen, kan du laste ned skissen.

  • sprite-sketch.zip

1. Forbered ditt design

Vårt sprite vil være i profil slik at animasjonskomponenten i krysset kan inneholde en turcykel. Som sådan har jeg skissert designet mitt i Adobe Photoshop CC. Starter med raske linjer som angir den overordnede stilen til tegnet og proporsjonene og slutter med en mørkere, blekket design, klar for Adobe Illustrator-behandlingen. Merk at proporsjonene i denne skissen endrer seg litt under opplæringen. Den enkle skaleringen gir mulige endringer i hode og kroppsstørrelse, sammenlignet med å fullføre den helt.



2. Tegn hodet og håret

Trinn 1

For hodet har jeg startet med en sirkel tegnet med Ellipseverktøyet (L). Den nedre ansiktsdelen ble sporet fra skissen med Pennverktøyet (P). Forene begge former i Pathfinder når du er fornøyd med profilen du har opprettet.


Steg 2

Håret er gjort i store, fargerike deler. Jeg ville ha henne til å ha absolutt massivt dreadlock-lignende hår (nesten som en ragdukke). Bruke Pennverktøy å tegne hvert hårseksjon. Ti er trukket totalt her, og vil etter hvert bli skilt ut og skissert individuelt slik at de kan animeres. I mellomtiden, Gruppe (Control-G) Hårstykkene dine sammen.


Trinn 3

Unhide ansiktet i lag panelet og sørg for at du er fornøyd med måten håret henger rundt hodet, så vel som at det ikke forvirrer ansiktet, som vil bli trukket senere.



3. Tegn ben og kropp

Trinn 1

Flytter på beina og torso. Begynn med lår og tegnets bunn. Hun har på seg en rustning av noe slag (jeg trodde dette var et slags action-puslespill. Kanskje hun kjører et flygende kjøretøy og krever rustning for å beskytte henne), og som sådan er det en lilla grå farge, i stedet for vanlig grå. For nå er armaturet til antrekket lys rosa. Senere skal jeg gjøre denne krigen. Disse tre delene utgjør torso og lår, stopper ved kneet.


Steg 2

For underben og kne, tegne et knelestykke (som en vinklet halvcirkel), og følg skissen for skissen til kalven og bunnen av foten. Jeg har stoppet benpartiet på toppen av foten med ideen om kostymen som inneholder gammeldags spott (tenk 1920-mote design). Det nederste fotstykket er en egen form.


Trinn 3

For baksiden av støvelen / skoen tegner du en ellipse med Ellipseverktøy, velg benstykket og bruk Form Builder Tool, velg delen av ellipsen som er utenfor foten. Fjern merket og slett dette ekstra stykket.



4. Tegn arm og hånd

Trinn 1

På venstre side ser du tegnet så langt. Hun har kostyme, men trenger hals, bryst og arm. Følg skissen og trek nakken og en del av brystet. Plasser dette bak torso brikkene i lag panel.


Steg 2

For armen har jeg begynt med en ellipse (betegner skulderen), og har lagt en arm som strekker seg i albuen. Hvis du animerer denne karakteren, vil du kanskje skille bicep fra underarmen for mer bevegelse. Armen stopper litt forbi håndleddet hvor jeg har tegnet en form som indikerer håndflaten.


Trinn 3

For hånden har jeg skjult armformene, slik at vi kan fokusere på å legge fingrene til håndflaten. Bruker Pennverktøy, Jeg har tegnet en avrundet rektangulær form (denne har en flat side og en buet side, skjønt) for tommelen. Bruke Avrundet rektangelverktøy for de andre fingrene. Jeg sparket pinky ut slik at hånden ikke ser for stiv ut.



5. Kroppsredigeringer og tillegg

Trinn 1

Før vi kommer til å skissere og skygge tegnet, la oss fokusere på noen endringer og tillegg først. Velg torso og benstykker, Gruppe sammen for tiden, og forstørre litt. Se nedenfor for sammenligningen mellom den utvidede kroppen og den mindre. På denne måten har hun en stor torso og lengre ben for å balansere ut sitt store (og sannsynligvis tunge) hode.


Steg 2

Karakterens rygg er litt liten og grunne, så jeg har trukket ut det høyre ankerpunktet fra den opprinnelige formen. I tillegg lagde jeg en høyt collared skjorte for henne å bære ved å tegne over brystet form med en mørk lilla grå form, velge både brystet og skjorten form, og med Form Builder Tool velge den ikke-skjærende delen av skjorteformen. Fjern merkene for begge deler og slett overskuddstykkene. Legg skjorten over kontrollstykket i lag panel.


Trinn 3

I stedet for en full hanske valgte jeg en som har en lavere håndleddslinje. For å gjøre det, endre fargen på gjeldende hanske til karakteren din hudtone. Deretter, Kopier (Control-C) og Lim inn (Control-V) hånden, juster med den opprinnelige, og trekk en sirkel med Ellipseverktøy. Velg den nye hånden og ellipsen og Minus Front i Pathfinder.


Trinn 4

La oss bygge noen hjerter. Tegn en sirkel med Ellipseverktøy og bruke Direkte utvalgsverktøy (A), trekk ned nedre ankerpunktet ned, slik at du har ett hjertehalvdel. Kopiere og Lim inn hjertet halvparten, og vri det over en vertikal akse. En gang justert til sentrum, Forene i Pathfinder.


Trinn 5

Kopiere og Lim inn tre hjerter langs karakterens lår. Disse skal være hudfarget. Legg også et mindre, vendt hjerte til hansken også.



6. Opprett ansiktsdetaljer

Trinn 1

For øyet fokuserer du på fire stykker: øvre visker og nedre visker, en hvit tåreform for øyets side og en tynn ellipse for iris. Alle ble tegnet med Pennverktøy, bortsett fra iris som ble gjort med Ellipseverktøy.

De andre ansiktsegenskapene som trengs, er et øyenbryn, toppleppe (både mørkblå), nesebor og nesekapsel (en form) og en underleppe (samme farge som neseboret). Du kan gå inn i mer detalj på ansiktet hvis du vil, men dette gir henne nok funksjoner for å skape noe tegn uten å overvelde den overordnede designen.


Steg 2

For hodet og håret skisserer, hvis du animerer dette designet, vil du ha en oversikt over hodet og hvert hårstykke separat. For denne delen av opplæringen har jeg vist prosessen under som om du holder hodet og håret sammen som ett stykke.

Gruppe sammen hodet og hårgruppene, Kopiere og Lim inn, Forene i Pathfinder, og Rette inn med hovedhodet / hårgruppen og legg det bak hodet / hårgruppen i lag panel. Gjenta prosessen for hårgruppen (sans head). Hver disposisjon skal ha en Stroke Weight av 1 til 2 poeng.


Trinn 3

For skyggen kastet av hennes massive frisyre, tegne en form som følger konturen av ansiktet og strekker seg mellom nesebroen og ansiktets side. Velg hodet og skyggeformen, og bruk Form Builder Tool, velg delen av skyggeformen som ikke krysser med hodet. Fjern merket for begge deler og slett den ikke-skjærende formen. Plasser skyggen over hodet, men under ansiktsfunksjonene i lag.



7. Hodet og hårdetaljer

Trinn 1

For øret er det slags en avrundet hovedform "D" form. Innsiden av øret kan være en "C" form, "S", eller en merkelig sniggle som den jeg har tegnet. Gruppe dem sammen og legg det under håret over hodet og ansiktsskyggen.


Steg 2

Før vi kommer inn i skygge håret, skisser hver del av håret. Du kan enten legge til et tynt vektet slag til hver seksjon, eller følg prosessen fra seksjonen, trinn to for hver del av håret.


Trinn 3

For skyggene på håret, løst hver hårseksjon som en mørkere versjon av den fargen. Deretter bruker du Pennverktøy, Tegn høydefigur på utsiden av hver hårlås. Slett med Form Builder Tool, som gjort tidligere.



8. Legg til kroppsskygger

Trinn 1

Siden det meste av brystet ikke vises lenger, og det er mye hår rundt halsen, løst bryststykket til skyggemauven som tidligere ble brukt. Tegn en form på høyre side av skulderen. Vi bruker denne skyggen som en veiledning for de andre kroppsskyggene når det gjelder plassering. Velg skulderen og skyggeformen, bruk Form Builder Tool for å velge den ikke-skjærende delen av skyggeformen, avmarkere og slette for en ren skygge på skulderen. Plasser skyggeformen under klærne i lag panel.


Steg 2

Skyggen på armen følger samme linje som den på skulderen og leddene på albuen. Hvis armen er i to grupper, kan du skille de to stykkene ved å velge dem med Form Builder Tool og hovedarmbitene valgt. Følg de samme trinnene for skyggene på hansken.


Trinn 3

Jeg la noen striper på toppen av ermet med Pennverktøy sett som en 0,25pt slagvekt. Utvide hver stripe i Gjenstand, og slett delene av stripene som overlapper toppen av hylsen og linjen trukket over hylsen med Form Builder Tool.


Trinn 4

Skyggen på torso er en mørk lilla grå med opacity40%. Fremhevende former ble lagt til venstre side av torso også. Siden denne figuren er skyggelagt, brukes ingen gradienter, men hvis du vil ha en mer komplisert design, gå for det!



9. Skygger på underkroppen

Trinn 1

Fortsett å tegne skyggeformer på underkroppen. Start med låret (de andre kroppsdelene har blitt skjult i lag panel) og følg kurven på benet. Tegn gjennomsiktige skyggeformer for hvert hjerte. Slett ikke-skjærende deler av skyggen med Form Builder Tool. Legg til skisser for hvert hjerte også.


Steg 2

For underbenet ønsket jeg å legge til lyserøde spott. Formen sparker ut i ryggen og har en stor, dramatisk lysbue ned til foten. Fjern den ikke-skjærende delen fra forsiden av foten / benet (la den være på baksiden, siden den er en del av designet). Legg til noen mørkerosa dartformer for et plissert utseende på spottene. Tegn skygger og høydepunkter på underbenet, ligner dem fra lår og torso.


Trinn 3

Siden dette vil bli animert, må jeg legge til et ekstra ben og arm. Kopiere og Lim inn armgruppen og bengruppen. Slett muffedetaljer, skygger og høydepunkter, og tilbakekall alt til skyggefarger.



10. Lag en ekstra hånd

Trinn 1

For en ekstra hånd, er denne en balled opp i en knyttneve, Kopiere og Lim inn den første hånden og Del opp gruppe komponentene. Flytt hanskepartiet til siden og omform tommelen til å være en liten støt på venstre side. Flytt fingrene inn i håndflaten.


Steg 2

Forene den nye hånden inn Pathfinder, og lag en ny hanske på samme måte som den første ble tegnet. Legg til et hjerte med skygge (jeg brukte den samme, bare resized for mindre plass), linje som betegner slutten av hansken, og skyggen kobles til skyggen på hånden. Legg til en oversikt for å matche den fra armen.


Trinn 3

For hånden på den andre siden, Kopiere og Lim inn knyttneve, slett hanskedetaljer og tilbakekalle til en mørk blågrønn. Bruker Avrundet rektangelverktøy Tegn små fingre og en tommel med a 0,75pt slagvekt i samme mørke farge som brukes til andre konturer.



Nå er du klar for handling!

Endelig er sprite klar til å gå. Hver gruppe som vil flytte (eller kan flyttes) under animasjon grupperes og merkes for organisasjon i lag panel. Jeg har lagt til en bakgrunn og ytterligere oversikt over hver komponent for det endelige bildet, men det vil ikke være til stede for de neste to opplæringsprogrammene. Jeg håper du likte å tegne dette cel-skyggespillet med meg og fortsette videre til de neste to delene av dette prosjektet.