Real Pixel Art

Plus Cheating!

A Non-Isometric Pixel Art Tutorial

by Dwight Delleva (under construction)

Introduction:

This guide is based on my knowledge and own style especially created for game design.  The guide actually has a Cheat section where amateurs can easily follow some editing tricks. 

Pixel Art if you don't know is a digital art done by painting in pixels.  The tiniest part of a computer image is what you call a pixel.  Pixel painting is equivalent to bitmap painting and the program MSPaint is what you all need.  Where can you find pixel art?  Pixel art can be found and used especially in 2d games.  If you have seen or played RPG's like Final Fantasy in the SNES console, everything is in pixel art.  Familiar with the word sprite?  Sprites are the characters you seen in the game and another term - tileset is where the characters are on or basically the map where you can walk around  including areas where the character can't pass through such as walls of buildings.  Maps or the game environment are made up of a tileset and a tileset is made up of tiles.  These tiles were designed so you can extend or expand floors and walls for example. 

Images in pixel art would look amazing when you look at their normal size.  But when you zoom, you will learn that the image is a trick of impressive color shading.  Look at the example below, believe it or not, it's a bitmap painting.  Pixel art is mostly about zooming in, shading and color palettes.

Preparations:

1. Be patient.  Painting pixel by pixel should be slow for beginners.  As you learn then often practice, the quicker you get.

2. Do not rush (unless you're a professional).  Rushing things will make your work ugly.  Do it slowly but surely.

3. Before making a tileset (for games), have an enumerated list of things that you want to be included in the tileset.  Click "view" to find an example  below I created for the interior of a house.

    

   MY INTERIOR PLAN
   SALA	KITCHEN	BEDROOM
   pot w/ and w/o plants vase w/ and w/o flowers cabinet / displays chair / table mat / carpet sandals / slippers / boots displays (hanged or not such as picture frames, clock, mirror) fireplace candle / lampshade / lantern bookshelf altar	stove sink hanged displays (vegetables, fruits, fish, meat) chair / table plates w/ and w/o food cup / glass / bottles (milk, wine, beer, potion) kettle / pan knife woven bag / basket	bed pillows closet / wardrobe / chest mirror chair / table displays (hanged or not such as picture frames, clock, mirror) pot w/ and w/o plants vase w/ and w/o flowers cabinet / displays mat / carpet books toys / doll crib candle / lampshade / lantern
   BATHROOM	STORAGE	MISCELLANEOUS
   toilet bowl pale w/ and w/o water bath tub / shower soap / shampoo mirror cabinet clothes / cap / boots / shoes / slippers	pots boxes with contents equipment / weapon (jewelry, armor, medicine) rope sacks bombs barrels rake / shovel chest broom	spider's web Christmas tree piano guitar bird cage
   note: Things that are the same and can be found in other areas of the house can  be just taken as one so, you can just make a single piece or otherwise if you want variety.

4. After listing possible interior things as seen from the table, the next step is   to make their draft equivalent.  Make sketches on paper.  Use them as reference when painting on the computer.

5. Prepare your color palettes.  Refer to the image above.  The leaves of the tree contain 5 different shades of colors from the darkest to the lightest.   The palette I used are 5 shades of green for the leaves and 5 shades of brown for the trunk.

6. You can not paint in pixel if you don't know how to use a bitmap painting program, familiarize yourself with MSPaint's tools.

Program:

We use the easiest MSPaint program to draw pixel art.  We'll talk about the program's important tools. 

Methods:

Normal View	Dithering	Without
	(zoomed view)	(zoomed view)

Normal View	Dithering	Without
	(zoomed view)	(zoomed view)

Try to look at my tree house example under the variety section.  Dithering was applied on the flooring of the veranda, door, mini chimney, etc.  Dithering was not applied on the trunk of the giant tree, lighted window, pipes, etc.

1. If you finished designing the other half...

2. Use the flip function, "horizontal"...

3. Join the two halves.

You might find this some sort of cheating, but pixel artists do this for an easy and quick finish.

If you think only cheaters do this, a BIG NOT!  Let's take a look at a game like Neophyte (windows).  If you study the screenshot by looking at the marked furniture, you'll find flipped pieces.

You can use flip to easily make the parallel image of any upright things like what they did with the chair as seen above and what I did with my example below.

1. A bamboo chair right-facing.

2. Flipped to make it face left.

3. Final product.

Another game example is the Star Ocean (snes).  The left and right sides of the bed, the windows including the curtains, and the walls looked identical because they were just flipped.  You can actually find other flipped things if your eyes can find them!

That includes the diagonally facing wall, the carpet, the legs of the chair, the top area of the bookshelf, the pot of the plant with red fruits, and the weighing scale.  Why pixel artists do this?  Again, this technique is easy and quick.  Artists also make use of the other side to make a new side.  They do it by modifying some parts of the image like the example below.

1. This is the first half of my watermelon.

2. I flipped the half.

3. Joined the two halves.

4. Edited some of the other half.

5. Added some red and black dots making the juicy flesh.

You can also use the 'horizontal' and 'vertical' flips to any applicable pieces.

1. Original pose.

2. Flipped horizontal.

3. Flipped vertical.

4. Flipped horizontal.

An example of re-coloring.  The same flower buds, only in different colors.

Re-coloring can be applied to anything.  You can redo the hair, costumes and skin of your sprites.  You can re-color some parts or the whole image.  Final Fantasy 3 used this method on the walls as seen in the three various house interiors below.

They used the same looking wall.  The only difference is their color palette.

Cheating Time!

(under construction)

1. I used the same base for my two fruits.

2. I draw various sizes and poses of the fruits.

3. I made the two types of leaves.

4. By copying then pasting the fruits and the leaves to the same base, I easily made two variations of each hanged fruits.

Examine the lamp.  If light is on the left side, the darker the color becomes on the right side.  You can distinguish where is light coming from because of the bright colors used that gradually gets darker. 

The lightest color as seen in the palette is used to emphasize sunlight's location and the darker colors stresses the lamp's shadow.

The best sunlight area is the upper left or upper right of the object.  You can also just make it left or right.

Using no highlights and shadows makes a flat-looking picture.  To show shape detail, let there be light and some darkness.

You can make up to 24 vine varieties by just extending the length of the vine, adding the curls to the original image and to the extended vine plus when you add the various colored flowers.

You can avoid monotony by following this method.  The same principle is followed when you make a map for a game. Randomly designed maps are not boring to look at.  Things with no variety are uninteresting.

Examine the next picture.  What varieties can you find?

These are the lamps, windows, and the stairs.

Find another variety of my tree house in the next picture example.  The first picture had verandas.  The next simpler picture has no veranda.  Both tree house designs used the same trunk base.  The element which is the veranda was removed to make a new kind of tree house.

Comparing the two examples, we can conclude that variety can be implemented not only with small things that makes up the image but with the over-all look of the image including these small things.  (Take note; the monkey was done using a cheating technique)

Where to put variety?  Walls (cracks / no crack), trees (with fruits / no fruits), flowering plants (with / no flowers),  and mostly anything in your tileset.  Refer to my Interior Plan table at the beginning ("with or without") for more examples.

More Coming Sections:

• Anti-aliasing
• More dithering techniques
• More Lighting methods
• Tileset creation
• Creating Sprites
• Animated tiles and sprites