Skins Tutorial

Color Depth and Palette issues.

Color Depth
Color depth is a term that describes how many colors an image is capable of having. Just because an image is capable of a certain depth doesn't necessarily mean that it will use the maximum amount of colors though. Here are some examples of color depth:

Color Depth	Number of Colors
4 bit	16 colors
8 bit	256
15 bit	32 thousand
16 bit	64 thousand
24 bit	1.6 million

Another factor that a non-professional skin artist won't normally run into is the fact that the greater the color depth of a texture or skin the more memory it takes up. The reason I mention it though is because from time to time when working on MOD's (custom modifications for a game) or PPM's (Plug-in Player Models) a skin artist will often get a chance to make his own skin mappings (the way the skin is laid out and the size of it) This is a very important consideration when creating art for games.

Another very important related concern is the size of the image. An image that is 256x256 pixels will take considerably more texture memory than an image that is 64x64 pixels.

As well as an image of 64x64 pixels at 8 bit color depth will take up less memory than an image of the same 64x64 pixels but at 16 bit color depth.

Palettes
The standard up until recently was for many games to have 8bit color depth. All of the art would commonly be created with a 'unified' 256 color palette. What that means is that regardless of whether you are looking at a texture used on a wall, a skin placed on one of the models or a menu bar for the user interface; every piece is using the same 256 colors to show you what you see. When modifying a game based upon a palette of this nature you will have to find a way to extract the palette and apply it to your images if you wish to successfully implement them in the game. This creates some very interesting challenges when making your artwork. Imagine trying to make an impressive wooden door, green dragon, and shining steel sword all with the same 256 colors! It takes talent and hard work to make good looking images with this method.

More recently games have been allowing for each image to have its own custom palette. This is a great leap in the quality that ends up on your screen. Taking the same examples above of a wooden door, green dragon, and shining steel sword; instead of being limited to the same 256 colors for all 3 images, you could have a separate 256 colors of your choice for each image. The hues of the wood can be varied and plentiful, the dragon can have a range of scales from an iridiscent green to a dark forest green, and the sword can have a bright and shining steel blade. Games like Unreal, Half-Life, TRIBES and SiN are some of the most recent to use this method.

At this point I would like to show some examples of palettes. One thing that is very important to understand at this time is that if your screen resolution is set to a low value like 16 or 256 colors you will have a hard time seeing these images as they were intended to be displayed. Its strongly recommended that if you wish to see the full nature of these images that you increase your screen resolution to 16 bit if possible. If you can not adjust your color depth, simply realize that each step of color effectively squares itself (Multiply 16 x 16 to get 256 shows you the difference between 4 bit and 8 bit color) and that the difference between each level would generally be as dramatic. (Please forgive that to display these images here I had to save them as .jpg files which even when the compression is set to minimum still reduce the quality of the image.)(Also note that if you change your color depth you will have to restart your browser to see the images properly)


16 bit 64,000 colors	8 bit - 256 colors	4 bit 16 colors

Palette Optimization

As I've already hit on there are several instances where you will need to work with a palette. Sometimes the palette will be provided for you, and other times you will have the oportunity to create the palette yourself. I will cover both instances here and suggest ways to help your work look as good as possible in both circumstances.

Unified Palette's
Games with unified palettes have a single 256 color palette that you can use to create any work that you do for it. Some examples of games with unifed palettes are DOOM, Quake, Hexen2, and Quake2. Palettes of this nature are constructed very specifically for the game designers needs. Often if you want to make a modification to the game afterwards you can run into some obstacles with the color limitations. This is where a few small tricks will help your work turn out better.

First off you will need to obtain the palette that is used for the game. Sometimes company's will release it in a development kit. Other times they will release a peice of work like a skin that you can extract it from, and then other times you will need to have special skills that I can not cover here to extract it (involving hacking into the file structure of the game files and extracting the palette).

So lets go ahead and deal with the situations that we can handle.

Palette already provided.
You dont really need my help with this one do you?
Extracting the palette from an existing image.
This is a fairly simple process. The procedure varies a bit from program to program but normally you can access a menu option under "Colors" and then choose "Save Palette" (Note: this option is only available with paletted images, if the option is greyed out odds are the image is thousands or millions of colors and has no palette). Make sure to name the palette something that is indicative to you, so you will know what it is for later. Most programs will provide the file extension (.pal for PaintShop Pro, .ACT for Adobe PhotoShop, etc.) so you just name it something like quake.pal for your use.

Once you've obtained the palette its time to create your skin. (I'll go into more depth on how to create a skin later on this section will just deal with the palette issues.)

NOTE:This tutorial is going to focus highly on creating your image in 16 bit or higher color depth and optimizing it for other color depths and palettes. Later in the tutorial I will breifly cover detailed pixel work hints to help you out but unless mentioned otherwise the assumption will be that your source image should be in 16-bit or better color depth.

Sampling from a Palette
Before we get too deep into this section I will show why the need for palette sampling is important. The face I've created for this example I picked colors according to my needs, not from a specific palette. Also realize that its much larger than you'll typically get for a face area in a FPS by at least 2x. It is approxamately 2.5x greater than the area alloted for Quake2 faces.

1	2	3	4
16 Bit	Custom 256 colors	Quake 2 Palette (256 colors)	Quake 2 Palette (256 colors Dithered)

