Pixel Artist’s

Beginner Booklet
Chpt. 5
 Pixel Artist’s
Beginner Booklet
Chpt. 5
 FinalRedemption.com
Copyright © 2007 Alex Hanson-White, All rights reserved worldwide, including the right of
reproduction in whole or in part in any form. May not be copied or distributed without prior written
permission. To find more content of the nature defined within this e-book, please visit
http://www.finalredemption.com . If you received this e-book from a different source, please notify the
author so that the necessary actions may be taken to prevent unauthorized reproduction or sharing.

DISCLAIMER: This e-book is supplied as is to the recipients whom are authorized to read it. In no
way may the author be liable for any loss of profit or any other commercial damage, including but
not limited to special, incidental, consequential, or other damages. The content within this e-book is
meant for informational & educational purposes and shall not be sold, shared, nor reproduced in any
way shape or form other than that of personal use.
FAIR USE NOTICE: This e-book may contain copyrighted material whose use has not been
specifically authorized by the copyright owner. This material is available in its efforts to advance the
understanding of the subjects discussed herein this document and does not intend to exploit it in any
way shape or form. All material which is used is credited to their rightful owners and together this
constitutes a 'fair use' of the copyrighted material as provided for in Section 107 of the US Copyright
Law. If you wish to use such copyrighted material for purposes of your own that go beyond 'fair
use'...you must obtain permission from the copyright owner.
 Pixel Artist’s Beginner Booklet

Having explained some of the basics to tiling,

let us look at some alternative styles of tiles.
There are various styles of tiles which produce
different results, for instance, the previous
example can be referred to as having a 3/4ths
view style perspective, which is what most rpg
games use, so it could also be referred to as rpg
style tiles. This style basically consists of a
perspective which is partway between a side-
view and a top-down view. The side-view and
the top-down view are also a type of tile style. Cadaver
The side-view style may also be referred to as
platform style, because most platform games or
side-scrollers have a perspective which is from
the side and involve gameplay which makes use
of platform-like surfaces which the characters
run on. An example of a platform game which
utilizes tiles in this style is Lomax for the Sony
Playstation:

Boktai

Lomax
Earthbound
There are also more unorthodox styles of tiling
which aim at producing perspectives which are These three screenshots show how the technical
at an angle, such as isometric and planometric. placement of the tiles can be more complicated
Due to the complex nature the style can create, than a simple x, y matrix and that if you were
we will only briefly touch upon it in this interested in developing graphics for such a
booklet, leaving the intricacies to the game, your knowledge about how the game
intermediate booklet. To get us familiar with the would utilize them would need to be a little
style though, I provide the following more involved. But what if you weren't
screenshots from Cadaver for the Amiga, Boktai intending to make a game, but rather just a
for the Gameboy Advance, and Earthbound for simple picture and wished to have it constructed
the SNES.

1
 Chapter 1 - An Introduction

in a similar perspective. I will tell you how to go We now know how to align our pixels; let us
about recreating such a style. now look at how we can use these lines to
construct isometric art. If we were to pixel a
This brings us to the realm of isometric pixel cube, we would be drawing it at an angle which
art, which is quite popular due to its straight- would allow 3 sides to be viewed. The edges of
forward nature it uses. At its core, it relies upon the surfaces which would be parallel with the
angles to define how its spatial organization is ground would be drawn with the 2-1 ratio where
managed, yet it lacks any perspective due to its as the edges of the surfaces which are adjacent
consistent viewpoint across the image. This to the ground, and therefore vertical, would be
means that objects never recede or change size drawn as a straight line. To give an example of
no matter where it is drawn in the image. It does such an object, I have provided the following
however create the illusion of three dimensions picture of a cube.
by allowing itself to show three sides of an
object. The standard isometric uses an angle of
30 degrees which unfortunately if drawn to a
computer screen would produce a line which is
unevenly stacked.

Cube 200% Magnified

Notice how the edges which are drawn at a 2-1

