Creating an Isometric Pixel Art Car

This tutorial should will show you how to draw a simple isometric pixel art car using Photoshop or any other graphics program you have on your computer. Pixel art uses pixels to create an image by building the picture pixel by pixel much like LEGO is used to make a model brick by brick. Pixel art creates a retro look that harks back to early computer game graphics where screen resolutions dictated the detail the games graphics could render.

This tutorial is originally from an unfinished project. The site pixelparkinglot.com would allow you to draw your own car, buy a parking ticket and link your car back to a website of your choosing.

This tutorial is was created using Photoshop, however you can use any image manipulation program that allows you to draw at a pixel level including MS Paint at a basic level.

Download Source ZIP File (30,991 bytes)

When you open the Photoshop document you will see the wireframe template. Example’s here are shown at 400% the original size.

Open the PSD file included in the download or if you are not able to open Photoshop documents open the included GIF image. The file contains a simple wireframe car that gives you some basic dimensions for your own creation. You can modify the wire frame to change the style of the car and get the shape you are looking for.

The wireframe with some colour added to the body with shade applied from the light source in the top-left corner of the image.

First we will choose a colour for our car, we will need two shades of this colour. Remember to think about where your light source is, in this case it is in the top left and will therefore cast a shadow in front of the car (more on this later on). We will use the darker shade of the colour we have chosen to fill the side of the car. You can use the fill tool to do this (if you are using Photoshops Pain Bucket tool turn Anti-alisasing off so you don’t disturb the wireframe.) or use the pencil tool to colour in the area.

The car will colour added to all the panels. Grey has been used here only as an example, you can use any colour you wish.

Fill the rest of the car with the lighter shade of your chosen colour.

Adding highlights adds depth to the image.

We will now add some highlights to make the car look more realistic. The highlights can be used to add details without the harshness of the wireframe lines.

Add details to make the car your own, the magic is in the fine details.

Now we can start adding some more detail. When working with the image zoomed in remember to zoom back out to see what the final image will look like. Add shading to the bodywork, extra detail and the interior.

The final result and the image at 100% size.

Finally a good technique for making objects look like they have depth is to add a shadows both on the object using a slightly darker shade and to add a shadow as the light source we looked at earlier would cast.

This article was posted on 17 July 2009 in Pixel Art, Tutorials

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.