Well, it seems the current popular style of game art is SNES style. SNES quality click games are getting more and more frequent, but so are the games that pop up with great gameplay, a solid storyline but really bad graphics.


I will be writing about the curious and mysterious art of Pixel Shading, and how to start out. I will be working on a 32x32 basis.

Step 1: What do you want to draw?

This is an obvious step; What exactly is it that you are going to draw? In this example, I will be using a banana-god knows why.
You will also need to decide what to draw it in: i'm going to use the MMF editor, because it's my favourite, but any old program will do.

Step 2: An outline

Now that you've got an object in your head, think about it's shape-my example, the banana, is like a long curved stick with a thinner bit at the top. So, I draw the shape i have in my head-it doesn't have to be perfect, you can touch it up later. I like to zoom in to full (In MMF, 16:1). This also helps to add detail later, and to touch up any out of place pixels.
http://www.xebsoftware.com/Banana1.jpg

Step 3: Touching up

This is a pretty basic step. Using the transparent tool, get rid of any out of place pixels, where 2 pixels are grouped at one point, and start to add a bit of shape detail. On my banana, i'm going to add some black pixels around the center to give a sense of depth. Again, this may look bad, but when you begin to colour and shade, you will see that it will be better.
http://www.xebsoftware.com/Banana2.jpg

Step 4: Basic Colour

Colour! The basis of a good graphic (unless of course you want a black and white game!). Colour has to be suiting to the object, unless it's mutated or something! My example, the banana, is yellow; so using the fill tool, simply fill all over in a suiting shade of yellow. The 'handle' part of the banana at the top is a brown colour, so again using the fill tool (or in my case, where the pixels are all black the pixel tool) fill it in a brown colour. If you have a colour that is only, say, 1 pixel thick and surrounded by a border, make the shade of the colour lighter than you would normally expect. This will make it stand out more. An example of this is the brown on the 'handle', as using a suiting shade of brown doesn't show up in the black outline. But, depending on your style, this may be changed by colouring the border-but we'll come to that later.
http://www.xebsoftware.com/Banana3.jpg

Step 5: A bit of lighting!

Light-In every situation, even in a cave, there will be lighting-otherwise the user wouldn't see anything on the screen! Light generally comes from one spot, on earth, the sun, and surfaces facing the sun will be lighter than surfaces away from the sun of the same colour. I tend to shade objects with the light source coming from the top left.
Using the colour picker, pick out your original colour, in my case the yellow, and go down 1 or 2 shades. If your light source is coming from the top right, on any bottom right surfaces, colour around the outline.
Then, go back to the original colour, and go up 1 or 2 shades. Do the same, except in the other direction.
http://www.xebsoftware.com/Banana4.jpg

Step 6: Detail

Remember those black dots i drew down the center of the banana shape, when we drew the outline? That was basic detail. Now, i'm going to change the colour to a darker shade of the yellow, similar to the dark shading colour. Colour the dots randomly in this colour, and a slightly lighter colour.
http://www.xebsoftware.com/Banana5.jpg

Step 7: Better shading

Now you will notice that the black outline, in most cases, looks ugly. Well, using the colour picker, get a colour next to an outline, for example the dark yellow, and take it down one shade. Then colour any outline pixels next to this colour. On the opposite light side, where there is a light yellow, take it up a shade or 2.
http://www.xebsoftware.com/Banana6.jpg

Step 8: Anti-aliasing

Quote:
A technique used on a grey-scale or colour
bitmap display to make diagonal edges appear smoother by
setting pixels near the edge to intermediate colours
according to where the edge crosses them.

The most common example is black characters on a white
background. Without anti-aliasing, diagonal edges appear
jagged, like staircases, which may be noticeable on a low
resolution display. If the display can show intermediate
greys then anti-aliasing can be applied. A pixel will be
black if it is completely within the black area, or white if
it is completely outside the black area, or an intermediate
shade of grey according to the proportions of it which overlap
the black and white areas. The technique works similarly with
other foreground and background colours.

Aliasing refers to the fact that many points (which would
differ in the real image) are mapped or aliased to the same
pixel (with a single value) in the digital representation.
From www.dictionary.com

Put into basic forms, Anti-Aliasing is a process that puts intermediate, or 'middle' shades of colours, in between two colours, to smooth it out. So say you have to colours, a yellow and a brown, you could put a light brown or dark yellow in between where they meet. An example of this on the banana is the central 'detail' pixels, or where the brown 'handle' meets the yellow. In MMF, there is a built in Anti-Aliased edge effect built in, that anti-aliases the edge of the object into the background it is next to in the frame-although this can be slow when using large and/or moving objects.
http://www.xebsoftware.com/Banana7.jpg

One completed banana! And because it's against white, it looks a bit rubbishy, so here it is against some backgrounds
http://www.xebsoftware.com/Banana_grass.jpg
http://www.xebsoftware.com/Banana_red.jpg
I know, it's like i've been working with bananas all my life! Lewis Pollard, professional banana artist!
Step 9: Show off your new found skills!

So there you have it- from a black outline to a fully shaded, anti-aliased object in no time. Ok, so a banana isn't great-but with a little time and practice, you'll be doing http://tsugumo.swoo.net/art/091101.gif in no time! When you go into bigger images, i reccomend splitting the image up into small 'colour groups' at first, so do one part of the image with similar colours first, then another colour, and so on.

So there you have it, simply outline, colour, shade, detail and anti-alias, and with a little practice you'll be a pixel-artist. Let's just hope you've done it before it goes out of gaming fashion