Pushing Pixels!

By Gary J. Lucken [10.06.11]

 In this tutorial, I will walk you through the creation of a cute animated character, which should give you the basic skills to create pixel art for games.

Kaoani comes from the Japanese kao (face) and ani (animation). It's a word used to describe those cute little animated characters that adorn many a chat window or blog. These little animated mascots are perfect practice for pixel art creation as they are small in file size, colorful, and fun to look at.

At my Army of Trolls web site, I have expanded the idea a little to include an adoption agency for these cute little critters. Those who adopt are rewarded with a return link from my web site. I have created hundreds of pixel art animations, and with this tutorial, I will pass on some of my knowledge, which should help you learn all the skills you'll need to create your own little kaoani. The theory behind creating these creatures is similar to making graphics for 2D video games, so with some practice, you could be making your own game graphics in no time.

We'll be using Adobe Photoshop, so make sure you have the program before you begin. This tutorial has 32 steps, and I've outlined how each should look with an accompanying image. Every build of Photoshop has a different look, so don't worry if yours doesn't match the screens you see in this article exactly. >>>

The Secret Art Of Pixels

If you are attempting this tutorial without having created any pixel art before, then this is for you. The first and most important rule of pixel art is "Anti-Aliasing is the spawn of Satan." Photoshop needs to be set up correctly before you even attempt to put pixels together. Turn off all anti-aliasing, make sure you are working on a 72dpi (screen resolution) document, and select the smallest 1-pixel pencil.

With pixel art, you are working within a limited palette of 256 colors. Don't worry though, 256 is more than enough, and a lot of small pixel work will come in at under 32 colors. Make blocks of color on your document for easy selection.

Pixel art is often very small, so you will mostly be working in a very zoomed in document. It's helpful to see your image at 100% though, so you'll probably be zooming out a lot to see the full picture.

1. Getting Started

First we need to create our little pixel art character. Open Photoshop and create a new document that is 32 x 32 pixels. Using the pencil tool with anti-aliasing turned off, draw a shape like the one in the image accompanying. It's roughly 23 pixels on each side.

2. Arms And Legs

Now let's add some little arms and legs to our character. On each side, draw 3 pixels going diagonally downward, then do the same for the bottom edge where you think the legs should go. Using the Eraser tool, with anti-aliasing turned off, delete a few pixels where the arms and legs join the body.

3. Ears To Hear

Our troll is going to be a cute little fox creature, so he'll need some ears. From the top left edge of the body, draw 2 pixels upwards, move 1 to the right, then draw 2 more up. Do this 4 times, then come back down in a similar fashion until the ears join the body.

4. Eyes So He Can See

Now we have the basic outline of our troll. Add two 3x3 blocks of pixels next to each other where you feel his eyes should go. If you mess up, just delete some pixels using the eraser and start again.

5. Big Mouth

We now have arms, legs, ears, and two eyes. We still need a nose and a nice big mouth that we will animate later. For the nose, I have drawn a 5x3 rectangle, and underneath, a great big mouth that almost fills the entire width of the body.

6. Pearly Whites

With the outline of our character, he's really starting to take shape. Before we color him, to make seeing easier I've taken the fill tool and filled in all the blank pixels within the outline of our character with a white color, and added some teeth.

7. Color, Color, Color

He's looking a little ill, so let's give him some color. Feel free to choose your own colors. I have chosen an orange from the color palette, and used this to fill the main body section, with white for the eyes and pink for the nose. Notice I have left the ears and belly patch white.

8. In The Shade

Having blocked out the basic color, it's time to shade him. Notice how I shy away from using grey to shade the white sections. This kind of artwork is so small that too many greys can sometimes spoil the image, making the pixels look muddy. Although, I will say that there is some very cool black and white pixel art out there.

9. Colored Outlines

We don't need to leave the outlines of our character black, and in fact a lot of sprite work of this type benefits from colored outlines. I have selected darker versions of our shading colors, and used this to color the outlines of our character. I've given him two big eyebrows for good measure.

10. Larger Canvas

Now we are ready to start animating him, but we'll need more room on our document to do this. Go to Image->Canvas Size, and put 52 in the height box, and click the top middle anchor point. This has increased the canvas from the top downward. Move our character down to the center of the canvas.

11. Shadows

To make our animation more effective, we are going to draw a shadow underneath our troll. Using the circular marquee tool with anti-aliasing turned off, select an oval section under our character and fill it in with a dark color. Create 3 shadows, each smaller than the other, each on separate layers.

12. Animation Frames

It's time to open Photoshop's simple animation palette. Go to Window->Animation, and the Animation Palette will appear. Click the arrow at the edge of the Animation Palette and create 2 more frames by selecting "New Frame." We should then have a total frame count of 3. Also, you'll need to convert to Frame Animation, because by default, it'll open in Timeline format, which is not useful.

13. Make Him Float

Click on the first frame and make sure the largest shadow layer is showing. Then click on the second frame, nudge the character up a few pixels, and turn on the second shadow layers. Finally, move him up even further and turn on the smaller shadow layer. This will make it look like our troll is floating up and down.

14. Copying Frames

To smooth out the animation we need to add another frame after the third, which will be the same as frame 2. Select the second frame, and copy it by clicking "New Frame" underneath. Then click and drag this to the third frame in the sequence.

15. Too Fast!

