Introduction:
Pixel Art - Part I
There are many different styles in Pixel Art, from nearly photo realistic art to the most basic graphics seen in early computer games. In this tutorial series we are going to take a deeper look at my way of doing “Isometric Pixel Art”, which I think is somewhere between the two mentioned styles, probably more towards the basic one. In part three and four you will also learn how to take your Pixel Art to the next stage and make it interactive in Flash.
I also want to say that this is not as easy as it looks. Well, it is really simple but there are no secret short cuts or plug-ins for making great Pixel Art. You have to have a lot of patient and keep on practicing.
The tutorials require some prior intermediate knowledge of Photoshop, Flash and actionscript. All examples and screenshots are made with Photoshop CS2 and Flash MX 2004, but older versions of the applications could be sufficient.
1. Technical And Historical
Before we get started I feel compelled to write something about the technical and historical aspects of things. Jump to “basic rules” if you do not find that stuff interesting.
The meaning of Pixel Art is rather self explanatory but what about isometric? Originating from the Greek words isos (equal) and morphe (shape) it can be translated into “equal measurement”. It refers to the fact that all objects in a space, viewed as an isometric projection, are consistent in scale (i.e. objects in the background does not get proportionally smaller to its counterparts in the foreground). As a form of orthographic projection it is very common in technical drawings, but not to make things too complicated, isometric projection simply is a way of representing a three-dimensional object in two-dimensional space.
This style of computer graphics was first seen in 1982 when the unique game Zaxxon was released by Sega. Run on Colecovisions video game console with a 3.58 MHz CPU and 8 KB RAM it was very impressive at the time. The game was also released for the Atari 2600 later that same year but due to the consoles very limited hardware (1.19 MHz CPU and only 126 bytes RAM) it was not made isometric.
1.1. “Zaxxon” (1982) was the first game to use isometric projection
The isometric style can feel a bit outdated these days. But it is still very common, particularly in computer games. Much because it makes programming so much easier but also due to the fact that it is not as CPU intense as other techniques. It can also look really good. Isometric projection is used in many of the most successful games. A few that stands out are Civilization, SimCity and of course The Sims, the best selling PC game in history. I think this shows that everything does not benefit from mind blowing, ultra realistic 3D graphics.
1.2. Isometric "The Sims” (2000) is the best-selling PC game in history
2. Basic Rules
The first and most important rule of Isometric Pixel Art is how the basic line is constructed. Isometric projection is sometimes called 30/30 perspective because of the 30° angle, but as you can see below this is not entirely true when it comes to computers. An exact 30° angle produces an irregular line while 26.565° will create the line we are after. This number will be used later in the tutorial series but at this point you should just concentrate on what the left part of the image below tells us: a perfect pixel line is one pixel up and two across.
1.3. 26.565, the holy number of Pixel Art
You can of course use any type of lines in your work but if you want smooth straight lines, stick to the variations shown below.
1.4. Perfect pixel lines
3. Lines To Shapes To Objects
These lines are then used to construct basic isometric shapes. Once you understand how these are made, Pixel Art is much a matter of duplicating and tweaking shapes into more complex objects. Below you see six basic shapes (five really, but the two pyramids use different kinds of pixel lines to form different heights) and how these can be duplicated into some kind of weird castle building.
1.5. Basic isometric shapes can be used to construct more complex objects
4. Shading
In order to give your objects a three-dimensional look in this two-dimensional space we use shading. It is not rocket science, just a matter of consistency. First we have to decide where our light source is, mine is usually in the top-left corner.
- Start by putting a simple blue cube on your gray grid.
- Create a new layer and use the Paint Bucket with Contiguous and All Layers selected to fill surfaces with black color with 20% opacity. Now you have a simple shade.
- To add a darker shade to the right side surfaces, simple click a second time with the same tool.
- Create a new layer for the inner lines and trace those with a white 1 pixel pencil.
- Hide the two top layers and remove the objects black inner lines by making them blue.
- Now select the top layer with the white lines and set the layer opacity to 50%.
Show everything and you should have an object like in frame 7.
1.6. Seven simple steps to shade your object
There are of course many other ways of shading your objects, this is merely the way I prefer to do it. Just remember that you have to be consistent!
5. Tile Based World
Tiles are wonderful things if you want to make your Pixel Art interactive. They are what make up the isometric grid our objects are placed on. Because of that they make the coding part a lot easier.
The grid is really just two-dimensional and can be described using a simple two-dimensional array (you will learn all about that in part three). It is then rotated 45° and reduced in height by 50% in order to be transformed into an isometric grid as seen below.
1.7. Making a 2D grid isometric
When working with tiles you have to be careful how you construct your pixel shapes. One pixel too wide can ruin that perfect pixel style we are after. Below you have three examples that can appear identical at first, but they do have some important differences.
(Note: the blue cubes are different from each other. The other colored cubes are identical to the blue in each example)
1.8. 32 pixel wide cubes. Here you get a double line because the outlines do not match on one of the sides
1.9. 34 pixel wide cubes. Here the outlines seem to match but you get a one pixel shift when building on the height
1.10. 33 pixel wide cubes. I find this the best way when working with tiles. The cube itself is one pixel off in the edge but when you combine several cubes you get correct lines
6. File Formats
I would think that most people who read this tutorial already know what different image file formats there are, so the following is just what a Pixel artist need to know. GIF and PNG are the only two alternatives when it is time to publish your work. It does not matter if you are importing your images into Flash or putting them directly on the web. The JPG format however use compression algorithms that will distort your precious pixels, it is also unable to handle transparency.
The main differences between GIF and PNG are the amount of colors supported and the possibility to use opacity. GIF can use only 256 colors while PNG support 24-bit or 16 million colors. PNG is also known as PNG 32 (PNG 24 in Photoshop), where the last 8 bits are reserved for the alpha channel. This is what makes opacity possible, something only PNG has the privilege to use.
7. Conclusion
Well, by now you should know the basics of Pixel Art and isometric projection! In the next part (Workflow) we will use Photoshop together with your knowledge from this tutorial to create a stunning isometric yogurt shop.
BTW, here's a great tip by Peter NRG when you're working on pixel art: You can use two windows displaying the same file: one zoomed in at the level you want and which you use to edit, and the other one displaying the updated content you're working on @ 100%. You can open a second window here: Photoshop Menu > Window > Arrange > New Window for 'filename'. More tips are being discussed in this thread.
|
