Alpha Channel and Transparency

by BSEdev / Thursday, 22 December 2016 / Published in Tutorials

You can easily add transparency to any texture, and even set different values for every individual pixel by using the Alpha channel.

Normally, each pixel has 3 values that define it’s color, one for Red, one for Green and one for Blue channel. By mixing these three you can achieve any color that a normal display can produce. Similar to this, OpenGL allows each pixel to have one more value assigned to it called Alpha channel, which can be used in any way you want but most commonly this value defines how transparent the pixel is :

0 means it’s completely transparent
255 means it’s completely opaque

Just like 0% and 100% visibility.

These alpha values can be stored in some image formats, so for this purpose I will demonstrate how to do this with Targa(.tga) format by using Photoshop CS6.
Targa is a raster format, which means that it describes every pixel individually using same-size blocks for each one.

Before anything else, you need to create a new file. You can change image size later without losing aspect ratio so let’s just start with 320×320 pixels. Color mode should be RGB with 8 bits. This means that 8 bits of the file are reserved for each channel(R,G,B), equaling to a total of 24 bits for each pixel. These values will be written as unsigned bytes with values ranging from 0 to 255. They will have to be changed to floating points at some point to have OpenGL work with them.

The goal of this tutorial is to show you how to change our image to RGBA format, meaning every pixel will take 32 bits of memory and allow one more ,,color” to be memorizes, which we call Alpha.

Creating a new project in Photoshop CS6

Begin by drawing your picture. For this tutorial I will just write one letter to keep it simple.

Draw a letter

When you finish drawing, open the channels tab. It’s next to the layers tab by default.
If you click on indivdual channels – Red, Green and Blue – you will see the value for those colors for each pixel, where white is all three of those having maximum values(255) and black is all three of them having minimum(0). Channel called ,,RGB” is not an actual channel, but just a way to display all three of them in Photoshop.

Add another channel by pressing the small button at the bottom, just like when you create a new layer.

Create a new channel

It will appear completely black, which would mean that all pixels have value equal to zero. In transparency terms, this means that they are all transparent. Our goal is to set all the pixel we want to be visible to higher than that.

If you want pixels completely opaque, set their Alpha value to 255 by drawing white color on them in Alpha channel. Black and white are not actual colors, they are just a way to interpret values on a channel. It is not possible to draw any other color on any of the channels.

The easiest way to select the drawn letter’s surface would be to switch back to RGB channel, and use magic wand tool to select all the pixels of the letter. You can hold shift to select multiple separated surfaces together.

When you make the selection, go to Alpha channel and fill the selected surface with white color.
Shortcut: Shift + F5

Filling the selection

Congradulations, you have created everything you need for transparency through Alpha Channel.

Alpha channel finished!

Now save the file in Targa(.tga) format.

Save as Targa(.tga)

Photoshop asks if you want to save it in 16, 24, or 32 bits/pixel format. If you select 24, your alpha channel will not be saved but file will be approx 25% smaller. So, don’t forget to select 32 bits option if you want to see through your texture.