ratio are parallel to the floor while the other
edges which are adjacent are drawn as a vertical
line. This is because in order to suggest that a
30 degrees line has depth you must move it at an angle
which describes a change. For instance, if you
had a horizontal line, then it wouldn't look as if
it were receding or coming forward since if you
moved left or right it would stay the same.
Similarly if you had a vertical line, as you
moved up or down along it, you would move
26.56505 neither left nor right. This lack of change
suggests that it is staying in place and moving
If you notice the slope of the triangles, the 30 neither forwards nor backwards because in order
degree one has an awkward inconsistent x offset to move forwards or backwards, you require the
for each y position up or down, while the 2-1 ratio. There are of course exceptions to this
26.5650 degree slope has a consistent pixel step rule depending upon the situation, but the 2-1
of 2 to 1(for every 2 pixels left or right, you take ratio would still be present regardless.
1 step up or down). The reason the 2-1 ratio is
used is because it is clean and easy to manage. It
is far easier to remember when to raise or lower
a pixel as you move left or right since it uses
whole numbers, as opposed to the 30 degree
slope which has a decimal of 1.7241, meaning
for every 1.7241 pixels left or right, you would
need to go up or down 1 pixel.

2
 Pixel Artist’s Beginner Booklet

Geometric Shapes

200% Magnified
Step 1 - Plan out our Character:
Here are some other geometric shapes as
examples of objects which can be created easily
In our first step, we'll be planning out how
in isometric form. You can create any form in our character will be posed. If we want to
isometric style; it is just easier to do simplistic exemplify the isometric nature of our world in
geometric shapes. For instance, an example of a which the character will exist in, it is useful to
complicated object would be a person. In order have the character also use aspects which make
to manage such complex shapes, sometimes it is isometric art look the way it is. Here we have a
helpful to simplify them into easier more diamond shape in the 2-1 ratio; this will be our
readable forms. For instance, one could use a floor in which the character will stand upon. As
cube as a head, or a sphere, and some blocks or you can see within it, are a couple black spots
cylinders for the limbs. In this way, you quickly which are spaced apart in a 2-1 ratio. These
get a feel for where the body parts are placed spots represent the locations where the
within the isometric world. Once you have a character's feet shall stand. The grey space
feel for it, you can begin to refine the details. between them shows that the 2-1 ratio is
Many people interested with isometric art, do present, because if you notice the edge of the
this, not only for its ease, but for its consistent grey space, you can count for every 2 pixels left
look. By having people look isometric, they or right, it goes 1 pixel up or down. This is how
appear to fit into the isometric background, we know that the black spots are aligned along a
environment. I will now walk you through the 2-1 ratio line.
process of creating an isometric person, and
show you the methods for aligning things From here, we can begin to plot out the
isometrically. character as we know exactly where it'll be
standing. To do this, we'll roughly draw in the
key points within the character to which we will
later use to pixel the rest of the character.

3
 Chapter 1 - An Introduction

character in which I drew here is about 6 to 7

heads tall. By heads, I mean that if you take the
height of the head, and measure how many
times it would fit into the rest of the character
vertically, you would come out with about 6 to 7
heads if you include the actual head of the
character. Each arm is about 2 to 3 head length
for this character. Ultimately, you should strive
for what looks right. You do not have to do
things perfectly. As long as you understand the
concept, then you can apply it to what you do
and in time get better at it.
Here we have a character which is plotted
out roughly. What you want to do as you plot
out your character, is make sure that things
which should align, align properly. As you can
see with the red lines, they travel through our
character's body from one side to the same point
on the other side, for instance, the right shoulder
to the left shoulder. If drawing a line from one
to the other produces a 2-1 ratio line, then you
know that it is aligned isometrically. You can
see this done with the right hip to the left hip as
well as the left knee to the right knee. Step 2 - Begin finalizing the shape of our
character:
Some things you may not want to be aligned, for
example if you want an arm doing something
differently than the other arm, or a leg doing Here we have our character more fully
something differently then the other leg, so not shaped. In the process of filling out the forms I
everything must be aligned in a 2-1 ratio. It is lengthened the legs by 1 pixel because I felt
perfectly fine to not have anything aligned in they were too short. I still feel they are a bit
this matter, but it does help to make your object short, but that is ok. Your character doesn't need
look as if it belongs in an isometric world where to be perfect, so I left it as it is. What I want to
things follow this 2-1 organization. show at this point is the shape of our character.
As you can see, it has more thickness to it. The
Once you have your character plotted out to a body and limbs make more sense. It may not
suitable degree, and have checked whether exhibit the 2-1 ratio we talked about earlier, but
things you want aligned are aligned correctly, if you measure out a point on one side of the
then we can go forward and begin filling out the body with the opposite point on the other side,
shape of our character. It is really that simple to you will find that the alignment of both points
setup, and you can probably see why many would still sit along a 2-1 ratio, and this is what
people tend to enjoy isometric style pixel art. If makes our character look isometric even if the
you have trouble with drawing a person forms are not. If you want to make the forms
correctly, it may be of some use to study some look isometric or at least exemplify the
anatomy. Since it is a large topic, I will not go isometric environment with which the character
into it too deeply, but I will say that the exists within, you could give them more of a

