Creating Graphics for use in WoW

Many mods allow for custom graphics, including LunarSphere, eePanels, and KGpanels. World of Warcraft will not support all types of graphics, however: if you drop a .jpeg or .gif (for example) into your addon folder and expect it to work, you will be disappointed.

World of Warcraft will only support the following file formats:

• .tga
  A Targa, or Truevision Advanced Raster Graphics Adapter, is an image file extension that supports "alpha" channels: that is to say, transparency. It is used by a lot of video games since it's easy to implement and isn't bogged down by patent restrictions. It is an older and lower-quality file type, however.
  
  
• .blp
  The .BLP extension is Blizzard's own image extension. World of Warcraft uses the BLP2 version of the extension. Like the .tga, it supports alpha channels, but most image-editing programs do not recognize the .tga format. Converters exist to change an image to a .blp, and vice-versa.

Some image programs, such as Photoshop, can work directly with .tga images. I prefer to work in Photoshop with .png format since it is higher quality and easier to work with, and then use a converter program to turn them into .blp files. Most browsers also support .png files, so I use them regularly.

NOTE: some addons will only support one of the two available formats, simply due to the way the addon's developer decided to code for the addon to look for graphics. Check your addon's instruction files to see if it will limit you in what formats you can use.


Dimension restrictions:

World of Warcraft will only support tga/blp images with pixel dimensions that are a power of 2, though the width and height do not need to be the same. You may use these numbers as your image's overall pixel height or width:

• 2 (totally tiny!)
  
• 4
• 8
• 16
• 32
• 64 (standard for Lunarsphere graphics)
  
• 128
• 256
• 512 (would fit in the width of this post)
  
• 1024 (a common monitor resolution pixel height)
  
• 2056 (really big)
  
• etc.

Going beyond 512 will result in huge graphics, so most dimensions will be below that, aside those used for very large UI images. Lunarsphere sphere graphics are 64 x 64 pixels, for example. Your height and width do not have to be equal, but both must be a multiple of 2! 256 by 512 is permissible, for example.


Programs:

Personally, I use Photoshop for the majority of my image editing. It is an expensive program, however, so if you're looking for a free download, I recommend checking out GIMP: GNU Image Manipulation Program.

The key to creating graphics for use in-game is the transparency settings for the image: parts of the image that don't have any color and let whatever is behind the image to show through, ie they're "invisible." If you import a flat image without a transparency layer that the game can understand, the image's background will show up white, rather than showing the game going on behind it! This transparency layer is also called an Alpha Channel.

For the following demonstration, I will be creating a graphic for Lunarsphere's central sphere.

Photoshop:

1. Create a New file (ctrl-n). Set its height and width to a pair of the restricted dimension sizes listed above; for this example, I am creating a 64 by 64 pixel image. Background fill should be transparent.
   
   
2. Paste in or create an image you wish to use for the graphic. Resize, color, sharpen, and otherwise edit the image as needed.
   
3. I like to delete any part of the image that I want to be transparent. For a circular selection such as for a Lunarsphere image, I use the Elliptical Marquee tool to select a round circle of space. I suggest starting just within the border of one corner of the image, and dragging down to the same distance from the border in the opposite corner, to ensure that the edges aren't cropped. Then, select INVERSE (shift + ctrl + I) and delete the selection, which will remove everything that isn't within the circle.
   
   
4. Create an Alpha Channel by going to the Channels tab and creating a new layer. This will overlay your visible image with a pink hue to show you what parts of the image WILL BE TRANSPARENT when you save the image! The pink does not show as a color when the image is saved, it is merely to denote transparency. If the other RGB (color) channels hide themselves, you can turn them back on by clicking on the little "eye" boxes along the left side of the list.
   
   
5. Delete the pink from all areas where you want the image to be visible. A quick way of doing this is to go back to the Layers tab and ctrl-(left)click on the layer to load a selection of it, assuming you've deleted everything that you want to be transparent, and then deleting your loaded selection from the Alpha 1 layer in the Channels tab. This will remove the pink from the deleted area of the image, showing what parts *will* show when the image is imported into the game. Everything that is pink will be transparent. (Ignore the other layers shown in the screenshot's list, they are not visible and are just from me playing around!)
   
   Note: If you fade out the pink by deleting only part of it, such as with a partly-transparent selection or with a half-opacity eraser brush, then that area will show up partly transparent in the game, rather than fully transparent or fully opaque.
6. Save the image with the Alpha Channel's pink layer visible as a .png file (I select "None" for the interlacing question that will pop up). Below is the image that I created.
   
   
7. Use a file converter to change the .png into a .blp file. I personally use the BLP2PNG converter, which can be downloaded here. Simply drag the image file's icon from the folder it is saved in and drop it on the BLP2PNG.exe file icon, and it will automatically generate a .blp copy of your .png file in the same folder as your .png image.
   
   
8. Place your newly created .blp file into the appropriate folder for your image import mod. For Lunarsphere, this is the LunarSphere Imports folder. Some mods may tell you to just type in the path location of the file; create a folder in your addons for your images, name it something like "MyImages," and save your .blp there.
9. Start up WoW and use your mod's instructions on how to import the image. For Lunarsphere, sphere images are imported from the Skin tab in the Settings menu; hit the Import Art button, type in the file name (in this case mine is "howlmoon"), and hit "import." If all went well, you will have a new image to use for your mod!
   
   
   

The above screen shot shows the demo "howlmoon" image uploaded into LunarSphere. I also created a background image that I imported using kgpanels that serves as a border for my Lunarsphere as well as my minimap:


GIMP:

In progress :) I have had less practice with this program. It is far better than MS Paint, but many of its tools are not as powerful as Photoshop. It's taking this Photoshop user quite some time to acclimate to. I will post the GIMP walk-through as a new post later, when I feel more comfortable with the program, though I can tell you this, now: it does have the same "layers" and "channels" tab, and the "alpha" channel is included in ever image by default. You will just need to paint on the alpha channel to add areas of transparency to your image.