The Complete Guide to Isometric Pixel Art
[ October 22, 2004 ] by Rhys Davies aka RhysD
A long tutorial made of 7 chapters, covering all the aspects of isometric pixel art: drawing basic objects, colouring, lighting, texturing, drawing people, etc.


CHAPTER 1

Introduction

Isometric Pixel Art (IPA) is a modern form of digital art that only recently has been accepted as a new art form. I’m sure most of us have seen this typical type of artwork in old games such as ‘X-Com’ or the relatively old ‘Ultima Online’. The 2-Dimentional (2D) representation of a 3-Dimentional (3D) object is fascinating to many people. This is possibly because of the simplicity and amount of small details that can fit into a single IPA piece. It doesn’t need that much brain power to figure out, yet it is pleasing to the eye. IPA can be compared to cartoons in many ways, as people like to look (watch) and accept the 2D art form as it is very simplistic and easy to follow. The main purpose of any art work is that it draws your attention. In many ways IPA is set out to achieve this, that is, to represent something that looks like it could come from the real world, yet you know it’s just a computer generated image (CGI).

Each separate IPA image is always going too made up of single computer generated blocks, known as pixels. Each pixel is the same size as any other pixel, but it can be any colour you can think of and it can fit together with other pixels, any way you can think of. You can think of a pixel-based image as you can a mosaic in real life that is made up of tiles to form an overall picture. To see an example of a single pixel take a look at this letter ‘i’, the single pixel is the small dot you see above the long vertical line. In fact the whole letter is made up of single pixels that have been joined together to appear as one long stoke or line. The pixel will be explained further along in this reading when we look into tools used to create IPA.

Basic Knowledge

To even begin to be able to understand Isometric Pixel Art you need to have a fair understanding about how to work the basics of computers. This includes operating the mouse, keyboard, loading saving, etc. I know this may sound silly since you’ve managed to get yourself to this website, but constantly I am asked by people if I could teach them how to do this sort of art, even when they are unable to even do basic operations on a computer. So please people, before even continuing from this point forward, if you are lacking in the basic computing skills please go to a course or something. Then come back when you are ready.

Besides from the basic computing skills you will need a dash of creativity, a splash of enthusiasm and a pinch of artistic flair (that last point is merely a rumor.) Also, some basic understanding of paint software such as MS Paint, (which we will be using primarily) could come in handy.

Tools Required

Right, now that we’ve flown past the boring stuff we can get on to actually looking into how to make this ‘Isometric Pixel Art’. Before we go anywhere you need to have access to a small little program that ships with most versions of Microsoft (MS) Windows, called MSPaint.

To access it on most computers running the Windows Operating System please follow these simple steps. Click on the Start button, scroll up to the Programs folder, then up to the Accessories folder, and now once that’s open Paint should be on the list of programs that appear in the Accessories folder. If not Paint might be under the next folder up the top of the Accessories folder called Applications. Anyway, once you’ve found it click on it once and it should load. Congratulations you’ve just loaded MSPaint and you are one step into learning about Isometric Pixel Art.

Apart from PAINT, you can use many other programs to draw IPA. Programs such as Adobe Photoshop and Paint Shop Pro do the job well (possibly better than paint according to some people) but are just to darn expensive, hard to get hold of, and way to complicated for the average beginner to use.

Ok so let’s see what we have on our list so far - 1 computer, 1 copy of MSPaint, 1 mouse, and 1 keyboard. If you’ve ticked everything off on that small list then you are ready to create some Isometric Pixel Art.

All is good so far unless of course you want to convert your final product to an image format that is suitable for the web (please don’t use bitmaps files on your homepages, it’s terrible!) I find that GIF files are fine as far as quality wise is concerned. Also if you are looking for that extra mile in terms of quality and minimal color loss, use the PNG format. To convert your final bitmap files into these filetypes please do not save them as this using MSPaint. Unless you want an extreme loss of color and overall crappiness for your masterpiece, do not try and save them as a GIF or PNG using MSPaint. Instead search for a simple BMP to GIF converting program to save your files. Or if you are a lucky person you will have access to programs such as Adobe Photoshop or Paint Shop Pro, in which case you should save your bitmaps as GIF or PNG files using these top quality programs for a top quality outcome.

Throughout this tutorial the only program we will be using and discussing is Microsoft Paintbrush. Please, if you don’t have access to this program anywhere, do not bother continuing the tutorial until you find it.

Ideas/Research

A good way to start any IPA piece is to do some initial research into any ideas you have about what you are going to draw. Write down any ideas that come to your head during the day, and when you are ready to create a new piece simply select an idea from the list. This really does save loads of time instead of sitting there with MSPaint open, trying to think of something to draw.

Once you’ve selected an idea it’s always good to research it first before starting to draw it up. Use a search engine such as Google or Yahoo to search for your idea. For example, I had an idea awhile ago to draw up a miniature Roman village. I had an image in my mind about what it was going to look like but I had no idea as to how they structured their buildings and what colors I needed to use to make it as realistic and good looking as possible. I spent about an hour or two searching the Internet, trying to find pictures of Roman buildings and so on. In the end the research really helped me when it came to designing buildings and using the right colors in the piece. Although I never finished the village, I keep using the same process today, always researching into a topic if I am not sure on how it would look.


     
 
 
Name: Rhys Davies aka RhysD
Location: n/a
Age: N/A
Flash experience: n/a
Job: n/a
Website: http://www.rhysd.com
 
 
| Homepage | News | Games | Articles | Multiplayer Central | Reviews | Spotlight | Forums | Info | Links | Contact us | Advertise | Credits |

| www.smartfoxserver.com | www.gotoandplay.biz | www.openspace-engine.com |

gotoAndPlay() v 3.0.0 -- (c)2003-2008 gotoAndPlay() Team -- P.IVA 03121770048