Now we have a basic animation. You can preview it by clicking the play button on the Animation Palette. However, it's running way too fast, so we'll need to slow it down. To do this, select all frames, then click the arrow next to where it says 0 sec and change this to 0.2 seconds. You can also press "spacebar" to make the animation play. This is also unfortunately the hotkey for the hand tool, which can be infuriating because you'll try to move the document around only to play the animation and mess everything up. There's no way to change this unless you change the hotkey for the hand tool.

16. We Need More Frames!

With the basic animation now complete, we need to add a few more frames before we tweak our character and add some finer animation details. Select all frames, and from the Animation palette menu, choose "Copy" then "Paste" these new frames after frame 4 of our current animation. We now have 8 frames in total.

17. Saving As A Gif

Before we start to tweak, we need to save our animation as a gif. To do this, open the Optimize palette by selecting Window->Optimize, and choosing gif 128 with no dither from the palette menu. Then go to File->Save for Web and save the animation as a gif. There you have it! You can now open the gif file and use this to work from.

18. Open Wide!

Let's give our character a little more. Let's start by making his mouth open and close. Notice that the newly saved gif has created new frames for each part of the animation, instead of layers like the previous file. Go to frame 3 and use the square marquee tool to select just below the top row of teeth.

19. Open Wider!

With the whole character selected, below the top row of teeth, use the arrow keys with the move tool selected to move them downward by 1 pixel. Do the same on frames 4 and 5, but move downward by 2 pixels in frames 4 and 3. In frame 5, make the mouth appear to open.

20. Tongues!

We've got an open mouth now, but there are big pixel gaps in frames 3, 4, and 5. We will need to fill these in with our chosen colors using the pencil tool. Notice how I have given our little fella a little tongue. Feel free to add your own details.

21. Keep It Closed

To finish off the open mouth animation, let's make him close his mouth a little in frame 6. Grab a selection starting from the bottom of the mouth to just above the bottom row of teeth, and move it up until it is close to the top row of teeth. Fill in the missing pixels, and we're done.

22. Hands And Feet

Let's make his hands and feet move a little as well. To do this, I have just selected the hand with the marquee tool in frame 3 and moved them up a little. Same for the feet. Feel free to draw the pixels freehand rather than using the marquee.

23. Feet And Hands

I have continued this hand movement for a few frames, making them move up and down. You may have to experiment a little with what looks good, so make sure you are always previewing your animation as you make it.

24. All In The Eyes

As a final detail, we will have his eyes bulge as he floats up and down. Let's try another technique for this. With the marquee tool, zoom into the eye section and select the eye brow and the eye. Zoomed in like this, with anti aliasing turned off, it's easy to copy individual pixels.

25. New Pairs Of Eyes

With the eye selected, copy and paste it into a new document (if you like shortcuts, you can use ctrl+n for new and ctrl+v for paste). Next, increase the canvas size by choosing Images->Canvas Size from the Image menu. I have filled the bottom layer with a pink color to make it easier to see the eye pixels.

26. Five Eyes

In our new document, I have made 5 new eyes, ranging from closed to wide open. I have created each one on a separate layer. I made each eye by simply adding to the surrounding white area and moving up the eyebrow. Create your eyes however you want them to look.

27. Adding The Eyes

With all our eyes now created, drag the first one into frame 2, and move it into position. Then duplicate it for the opposite eye, and flatten frame 2 by linking the eyes with the frame and selecting "Merge Linked" from the Layers menu. Do the same for all the other eyes in the next few frames.

28. Hot Stuff

All this floating is hard work, so to finish off our animation, let's add some beads of sweat coming off our cute little troll. On frame 2, draw four 1 pixel square beads of sweat. You can put them wherever you like, just keep them close to the head, as we need space for the sweat to move.

29. Keep On Sweating

Mark the place of our sweat in frame 2 with guides by simply dragging from the ruler at the top left of your document. Then move to frame 3, and draw some bigger sweat drops in the position you think they would have moved to as our little guy floats up and down.

30. Still Sweating

I have created beads of sweat falling downward from frame 2 to frame 6, and made sure I place them in a position in each new frame that looks like the sweat is flying off our character and falling to the ground. We are almost done!

31. Almost Done!

Before we save our final animation, play it through a few times to check that it plays how you want it, then select all layers and right click on the little bouncing ball icon at the bottom of each frame. From the menu that appears, select "Restore to Background."

32. Saving The Final Animation

We're finished creating our little guy! It's time to save the final file. Make sure the Optimize palette is open, and select Gif 128 with no dither from the menu. Then go to File>Save for Web, and save your file.

Pixels Pushed!

Now you've got a little animated character! As you practice, this stuff will become second-nature. Pixel art is a unique art form with some similarities to the impressionist movement. It often hints at detail, rather than actually drawing every last minute part of every character. By far the best way to learn these techniques is to study from the masters. There's a whole host of references out there on the internet and in books.

There are some great tutorials over at Gas 13's site that deal with all aspects of pixel art. A great place to start is the "So you want to be a pixel artist" tutorial.

My own site has tons of pixels for you to grab and study, but also check out Junkboy and www.adamtierney.com for some excellent pixel art. There are also forums full of helpful experts and eager beginners. Two of the best are Pixeljoint and Pixelation . Register at either of these, post your artwork in the forums, and you'll get loads of helpful feedback from some very good artists.

There are also a few helpful pixel art books that you can order online. A must-have is Eboy's Hello. It's expensive but well worth it, with over 500 color illustrations for you to study. It's basically an isometric pixel art master class.

[Jonathan Kim also contributed to this article.]

Return to the web version of this article
Copyright © UBM TechWeb