Pixel Art Character Tutorial – Creating And Customizing A Bitizen
This will be a continuation of my last pixel art tutorial about configuring Photoshop for Pixel Art. For the past month or so, both my wife an I have been pretty addicted to this amazing game called Tiny Tower created by Nimble Bits. The biggest draw for me to this game isn’t the fact that it has great simulation style game mechanics, it’s the fact that it was created using Pixel Art.
As I mentioned in my other post, I have a serious passion for pixel art and have been doing everything I can to learn about it and improve my skills. One great thing about it is, anyone can do it. You don’t have to be this amazing artist to be able to create interesting pixel art.
Getting Started
They say that imitation is the best form of flattery, so we are going to flatter the heck out of the Nimble Bits guys are learn how to make our own Bitizen characters from Tiny Tower. I have found that a good starting place for learning pixel art (or anything really), is to start with something that already exists, copy it, then modify it. Once you do that a few times and get comfortable, then you should have the confidence to branch out into creating your own artwork.
When creating a game (or complex piece of pixel artwork) that involves a ton of different characters, it will save a ton of time and energy if you create a “base character”. What I mean by “base character” is one that is very bland and plain. Something that is easily customizable. So, that’s what this tutorial is about, we are going to create a bland white guy for Tiny Tower.
One thing I want to point out before we start is, I have lowered the resolution of the character a bit and am not putting in as much detail as the Nimble Bits team. This is just for simplicity’s sake in order to get my point across and make things easier on you.
New Document
Start out by creating a 15x25px document. I know, it’s very small, but we don’t need much. Make sure you have Photoshop configured for pixel art. At this point, I’d suggest creating all of the layers for your bitizen. Why use layers? you might ask. Great question. Well, in order to quickly modify our base character, we want to have a separate layer for each of his features/body parts. So, create the following layers.
- Head
- Mouth
- Hair
- Eyes
- Shirt
- Pants
- Feet
- Arms
Now, you can confidently modify any part of your Bitizen without the risk of destroying the rest. As I reference each part below, make sure you switch to the correct layer when drawing.
Creating The Head
The head is perhaps the most complicated part of the Bitizen due to its odd shape and shading. The shape is due to the fact that the Bitizen is always looking in the forward direction.
Start with a skin tone color (I have used #f7e0c2) and create a 10 x 6 rectangle in the center of your view like this:
Now, that the base head is in place, it’s time to draw the chin and neck. With the same color, indent one pixel in on the bottom and draw straight across. Finally, indent 3 more pixels in, and draw 4 pixels across. This is what your head should look like at this point.
Shading
Shading with pixel art is simply a matter of drawing with a darker shade of your main color. With the color chooser in PS and the skin tone still selected, drag the color down to a slightly darker shade and lowlight a 1 pixel line on the right side of the face. In our example the Bitizen is looking to his right, so his left will be shaded.
Then, add some more shading as you see necessary. If you look at mine, I have used a bit of shading to extend the head a little bit.
Hair, Mouth And Eyes
The mouth and eyes are very simple with our Bitizens. The eyes are just single black pixels and the mouth is just a 4 pixel line using a darker shade of the skin tone.
Hair can be whatever you like. I have chosen a very simple hairstyle that you see quite often in the game with a simple shade of brown. I have also applied the same shading technique to the hair that I did to the face and neck. When you are finished, it should really start looking like a person.
Creating The Body, Legs and Feet
For the body, start with 6 x 5 rectangle set to the color that you want to make the shirt. I chose #63cfea. For the pants, simply draw a solid line. Finally, the feet are just two 2px lines spread apart by two more pixels. If you notice in the game, to animate the movement of these guys, they simply alternate between this position and a centered 4px line. It just goes to show you how much things can be simplified when you use pixel art.
To finish up our Bitizen, we add single pixel dots for hands and a couple pixels for arms. After that, we add a collar and some simple shading.
Here is what the completed Bitizen looks like:
Conclusion
The one thing to remember when creating pixel art for game is to keep it simple. Simplify everything. Take for example the Toy Story characters I made at the top of this post. They are very simplistic yet you recognize who they are right away. My 2.5 year old son was yelling “Woody! Buzz!” the entire time I was creating them. I think this is one of the largest challenges; sticking to “less is more”.
There are some other fun things we can do to customize these guys. We can even do it in code! Next time, I will show you how to take a “base character” and customize its colors using Cocos 2D. This can save you even more time and energy when trying to make dynamic characters for your game.
If you are feeling lazy and want to simply download my bitizen base, click the following link:
Download my bitizen.psd template
On a final note, don’t just copy these guys for YOUR game! I know it might seem tempting to give em a different shirt and plop them in your super rad fart machine RPG, but these guys are the product of the hard work of the guys at Nimble Bits.
If you have any questions or tips, please feel free to leave them in the comments.
I would also LOVE to see some of the custom bitizens you guys come up with. Please link to them in the comments if you end up creating some.
Happy Coding!
This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.
