Transparency F.A.Q
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 assess 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.
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 computers 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 on her website, 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 package.
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.
First, and most importantly, the automation causes artifacts which are impossible to correct, the most common of which is the white halo mentioned above.
Second, images ceated with these automated (embedded) alphas are incompatible with most graphics applications, as opposed to real alpha channels, which have been a staple of the graphics inudustry for decades, and can be understood by nearly all graphics programs.
Third, it is not a significant time saver at all since making an alpha channel only takes a few seconds at most.
Fourth, for images with complicated transparency levels, like stained glass windows, for example, it actually makes the process take MUCH longer.
Fifth, and very importantly, it encourages destructive workflow habits. Since it’s entirely a WYSIWYG system, those who use it have a tendency to create transparency by erasing, which makes it very difficult to make changes later.
In short, alpha automation is bad news. Don’t use it.
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.
Originally posted by Chosen Few on SL’s soon to be closing forum.
Electric Venus…
Admin is on indefinite design hiatus, but she’s been building a new online fashion magazine site called Electric Venus. Electric Venus aims to offer longer, less “new release” type coverage and more in depth news, commentary and reviews. It…