Last year we created a game sprite design, created a walk cycle, and coded a side-scroller using said sprite (links found at the end of this tutorial). This year, I wanted to up the ante and create a pixel art version of Kandi from scratch from a new view.
Follow along, as in this tutorial I'll show you how to extend those skills to make a pixel art game sprite of your very own.
1. Making the Head
Step 1
Much like the last tutorial I did on this character, which established her design, I'm starting with a quick sketch to nail down her features and keep me on track when creating the pixel art version. I drew this in Adobe Photoshop CC 2014, though you can use whatever drawing program (or pencil and paper combination) you prefer. Let's set up our document for the sprite.
Create a New Document in Adobe Photoshop (layers are used often for this tutorial, so although you can use something like MS Paint, I do suggest a program with layer capabilities). The final document size for the sprite I've made is approx. 58 x 150 pixels. Use the Pencil Tool (B) at 1 pixel and Zoom (Z) in to 3200% or so. Additionally, create an extra preview window by going to Window > Arrange > New Window... Doing so allows you to keep an eye on what your artwork looks like at 100% rather than zooming in and out repeatedly.
Step 2
I've drawn the face with 5 pixels down, 2 pixels down, 2 on diagonal, 2 pixels across, and 4 pixels across. Repeat this on the other side. I've filled in the top line of the head with a dark pink. The face will be outlined with a darker pink than those present in these images (see the next step).
The top of the eyes are a very dark blue (almost black but not quite) at 3 pixels across with 1 diagonally on the outside, and 2 down on the inside.
The nose is 2 pixels across in the center of the face. The top lip of the mouth is 4 pixels across with the bottom lip at 2 pixels right below it. All of the colors were sourced from the original sprite design.
Step 3
Having changed the outlining color to a dark magenta, I've started to fill in the face and give the eyes more shape. Initially, they are very round. This will be altered a bit later, but for now it gives you a good idea of the structure of the face and where shadows and highlights will be placed.
2. Creating the Hair
Step 1
With the face filled in, let's work on getting the hair together. Kandi has gummi worm-like hair, separated into large rope-like chunks. The bottom corners are slightly rounded and the pieces taper at the top. alternating the number of pixels from 4 to 3 to 2 and back to 4 again gives us a curves diagonal line.
I find it easiest to create a new layer for each lock of hair, for the time being, so I can easily draw their outlines and delete unnecessary pixels. Fill in each lock with a lighter color than its outline, alternating through hot pink, orange, yellow, and lime green.
I changed the shape of the eyes on the bottom corners since the source deign has more of a cat-eye shape to the lash line (meaning it kicks up in a point).
Step 2
A heart is fairly simple. 2 pixels on either side of 1 pixel. Round out the top by going 2 pixels down diagonally from the top row. Complete the heart with 5 pixels forming a V-shape. Fill this heart in with hot pink and a light cream color.
I placed the heart on the top of the head and added small rounded shapes above and around it, showing the top of her ponytail.
Her hair at this point consists of 4 large locks to create her bangs (or fringe), 3 smaller locks for the top of her ponytail, and 2 longer locks on either side of her head.
Step 3
Two things to work on in this step: Highlight the face and add one long lock that isn't tied up in the ponytail. Note the shadow on the long lock is the same color, for now, as the outline and becomes lighter near the bottom of the face.
For the shadow added to the face, use the dark pink from Section 1, Step 2. Line the side of the face with this color and place one pixel in each corner of the lower half of the face. Use a lighter skin tone (what you choose depends on the skintone you've chosen for your sprite design) to add highlights to the sprite's cheeks.
Step 4
Draw a lock on the other side of the head. I decided to make this shape unique to the lock on the left side. Use the dark magenta set at 50% Opacity in order to further shade the portions of the locks closest to the eyes and overhang of the sprite's bangs.
Additionally, use dark blues and purples set at 30-50 Opacity in order to shade the pixels nearest to the center of the ponytail and edges of hair closest to the face. Note the shadow right above the eyes as well as around the heart in the hair.
Additionally, use the outline color of the pink lock to stagger pixels and softly dither shadow shapes into the bottom of the piece of hair and on the long locks on the side of the face. If you'd like to work with a more limited palette, this option allows you to do so and still create shaded areas. It's similar to cross-hatching in drawing with pencil or ink, or using halftone for printing.
3. Drawing the Body
Step 1
The body will mostly be grayed-purples, again a color established in the original vector design published previously. The neck is short (and her shirt is turtleneck-like), so start with two pixels on either side of the chin with a long line of pixels going across between the hair, below the chin.
Since the hair obscures part of the shoulders, drawing them on a layer below the hair tends to work out best so they aren't too small or wide of the character. Refer to your (or my) initial sketch for the character's overall pose as you make your way down the arm and start forming the chest, waist, and hips.
The sprite's shirt has a sweetheart neckline (heart-like on the top, above the chest), which I've lined up with the center of her face. From there, the shirt kicks out on either side, comes together to form a small waist, and curves outward into thick hips. Since the character is a simple, straight-on view, the left side of her body's outline will be mirrored for the right side.
Step 2
For now, we'll be working on the arms, body, and legs more than the hands. Pixels on either side of her arms are longer around the shoulder and bicep area and become simple 2 x 2 diagonal lines for the forearms. The same thing happens from the waist until the hips.
For the leg, I've tapered both sides to meet at the knee, which is rounded rather than pointed. the inside of the leg from the inner thigh to the ankle is a slightly curved (though mostly straight) diagonal line while the outer thigh and calf are more dramatically curved.
The kicked out section in the lower portion of the calf is a part of the sprite's shoe design. The feed are small and rounded, pointing inward in this design in order to show greater detail in the armor and shoes of the sprite.
Once satisfied with the left leg, use the Rectangular Marquee Tool (M) or Lasso Tool (L) to Select, Copy (Control-C), and Paste (Control-V) it. To reflect the leg, go to Edit > Transform > Flip Horizontally and move it in line with the right hip using the Move Tool (V).
4. Coloring the Torso
Step 1
The sprite has a V-shaped, large belt above her hips. The top of the belt is formed by two diagonal lines, 1 pixel for each line, that meet at 2 pixels across. About 9 pixels down, the center of the bottom of the belt also meets at 2 pixels across. Move outward going up each row in the following pattern: 1 pixel, 1 pixel, 2 pixels, 2 pixels, and 3 pixels. This should reach the side of the hips.
I chose a bright teal for the fill color of the belt. Choose a darker teal for the outline and a few pixels in the corners of where the body outline meets the belt design. Choose a medium teal to shade the sides and a few lines toward the middle of the belt.
Step 2
The same color from the top lip has been used to outline the sprite's shirt, and the previous outline color is used for the top of the turtleneck. Both shoulders are bare, so use the same colors from the face. A lighter lilac has been used to start on the highlights in the bodice of the shirt.
Step 3
I chose to shade and highlight the bodice in this way, in large chunks of color, in order to create designs on the bodice and allude to the material being armor-like versus being just a shirt.
For the sleeve on the arm, keep the same outline color used previously and fill in with the same lilac tone from the shirt's bodice. Shade around the elbow and to indicate ribbing n the upper portion of the sleeve (on the shoulder). Use a darker purple for the outline on the inside of the arm. For the highlights, place a few pixels on the outside of the arm as well as in the middle of the ribbing on the top of the sleeve.
5. Coloring the Legs
Step 1
Fill in the legs with the same colors for shadows and highlights as used on the sleeves. Note the staggering of pixels on the top of the thighs where the belt meets the hips.I also added darker pixels on the outline of the sprite's groin.
Step 2
Place your shadow color around the inner edge of the legs and the upper portion of the knees. Since the character is wearing armor-like clothes, the knees are outlined (in a mechanical, robot-like design).
Step 3
It's about time we added a hand. Refer back to Section 1, Step 1 to the sketch of my sprite design for her hand position. They're turned in slightly, so some of the top of the hand shows along with two fingers and a thumb.
I started with a box-like shape that tapers at the end in her peach skintone, outlined it with dark magenta, and drew a diagonal band in teal for her fingerless gloves. Shade the outer edge of the glove with dark teal and use some medium teal to give some variation to the material (as done to the belt in Section 4, Step 1).
For the hand itself, use the same colors from the face, getting lighter at the end of the hand. The fingers meet in a point, showing the length differences of the index, middle, and ring fingers. The thumb is on the inner edge and is half the size of the hand (extending only a bit past the palm).
Copy and Paste the left arm and hand, Flip Horizontally and place in line with the right shoulder.
Step 4
Getting back to the legs, shade them in the same manner you did the arms: focus shadows on either side of the thighs in order to give them a rounded appearance and place highlights in a line near the center, next to the dark shadow. Doing so makes the legs look shiny and metallic. Feel free to push this further with brighter hotspots within the lines of highlights. Repeat on the other thigh.
Step 5
Continue with lines of shadow and highlight on the calves. Keep in mind the curve of the thighs and calves when drawing the lines. Optionally, stagger pixels in order to create a more delicately shaded area.
Use dark magenta in order to outline the shortened gaiter-like cuff on the sprite's ankle and fill in with the same magenta used on the hair. for highlights, use hotpink (again, from the sprite's hair).
Add a darker line of shadow along the outside edge of the food and a block of shadow color on the top of the foot, close to the edge of the gaiters.
5. Final Touches
Step 1
I lightened up the inner portion of her eyes as well as added grey into the whites so they're less stark. Additionally, I drew mint green locks behind her head and filled in the space between the long pink locks and her neck (seen in the final image).
Step 2
In the original design, Kandi has cut-out hearts on the sides of her highs. Having drawn hearts in Section 2, Step 2 repeat for half, a quarter, and one eighth of a heart along the side of her thigh. Alternatively, create a new layer, draw three hearts, and delete the pixels that are not inside the thigh. Shade with dark pink and fill with her skintone. Repeat on the other side.
Step 3
I drew a line on the top of her foot in order to be a bit more like the knee (sectioned off like robot parts) as well as drew a small box (2 x 2) in the corner of her calf. Delete extraneous pixels outside of the body's outline.
Great Job, You're Done!
Save your document as a transparent GIF or PNG in order to preserve the fidelity of its pixels and edges. If you're keen to enlarge it, make sure Nearest Neighbor is selected in the Resample drop-down menu before resizing. This preserves your pixels in their entirety and avoids blurring your hard work.
For more tutorials on pixel art, try these:
10 Steps to a Quick Set of Emoticons in Adobe Photoshop
Create a Series of Breakfast Pixel Art Icons in Adobe Photoshop
How to Create an Animated Pixel Art Sprite in Adobe Photoshop