Advertisement
Animation

Kandi Runner: Create a Ready-to-Animate Vector Game Sprite

by

There are few projects more fun than drawing out video game character concepts. The colors, the clothing, and the overall design have few limitations for the concept artist. We'll be drawing a vector character ready for animating in Adobe Illustrator and more in this three part tutorial with the After Effects and Game Development teams on Tuts+.


Create the Kandi Runner Game

Our Kandi Runner series is spread over three tutorials. In this part, you'll be learning how to create the vector game sprite, but you should check out the other two tutorials in the series as well.


Hit Space to jump.

Tutorial Asset

If you'd like to follow along with this tutorial, you can download the sketch.


1. Prepare Your Design

Our game sprite will be in profile so the animation component of the cross-over can contain a walk cycle. As such, I've sketched out my design in Adobe Photoshop CC. Starting with quick lines denoting the overall style of the character and proportions and ending with a darker, inked design, ready for the Adobe Illustrator treatment. Note that the proportions in this sketch change a bit during the tutorial. The ease of scaling allows quick changes in head and body size, compared to redrawing it completely.

sprite-001

2. Draw the Head and Hair

Step 1

For the head, I've started with a circle drawn with the Ellipse Tool (L). The lower face portion was traced from the sketch with the Pen Tool (P). Unite both shapes in Pathfinder when you're satisfied with the profile you've created.

sprite-002

Step 2

The hair is done in large, colorful sections. I wanted her to have absolutely massive dreadlock-like hair (almost like a rag doll). Use the Pen Tool to draw each hair section. Ten are drawn in total here, and will eventually be separated out and outlined individually so they can be animated. In the mean time, Group (Control-G) your hair pieces together.

sprite-003

Step 3

Unhide the face in the Layers panel and make sure you're satisfied with the way the hair hangs around the head, as well as that it doesn't obscure the face, which will be drawn later.

sprite-004

3. Draw the Leg and Body

Step 1

Moving onto the legs and torso. Start with the thigh and character's bottom. She's wearing armor of some sort (I imagined this to be some sort of action-puzzle game. Perhaps she races a flying vehicle and requires the armor to protect her), and as such it's a purple-gray color, rather than plain gray. For now, the bodice of the outfit is bright pink. Later I'll make this teal. These three pieces make up the torso and thigh, stopping at the knee.

sprite-005

Step 2

For the lower leg and knee, draw a knee piece (like an angled half-circle), and follow the sketch for the outline of the calf and bottom of the foot. I've stopped the leg portion at the top of the foot with the idea of the costume containing old-time spats (think 1920s fashion design). The bottom foot piece is a separate shape.

sprite-006

Step 3

For the back part of the boot/shoe, draw an ellipse with the Ellipse Tool, select the leg piece, and using the Shape Builder Tool, select the portion of the ellipse that's outside of the foot. Deselect and delete this extra piece.

sprite-007

4. Draw the Arm and Hand

Step 1

On the left side, you'll see the character so far. She has a costume, but needs a neck, chest, and arm. Follow the sketch and draw the neck and part of the chest. Place this behind the torso pieces in the Layers panel.

sprite-008

Step 2

For the arm, I've started with an ellipse (denoting the shoulder), and have added an arm that indents at the elbow. If you're animating this character, you may want to separate the bicep from the forearm for more movement. The arm stops a little past the wrist where I've drawn a shape that indicates the palm of the hand.

sprite-009

Step 3

For the hand, I've hidden the arm shapes so we can focus on adding fingers to the palm. Using the Pen Tool, I've drawn a rounded rectangle-like shape (this one has one flat side and one curved side, though) for the thumb. Use the Rounded Rectangle Tool for the other fingers. I kicked the pinky out so the hand doesn't look too stiff.

sprite-010

5. Body Edits and Additions

Step 1

Before we get to outlines and shading the character, let's focus on some edits and additions first. Select the torso and leg pieces, Group together for the time being, and enlarge a bit. See below for the comparison between the enlarged body and smaller one. This way, she has a large torso and longer legs to balance out her large (and likely heavy) head.

sprite-011

Step 2

The character's back is a bit small and shallow, so I've pulled out the rightmost anchor point from the original shape. In addition, I added a high collared shirt for her to wear by drawing over the chest shape with a dark purple-gray shape, selecting both the chest and the shirt shape, and, with the Shape Builder Tool selecting the non-intersecting portion of the shirt shape. Deselect both and delete the excess shirt pieces. Place the shirt above the check piece in the Layers panel.

sprite-012

Step 3

Instead of a full glove, I opted for one that has a lower wrist line. To do so, change the color of the current glove to your character's skin tone. Then, Copy (Control-C) and Paste (Control-V) the hand, align with the original one, and draw a circle with the Ellipse Tool. Select the new hand and the ellipse and Minus Front in Pathfinder.

sprite-013

Step 4

Let's build some hearts. Draw a circle with the Ellipse Tool and using the Direct Selection Tool (A), pull the bottom anchor point down so you have one heart half. Copy and Paste the heart half, and flip it over a vertical axis. Once aligned to the center, Unite in Pathfinder.

sprite-014

Step 5

Copy and Paste three hearts along the character's thigh. These should be skin-colored. Add a smaller, flipped heart to the glove too.

sprite-015

6. Create the Face Details

Step 1

