Share
Er zijn maar weinig projecten leuker dan videogamekarakterconcepten uit te tekenen. De kleuren, de kleding en het totale ontwerp hebben weinig beperkingen voor de concept artist. We zullen een vectorkarakter tekenen dat klaar is om te animeren in Adobe Illustrator en meer in deze driedelige zelfstudie met de After Effects en Game Development-teams op Tuts+.
Onze Kandi Runner-serie is verspreid over drie tutorials. In dit deel leer je hoe je de sprite van het vectorspel maakt, maar bekijk ook de andere twee handleidingen in de serie.
Als je deze zelfstudie wilt volgen, kun je de sketch downloaden.
Onze sprite van het spel zal in profiel zijn zodat de animatiecomponent van de cross-over een loopcyclus kan bevatten. Als zodanig heb ik mijn ontwerp geschetst in Adobe Photoshop CC. Beginnend met snelle lijnen die de algehele stijl van het personage en verhoudingen aangeven en eindigen met een donkerder, geïnkt ontwerp, klaar voor de behandeling met Adobe Illustrator. Merk op dat de verhoudingen in deze schets een beetje veranderen tijdens de zelfstudie. Het gemak van schalen zorgt voor snelle veranderingen in hoofd- en lichaamslengte, in vergelijking met het volledig hertekenen.
Voor het hoofd ben ik begonnen met een cirkel getekend met de Ellipse Tool (L). Het onderste gedeelte van het gezicht werd getraceerd vanuit de schets met de Pen gereedschap (P). Verenigen beide vormen in verkenner wanneer u tevreden bent met het profiel dat u hebt gemaakt.
Het haar wordt gedaan in grote, kleurrijke delen. Ik wilde dat ze absoluut massieve dreadlock-achtige haren had (bijna als een lappenpop). Gebruik de Pen gereedschap om elke haarsectie te tekenen. Tien worden hier in totaal getekend en zullen uiteindelijk afzonderlijk worden afgescheiden en afzonderlijk worden geschetst zodat ze geanimeerd kunnen worden. In de tussentijd, Groep (Control-G) je haarstukjes samen.
Zichtbaar maken het gezicht in de Lagen paneel en zorg ervoor dat je tevreden bent met de manier waarop het haar rond het hoofd hangt, en dat het het gezicht niet verdoezelt, wat later zal worden getekend.
Bewegen op de benen en romp. Begin met de onderkant van het dijbeen en het karakter. Ze draagt een of ander pantser (ik vermoedde dat dit een soort van actie-puzzelgame was, misschien racet ze met een vliegend voertuig en heeft het pantser nodig om haar te beschermen), en daarom is het een paarsgrijze kleur in plaats van gewoon grijs. Voor nu is het lijfje van de outfit felroze. Later maak ik deze groenblauw. Deze drie stukken vormen de romp en de dij en stoppen bij de knie.
Teken voor het onderbeen en de knie een kniestuk (zoals een gehoekte halve cirkel) en volg de schets voor de omtrek van het kuitbeen en de onderkant van de voet. Ik heb het beengedeelte aan de bovenkant van de voet gestopt met het idee van het kostuum met oude spats (denk aan modeontwerp uit de jaren 1920). Het onderste voetstuk heeft een aparte vorm.
Trek voor het achterste deel van de schoen / schoen een ellips met de Ellipse Tool, selecteer het pootstuk en gebruik de Shape Builder Tool, selecteer het gedeelte van de ellips dat zich buiten de voet bevindt. Deselecteer en verwijder dit extra stuk.
Aan de linkerkant zie je het personage tot nu toe. Ze heeft een kostuum, maar heeft een nek, borst en arm nodig. Volg de schets en teken de nek en een deel van de borst. Plaats dit achter de rompstukken in de Lagen paneel.
Voor de arm ben ik begonnen met een ellips (ter aanduiding van de schouder) en heb ik een arm toegevoegd die naar de elleboog inspringt. Als je dit personage animeert, wil je misschien de biceps van de onderarm scheiden voor meer beweging. De arm stopt iets voorbij de pols waar ik een vorm heb getekend die de palm van de hand aangeeft.
Voor de hand heb ik de armvormen verborgen zodat we ons kunnen concentreren op het toevoegen van vingers aan de palm. De ... gebruiken Pen gereedschap, Ik heb een afgeronde, rechthoekige vorm getekend (deze heeft echter een vlakke zijde en een gebogen kant) voor de duim. Gebruik de Afgeronde rechthoek-tool voor de andere vingers. Ik schopte de pink naar buiten zodat de hand er niet te stijf uitziet.
Voordat we naar contouren gaan en het personage in de schaduw stellen, laten we eerst een paar bewerkingen en toevoegingen uitvoeren. Selecteer de romp- en pootstukken, Groep samen voor de tijd, en een beetje groter. Zie hieronder voor de vergelijking tussen het vergrote lichaam en het kleinere exemplaar. Op deze manier heeft ze een grote romp en langere benen om haar grote (en waarschijnlijk zware) hoofd uit te balanceren.
De achterkant van het personage is een beetje klein en oppervlakkig, dus ik heb het meest rechtse ankerpunt uit de oorspronkelijke vorm getrokken. Bovendien heb ik een shirt met hoge kraag aan haar toegevoegd om te dragen door over de borstvorm te tekenen met een donker paars-grijze vorm, waarbij zowel de borst als de shirtvorm worden geselecteerd, en met de Shape Builder Tool het niet-kruisende deel van de hemdvorm selecteren. Deselecteer beide en verwijder de overtollige hemdstukken. Plaats het shirt boven het ruitje in de Lagen paneel.
In plaats van een volledige handschoen, heb ik gekozen voor een die een lagere polslijn heeft. Wijzig hiervoor de kleur van de huidige handschoen in de huidskleur van uw personage. Dan, Kopiëren (Control-C) en Plakken (Control-V) de hand, lijn deze uit met de originele en teken een cirkel met de Ellipse Tool. Selecteer de nieuwe hand en de ellips en Minus voorkant in verkenner.
Laten we een paar harten bouwen. Teken een cirkel met de Ellipse Tool en gebruik de Direct selectie gereedschap (A), trek het onderste ankerpunt naar beneden zodat je een hart half hebt. Kopiëren en Pasta het hart half en draai het over een verticale as. Eenmaal uitgelijnd met het midden, Verenigen in verkenner.
Kopiëren en Pasta drie harten langs de dij van het personage. Deze moeten huidkleurig zijn. Voeg ook een kleiner, omgedraaid hart toe aan de handschoen.
Voor het oog, focus op vier stukken: top wimpers en onderste wimpers, een witte traan-druppel vorm voor de zijkant van het oog, en een dunne ellips voor de iris. Allen werden getekend met de Pen gereedschap, behalve de iris die werd gedaan met de Ellipse Tool.
De andere gelaatskenmerken die nodig zijn, zijn een wenkbrauw, bovenlip (zowel donkerblauw), neusgat en neusplooi (één vorm), en een onderlip (dezelfde kleur als het neusgat). Je kunt desgewenst meer details op het gezicht geven, maar dit geeft haar voldoende functies om een bepaald personage te creëren zonder het algemene ontwerp te overheersen.
Voor hoofd- en haaromtrekken, als je dit ontwerp aan het animeren bent, wil je het hoofd en elk haar stuk apart schetsen. Voor dit deel van de tutorial heb ik het onderstaande proces getoond alsof je het hoofd en het haar samenhoudt als één stuk.
Groep samen de hoofd- en haargroepen, Kopiëren en Pasta, Verenigen in verkenner, en richten met de hoofdkop / haargroep en plaats deze achter de hoofd / haargroep in de Lagen paneel. Herhaal het proces voor de haargroep (zonder hoofd). Elke vorm van een contour moet een Beroerte gewicht van 1 tot 2 punten.
Voor de schaduw die door haar massieve haarstijl wordt geworpen, teken een vorm die de contouren van haar gezicht volgt en zich uitstrekt tussen de neusbrug en de zijkant van het gezicht. Selecteer de kop en de schaduwvorm en gebruik de Shape Builder Tool, selecteer het deel van de schaduwvorm dat niet met de kop snijdt. Deselecteer beide en verwijder de niet-kruisende vorm. Plaats de schaduw boven het hoofd, maar onder de gelaatstrekken in de Lagen.
Voor het oor is het een soort van afgeronde hoofdletter "D". De binnenkant van het oor kan een "C" -vorm, "S" of een rare kronkel hebben zoals degene die ik heb getekend. Groep ze samen en plaats het onder het haar, boven het hoofd en gezicht schaduw stukken.
Voordat we het haar in de schaduw stellen, schets je elk deel van het haar. U kunt een dun gewogen streep aan elke sectie toevoegen of het proces volgen vanaf sectie zes, stap twee voor elk deel van het haar.
Voor de schaduwen op het haar moet je elke haarsectie opnieuw kleuren als een donkerdere versie van die tint. Dan, met behulp van de Pen gereedschap, teken opvallende vormen aan de buitenranden van elk haarlok. Verwijderen met de Shape Builder Tool, zoals eerder gedaan.
Omdat het grootste deel van de borst niet meer wordt weergegeven en er veel haar rond de nek zit, verkleint u het borststuk opnieuw naar de eerder gebruikte mauve schaduw. Teken een vorm aan de rechterkant van de schouder. We zullen deze schaduw gebruiken als een gids voor de schaduwen van het andere lichaam in termen van locatie. Selecteer de schouder en de schaduwvorm, gebruik de Shape Builder Tool om het niet-kruisende gedeelte van de schaduwvorm te selecteren, de selectie ongedaan te maken en te verwijderen voor een schone schaduw op de schouder. Plaats de schaduwvorm onder de kleding in de Lagen paneel.
De schaduw op de arm volgt dezelfde lijn als die op de schouder en inspringt naar de elleboog. Als je arm uit twee groepen bestaat, kun je de twee delen van elkaar scheiden door ze te selecteren met de Shape Builder Tool en de geselecteerde hoofdarmdelen. Volg dezelfde stappen voor de schaduwen op de handschoen.
Ik heb wat strepen aan de bovenkant van de mouw toegevoegd met de Pen gereedschap ingesteld als een 0.25pt slaggewicht. Uitbreiden elke streep erin Voorwerp, en verwijder de delen van de strepen die de bovenkant van de mouw overlappen en de lijn die over de mouw is getrokken met de Shape Builder Tool.
De schaduw op de romp is een donker paars grijs met de ondoorzichtigheid op 40%. Aan de linkerkant van de romp werden ook hooglichtvormen toegevoegd. Omdat dit personage cel-gearceerd is, worden er geen verlopen gebruikt, maar als je een complexer ontwerp wilt, ga ervoor!
Ga door met het tekenen van schaduwvormen op het onderlichaam. Begin met de dij (de andere lichaamsdelen zijn verborgen in de Lagen paneel) en volg de curve van het been. Teken transparante schaduwvormen voor elk hart. Verwijder niet-kruisende delen van de schaduw met de Shape Builder Tool. Voeg ook contouren toe voor elk hart.
Voor het onderbeen wilde ik felroze spats toevoegen. De vorm begint in de rug en heeft een grote dramatische boog naar de voorkant van de voet. Verwijder het niet-kruisende deel van de voorkant van de voet / poot (laat het achterste deel achter, omdat het deel uitmaakt van het ontwerp). Voeg wat donkerroze dartvormen toe voor een geplooid uiterlijk op de slobkousen. Teken schaduwen en hooglichten op het onderbeen, vergelijkbaar met die van de dij en de romp.
Omdat dit geanimeerd zal zijn, moet ik een extra been en arm toevoegen. Kopiëren en Pasta de armgroep en de beengroep. Verwijder de hoesdetails, schaduwen en hooglichten en kleur alles opnieuw in de schaduwkleur.
Voor een extra hand, deze wordt gebalde tot een vuist, Kopiëren en Pasta de eerste hand en Ungroup de onderdelen. Verplaats het handschoengedeelte naar de zijkant en vorm de duim opnieuw om een kleine bobbel aan de linkerkant te zijn. Beweeg de vingers in de palm.
Verenigen de nieuwe hand in verkenner, en maak een nieuwe handschoen op dezelfde manier waarop de eerste werd getrokken. Voeg een hart toe met schaduw (ik heb dezelfde gebruikt, net aangepast voor minder ruimte), lijn geeft het einde van de handschoen aan en schaduw verbindt met de schaduw op de hand. Voeg een omtrek toe die overeenkomt met die van de arm.
Voor de hand aan de andere kant, Kopiëren en Pasta de vuist, verwijder de details van de handschoen en kleur opnieuw in tot een donkere wintertaling. De ... gebruiken Afgeronde rechthoek-tool teken kleine vingers en een duim met een 0.75pt slaggewicht in dezelfde donkere kleur gebruikt voor andere contouren.
Eindelijk is de sprite klaar om te gaan. Elke groep die tijdens animatie wordt verplaatst (of kan worden verplaatst), is gegroepeerd en gelabeld voor organisatie in de Lagen paneel. Ik heb een achtergrond en een extra overzicht toegevoegd voor elke component voor de uiteindelijke afbeelding, maar deze is niet aanwezig voor de volgende twee zelfstudies. Ik hoop dat je het leuk vond om deze cel-shaded game sprite met mij te tekenen en door te gaan naar de volgende twee secties van dit project.
Accentsconagua