I design my background panel graphics in Photoshop in a canvas that is 2048 pixels wide x 512 pixels high. (I then split this into a left and right side that are each 1024 x 512.)

The reasons for this are twofold: First, WoW does not display graphics that are not "powers of 2". This means, any graphic you wish to place in WoW must have edges in one of these sizes: 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024. Graphics larger than this also don't display.

The second reason is that most desktop monitors sold these days are at least 1440 px wide. If I made the entire background only 1024 px wide, then it would have to stretch. Stretching graphics makes them fuzzy, because the computer is trying to fill in graphic information that doesn't actually exist. So I shrink instead, which is not perfect, but is better than stretching. Thus our total width is 2048, and we will divide it into two graphics so WoW will load it. This also has the advantage of displaying nicely for users with very big monitors (even though we are jealous of them).

---------------------------

Background panel dimensions: one left graphic and one right graphic, each 1024 x 512 pixels.

Minimap border dimensions: one round border and one square border, each 256 x 256 pixels.

---------------------------

File Formats

WoW reads TGA and BLP formats. I recommend TGA, since in my tests the BLP file formats were not smaller. However, if you prefer BLP, you can find a converter on WowInterface: BLPConverter.

To get a TGA file that supports transparency, I save my Photoshop graphic as a PNG file. Delete the background layer in Photoshop (so you see the checkerboard behind your graphic, that represents transparency). Save as PNG, and then open the PNG file in Gimp, a free open source photo editing software. In Gimp, save the file as TGA.

Photoshop will save TGA files directly, but it does not support transparent TGAs. Thus the workaround.

Gimp: http://www.gimp.org/downloads/

---------------------------

Resources

One of my favorite resources for Photoshop tools is Deviant Art. See the section called "Resources and Stock Images". Especially, learn how to download and install custom shapes and brushes. If you use this site, please pay close attention to the license text for each resource. Some are free to use anywhere and some are not.

Another major resource for Photoshop tools is Adobe Photoshop Exchange. (Click on the "Browse by Category" links.) Again, you'll need to read the license text for each resource.

Photoshop Plugins. Smashing Magazine has a list of free Plugins. Also look for their article on popular type faces, some of which are free.
http://www.smashingmagazine.com/2009/08/03/a-z-of-free-photoshop-plugins-and-filters/
---------------------------

Most useful Photoshop Tutorials:

Extracting a Picture from its Background:
http://www.photoshopcafe.com/tutorials/cutout/cutout.htm

Using and Creating Custom Shapes:
http://www.myjanee.com/tuts/shapes6/shapes63.htm
Once you learn how to draw vector shapes in Photoshop, many things become much easier.

Grouping Layers:
http://www.creativemac.com/2003/07_jul/tutorials/psgradient030723.htm

Masking Layers:
http://www.photoshopcafe.com/tutorials/blend/blend.html