For the eye, focus on four pieces: top lashes and lower lashes, a white tear-drop shape for the side of the eye, and a thin ellipse for the iris. All were drawn with the Pen Tool, except for the iris which was done with the Ellipse Tool.

The other facial features needed are an eyebrow, top lip (both dark blue), nostril and nasal fold (one shape), and a lower lip (same color as the nostril). You can go into more detail on the face if you want, but this gives her enough features to create some character without overwhelming the overall design.

sprite-016

Step 2

For the head and hair outlines, if you're animating this design, you'll want to outline the head and each hair piece separately. For the sake of this portion of the tutorial, I've shown the process below as though you're keeping the head and hair together as one piece.

Group together the head and hair groups, Copy and Paste, Unite in Pathfinder, and Align with the main head/hair group and place it behind the head/hair group in the Layers panel. Repeat the process for the hair group (sans head). Each outline shape should have a Stroke Weight of 1 to 2 points.

sprite-017

Step 3

For the shadow cast by her massive hairstyle, draw a shape that follows the contour of her face and extends between the nose bridge and the side of the face. Select the head and the shadow shape, and using the Shape Builder Tool, select the portion of the shadow shape that does not intersect with the head. Deselect both and delete the non-intersecting shape. Place the shadow above the head but beneath the facial features in the Layers.

sprite-018

7. Head and Hair Details

Step 1

For the ear, it's sort of a rounded capital "D" shape. The inside of the ear can be a "C" shape, "S", or a weird squiggle like the one I've drawn. Group them together and place it beneath the hair, above the head and face shadow pieces.

sprite-019

Step 2

Before we get into shading the hair, outline each section of hair. You can either add a thinly weighted stroke to each section, or follow the process from section six, step two for each section of hair.

sprite-020

Step 3

For the shadows on the hair, recolor each hair section as a darker version of that hue. Then, using the Pen Tool, draw highlight shapes on the outside edges of each lock of hair. Delete with the Shape Builder Tool, as done previously.

sprite-021

8. Add Body Shadows

Step 1

Since most of the chest isn't showing anymore, and there's a lot of hair around the neck, recolor the chest piece to the shadow mauve used previously. Draw a shape on the right side of the shoulder. We'll be using this shadow as a guide for the other body shadows in terms of location. Select the shoulder and the shadow shape, use the Shape Builder Tool to select the non-intersecting portion of the shadow shape, deselect, and delete for a clean shadow on the shoulder. Place the shadow shape beneath the clothes in the Layers panel.

sprite-022

Step 2

The shadow on the arm follows the same line as the one on the shoulder and indents at the elbow. If your arm is in two groups, you can separate the two pieces by selecting them with the Shape Builder Tool and the main arm pieces selected. Follow the same steps for the shadows on the glove.

sprite-023

Step 3

I added some stripes on the top of the sleeve with the Pen Tool set as a 0.25pt Stroke Weight. Expand each stripe in Object, and delete the portions of the stripes that overlap the top of the sleeve and the line drawn across the sleeve with the Shape Builder Tool.

sprite-024

Step 4

The shadow on the torso is a dark purple gray with the Opacity at 40%. Highlight shapes were added to the left sides of the torso as well. Since this character is cel shaded, no gradients are being used, though if you'd like a more complex design, go for it!

sprite-025

9. Shadows on the Lower Body

Step 1

Continue drawing shadow shapes on the lower body. Start with the thigh (the other body parts have been hidden in the Layers panel) and follow the curve of the leg. Draw transparent shadow shapes for each heart. Delete non-intersecting parts of the shadow with the Shape Builder Tool. Add outlines for each heart too.

sprite-026

Step 2

For the lower leg, I wanted to add bright pink spats. The shape kicks out in the back and has a large dramatic arc down to the front of the foot. Delete the non-intersecting part from the front of the foot/leg (leave the one on the back, since it's a part of the design). Add some dark pink dart shapes for a pleated look on the spats. Draw shadows and highlights on the lower leg, similar to those from the thigh and torso.

sprite-027

Step 3

Since this will be animated, I've got to add an additional leg and arm. Copy and Paste the arm group and the leg group. Delete the sleeve details, shadows, and highlights, and recolor everything to shadow colors.

sprite-028

10. Create an Additional Hand

Step 1

For an additional hand, this one being balled up into a fist, Copy and Paste the first hand and Ungroup the components. Move the glove portion to the side and reshape the thumb to be a small bump on the left side. Move the fingers into the palm.

sprite-030

Step 2

Unite the new hand in Pathfinder, and create a new glove the same way the first was drawn. Add a heart with shadow (I used the same one, just resized for less space), line denoting the end of the glove, and shadow the connects to the shadow on the hand. Add an outline to match the one from the arm.

sprite-031

Step 3

For the hand on the other side, Copy and Paste the fist, delete the glove details and recolor to a dark teal. Using the Rounded Rectangle Tool draw small fingers and a thumb with a 0.75pt Stroke Weight in the same dark color used for other outlines.

sprite-032

Now You're Ready for Action!

At long last the sprite is ready to go. Each group that will move (or can be moved) during animation is grouped and labeled for organization in the Layers panel. I've added a background and additional outline on each component for the final image, but it won't be present for the next two tutorials. I hope you enjoyed drawing this cel shaded game sprite with me and continue on to the next two sections of this project.

sprite-033
Related Posts