Guide: WoW Compatible Images

[StormFX]

Introduction

The purpose of this guide is to aid authors in creating images that are compatible with the World of Warcraft client and help them optimize their images for use in add-ons.

Prerequisites

This guide assumes at least some experience with editing images and image editors. There are various tools one can use for editing images but in this case, I have a few recommendations:

XnView - For opening and viewing BLP files. XnView not only supports BLPs but also includes an image browser and is one of the best at exporting BLPs to PNGs while preserving transparency.

Photoshop - One of the best (and most expensive) image editors available. I use this for saving my images in the TGA format.

The GIMP - An extremely powerful and free image editor.

Image Formats

If you've ever installed the Interface Add-On Kit or extracted one of World of Warcraft's MPQ files, you will have noticed that most of the images have a .blp extension. Unfortunately, very few image editors support BLP files and then only through plug-ins. Luckily, the World of Warcraft client supports both BLP and TGA files natively.

Working With TGA Files

TGA files are your basic RGB raster image. The advantage to the TGA format is the support of a fourth channel (the others being Red, Blue and Green), the "Alpha" channel.

An alpha channel is a "channel" (like a layer) that uses various shades of gray to control the transparency of a given pixel. Pure white is 100% opaque and pure black is 100% transparent. The result is the ability to use partial, or "alpha" transparency in the image.

Take into consideration the following images:

In the first example, you see just a black square. This is the actual content of the image. In the second example you see a fading circle of white to black. This is the alpha channel. In the third example, you see the effect that the alpha channel has on the image itself. If your browser supports PNG images, the fourth image is an example of how the image would actually look in-game.


TGA Limitations

Before we move on to creating our image, we need to keep in mind that when it comes to TGA files, the WoW client has a few rules that must be followed in order for the image to be valid. Those rules are:

1. The height and width of the image must be a power a 2. (Ex: 16x16, 64x64, 128x256)
2. The height and width of the image can be no larger than 1024 pixels.
3. The image itself must be an uncompressed, 32-bit (24-bit+Alpha @ 72dpi) TGA file.

[StormFX]

Creating the Image

Open your favorite image editor. For this guide, I'll be using Photoshop, however, you can use whatever you have available. Just keep in mind that some steps may be different depending on the editor that you're using.

Note: I'll try to be specific about certain settings and post a sample image where applicable, but I'm not going to go into detail about how to do specific tasks for each editor.

Start by creating a new, 64x64 pixel image. Fill the background with white. (Note: We're using white for the sake of visibility)

Create a new layer above the background. On the new layer, place some content. This can be just some generic shape you're using while following along with this guide. For the sake of this guide, I'm going to go with an orange paw print (a preset shape available in PS).

Now we need to create an alpha channel based on our content layer. Gain the selection of the content. If you're using Photoshop, simply control-click the layer to get your selection. With the selection active, create an alpha channel. If done correctly, you should now have a white "copy" of your selection in the alpha channel. If the alpha channel is all black, you'll need to get the full selection of your content and fill it with white. You now have your alpha channel. (Note: Your image can only have one alpha channel.)

At this point, you'll want to change the color of your background to black, unless your content is black. You might also want to flatten the image depending on the editor that you're using.

Note: I'm going to add some effects to my image, including a drop shadow just to display the transparency capabilities of the alpha channel. Here's how my image would look in-game: (Requires a PNG-compatible browser)

[StormFX]

Saving the Image

Saving the image in a format compatible with the WoW client is as easy as making sure the export options are set correctly. The following is a screen shot of Photoshop's Targa export options (accessed via "Save As" then select "Targa (..)" as the file type and then click "Save"). The options should be set exactly as follows, otherwise the image won't work.

Note: I'll tweak the last two sections at a later point. I just wanted to get the basics in so that people could use it. I know it needs some work.

[yssaril]

very nice writeup so far

[darkeh4321]

should list paint.net up there but idd very nice

i think the size limit is 256 by 512 as well or did that change in 3.0?

[StormFX]

Actually, I'm pretty sure it's 512x512. But thanks for reminding me. Someone can correct me if I'm wrong.

[Xinhuan]

The size limit has been upped to 1024 in both dimensions since patch 3.0.

[StormFX]

Thanks, Xin. Fixed. And updated!

[Nandini]

Also, WoW can use RLE-compressed TGA files since client version 2.1 I believe. (I have tested RLE-compressed TGA files only on the Windows client.)

While the files are decompressed in main memory, sent to the video card uncompressed, and remain uncompressed in the video card's texture buffers, RLE compressing your TGA files can save significant bandwidth for the sites hosting your addons or artwork.

Edit: Since most addon sites re-compress all an addon's files in a ZIP archive anyway, RLE compression is unlikely to save them much bandwidth. At best, it will save you and your users some disk space, and save you a small amount of time when uploading the files.

[siggej]

I tried using GIMP, it was easier. You just draw with a transparent background, save as TGA, and the program automatically fixes the alpha channel and correct 32 bit mode.