4
 Pixel Artist’s Beginner Booklet

geometric look to them, because with geometric

shapes, you get clear precise lines and isometric
worlds are all about their lines and how things
are aligned.

So what we have at this stage is a character 2-1 1-0

which has some mass, or form made up of space
with a black outline which surrounds it, Compared to the 2-1, the 1-0 shows details
signifying the edges. The black outline at this which don't adhere to the forms in which they
stage defines edges of shapes so that the spaces are on. In effect, this causes the details to appear
don't all just melt together into a blob. In the at a different perspective. The eyes for instance
next stage, we can begin to add more tones in look as if the character is looking upwards at the
order to render our character and describe the viewer rather than forwards as the 2-1 image
shape of the forms more clearly as at the does. Similarly the shirt looks as if it is on an
moment he looks fairly flat. angle compared to the rest of the character as if
it is facing us. What can be understood from this
is that, even if you have a form which is in a 2-1
ratio, if the details on the form which are
parallel to the alignment don't align to the 2-1
ratio, then the details begin to produce results
which don't make much sense in the specific
situation.

Step 3 - Color and detail:

Plan Plot Form Final
Here we have our character which has
been colored and detailed. Obviously, it is a big Let’s recap what we did. First off, we began
step from the previous one, but lets not be too with a square isometric base to which we could
concerned with that since our focus is on place down where exactly our character will
isometric aspects at the moment and not the stand. This provides a base from which to build
aesthetics (we’ll learn more about the intricacies off of, and since we align the feet on a 2-1
of pixel art in the next booklet). If we take alignment, we know that as we build up, it too
notice of the detail though, we can see how should be aligned as well. As we build up, we
details align with the 2-1 ratio as mentioned can always check to see if it is aligned by
many times before, such as the white line on the measuring one point from its opposite point on
shirt or the eyes. Having these types of details the other side. Once we have a rough figure
aligned any other way would produce drastically which describes how the character will be, we
different results. Below is an example of how begin to fill out its forms into a more complete
the character would look if details on the shape which will represent the character better.
character did not follow the 2-1 ratio in which At this point, we should roughly feel how the
the forms do. character will look, and then we can begin

5
 Chapter 1 - An Introduction

adding details such as color and accessories and

features such as eyes and fingers.

Personally, what I find intriguing about

isometric art is its clean nature in organization.
When you look at isometric geometric shapes,
which are easy to produce, you quickly see the
straight edges of the forms. These edges all
share similarities with each other in that they all
exist among the 2 to 1 pixel ratio, and it is this
sharing of space which allows the clean
organization of these forms to be emitted to the
viewer. The universal isometric pixel ratio in an
image provides the viewer an anchor to which to
contemplate how the objects in the image are
placed. Without this anchor, the ability to judge
the organization and alignment of each object
would be difficult and would require additional
information present within the image to help the
viewer understand it.

The following image is an example of what can

be done with isometric art. It was created by
Gary J Lucken, and you can view his website at
ArmyofTrolls.com to see more of his work
which includes a lot of isometric art.

6
 FinalRedemption.com
Copyright © 2007 Alex Hanson-White, All rights reserved worldwide,
including the right of reproduction in whole or in part in any form.