Alpha Channels in Photoshop

From WowAce Wiki
Jump to: navigation, search

(For all the other imaging programs, you're on your own, though I am sure they work similar.)

For the sole purpose of this tutorial, I'll make a bottom corner background image, for use in an EePanels panel, though I am sure other panel creator add-ons will work too.

The goal

A bottom left corner to go on the chatframe to include some nice complex curls and shapes through alpha channels. For this to work, the panel in EePanels will need to be parented to the chatframe, and be a good deal larger than the actual parent as well, otherwise the image will overlap the chat, and it will look bad.

The method

  • Make a base image without alpha layering
  • Create the alpha channel
  • Make the base image opaque for better AA qualities.
  • Test image in WoW and if need be adjust.

Note: You can, with less effort, create the entire image in the alpha channel, but this requires you to fully grasp alpha channeling, so for this tutorial, I'll use the alternative method.

The work

  • Create a new image file, with dimensions as you should use them. This can be 256 * 256, 128 * 256, 256 * 128, 128 * 128, basically the dimensions must be a power of 2. It's best to have some idea of what you want to create before you start, though brainstorming works too ;)
  • Start creating your image, remember that when you use semi-transparent areas those will need to be a variant of grey on the alpha channel and then you need to convert those semi-transparent areas to fully opaque on the base layer later on. Personally, I work with the Pen Tool, but it's not the handiest of approaches. Also, use 1 layer on the bottom as background layer, just leave it there with a full color. I usually use black. I already had a border set up, as you can see, it is quite complex, though there are harder images to work with.
    Image Creation
  • Save! This seems like a stupid step, but make a habit of saving a lot, with complex shapes especially.
  • Go to Selection -> Load Selection, this takes preference over Ctrl+clicking the layer since it seems more accurate for the semi-transparent areas. The selection will be white on the alpha channel, this means that will be fully opaque.
  • On the Layers section of the menu, switch to the Channels tab and then click Create Channel from selection. This will make your alpha channel, and it should be ok. But you will most likely need to tweak it a bit. Remember: Black on alpha means NOT visible in game, while white is fully opaque. Everything in bewteen has a varying opacity, light grey will be more visible than dark grey.
  • Make the alpha channel visible and make sure the RGB channel is visible as well. This will show you what will be visible and what not. Now let's take our image to the test.
Alpha Channel active in PS CS3
  • Save your image as tga, without compression and 32bits. Then you edit SharedMedia to include your new background as well, or you just place it in the EePanels folder.

And the result in game:

Resulting look in game through EePanels2

As you can see, it looks good. Actually, it looks better than I hoped, but it's a fairly simple shape, even though it is complexer knotwork. The real challenges are curved shaped, since those do require anti-aliasing, but this techique goes for those too. Although, I must admit to using a slightly different technique for those. I will add the how-to for those to this page as soon as I can. But the basic steps apply in curves as well, you create the image as you would for any other graphic, then from that you create the alpha channel. Remember that semi-transparent areas in the base layer will require grey-tones on the alpha layer. Then you go back to the base layer, which you completely color in your base color. This will help you in not getting those white/black lines around the texture in game.