Low Resolution Pixel Art Tutorial

pixel-tutorial-large-hero

Personally I’ve always loved pixel art, ever since I was little, spending hours playing Bubble Bobble on my Atari ST I’ve loved it. Fast forward to today and there is a massive resurgence of pixel art in games and pop culture, from Wreck it Ralph to Scott Pilgrim. So what better time to share my personal techniques for creating pixel art.

Wreck-It-Ralph-game

Wreck-It Ralph: © 2012 Disney.

Now pixel art as you may well know comes in many forms, from super low resolution like the good old days of the Z X Spectrum to higher resolution scaled up art like in Scott Pilgrim vs the World the game.

zx vs now

Left: Manic Miner for the ZX Spectrum, Right: Scott Pilgrim Vs the World the Game for Various

This tutorial will be focusing more on the lower resolution type of art, but will be scaled up at the end to make it into a large size piece.

Now the software I will be using in this tutorial is Adobe Photoshop CS2, which can now be downloaded for free here. However you don’t have to use this, any raster graphics editor will suffice. It can be useful to have layer support in the application you use however it is not essential.

So I have two ways that I approach my pixel art, the process I’m going to go through today simply starts with a blank canvas. For this piece I created a new 64 x 64 pixel image.

pixel-tutorial-large-01

To begin with I had a general idea of what I wanted the character to look like and that I wanted him in some kind of dynamic action pose but I had nothing drawn out and no reference material prepared before hand. What I do is set my pencil tool to large and start drawing out silhouettes of the character over and over again until I get shape that I like. Don’t be worried about it being perfect at this early stage as we will refine the shape as we go along.

pixel-tutorial-large-02

My next step is to start outlining the different shapes in the character, and grouping them by their colour, i.e. make all the areas that are flesh the same colour, although it doesn’t matter what colour you outline them with at this stage. This allows you to get a good feel for how the final lines will look. Note, how for my outlines I try to avoid drawing pixels at right angles to each other, this allows for a thin looking outline.

pixel-tutorial-large-03

The next stage is where I pick my basic colours for the character. I start off by filling in the large areas with the base colour, then pick a darker version for the outlines of that area. Note, there’s no shading at this stage, we’re simply blocking out the colours to make sure they are balanced for the character, and tweaking the final lines as we go.

pixel-tutorial-large-04

Now that I have the basic colours decided on, it’s time to pick the direction the light for the piece is coming from, allowing us to decide on how the character will be shaded. As you can hopefully see from my poorly illustrated arrows the direction the light is coming from is above and to the left of the character and behind him. So now we can take a first pass at the shading on the character, keep it simple at this stage, just pick a darker version of the base colour and go at it!

pixel-tutorial-large-05

Next we want to re-work the shading by introducing a lighter version of the outline to bring out the major highlights the light would throw on the scene, however remember that not every surface would show a highlight, on this character the jeans probably wouldn’t be highlighted as they are quite a dark heavy material.

pixel-tutorial-large-06

Now at this point we’re almost finished with our character, the shading has been completed, now its just a case of any more tweaks to the shape and lines of the characters. In this case I reduced the size of his right leg as I thought it was slightly out of proportion with the rest of his body. I also added some detailing to his shirt and his shoes. Note, make sure when you add in the details to your character to make sure to follow the shading that is already present.

pixel-tutorial-large-07

Now to really make the character come alive add a back drop, this will really help finish the piece off. However make sure to follow the shading rules that were applied to the character, note how the railing the character is jumping over is very dark, and how every window has a light and dark outline.

pixel-tutorial-large-08

Now I could have stopped at this point but I feel that the piece is a bit too cold and hasn’t really come together completely with my colour choices, so I used the colour balance tool in Photoshop to adjust the highlights and mid tones to be warmer (more red and yellow) and made the shadows colder (more blue and cyan) to add some contrast to the scene.

So now you have a nice looking 64 pixel square image that looks great when you zoom in to 400% but its a bit small when you view it at 100%, so the question is, how do we scale up our image whilst still preserving the hard edges? Well there are two ways of doing this and it all depends on the software your using.

The first way is really simple but may not work in all software. Using the image resize tool (in Photoshop its located in the Image > Image Size.. menu) make sure to set the image to increase to a round percentage, rounded to the nearest 100% , this way it keeps everything in scale, however where the menu says resample image: change the option to nearest neighbour which will preserve the hard edges of the image.

The second less simple way but will work using any software is to simply zoom in on the image until you get it to the size that you want the final image, take a screen shot of the whole screen, then crop out the screen shot.

and that’s it that is how I create low resolution pixel art that doesn’t use any reference material, thanks for reading and keep pushing those pixels!

FacebookGoogle+TwitterPinteresttumblrStumbleUponReddit
Like it? Share it!
  • Marc Wiedenhöft

    Nice! :-)
    Thanks for the tutorial!

    • whatthepixel

      No problem! I’m glad that you liked it!

  • Justin Alexander

    Good tutorial Craig. I’ve always been interested in doing my own pixel art. :)

    • whatthepixel

      Cheers Justin, I’m glad you think it’ll help, hopefully there should be some more going up soon