Create a new canvas on Photoshop (File > New) and set this to 32 x 32 pixels select a transparent background. Remember to set up your preferences under Edit > Preferences > Guides, Grid & Slices Also remember to choose to view the grid to help guide you: View > Show > Grid I chose 32 32 pixels not just because it seems good enough for this resolution, but 32 32 pixels is also a power of 2, which can also be handy for game engines (tile sizes are often a power of two, textures are padded to a power of two, etc.) Tip: Even if the game engine you are using accepts any image size, it s a good practice to use even number image dimensions anyway. This way, if the image ever needs to be scaled, the dimensions will be divided more cleanly resulting in a better look. Making Your First Character Pixel art is well known, on its best form, for its sharp and easy-to-read graphics: you can identify the character face, eyes, hair, and body parts with just a few pixels. However, the developer size is much more complicated: the smaller your character is, the more difficult it is to make everything fit. To make things more practical, choose what s going to be the smallest, readable thing on the character. I always choose the eyes, because they are (magically) one of the best ways to give life to a character. In Photoshop, choose the Pencil tool. If you can t find it, just press and hold the Brush Tool and scroll down to Pencil Tool (it should be the second one). You will just need to resize it to brush size 1 (you can click on the tool options bar and change its size or just hold the [' key). You will eventually need the Erase tool too, so click on it (or hit 'E') and change its settings to "Mode: Pencil" (so it does not anti-alias as a brush). Page 1
And start to draw pixels. Draw two eyebrows and an eye on the image, like this: You could already start with the line art (drawing as you normally would, making the lines and shaping the character), but a more practical way to do so is to first make its silhouette. The good thing is that you don t need to be perfect at this stage, just try to take the sizes of things (head, body, arms, and legs) and the character s initial pose. Page 2
Go ahead and draw something like this with a grey colour: Remember it does not need to be perfect at this stage Notice that I also left some blank space. You don t really need to fill the whole canvas, you ll need more space for future different frames, and it s very useful to keep the same canvas size for all of them. Once you finish the silhouette, it s time to begin the line art. Now you should be more careful with pixel placement, so don t bother making the clothes, armours or any details yet. If you need it, you can add a new Layer so you never lose your original silhouette. Page 3
If you feel that the pencil tool is a bit too slow to draw, you can always use the Line tool to makes things fast just remember to fix some pixels since it s not as exact as the Pencil. You ll need to configure it though, as shown below: Choose the Line tool by pressing and holding the Rectangle tool, and scroll down to Line. Go to the tool settings bar and select the third icon ( Fill pixels ), change the Weight to 1 (if it isn t already) and uncheck Anti-alias (your nemesis!). It should look like this: Tip: Notice that I didn t made the bottom outline for the feet. It s not really necessarily since feet are not such an essential part to distinguish as the legs are AND you save a row of pixels in your canvas. Page 4
Applying Colour and Shading Now you re ready to start colouring it. Don t bother choosing the right colours now, it s very easy to change them later, just make sure that everything has its own colour. For now, you can use the default colours from the Swatch tab (Window > Swatches). Go ahead and colour your hero like this (but feel free to be creative and use your own colours!) Good colour contrast makes your asset more definable Notice that I still didn t make any outline for clothes or hair. Always remember: save as many pixels as you can! As an option, you could save time instead of carefully placing each colour pixel. To speed things up, draw the lines for each colour and use the Paint bucket tool to fill the spaces. You ll need to configure this tool too. Select it on the tool bar (or just press G ) and change the Tolerance to 0 and uncheck anti-alias. Page 5
Tip: If you ever need to use the Magic Wand tool (a very useful tool that selects all pixels with the same colour), apply the same settings as the Paint bucket no tolerance or anti-alias. The next step will require you some basic light and shading knowledge. If you don t know too much about it, here s a quick guide for it, and a more complete one here. If you don t feel like learning this right now, you can skip this step and go toward to Spicing up your palette shading, after all, is a matter of style, choose what you feel right for your game and capability. Or, you can simply make your shading similar to my example below! Use the same light source for the whole asset Try to give as much shape as you can, this is usually where the asset begins to look richer. For instance, you can now see a nose, eyes frowning, hair volume, depth and folds on his pants. You can also add a few light spots to it, it will look even better: Page 6
Keep the same light source from the shading Spicing Up Your Palette A lot of people use the default palette colours, but since so many people use those colours they look the same across many games. Photoshop has a great range of colours on its standard palette, but don t rely too much on it. It s best to make your own colours by clicking the main palette at the bottom of the tool bar. Then, in the Colour Picker window, browse through the right-side bar to choose a colour and in the main area to choose its brightness (more white or more black) and saturation (more vivid or duller colour selection). Page 7
Once you choose it, click OK and reconfigure the Paint Bucket tool. Don t panic, you will just uncheck the Contiguous box, so when you paint the new colour, every pixel with the same colour in the layer will be painted too. This is another reason why it s important to keep the colour count low, and to always use the same colour when dealing with the same element (shirt, hair, helmet, armour and so). But don t forget to use a different colour for other areas; otherwise it s going to be recolored too! Uncheck the "Contiguous" box to paint all pixels from the same colour Change the colours as much as you want and get some interesting colours on your character! You can even recolour the outline, just make sure it will blend correctly with the background. Page 8
Finally, make a background colour test: make a new layer underneath your character, and fill it with various colours. It s really important to make sure your character will be visible on light, dark, warm and cool backgrounds. Tips on Editing Pixels in Photoshop As you could see, I turned off the anti-alias on all of the tools I ve used so far. Don t forget to turn it off on others tools as well, such as the Elliptical marquee and Lasso tool. It could come out handy to resize a little bit some parts or even rotate them to animate further frames like running cycles. To do so, use any marquee tool (hit M ) to select an area, rightclick it and choose Free Transform, or simply hit Ctrl + T. You should be able to resize and rotate it freely. This could be a useful method to create an additional frame or frames to animate the character for a game. Page 9
However, Photoshop automatically anti-alias everything edited using the Free Transform function. Before confirming your edit, go to Edit > Preferences > General (Ctrl + K), and change the Image Interpolation to Nearest Neighbour. In a nutshell, it calculates the new position and size very roughly, applying no new colours or transparency, preserving the colours you chose. Additional Tasks After attempting this tutorial you should be sketching out your own proposed pixel graphics. Simple sketches on paper will help you plan your sprites. You could create sprites Non-player Characters (NPC s) for your proposed game too such as buildings, objects, aliens, or other animated sprites such as bombs, bullets, and explosions etc. Try other tutorials for creating pixel art to create retro characters and design a car (if you have not attempted this already). Page 10