Tutorial: alpha textures using Photoshop Elements and ImageMagick

Those of you with Photoshop Elements (the watered-down consumer version of Photoshop that is sometimes included as a bundle with Wacom art tablets) may have noticed that Photoshop Elements does not have a Channels tab. The lack of the Channels tab makes it impossible to create a TGA file with an alpha channel by using the excellent tutorials provided by others in these forums (Nephilaine Protagonist's) or elsewhere on the Web (Nicola Escher's). And like its more powerful sibling, directly saving a TGA file from Photoshop Elements does not preserve transparency information.

However, Photoshop Elements can save transparency information to PNG (Portable Network Graphics) format, and it doesn't require a Channels tab to do so. Second Life doesn't know what to do with a PNG file, but there is a free command-line tool called ImageMagick that converts among several dozen different graphics formats, and it successfully preserves the alpha channel when converting PNG to TGA. This adds an extra step to making alpha textures, but it's not terribly arduous, and allows the inexpensive Photshop Elements to be used for making Second Life clothing and other alpha textures.

Let's pause a moment for disclaimers. This tutorial specifically describes using Photoshop Elements 2.0 for Windows. There is a newer version (3.0), for both Windows and Macintosh, but I've never used it, and neither have I used 2.0 for Macintosh; this tutorial is necessarily Windows-centric. Likewise, this tutorial only describes using the Windows version of ImageMagick. The ImageMagick site has instructions for compiling and installing ImageMagick on Macintosh, but that's well beyond the scope of this tutorial. In theory, you should be able to do something similar with Photoshop Elements and ImageMagick on the Macintosh, but I sadly don't own a Mac, so I can't tell you how well it works.

We now return you to our regularly scheduled tutorial.

1. First, you'll need to download ImageMagick from http://www.imagemagick.org and install it. Follow the friendly Download link at the top of the page, and then download the Windows Executable version. If you follow all the default options when installing ImageMagic, it puts itself in the drive path on your system, so you are able to run it from any directory. This is important, because ImageMagick is a command line tool; you type commands into it instead of using a graphical interface, and it's a pain in the butt to enter the entire path to the tool every time you type in a command.

2. Once ImageMagick is installed, pop open Photoshop Elements. Click the New button on the toolbar (or select New from the File menu, or press Ctrl+N).

3. In the New dialog that appears, name your image and set its dimensions as you normally would, then be sure to select the Transparent radio button in the Contents section at the bottom of the dialog. This ensures that the background layer for the image is transparent. Click OK.

4. Create your image using whatever Photoshop Elements tools you want to use. Make sure that the transparent sections of the image are, indeed, transparent. You can tell an area is transparent, because you'll be able to see the grey and white checkerboard background through the transparent areas of the image.

5. When you're done creating your masterpiece, it's time to save it. Click the Save for Web toolbar button (or select Save for Web from the File menu, or press Alt+Ctrl+Shift+S).

6. In the Save for Web dialog that appears, select PNG-24 from the Settings drop-down in the upper right corner of the dialog. You can leave all the other settings alone. Click OK.

7. The Save Optimized As file dialog appears. Name your file, or accept the default that Photoshop Elements gives you. Pick a location in which to save the file, and remember the directory where you put it; you'll need it in step 9 so you can find the file and convert it. Click Save. You've now got a PNG file that contains transparency information. Don't panic if you open the PNG in a different image viewer and it doesn't quite look right; remarkably few image viewers properly handle display of PNG transparency. If you want to double-check to make sure the transparency made it to the PNG intact, open the PNG in Photoshop Elements. Transparent areas should appear with the grey and white checkerboard pattern.

8. Click the Windows Start button and select Run. In the Run dialog, type "cmd" (without the quotes), then click OK or just press Enter. You've now opened a command prompt.

9. Change directory in the command prompt to the directory where you saved the PNG file. You do this using the cd command. For example, if you saved the PNG file in c:\Documents and Settings\Chandra\desktop, you could change to that directory with the following command (and yes, the quotes here are necessary, because of the spaces in the directory name). Just type this on the command line and press Enter:

cd "c:\Documents and Settings\Chandra\desktop"

10. Use ImageMagick's convert command to convert the PNG image into a TGA. For example, the following command converts the file my-texture.png into my-texture.tga; again, type it on the command line and press Enter:

convert my-texture.png my-texture.tga

ImageMagick is smart enough to know that it needs to convert from PNG to TGA by looking at the file extensions you've provided on the command line.

11. You've now got a TGA with transparency information. Again, like the PNG, there are few image viewers that properly display TGA transparency, and neither can Photoshop Elements. Fortunately, you've got a tool that can properly view TGA alpha transparency: Seond Life itself! Open Second Life and upload the TGA file you've just created. In the upload preview, the transparent areas should contain the familiar grey and white checkerboard.

Voila! You've now got a perfectly functional TGA with alpha channel transparency.

You can use this technique with the Linden Labs-provided fashion templates, too. Instead of creating a new texture from scratch, start by opening the template you want to use (upper body, lower body, whatever). Edit the clothing or tattoo to your heart's content, then when it comes time to save it, make sure to turn off display of all the layers except those that contain your clothing. You can turn off display of a layer by clicking the little eye next to it in the Layers tab. You should be able to see the checkerboard and your creation, and no other layers. In particular, be sure to turn off display of the alpha layers in the template; they make good guidelines for editing, but they don't serve any other useful purpose when using Photoshop Elements. Save for Web to the PNG format, convert to TGA with ImageMagick, and then upload your creation to Second Life and see how it looks in the preview window.

I hope someone else who is stuck with Photoshop Elements finds this useful. ImageMagick makes Photoshop Elements nearly as useful a tool for creating SL textures as the more expensive Photoshop. Happy texturing!

Thanks for the excellent tutorial! I wish I had seen this about 10 hours ago.

One thing I discovered is that ImageMagick -- at least on my Mac OS X -- doesn't always preserve the alpha channel when converting to TGA. But the *is* an option to make it work properly.

In my case, I had a very simple grayscale image with transparency, and the convert tool I think decided the image was so simple that it degraded it to a format SL wouldn't recognize. Adding the -type TrueColor option to convert made it work fine:

convert -type TrueColor image.png image.tga

This option forces the output format to be TrueColor, even if it's not the most "efficient" format, according to the ImageMagick man page.

I also found that, at least for this simple test image, the following worked as well:

convert -type TrueColor image.psd image.tga

which converted the native Adobe Photoshop Elements 3 file to tga without having to perform the intermediate step. YMMV.

chandra, this is awesome. I shelled out for PSP when I joined SL because I could not get my Photoshop Essentials (same thing basically as Elements, they just rebranded) to save a TGA file with an alpha channel.

You would have saved me a few hundred bucks and having to learn a new program!!!!

Chandra,

Thanks for the suggestion of using ImageMagick -- it works great! I've been working in an old copy of Corel PhotoPaint, and it doesn't export alpha channels to TGAs properly. I started evaluating a shareware program called ReaConverter Pro, which works great, but it has a ton of features I don't need, and $35 seems like overkill just to convert a few TIFs to TGAs. ImageMagick is perfect.

Thanks for adding to the tips, Kitto. I haven't had an ImageMagick conversion miss the alpha yet (might be a difference between Windows and Mac versions of ImageMagick), but I'll keep the -type TrueColor option in mind if I ever have trouble.

I'm glad this tutorial has helped a few people out. I posted it quite a while ago, and just now people have noticed that it's here.

ty so much yayyyyy