Images that are used by the computer can be roughly divided into two
The first type of images is the so-called bitmap graphic or
raster graphic image; the second type is the vector
The fundamental building blocks of vector graphics are vectors, hence
A vector is a mathematical description of a line or a curved line. Adobe
Illustrator uses so-called 'Bezier curves' to describe an image. A
vector graphic can be resized without any loss of quality, unlike a bitmap
graphic. More details about vector graphics can be found in the Adobe Illustrator
Bitmap graphics describe an image as a collection of colored dots, or
so-called pixels. The pixel is the fundamental building block of
a bitmap graphic.
By resizing a bitmap graphic the amount of pixels increases or
decreases, which results in a loss of quality.
Reducing the size of a bitmap image means less pixels. Based on the
original size, the computer has to recalculate - or resample - the
original image. Depending on the technique used for the calculation,
more or less information is lost. Increasing the size of a bitmap image
means more pixels. The computer has to make an assumption, based on the
original image, about which colors will be used for the increased amount
Resizing your crisp pixel art illustration will result in a blurred
image, so be sure to start with the right dimensions.
The image on the left is a vector graphics, the image on the right is a
To make it a little bit more complicated, the left vector graphics is
displayed as a bitmap graphic.
The original image is an Adobe Illustrator vector graphics, but these
kinds of images can't be displayed directly in your browser.
An interesting combination of pixel art and vector illustrations can be
found at leehasler.com.
Another example of less-uniform pixel art is made by Mark Bern and can be found at markbern.com.
Learn more about dithering to mimic gradients with limited colors.
Learn more about MS Paint, my weapon of choice for making pixel art.
Learn more about images types and find out which one most suitable for your pixel art.
Approx. half the tutorial is public and gives a good insight into
pixel art and the techniques you can use. Buy the complete
pixel art tutorial to get all the information you need.
Content which is available in the paid version is shown as a shortened
text paragraph followed by a word count of the available text in the
paid version as well as the number of info graphics available in the
Pixel art began when the first personal computer was introduced.
Bitmap graphics don't need much computation to be displayed. Vector graphics have to be calculated or rendered, based on
mathematically described lines and curves, and then converted into a
bitmap graphic, since most output devices use pixels to display images.
The whole process requires a lot of computation power.
Bitmap graphics are the best option when the computation power is not
very high (early computers/cell phones). This computationally friendly
feature gives pixel art a sort of 'old school'/'retro' look.
Unlike vector graphics, bitmap graphics can't be scaled without loss of
quality. If you want to display bitmap graphics - let's say an icon - in
different sizes, for different kinds of display devices, you need to
make a different version for each size. This is a major disadvantage
compared to vector graphics.
You only need one icon as a vector graphics to display it on every
possible scale without loss of quality.
Isometric projection is a projection which is used to represent a
three-dimensional object - or objects - in two dimensions. An object is
seen from above. The top, left, and right side of the object are visible.
Isometric projection lacks perspective; objects far away from the
spectator have the same size as nearby objects. Isometric projection is
extensively used in older computer games and contemporary pixel art,
because you don't need to resize (read redraw) objects. Or in the case
of computer game perspective distortion doesn't need to be
To mimic perspective, overlapping can be used as well as color: the
further away from the spectator, the more the colors loose their
The x-axis and z-axis should make an angle of exactly 30 degrees with
the horizon. The alignment of pixels on the screen prevents the use of
exactly 30 degrees, because this angle would result in an irregular line
(left image). Instead of 30 degrees, 26.56 degrees is commonly used in
pixel art. Practically speaking, this results in a line that is regular;
the line has two pixels per interval. This is also referred to as the
2:1 pixel pattern ratio (right image).
To build a simple object, an isometric cube can be used as fundamental
The isometric cube can be made once, and then used many times by copying
and pasting. Think of LEGO® bricks in real life.
Drawing an Isometric Cube
An isometric cube can be drawn very easily
Start with a vertical line (see image 1). Next, draw a line
parallel to the z-axis (see image 2), previously described.
Again, draw a vertical line (see image 3). Next, draw a line
parallel to the z-axis. The left side of the isometric cube appears
(see image 4).
You can repeat the described steps again on the right side, but you
work more efficiently when you copy the left side of the cube and then
flip the selection horizontally and paste it on the right side (see image 5 and
The last step is to draw the top of the isometric cube. Copy the
diagonal lines at the top, flip the selection vertically, and paste it
on top of the cube (see image 8).
The outline of the isometric cube is finished.
You could use the outline (see image 8) as a building block to create isometric
objects, but it's more handy to add some shading first (see image 9).
By using a shaded isometric cube, the shading needs to be done only once
(and then copied many times). The creation of a simple isometric object
is much easier with a shaded isometric cube, since the shap is more clear than just an outline of an isometric cube.
A Simple Isometric Object
The shape of the fundamental building block, an isometric cube, is
important, since not all blocks are useful.
Like the 2:1 pixel pattern, ratio lines can be drawn best with regular
intervals: two adjacent pixels, one pixel up/down, two adjacent pixels,
The isometric cubes used on the left side of the image can't properly be
stacked vertically; the vertical lines don't fit. By using the isometric
cube on the right side of the image, the regularly shaped lines fit
The above example shows an easy way to create a simple isometric object,
with the help of one shaded isometric cube as the fundamental building
The appearance of the object can be adjusted to get rid of the
individual building blocks (basic version). The outlines inside the
isometric object are carefully removed (simplified version). Next,
highlights and shadow are added (highlight version and shadow version).
By adding highlights and shadow, the shape becomes more spatial, so that
it takes a spectator less energy to perceive the shape.
As the last step, an extra border can be added to separate the object
from the background. There's no real reason to add an extra border,
other than as a personal, subjective preference.
As you can see, it's quite easy to create a simple isometric object.
The object is simple, the complexity and/or scale can be changed, and
the workflow remains the same.
An isometric cube can also be used as a reference for constructing a
more complex, detailed pixel art object.
The teapot and Nintendo GameCube are made with the help of an isometric cube.
Isometric Objects with Curves
Curves are more difficult to draw, but after some practice it can be done.
Like using lines with a regular interval to make isometric pixel art,
curves can be drawn following the same principle. For example, you could
first use a line with three adjacent pixels, followed by two adjacent
pixels and so on.
Everyone can learn the basic rules, but don't follow the rules too
Try to practice and experiment with different angles, colors, choice of
Non-isometric Pixel Art
Non-isometric pixel art is pixel art that is not isometric.
The IC-Project pixel art illustration is an example of non-isometric pixel art
as is the pixel art illustration of Jesus Christ.
Pixel Art Characters
Pixel art characters are most likely not drawn isometrically.
The pixel art character below this text is an example of non-isometric pixel art.
For more information about pixel art characters see
example one and
The number of pixels rapidly increases, even with small pixel art
illustrations, which makes creating pixel art a time-consuming
The IC-Project pixel art illustration contains 1.600 pixels horizontally and 1.040
pixels vertically. The total amount of pixels equals 1.664.000 pixels
(1.600 x 1.040 pixels).
Not every pixel is individually drawn; some areas
remain white. On the other hand, not every pixel is drawn right away at
the right position, and some parts of the illustration are drawn a few
times before they look right (see the 'Deleted Artwork' chapter).
The actual amount of pixels drawn is probably a multiple of these 1.664.000
To save your pixel art, you can choose various kinds of file types, such
as GIF, PNG, or some other file format that is lossless.
8-bit (color) graphics are bitmap images with a limited amount of colors.
The color per pixel is described using a so-called
byte. A byte consists of 8 bits. Each
bit is similar to a light switch; it can be on or off, or, more
specifically true or false.
Each pixel is represented by one single byte. Its
value can range from 0 to 255; 256 possible colors. Each value between 0
and 255 represents a specific color.
The complete text is available in the paid version of this Pixel Art tutorial. approx. 369 words / 1 infographic
The Fun of Pixel Art
You've just read that creating pixel art is a very time-consuming
process, so why do it at all? Pixel art allows you to work on a sort of molecular level of an image.
You have to puzzle as to how to place a pixel at the right position; one
pixel to the left or one pixel to right, or a different color of the
pixel, can make a difference.
Basically, creating things is fun.
You could start the creation process with some flat gray areas
(see top left image). You may have serious doubts as to whether it will
ever look right in the end... You start working on specific areas and
give these areas more detail (see top right image). While working on the
illustration, you have to find out which places need adjustments, and
which places already look right.
Slowly you discover that things begin to look more and more like the
image or idea you had in mind (see bottom left image); flat areas become
three-dimensional, details start to emerge, and previously separated
parts start to blend together.
While working in a very concentrated way, you may experience a very
pleasant mental state of mind, or 'flow'.
Finally - after many hours - you see something that is even better than
you thought or hoped it would look (see bottom right image).