Drawing/colouring a pixel character

This tutorial will show you how to draw a fully-coloured troll entirely in MSPaint, but the skills you will (hopefully) learn can be used when drawing practically any figure. First, you may want to sketch what you are going to draw. I was going to do this but thought ‘screw it’, which is why the breasts (or ‘pecks’ as I believe they are more commonly known) on this troll are too low and hangy.

Draw (or trace, if you sketched it and scanned it) the outline of your character. I use the line tool exclusively on this part — I find it much easier to use than the pencil or paint-brush tool, and it makes nicer lines.
Lineart 1

This is just a rough outline at the moment – don’t go into the details. Now, there a couple of things I don’t like about this picture. Always step back and have a good look at the outline, because once you’ve started shading it will be a pain to have to go back and change it. These were the bits I changed.

Lineart 2

Decide on the colours of the areas of the body etc. Use the fill tool to block out the colours as shown.

Troll flats

The boxes in the top-right are just me keeping a record of all the colours I have used. You don’t have to do this if you don’t want to.

Take the colours and darken them (Select the colour you want with the colour picker tool and go Colors>Edit Colors). With these new, darker colours use the line tool to draw out the edges of the shadows and the fill tool to fill them in. You should end up with something like this.

Troll shadows

That sun is just there to show you where the light is coming from. NOTE: For game sprites it is a good idea to do the light coming from directly above.

It helps to think about the picture as a series of simple shapes. This is how I broke down the picture — into spheres, and a few cylinders:

Troll shadow geometry

Then it was a matter of colouring the simple shapes, which is a lot easier than trying to colour a whole muscle-bound arm in one go.

Take the dark colours and darken them more. Using these darker colours, go right into where the deep crevasses would be, and the places that face directly away from the light. This gives the picture more depth.

Troll shadows deeper

You may need to play around with the extent of the lighter shading at this stage — I played around with it quite a lot. I also darkened the lighter shading at this point.

Handy hint: To replace colours in Paint, set the colour to be replaced as the foreground colour and the colour to replace it with as the background colour. Using the eraser tool, right-click and drag everywhere you want the colour to be replaced. Very useful!

Black lines. They are ugly and fake-looking. When was the last time you saw a black line in real life? Use them only for outlines. Replace the black lines with lines of a very dark version of the colour they are bordering, except outlines. These are the lines I replaced:

Coloured lines

If I remove all the colours, you can see we are left with few black lines:

Original outline:

Lineart 1

Interior black lines removed:

Troll black lines

Now we will add highlights to the image. Take the colours and lighten them. Skin and cloth colours will not need to be lightened much (if at all — I am not putting any highlights on the cloth skirt thing) whereas metal colours will nedd to be lightened a lot (for strong highlights). As with the shadows, put in the highlights whilst imagining the picture is broken into simple 3D shapes.

Troll highlights

Almost done! Just add some finishing touches to your picture. Add in the little details that make all the difference, such as:

  • Texture — lumpy skin and fibres in cloth.
  • Horns.
  • Scars.
  • Blood on hammer.

And your done!

Troll finished

You can draw a background etc. if you feel like it. I didn’t.

For more examples, check out the pixel art gallery.


Trackbacks & Pingbacks


  1. * Maximus says:

    I would like to see a continuation of the topic

    | Reply Posted 9 years, 12 months ago

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: