The most frequently asked question in the texturing forum is “How do I create transparency with alpha channels?” so if you’re wondering, you’re certainly not alone. I’ve answered the question for people hundreds of times here over the past 2 years.
As regular visitors to this forum are aware, I’ve got a standardized explanation of what channels are and how they work, as well as several tutorials for various software, which I routinely paste into relevant threads whenever the question comes up. I’ve decided to expand on the explanatory info with a little more detail in FAQ format, and to paste all the tutorials into a single thread.
I’ve tried to make this as layman-friendly as possible while still containing a lot of useful information. This should be the definitive resource for anyone with a question on how channels work, what they do, and more specifically, how to create and use alpha channels for transparency.
This first section contains frequently asked questions about channels in general, non-specific to any particular software but common to them all. The FAQ section discusses governing principles of color screen imagery, and thus is applicable as general knowledge that will be beneficial to anyone using any graphics software for any purpose.
_________________________________________________
How do I give my image a transparent background?
Transparency in SL textures is defined by an image element called an alpha channel. In order for transparency to exist in an image, it must contain this element. This guide is loaded with information on what alpha channels are, how they work, and how to create them. Read on.
_________________________________________________
What are alpha channels?
Simply put, an alpha channel is a data map embedded into an image that contains information about a certain aspect of the image other than color. For SL purposes, an alpha channel can be defined even more simply as a transparency map. Strictly speaking, alpha channels can contain information about all kinds of image aspects besides just transparency, but transparency is the only one SL can use. For more on what that means, read the sections below, entitled "Color Space & Channels" and "Channels & Transparency". For help with creating and using alpha channels, this guide is loaded with info. Keep reading.
_________________________________________________
How come the transparent areas of my image appear white in SL instead of transparent?
If this is happening, it's because your image contains no alpha channel. Whithout the alpha channel present, SL has no way of determining which pixels are supposed to be transparent since the alpha channel is what contains all the transparency data. Without it, the only data present in the image is color data. Since the "transparent" pixels have no color, SL interprets them as white. To solve the problem, make sure your image contains an alpha channel, and that you've saved it as 32-bit TGA.
This guide contains a ton of information on what alpha channels are, how they work, and how to make them, so keep reading.
_________________________________________________
Color Space & Channels – What are they?
Images designed to be shown on a color screen exist in what as known as RGB color space, meaning they are comprised of the three primary colors, red, green, & blue. The relative brightness of each of these primary colors in each pixel determines each pixel's actual color. For example, a pixel comprised of equal values of red and blue without any green would appear to be purple. A pixel comprised of maximum values of all 3 colors would appear to be white.
Under the RGB color space model, there are 256 available shades for each of the 3 primary colors. These shades are calculated as numerical values ranging from 0 to 255. Since there are 3 colors in use, and 256 possible values for each, the total number of colors available in RGB color space comes to about 16.7 million colors (256 x 256 x 256 = 16,777,216).
Okay, so what do all those numbers mean to us as artists? Well, the answer, thankfully, is we don’t really have to deal with them as numbers. GUI designers long ago came up with a system by which we can use our intuitive visual skills to “see” what’s happening in an image without having to do any arithmetic. Here’s how it works.
When taken separately, the individual mathematical values for red, green, or blue in each pixel are represented by specific shades of gray, ranging from black, which represents zero, to white, which represents 255. Under this system, all the representative pixels together form a grayscale image called a channel. Each channel is basically a data map which governs, pixel by pixel, the amount of its representative color that is present in the image.
Every RGB image has a channel that governs red, a channel that governs green, and a channel that governs blue. In each individual channel, white represents the maximum possible concentration of color and black represents the absence of color. Shades of gray represent amounts of color that are less than the maximum. The darker the gray, the lesser the concentration of color. The lighter the gray, the more color is present.
_________________________________________________
Channels & Transparency – What do Alpha Channels do?
All RGB color images start with the same 3 primary color channels described above, but images can also contain additional channels that govern other attributes such as transparency, bumpiness, shininess, etc. These additional channels are called “alpha channels”.
Alpha channels can have many functions, but most of them are beyond the scope of this discussion for SL purposes. Therefore, all mention of alphas in this guide from this point on will be in reference to how they govern transparency.
Again, images that have transparency start with the three primary color channels, but also have a fourth channel, called Alpha, which represents opacity. They therefore exist in what is called RGBA color space, obvious extension of RGB. For RGBA images, white in the alpha channel represents complete opacity and black represents the absence of opacity (transparency). Shades of gray represent semi-transparency. The darker the gray, the more transparent. The lighter the gray, the more opaque.
So, for example, if you are making a bikini top for your avatar, the alpha channel would be white in the shape of the bikini top, and black everywhere else. The white part makes the bikini top 100% opaque so that you won't be able to see through it when it's on the av, and the black part makes the rest of the image invisible so that there appears to be nothing on the av's arms, stomach, etc.
_________________________________________________
How do I make alpha channels?
Below the FAQ section is a tutorial section with specific instructions for creating alpha channels in Photoshop, Photoshop Elements, and Paint Shop Pro.
I’m also working on a GIMP tutorial, but I haven’t finished it to my satisfaction yet since I’m still learning the program myself. I want to make sure I really know what I’m talking about before I publish. In the mean time, I recommend the GIMPshop plug-in which changes GIMP so it acts more like Photoshop. This will allow Photoshop tutorials to be useful for GIMP users.
_________________________________________________
How do I make part or all of an image translucent, as opposed to fully transparent?
Areas of an image that are semi-transparent should be gray in the alpha channel. As described above, the darker the gray you use in the alpha channel, the more see-through the corresponding part of the image will be. The lighter the gray, the more opaque.
For example, a piece of frosted glass would require a very light gray in the alpha channel. Frosted glass is almost opaque, so the alpha should be almost white.
Something like a pair of nylon stockings would be in the medium gray range. Stockings are generally transparent enough that you can see the skin underneath them, but not so transparent that the stocking material itself isn't readily noticeable. They're about half way between transparent and opaque, so their gray value on the alpha channel would be about half way between black and white, medium gray.
Water would fall into the dark gray range. Water is very see-through, but not completely invisible. It's mostly transparent, so it's gray value on the alpha channel would be mostly black.
Just as a reminder, note that none of the grays in any of these examples affect the color of the image in any way. Alpha channels only govern transparency, not color.
For example, a piece of frosted glass would require a very light gray in the alpha channel. Frosted glass is almost opaque, so the alpha should be almost white.
Something like a pair of nylon stockings would be in the medium gray range. Stockings are generally transparent enough that you can see the skin underneath them, but not so transparent that the stocking material itself isn't readily noticeable. They're about half way between transparent and opaque, so their gray value on the alpha channel would be about half way between black and white, medium gray.
Water would fall into the dark gray range. Water is very see-through, but not completely invisible. It's mostly transparent, so it's gray value on the alpha channel would be mostly black.
Just as a reminder, note that none of the grays in any of these examples affect the color of the image in any way. Alpha channels only govern transparency, not color.
_________________________________________________
Why TGA?
TGA, or Targa format, is the most commonly used image format for texturing for 3D applications. It has certain advantages for this purpose over other formats, among them being it is lossless, it has an entirely predictable file size, and its simple bitmap formatting is very easy for almost all programs to interpret. Of the 3 formats SL will accept, it is the only one that supports transparency.
_________________________________________________
What about JPEG and BMP
JPEG and BMP are poor image format choices for 3D applications. Using them is ill advised for a number of reasons, but for this discussion, the fact that they do not support transparency is enough. As I always say, use TGA, everyday, all the way, TGA.
_________________________________________________
What’s the deal with JPEG2000?
JPEG2000 (not to be confused with JPEG) is the image format that SL uses internally. All images that are uploaded to SL are converted to JPEG2000 by the SL client at the time of upload. While programs like Photoshop can certainly create JPEG2000’s, SL can only use the ones it creates itself. It cannot import JPEG2000’s from anywhere else. Once again, TGA is the format to use. Stick with TGA on your end, and let SL worry about the conversion.
_________________________________________________
What’s the difference between 24-bit and 32-bit TGA?
As was mentioned above, color images for the screen are comprised of 3 primary color channels. Each of these channels constitutes 8 bits of data per pixel. Since there are 3 channels, color images are 24-bit.
Images with transparency contain a 4th channel, called alpha, which adds another 8 bits, bringing the total to 32. Therefore, images with transparency are 32-bit.
It’s a common misconception among those new to digital art that more bits must somehow be better than less bits, and they end up saving everything as 32-bit. This is a big mistake. Only images that need transparency should ever be saved as 32-bit. Fully opaque images should always be saved as 24-bit. Using 32-bit unnecessarily increases an image’s file size by 33%, and can cause display problems. See the next question for more on this.
_________________________________________________
Why do sections of images sometimes disappear or seem to change position in SL?
This phenomenon has to do with a glitch common to nearly all 3D applications in what’s known as alpha sorting. It happens in nearly all video games, and even in high end 3D modeling packages costing thousands of dollars. What happens is when two or more 32-bit images are placed so that they intersect or overlap in close proximity, the renderer has trouble determining which one to draw first. As a result, the images can appear to flip-flop their positions in 3D space, to cancel each other out, or to otherwise behave strangely.
The way to cut down on this is to make sure that 32-bit images are only used when absolutely necessary. Images that do not need transparency should always be saved as 24-bit. Beyond that, there are certain building techniques in SL that can minimize the effect, and others that actually take advantage of it, but building is beyond the scope of this guide. There are plenty of tips about this on the building forum.
_________________________________________________
Why do I see a white halo around my partially transparent images in SL?
This is a very common problem caused by what’s know as anti-aliasing, which is the computer’s way of smoothing the appearance jagged edges by combining colors along diagonals or curves lines. Just like with any other image element, the pixels where black meets white in alpha channels get anti-aliased so that they appear to blend smoothly together. This anti-aliasing results in gray pixels, which end up translating to a semi-transparent outline around the opaque parts of the image.
How this results in a white halo is pretty simple. If there’s white space (or blank space) surrounding the opaque parts of your image, those anti-aliased, semi-transparent edge pixels end up combining their coloring with the white around them. They become so lightened by the process that they appear to be a halo.
The way to avoid the halo ranges from very, very simple to slightly complicated. The simplest thing to do is just to give your images a dark background. Technically this gives you a dark halo instead of a light one, but dark halos are usually undetectable in SL. Most of my tutorials include this method, since it’s the easiest to explain, and the most universally applicable for all situations.
Other methods include bleeding the coloring of the opaque areas into the transparent areas. This is visually superior to the dark background method, but a little more complicated to do. Photoshop users may wish to view Robin Sojourner’s wonderful video tutorial at http://www.robinwood.com/Catalog/Technical/SL-Tuts/SLPages/SLTranspStart.html , showing how she eliminates the halo by using a Gaussian blur filter. There are also 3rd party plug-ins for Photoshop that can be useful for this, my favorite of which is a filter from Flaming Pear called Solidify. At the time of this publication, Solidify is available for free on Flaming Pear’s website in their Free Plugins pachage. http://www.flamingpear.com/download.html
_________________________________________________
What about automated alpha channel plug-ins? I’ve seen one for Photoshop mentioned on this forum. Does it work?
The file in question is actually the TGA saver plug-in from Photoshop 7.0, which was Adobe’s one and only experiment with automated alpha channel creation for TGA. The experiment was a dismal failure, riddled with problems. Adobe quickly realized they had made a monumental mistake with 7.0, and they patched it with version 7.0.1, which got rid of the automation and the problems that went with it.
However, some people unfortunately are still under the impression that the automation is a time-saver, and they use that plug-in from 7.0 to alter the way other versions of Photoshop operate. In truth, people who use it are actually making things much harder on themselves without even realizing it. Let me explain.
Files created with the PS 7.0 TGA saver utility suffer the following problems:
1. They will have visual artifacts in them which will be impossible to correct, the most common of which is a white halo surrounding the opaque parts of the image.
2. The image files will be incompatible with most graphics applications. Instead of real alpha channels, which have been a staple of the graphics industry for decades, and so can be understood by nearly all graphics programs, those 7.0-style files contain a proprietary element called an "embedded alpha", which almost no program on Earth can read. It's only by an utter miracle of conicidental timing that SL can read those files at all. The relevant part of SL happened to have been under development at during that short 3-month period when PS 7.0 was current.
3. People who use the embedded alpha work flow do so primarily because they mistakenly think it's a time saver. In truth, it is not a significant time saver at all since making an alpha channel only takes a few seconds at most. Learning to use alpha channels might not be intuitive for most people at first, but really, once you learn how to do it, it's incredibly quick and easy. It's not rocket science.
4. For images with complicated transparency levels, like stained glass windows, for example, the embedded alpha work flow actually makes the process take MUCH longer than it takes to make a real alpha channel.
5. Very importantly, embedded alpha work flow encourages destructive habits. By disallowing you the ability to create and edit alpha channels properly, it ends up costing you an enormous amount of control and flexibility. There are countless situations in which working directly on the alpha channel itself allows you to do things you could never otherwise do in any reasonable amount of time, if at all.
6. Once installed, that 7.0 plugin effectively destroys your ability ever again to work properly with real alpha channels should you ever choose to do so. Even if you remove it, PS won't behave entirely properly afterwards. The only recourse is to completely uninstall PS and then reinstall it all over again. What a pain.
7. Files containing embedded alphas are prone to sudden, irreversible data corruption. I have no idea why, but they often end up with colored lines spontaneously appearing across any white space in the image. Once that happens, the file is toast. You can manually erase the lines, but as soon as you close the file and reopen it, they come back.
In short, embedded alpha automation is bad news. Don’t use it. Read this guide, and learn to make proper alpha channels yourself.
_________________________________________________
I’ve heard Photoshop 7.0 is bugged, and that it handles transparency differently than all other versions of Photoshop. Is this true?
Yes, it’s true. Anyone using 7.0 should download the free 7.0.1 update from Adobe before proceeding any further. See the previous question for the biggest reason why.
_________________________________________________
Further Information
Robin Sojourner has kindly put together a more visualized explanation on her website of many of the concepts explained above. It's well worth taking looking at.
http://www.robinwood.com/Catalog/Technical/SL-Tuts/SLPages/AChannelDiscover1.html
_
)
) If it's not, just click the icon to make a new blank mask.
