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:
Be patient. Painting pixel by pixel should be slow for beginners. As you learn then often practice, the quicker you get.
Do not rush (unless you're a professional). Rushing things will make your work ugly. Do it slowly but surely.
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.
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.
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.
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.
Tools
Shortcuts
Function
Undo
Ctrl+Z
You can only undo for 3 times.
Repeat
Ctrl+Y
You can only repeat up to 3 times again.
Cut
Ctrl+X
Use any of the selection tool, click on the painting area then drag the mouse, the area inside the box in dotted-lines shown will be selected, right-click inside the box, click Cut. The area you chose will be cut or deleted.
Copy
Ctrl+C
Use any of the selection tool, click on the painting area then drag the mouse, right-click inside the box, click Copy. The area you chose will be copied.
Paste
Ctrl+V
After using the Cut or Copy function, you can paste the cut or copied area by right-clicking anywhere the 'painting area'. Click on paste after right-clicking.
Clear Selection
Del
Use any of the selection tool, click on the painting area then drag the mouse to the selected area you want to be deleted, press Del to erase selected area.
Select All
Ctrl+A
Selects everything in the painting area.
Tool Box
Ctrl+T
Shows and hides the tool box.
Color Box
Ctrl+L
Shows and hides the color box.
Flip/Rotate
Ctrl+R
Can be used after the Cut or Copy function. Right-click anywhere the painting area, click flip/rotate to flip horizontally or vertically the selected image or rotate by angle.
Attributes
Ctrl+E
Change the width or height of the painting area
Clear Image
Ctrl+Shft+N
Deletes everything in the painting area.
Coloring / Drawing Tools
Function
Free-Form Select
After clicking the button, click then drag the mouse in the painting area. The selected area can be then cut, copied, or pasted. Try holding SHIFT then move the selected area.
Select
Another selection tool in the shape of a square or rectangle. The selected area can be then cut, copied, or pasted. Try holding SHIFT then move the selected area.
Eraser/Color Eraser
Use to erase anything in the painting area.
Fill With Color
Must be used in a closed space so that the color will not scatter.
Pick Color
Picks color from the painting area.
Magnifier
Zooms in the painting area to a larger scale. Click button again to turn back the painting area to its normal size.
Pencil
Draw a pixel in the painting area. When you hold SHIFT, you can draw a straight horizontal and vertical line.
Brush
Larger than the pencil.
Airbrush
Let's you spray in three sizes.
Text
Write text in the painting area. Can't be used when the painting area is zoomed.
Line
Draw lines. Comes in 5 sizes. When you hold SHIFT, you can draw a straight horizontal, vertical, and diagonal line.
Curve
Draw curves. Draw a line first in the painting area. Let go of the mouse, click in the painting area, move the mouse to the desired range. You can move the mouse anywhere, the line follows the mouse pointer. This makes the curve. You can make another curve. The second curve can adjust the first curve. When you hold SHIFT, you can draw a straight horizontal, vertical, and diagonal line. Does not affect the curve.
Rectangle
Draw a rectangle in the painting area. With three selections. The first is the normal rectangle. The middle one; the area inside the rectangle is filled in white by default. The remaining rectangle is filled in black. Try holding SHIFT.
Polygon
Makes intersecting lines. Try holding SHIFT.
Ellipse
Draw a circle. Good for outlining spherical or circular shapes. Try holding SHIFT.
Rounded Rectangle
Functions the same like the rectangle only with curved corners. Try holding SHIFT.
Other Info:
Double-click any of the boxes from the color palette, click "define custom colors" to customize the colors of the palette.
From the "view" menu, click on "zoom" then "custom" to open the "custom zoom" box to choose 5 zooming ranges.
Click the area around the color palette, hold then drag the mouse to move the palette box to the desired location. You can do the same thing with the Coloring / Drawing Tools' box.
Use the vertical and horizontal scroll box if the painting area is too large or when in zoomed mode.
Find the dots around the painting area, when you click on them then drag the mouse makes you expand or contract the painting area.
You can resize (increase/decrease) images after using any of the selection tools by clicking also the dots then dragging the mouse.
Stretch and skew functions are found under the "image" menu. 'Stretch' can expand or contract selected areas or the whole painting area and 'skew' makes slants
Methods:
Dithering - is a technique wherein you blend colors to make an illusion of a new shade. Dithering gives depth to pixel art.
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.
Flipping - makes use of the flipped side to form the image as a whole. Suitable to apply on things with proportional sides.
If you finished designing the other half...
Use the flip function, "horizontal"...
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.
A bamboo chair right-facing.
Flipped to make it face left.
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.
This is the first half of my watermelon.
I flipped the half.
Joined the two halves.
Edited some of the other half.
Added some red and black dots making the juicy flesh.
You can also use the 'horizontal' and 'vertical' flips to any applicable pieces.
Original pose.
Flipped horizontal.
Flipped vertical.
Flipped horizontal.
Re-coloring - create variety by changing the original colors of the image. Re-coloring is done by simply using a different color palette.
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)
Copy Pasting - draw separate images then join them. By following this method, you can create numerous pieces.
I used the same base for my two fruits.
I draw various sizes and poses of the fruits.
I made the two types of leaves.
By copying then pasting the fruits and the leaves to the same base, I easily made two variations of each hanged fruits.
Light Source - establish an imaginary sunlight location. Decide where light will fall. Setting up the position of light gives realism to images.
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.
Create Variety - done by putting other elements on the same image, flipping images, or changing color palettes like when re-coloring. You can add, minus, or modify to create variety.
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.
Transparent Things(or see-through things) - (a re-coloring method) we can do this by directly or indirectly using / replacing colors with right suitable colors (confusing?). If you don't wish to use photoshop or other editing program's transparency tool, then we can do this the hard way.
I wanted a barrel with water. How do I create water inside the barrel? Prepare the color palette of the water. For my example, I used four shades of blue.
At first I made an empty barrel.
I used the darkest shade of my blue, used the fill button on the darkest brown.
Replaced the darker brown with a darker blue.
Replaced the lighter brown with lighter blue.
Added the ripple using the lightest blue.
This is an indirect approach because I just replaced the original colors with a new color. You can also do this directly without following the interior outlines of the barrel.
Where to apply Transparency?
Ghosts
Water, waterfalls and other liquids
Underwater things
Light, fire, and anything glowing
Shadows
Rainbows
Whirlwind
Clouds, smoke, other gases
Laser
Glass windows and walls
High-tech monitors
Cheating Time!
From the original colors...
Erased, left the open area and turned the color into light blue.
Added some design (lightened).
Pasted to the original.
You can turn the picture into blue by using any image editing program. Find color balance (RGB color values) then increase blue. The same method can be done with other transparent objects.
The Drawing Buttons Use the three drawing buttons at your convenience.
Pencil - the pencil makes a small dot when you click on the mapping area, as you drag the mouse, you can make a line. Click this button to manually draw something like the line of the dark soil as shown in the picture below.
Rectangle - the rectangle button makes a square as you drag your mouse.
Ellipse - the ellipse button makes a circular shape.
Layer Buttons - These are the map layers. The orange color corresponds to the layer level. The icon in the farthest left side is the lower layer or we'll call it layer 1. The second icon after layer 1 is the middle layer or layer 2, the third icon is the upper layer or layer 3. The last blue cube is the event layer. This is useful when some tiles are missing when testing the game like for example, take a look at the picture below. Look at the orb as marked hidden under an elevated floor tile. To fix this problem, you just insert and event in the event layer.
By inserting an event in the event layer using the right tile, the orb becomes visible during game play.
This is done by using the always on top option:
Tileset Review:
The marked tiles in the picture below are what I call the elevated floor tiles. The upper tiles can be used in layer 2 or 3 while the lower tiles can be used in layer 1. The tiles marked with "S" are used with the elevated floor tiles.
For you hero get to the upper level of the elevated floors of your cave, we can use the following marked tiles.
Look below example on how the tiles can be used. The stairs can be used in layer 2 or 3. The slope as seen under can be used in layer 1. The rope ladders can even be used like the one I did below.
The following marked tiles (below) are the tiles that I refer as edges. They can be used to add the darker spaces that makes up the shape of the cave.
The following marked tiles (below) are the cave's walls that can be used in layer 1. The tiles with broken lines are still part of the walls of the cave. The longer wall below with the shades darkening are used for pits. Other wall parts are marked and seen in the next fourth picture.
Look below example on how the pit tiles can be used.
Look at the left side of the picture (below) to see the tiles used in the mapping area. The same tiles could be found in other cave tilesets only with their appearance and other elements changed. Layer 1 is the best layer to put on the walls and the floor autotiles.
Look at the picture below to learn how to extend cave walls.
The marked tiles on the tileset seen on the left side correspond to the colors in the marked tiles on the mapping area. It can be used as what you can find in the picture examples below.
The marked tiles above picture can be used the same way as with the next marked tiles in the next picture.
For the usual cave mapping, the upper half of the cave (from the orange marked tile to the light blue tile including the red and gray) below are put in layer 1 while the lower area, the cave's edges (tiles marked with yellow, green, and brown) can be put in layer 2 or 3.
If we add the elevated floor of the cave in layer 2, we should put the edges in layer 3. If you don't put the elevated floor tiles, you can also use layer 2. You can always use any layer to place your tiles. Test play and make sure that everything looks fine. When following another approach (learn this on the section "mapping caves the easier way"), you can either use layer 2 or layer 3 for the cave autotile. Read the section on how to easily design cave's using the prepared autotiles.
The orange marked tile on the tileset below, can be used to extend the height and width of your caves. The same with the pink and light blue tiles. For a "variation" on the walls, you can use the following tiles as marked below. To add shadows on the walls, use the marked tiles as seen below. To really understand the marked tiles, refer to the pictures under "mapping caves the easier way". The yellow marked tile with the stretched rectangle in the mapping area is the shadow of the wall.
Mapping Caves the Usual Way If you want to do it the slow way, follow this tutorial.
You can use layer 1 to put on the walls, edges and the floor of the cave. We used the tile as marked below for the ground of the cave.
On layer 1, Use the following autotiles as marked below picture for the cave's floor. Draw them in a random manner.
Use the marked black tile as shown in the picture below to add the dark space.
Refer to the picture below to know what tiles are used on the mapping area.
We use the layer 2 or the middle layer for the upper edges of the cave. Refer to the marked tiles on the left side of the picture below. These are the tiles used for layer 2.
If you will use the sunlight tile, you can put it on layer 1.
You'll then have to put the edges in layer 2.
If you decide to add more things like elevation in layer 2...
...Put the elevated floor tiles in layer 3.
And this what will look like during game play:
Mapping Caves the Easier Way
Follow this tutorial if you want to map caves faster and easier.
Note: In this tutorial, you can follow either two of my approaches. For type 1, the autotiles are used in layer 3 so that the elevated floor tiles of the cave can be used easily in layer 2. Follow type 2 so you can use more tiles from the tileset. Type 2 uses the second layer for the autotiles. In this approach you can still use the elevated floor tiles. You'll just need to cover tiles in layer 3.
We can use the following autotiles for easily mapping cave interiors.
Go to the database and set them to their specific tilesets. Set the passability to square and the priority to 5. This will make the autotile feel like the normal tileset.
The autotile goes here as shown below picture.
Type 1
We used the tile as marked below for the ground of the cave.
Click on the flood fill button and click the lower layer button .
Click anywhere on the mapping area. The fill button fills up all the white area in layer1 or the lower layer.
Use the following autotiles as marked above picture for the ground of the cave in layer 1. Draw them in a random manner.
Let's go to layer 3 or the upper layer. Choose the earth cave autotile and draw any shape that will make up the cave area using the pencil tool. Add a small area for the entrance. Make this noticeable to your player's eyes as seen below in the lowest part of the map.
Use the fill tool and click outside the line you draw before. This makes the dark area as shown below picture.
Get back to the first layer and put on the walls. Use the tiles as marked on the left side of the picture below.
You can use the sunlight tile in the cave's entrance on layer 1.
Go to layer 2 or the middle layer. This is where we can add the cave's "things".
Use the third layer to fix things or add more things.
This what will look like during game play.
Type 2
Layer 1 We can use the lower tiles of the elevated floor tiles in the first layer.
Layer 2 We use the upper tiles of the elevated floor tiles in the second layer.
Layer 3 We use the third layer to cover tiles we need to hide so that we can still use the elevated floor tiles in layer 2.
Output
The marked tiles named variation on the left side of the picture as shown below is the same as the tiles you can see above with the orange square. The marked tiles named shadow are the tiles you can use to add shadows on your cave. Look at the layer 1 picture before for reference of the cave's shadows. The yellow marked tile with the stretched rectangle in the mapping area uses the shadow tiles. As you can see with the 6 orange marked tiles in the mapping area, we use the same orange marked tile in layer 1 to extend the height of the walls of the cave in the upper area of the map. The same method used with the 2 light-blue marked tiles.
Other Tilesets and Various Ways to Use Them
Rocky Cave Note: Do not right-click to save the tileset, the picture below is only a preview. Click on the picture for the actual tileset.
Using this Tileset
Layer 1
Layer 2
Layer 2
Output
Hell Note: Do not right-click to save the tileset, the picture below is only a preview. Click on the picture for the actual tileset.
Using this Tileset
Other things you can use with this tileset:
The three following resources are original modifications of mine so you can use them with the hell tileset.
Layer 1
Layer 2
Layer 3
Output
Inside Tree Note: Do not right-click to save the tileset, the picture below is only a preview. Click on the picture for the actual tileset.
Pencil - the pencil makes a small dot when you click on the mapping area, as you drag the mouse, you can make a line. Click this button to manually draw something like the line of the dark soil as shown in the picture below. 
Rectangle - the rectangle button makes a square as you drag your mouse.
Ellipse - the ellipse button makes a circular shape. 
and click the lower layer button 
.
or the upper layer. Choose the earth cave autotile and draw any shape that will make up the cave area using the pencil tool. Add a small area for the entrance. Make this noticeable to your player's eyes as seen below in the lowest part of the map.
or the middle layer. This is where we can add the cave's "things".
