Det finns få projekt roligare än att skriva ut spelspelskoncept. Färgerna, kläderna och den övergripande designen har få begränsningar för konceptkonstnären. Vi ska rita en vektorkaraktär redo för animering i Adobe Illustrator och mer i denna tre delstudie med After Effects and Game Development-teamen på Tuts+.
Vår Kandi Runner-serie spreds över tre handledning. I den här delen kommer du att lära dig hur du skapar vektorspelet, men du bör också kolla in de andra två handledningarna i serien också.
Om du vill följa med den här handledningen kan du hämta skissen.
Vårt sprite kommer att vara i profil så att animationskomponenten i korsningen kan innehålla en promenadcykel. Som sådan har jag skissat ut min design i Adobe Photoshop CC. Börja med snabba linjer som anger den övergripande stilen på karaktären och proportionerna och slutar med en mörkare, bläckig design, redo för Adobe Illustrator-behandlingen. Observera att proportionerna i denna skiss ändras lite under handledningen. Den enkla skalningen möjliggör snabba förändringar i huvud och kroppsstorlek, jämfört med att det omfördelas helt.
För huvudet har jag börjat med en cirkel ritad med Ellipsverktyg (L). Den nedre ansiktsdelen spårades från skissen med Penverktyg (P). Förena båda formerna i Stigfinnare när du är nöjd med den profil du har skapat.
Håret är gjort i stora, färgglada delar. Jag ville att hon skulle ha absolut massivt dreadlock-liknande hår (nästan som en trasa docka). Använd Penverktyg att rita varje hårsektion. Tio är ritade totalt här, och kommer så småningom att separeras ut och skisseras individuellt så att de kan animeras. Sålänge, Grupp (Control-G) dina hår bitar tillsammans.
Ta fram ansiktet i Skikten panel och se till att du är nöjd med hur håret hänger runt huvudet, liksom att det inte döljer ansiktet, vilket kommer att dras senare.
Rör på benen och torso. Börja med låret och karaktärens botten. Hon har pansar av något slag (jag trodde att det här skulle vara ett slags action-pusselspel. Kanske köper hon ett flygande fordon och kräver rustning för att skydda henne), och som sådan är det en lila grå färg, snarare än vanlig grå. För nu är klädseln på outfiten ljusrosa. Senare ska jag göra denna kricka. Dessa tre delar utgör torso och lår, stoppar vid knäet.
För nedre ben och knä rita ett knästycke (som en vinklad halvcirkel) och följ skissen för kalkens och botten av foten. Jag har stoppat bendelen högst upp på foten med idén om kostym som innehåller gammaldags spetsar (tänk 1920-talets modedesign). Bottenfotstycket är en separat form.
För den bakre delen av bagaget / skogen ritar du en ellips med Ellipseverktyg, välj benstycket och använd Formverktygsverktyg, välj den del av ellipsen som ligger utanför foten. Avmarkera och ta bort denna extra bit.
På vänster sida ser du tecknet hittills. Hon har en kostym, men behöver en nacke, bröst och arm. Följ skissen och dra nacken och en del av bröstet. Placera detta bakom torsobitarna i Skikten panel.
För armen har jag börjat med en ellips (betecknar axeln), och har lagt en arm som indrag i armbågen. Om du animerar denna karaktär kanske du vill separera bicep från underarmen för mer rörelse. Armenen stannar lite förbi handleden där jag har ritat en form som indikerar handflatan.
För handen har jag gömt armformerna så att vi kan fokusera på att lägga fingrar i handflatan. Använda Penverktyg, Jag har ritat en rundad rektangelliknande form (den här har en platt sida och en böjd sida för tummen). Använd Rundad rektangelverktyg för de andra fingrarna. Jag sparkade pinky ut så att handen inte ser för styv ut.
Innan vi kommer att skissera och skygga karaktären, låt oss fokusera på några ändringar och tillägg först. Välj torso och benstycken, Grupp tillsammans för tillfället, och förstora lite. Se nedan för jämförelsen mellan den förstorade kroppen och den mindre. På så sätt har hon en stor torso och längre ben för att balansera ut sitt stora (och troligen tunga) huvud.
Karaktärens rygg är lite liten och grund, så jag har dragit ut den högra ankarpunkten från den ursprungliga formen. Dessutom tillade jag en höghalsad skjorta för att hon skulle ha på sig genom att dra över bröstformen med en mörk lila grå form och valde både bröstet och skjortans form och med Formverktygsverktyg välja den icke-skärande delen av skjortformen. Avmarkera båda och ta bort de överskjutande skjortorna. Placera skjortan ovanför kontrollstycket i Skikten panel.
I stället för en hel handske valde jag en som har en lägre handled. För att göra så ändrar du den aktuella handskens färg till din karaktärs hudton. Sedan, Kopiera (Control-C) och Klistra in (Control-V) handen, anpassa sig till den ursprungliga och rita en cirkel med Ellipseverktyg. Välj den nya handen och ellipsen och Minus Front i Stigfinnare.
Låt oss bygga några hjärtan. Rita en cirkel med Ellipseverktyg och använda Direktmarkeringsverktyg (A), dra ned den nedre ankarpunkten så att du har ett hjärtahalvtal. Kopia och Klistra hjärtat halvt och vänd det över en vertikal axel. En gång justerad till mitten, Förena i Stigfinnare.
Kopia och Klistra tre hjärtan längs karaktärens lår. Dessa bör vara hudfärgade. Lägg även till ett mindre, vänd hjärta i handsken.
För ögat, fokusera på fyra stycken: översta ögonfransar och nedre ögonfransar, en vit tårformningsform för sidan av ögat och en tunn ellipsa för irisen. Alla drogs med Penverktyg, förutom iris som gjordes med Ellipseverktyg.
De andra ansiktsegenskaper som behövs är en ögonbryn, överläpp (både mörkblå), näsborre och näsveck (en form) och en läpp (samma färg som näsborre). Du kan gå in i mer detaljer om ansiktet om du vill, men det ger henne tillräckligt med funktioner för att skapa lite karaktär utan att överväldiga den övergripande designen.
För huvudet och håret skisserar, om du animerar denna design, ska du skissa huvudet och varje hårbitar separat. För denna del av handledningen har jag visat processen nedan som om du håller huvudet och håret ihop som ett stycke.
Grupp tillsammans huvud och hårgrupper, Kopia och Klistra, Förena i Stigfinnare, och Justera med huvudhuvud / hårgrupp och placera den bakom huvudet / hårgruppen i Skikten panel. Upprepa processen för hårgruppen (sanshuvudet). Varje konturform ska ha en Slagvikt av 1 till 2 poäng.
För skuggan som kastas av hennes massiva frisyr, rita en form som följer kontur av ansiktet och sträcker sig mellan näsan och ansiktets sida. Välj huvudet och skuggformen och använd Formverktygsverktyg, välj den del av skuggformen som inte korsar huvudet. Avmarkera båda och radera den icke-skärande formen. Placera skuggan ovanför huvudet men under ansiktsfunktionerna i Skikten.
För örat är det en form av rundad huvud "D" form. Insidan av örat kan vara en "C" form, "S", eller en konstig squiggle som den jag har ritat. Grupp dem tillsammans och placera det under håret, ovanför huvudet och ansiktsskuggbitarna.
Innan vi kommer in i skuggning av håret, skissera varje sektion av hår. Du kan antingen lägga till ett tunt viktat slag till varje avsnitt, eller följ processen från avsnitt sex, steg två för varje hårsektion.
För skuggorna på håret, lita på varje hårsektion som en mörkare version av den nyansen. Sedan använder du Penverktyg, dra ut höjdpunkter på utsidan av varje hårlås. Ta bort med Formverktygsverktyg, som gjort tidigare.
Eftersom det mesta av bröstet inte syns längre, och det finns mycket hår runt halsen, löst bröstet till den skuggmuve som tidigare användes. Rita en form på höger sida av axeln. Vi använder denna skugga som en guide för de andra kroppsskuggorna när det gäller plats. Välj axeln och skuggformen, använd Formverktygsverktyg för att välja den icke-skärande delen av skuggformen, avmarkera och radera för en ren skugga på axeln. Placera skuggformen under kläderna i Skikten panel.
Skuggan på armen följer samma linje som den på axeln och indragna vid armbågen. Om din arm är i två grupper kan du skilja de två bitarna genom att välja dem med Formverktygsverktyg och de viktigaste armbitarna valdes. Följ samma steg för handskens skuggor.
Jag lade några ränder på toppen av ärmen med Penverktyg set som en 0,25pt slagvikt. Bygga ut varje rand i Objekt, och ta bort de delar av randarna som överlappar toppen av hylsan och linjen som dragits över hylsan med Formverktygsverktyg.
Skuggan på torso är en mörk lila grå med Opacitet på 40%. Höjdpunkter var tillagt även på vänster sida av torso. Eftersom denna karaktär är celskad, används inga gradienter, men om du vill ha en mer komplex design, gå till den!
Fortsätt dra i skuggform på underkroppen. Börja med låret (de övriga kroppsdelarna har varit gömda i Skikten panel) och följ benets kurva. Rita genomskinliga skuggformer för varje hjärta. Ta bort icke-skärande delar av skuggan med Formverktygsverktyg. Lägg också till konturer för varje hjärta.
För underbenet ville jag lägga till ljusa rosa spettar. Formen sparkar ut i ryggen och har en stor dramatisk båge ner till fotens framsida. Ta bort den icke-skärande delen från foten / benets framsida (lämna den på baksidan, eftersom den är en del av konstruktionen). Lägg till några mörkrosa dartformar för en plisserad look på spatsna. Rita skuggor och höjdpunkter på underbenet, liknar dem från lår och torso.
Eftersom detta kommer att animeras måste jag lägga till ett extra ben och arm. Kopia och Klistra armgruppen och bengruppen. Ta bort muffens detaljer, skuggor och höjdpunkter och lita på allt för att skugga färger.
För en extra hand, den här ballade upp i en knytnäve, Kopia och Klistra första hand och Dela upp komponenterna. Flytta handskdelen till sidan och omforma tummen för att vara en liten skott på vänster sida. Flytta fingrarna i handflatan.
Förena den nya handen i Stigfinnare, och skapa en ny handske på samma sätt som den första drogs. Lägg till ett hjärta med skugga (jag använde samma, just storlek för mindre utrymme), linje som anger handskens ände och skugga som ansluter till skuggan på handen. Lägg till en skiss som matchar den från armen.
För handen på andra sidan, Kopia och Klistra näven, ta bort handsken detaljer och återfärga till en mörk kricka. Använda Rundad rektangelverktyg rita små fingrar och en tumme med a 0.75pt slagvikt i samma mörka färg som används för andra konturer.
Äntligen är sprite redo att gå. Varje grupp som flyttar (eller kan flyttas) under animering grupperas och märks för organisation i Skikten panel. Jag har lagt till en bakgrund och en extra översikt över varje komponent för den slutliga bilden, men det kommer inte att vara närvarande för de följande två handledningarna. Jag hoppas att du trivdes med att dra denna celskadade spelsprite med mig och fortsätt vidare till nästa två delar av projektet.