Images 1 and 2 appear very similar. The quality difference is not readily noted to the eye. Even were I to provide close-up's you'd see very little difference just a more gradiated look in some areas. Images number 3 and 4 though bring out the point of palette sampling.

Image 3 in particular highlights the problem quite clearly. I have loaded the Quake 2 palette directly onto this image and we see it takes the nice warm tones of the flesh and turns him into a off-green looking fellow with a rotting flesh highlight look. Obviously not what I was shooting for.

The fourth image appears much better than the third, but even so it looks 'grainy' to the naked eye. This image had the palette loaded in 'dithered mode' where the program will attempt to create patters of colors that will appear to match the intended color. For close-up's please view below and you'll have a much better idea what Im talking about.

Close-Ups
	Quake 2 Palette. Yuck.
	Quake 2 Palette dithered. Notice all the speckled different colors on his cheek.
	Custom 256 Colors. Not bad at all.

With the above examples you can see where when you are limited to a pre-determined 256 colors not of your choosing can hamper the design of your artwork. Here is a method that I have devised (maybe not the first to do it, but I've never seen it posted anywhere either) that will assist you in these situations:

A: Open up the image in its indexed/paletted mode.
B: View the palette. Here is an example screenshot of a palette taken from paintshop pro of the Quake 2 Palette.

C: Choose several colors that are close to those you wish to use for the creation of your image and create a palette on your image using those colors like so:

D: Paint your image using the Eye Dropper utility in your program to sample colors from the on-image palette to paint your skin. Here is what I created:

F: Finally load the palette (in the case the Quake 2 palette) onto your image. I'm giving both standard and dithered, and the original as examples here for your comparison (which I have enlarged so you can see the results better)


Dithered	Standard	16 Bit

As you can see the standard method (which is "nearest matching color") produced a fair amount of greens in my jacket depsite my on image palette (which contained no greens <grin>) but the dithered result looks much truer. Of course it still retains an element of grainyness in dithered mode but at least its not mixing odd colors to create the blend that comes nearest to my original. You will get varied mileage with this method. I've found it to do an incredible job at times, and others it doesnt seem to help a whole lot, but on average as you've seen above you will probably end up with an acceptable image when forced to work under the constraints of a palette you did not choose.

Custom Palettes

This is where it gets fairly technical, but also where you can reap the greatest reward. Building a custom palette can be taken several ways. Which you choose depends highly on what your target engine allows for. First I will briefly cover created a unified or 'super' palette.

Unified and Super Palette's
This is when you have one palette that must be used by ALL images in your product. As mentioned previously some examples of this are Quake 1 and 2, DOOM, and Hexen 2. (I specifically mention FPS games as they allow a greater amount of user modification, many many more types of games have been created using unified palettes.) On occaison you may have change to create the palette yourself. Whether this be you are modifying an exisitng game to create a non-commerical "MOD" (modification usually released over the internet for free) or perhaps if you are creating your own commercial product.

The first method you might use to do this is to sample some colors and create gradients of 16 groups of 16 colors that you feel you may get the best use out of. This isn't altogether a bad method but just as having to use someone elses palette can limit you, so can this. A slightly better method that may not be as widely known to the amateur community is to create all of your artwork in 16 bit or greater depth and then use a program like Debabalizer Pro or Image Robot to analyze all of your images and create a palette based upon the most optimal set of colors.

Most of the time though you will more likely be creating a palette for use on only one image, especially with the trend of current engines allowing for 16 bit rendering.

Individual Image Paletting

For this example I've chosen to use a recent texture I created. I realize that this is the 'skins' tutorial but the color issues are equally valid whether it be in a skin, texture, or part of the interface.

Something very important to take note of at this point is that different programs will have different capabilities when it comes to reducing to 256 colors. In particular I've found PaintShop Pro is fairly good at it in version 5, and reasonable in version 4. Adobe PhotoShop version 4 seems a bit weak in reducing to 256 colors, but then Adobe Photoshop's strong point always seemed to be its higher color abilities not the lower end so that makes sense. I haven't had my Corel PhotoPaint installed for the past few months after a hard drive crash and didn't have opportunity to do a direct comparison of paletization for that but from what I remember it should fall close to PaintShop Pro version 4. Depending on your mileage you may find the native color reduction of whatever art program you use will be adequate for your needs.

So here we see the texture I've created, a very aged and rusted base door (excuse the copyright notices, but I know some folks dont have any morals and would gladly appropriate it for their own use.) seen in 16-bit color here:

Lets go ahead and zoom in on the area where the problem is going to occur:
(Note: These images, especially the close-up's in 16 bit color are displayed as .JPG files. Although I've reduced the compression as much as possible there is still a degradation in image quality. Be sure to download the native .PCX examples for a better look at whats going on in each step.)

As you see above the control panel on the door is grey with some lighted buttons on it. But when we descrease the color depth to 256 colors in PaintShop Pro (version 4) allowing PSP to choose the palette itself we end up with this:

Above we see that the main rusty area of the door looks like a fairly good result after the color depth reduction, but the control panel on the door has suffered quite a bit.

Whereas if we take a look below, we'll see in PaintShop Pro version 5 we are able to get a much better result:

Thats all I have for the moment. I may update with more information in the future if I find certain questions are asked frequently in regards to palette issues I havent covered but this should be an excellent start for most people.

Thanks,