Go Back   WowAce Forums > Tips, FAQs, and Guides

Reply
 
Thread Tools
Old 12-26-2008   #1
StormFX
Amazing Member
 
StormFX's Avatar
 
Join Date: Feb 2008
Location: Over Yonder
Posts: 1,422
Default Guide: WoW Compatible Images

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.
Attached Images
File Type: jpg image_guide_01.jpg (495 Bytes, 1667 views)
File Type: jpg image_guide_02.jpg (1.0 KB, 1675 views)
File Type: jpg image_guide_03.jpg (1,010 Bytes, 1662 views)
File Type: png image_guide_04.png (2.7 KB, 1665 views)

Last edited by StormFX; 12-27-2008 at 04:50 PM.
StormFX is offline   Reply With Quote
Old 12-27-2008   #2
StormFX
Amazing Member
 
StormFX's Avatar
 
Join Date: Feb 2008
Location: Over Yonder
Posts: 1,422
Default Re: WoW Compatible Images

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)





Attached Images
File Type: jpg image_guide_05.jpg (30.9 KB, 1635 views)
File Type: jpg image_guide_06.jpg (15.8 KB, 1636 views)
File Type: jpg image_guide_07.jpg (17.3 KB, 1632 views)
File Type: png image_guide_08.png (3.4 KB, 3420 views)
File Type: jpg image_guide_09.jpg (9.4 KB, 1667 views)

Last edited by StormFX; 12-28-2008 at 01:56 PM.
StormFX is offline   Reply With Quote
Old 12-27-2008   #3
StormFX
Amazing Member
 
StormFX's Avatar
 
Join Date: Feb 2008
Location: Over Yonder
Posts: 1,422
Default Re: WoW Compatible Images

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.

Last edited by StormFX; 12-27-2008 at 04:49 PM.
StormFX is offline   Reply With Quote
Old 12-27-2008   #4
yssaril
Hero Member
 
yssaril's Avatar
 
Join Date: Sep 2006
Posts: 777
Default Re: Guide: WoW Compatible Images

very nice writeup so far
yssaril is offline   Reply With Quote
Old 12-27-2008   #5
darkeh4321
Member
 
Join Date: Oct 2008
Posts: 49
Default Re: Guide: WoW Compatible Images

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?
darkeh4321 is offline   Reply With Quote
Old 12-27-2008   #6
StormFX
Amazing Member
 
StormFX's Avatar
 
Join Date: Feb 2008
Location: Over Yonder
Posts: 1,422
Default Re: Guide: WoW Compatible Images

Actually, I'm pretty sure it's 512x512. But thanks for reminding me. Someone can correct me if I'm wrong.
StormFX is offline   Reply With Quote
Old 12-27-2008   #7
Xinhuan
Asian Sheep Lover
 
Xinhuan's Avatar
 
Join Date: Aug 2007
Location: Singapore
Posts: 4,033
Default Re: Guide: WoW Compatible Images

The size limit has been upped to 1024 in both dimensions since patch 3.0.
__________________
Author/Maintainer of Postal, Omen3, GemHelper, BankItems, WoWEquip, GatherMate, Routes, HandyNotes and some others.
Xinhuan is offline   Reply With Quote
Old 12-27-2008   #8
StormFX
Amazing Member
 
StormFX's Avatar
 
Join Date: Feb 2008
Location: Over Yonder
Posts: 1,422
Default Re: Guide: WoW Compatible Images

Thanks, Xin. Fixed. And updated!
StormFX is offline   Reply With Quote
Old 02-21-2009   #9
Nandini
Senior Member
 
Join Date: Nov 2007
Posts: 347
Default Re: Guide: WoW Compatible Images

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.

Last edited by Nandini; 02-21-2009 at 08:00 AM.
Nandini is offline   Reply With Quote
Old 06-05-2009   #10
siggej
Newbie
 
Join Date: Jan 2009
Posts: 1
Default Re: Guide: WoW Compatible Images

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.
siggej is offline   Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:43 AM.