Creating Isometric Pixel-Art

« 2008: A Web Space Odyssey | Main | Coachella 2008 »

March 29, 2008 11:54 PM

From dictionary.com:

i·so·met·ric -adjective. Drafting. Designating a method of projection (isometric projection) in which a three-dimensional object is represented by a drawing (isometric drawing) having the horizontal edges of the object drawn usually at a 30° angle and all verticals projected perpendicularly from a horizontal base, all lines being drawn to scale.
pix·el -noun. The basic unit of the composition of an image on a television screen, computer monitor, or similar display.

Let's begin…

Preparation

To create isometric pixel art, you really only need two things: a computer and an imagination. I typically create my pixel art in Microsoft Paint because I find that its extremely limited range of tools simplifies the process somewhat. However, it also makes color management a lot more difficult than it should be. Adobe Photoshop is also a great program for creating pixel art. If you are comfortable working in Photoshop (and have access to it), I'd highly recommend using it. For the purposes of this tutorial, I am going be working in MS Paint.

Once you have decided which program you desire to use, you'll need to locate the right tools for the job. First, you'll need a tool that can draw one pixel at a time. In Paint, that would be the Pencil tool. The Line tool will also prove useful, but you'll want to make sure to use it on its thinnest (1px) setting. Finally, you'll be using a lot of the Zoom tool. In Paint you have three basic zoom options: Normal Size, Large Size, and Custom.

Zoom Menu

I prefer to use the Custom Zoom set at 800%. This is the highest Zoom setting Paint allows, and it really lets you see what's happening at a pixel level. There is also an option under the Zoom menu to Show Grid. When checked, this shows a grid that outlines each individual pixel. Once you have established the zoom level you are most comfortable with, the Zoom tool will stick at that level, so each use of the tool will automatically zoom either to that level, or back to Normal Size with each respective click. You may notice that I did not mention the Eraser tool. In Paint, the smallest area allowed by the Eraser tool is four pixels by four pixels. Because of this, I find that using the Pencil tool to erase is much more helpful. The default foreground color in Paint is black, and the default background color is white, which is perfect for what will be covered in this tutorial. While using the Pencil tool, the left mouse button will fill the foreground color (black), and the right mouse button will fill with the background color (white). Therefore, if you need to erase, simply hold down the right mouse button and draw over the area you want to erase. You can also change the foreground and background color by left-clicking or right-clicking a swatch respectively. The currently selected foreground and background colors can be viewed in the Color Box.

Tools:

Tools

Creating a Box

We'll start with a simple exercise: drawing a box. A box is comprised entirely of horizontal and vertical lines, so this will make our job easy. There are really only two main principles to keep in mind when creating pixel art in isometric perspective:

  1. Vertical lines will always be created straight up and down.
  2. Horizontal lines will always be created at a ratio of one pixel up to two pixels across.

For this example, I will be working at 800% zoom with Show Grid on turned on. To begin, simply draw a vertical line the height which you wish your box to be. You can use the Line or the Pencil tool. Starting at the bottom of that line, draw a horizontal line moving up and to the right at the one pixel up to two pixels across ratio. Keep in mind that when I say, "horizontal lines" I am referring to lines that would be parallel to the ground in real, 3D space. Do the same for the left side. These lines will create the bottom of the box:

Box 1

Next, draw vertical lines up from the ends of each horizontal line that are the same height as your original vertical line. Connect both of those to the original vertical line using the horizontal line ratio:

Box 1

Finally, complete the top of the box with two more horizontal lines:

Box 1

Intersections

You'll notice that when two horizontal lines meet perpendicularly in my example, they create a three pixel wide section. This is purposeful. Some people prefer to keep that intersection at two pixels wide and draw the vertical line up from either the left or the right pixel. I find that this method only confuses the issue. If you get into the habit of keeping intersections at three pixels wide, you will always be able to draw your vertical lines up from the middle pixel, which keeps your drawings consistent.

Final Thoughts

A box is one of the most basic shapes you can create using this method, but it is the building block of virtually all other, more complex isometric pixel drawings. Using these principles, you can create buildings, chairs, tables, and many other objects. Try experimenting with more difficult objects. If using a photo for reference helps you envision what you want to draw, then by all means use one! I find that the beauty of creating isometric pixel art is in its simplicity. Once you get the hang of it, you can create entire scenes using only your imagination. As you experiment, you may also want to try copying, pasting, rotating and reflecting portions of your drawing to save time. I created this drawing of my old apartment from memory. Feel free to copy and paste it into Paint to observe how the lines relate to one another. Don't forget to zoom in! With the exception of the lamps, cats, and people, all elements were initially created using only concepts I described in this article, with black lines on a white background. The color was added later, but we'll get to that… in the future! Have fun.

Comments

1 comments so far:

I chose this one to feedback on. A test really, to see if you get the message this time.

- Dan

Posted by Dan Teeter | April 3, 2008 1:41 PM

Submit Feedback:

RSS