Text Link

Basics

A collection of insightful tips and guides to help you become a great designer.

<path d="M6.6729 18.3516C8.50093 18.3516 9.79065 18.989 10.3738 19.3626C10.5757 19.4725 11.0804 19.7802 11.215 19.8352V2.38462C10.4075 1.04396 8.23178 0 6.03364 0C3.06168 0 0.672897 1.62637 0 2.9011V18.5714C0.011215 19.5824 0.594392 20 1.30093 20C1.81682 20 2.13084 19.8352 2.48972 19.5714C3.16262 19.044 4.71028 18.3516 6.6729 18.3516ZM17.3495 18.3516C19.3009 18.3516 20.8486 19.044 21.5215 19.5714C21.8692 19.8242 22.1944 20 22.6991 20C23.4056 20 24 19.5824 24 18.5824V2.9011C23.3383 1.62637 20.9607 0 17.9888 0C15.7794 0 13.615 1.04396 12.7963 2.38462V19.8462C12.9308 19.8022 13.4355 19.4835 13.6486 19.3626C14.2206 18.989 15.5103 18.3516 17.3495 18.3516Z" fill="currentColor"/>
Alpha Channel

Alpha Channel

In this article, you'll learn about the basic properties and definitions of the Alpha Channel. We will help you to understand and use this powerful graphic design feature for your future art creations.

The Alpha Channel is a term of computer graphics and was introduced by Alvy Ray Smith and Ed Catmull in the late 1970s at the New York Institute of Technology Computer Graphics Lab.

The concept of the alpha channel was fully established in a paper in 1984 by Thomas Porter and Tom Duff.

The alpha channel represents the degree of opacity (also defined as transparency) of a computer-generated image, video footage, or the bump, displacement, or opacity properties of a 3D texture.  (It must be interposed that not every video, Image, or texture format automatically contains an alpha channel.)  

In the alpha channel, transparency information is stored in addition to the actual image data in various graphic format options (e.g., PNG, PSD, TGA, DDS, or TIFF). If a digital image or video footage contains an alpha channel, it signifies that besides the color components, additional transparency information is contained within the file.

The alpha channel contains no color information, only transparency information. The channel is always visualized as a grayscale image. The color is normally represented in the RGB values. An alpha channel usually has the same depth as the color channel of an image. For an 8-bit image, for example, an alpha channel comprises 256 levels. The maximum number of possible transparency gradations depends on the number of bits used for the alpha channel.

The image files that contain the alpha channel are generally composed of the following components:

R = Red Channel
G = Green Channel
B = Blue Channel
A = Alpha Channel

Display of the RGBA color model.

The RGBA channels are numerically represented via the HEX Number, which is typically displayed in the Color Picker Interface of your graphic software.  

On the left, the alpha channel is set to alpha=60%, which equals 60% opacity, on the right the alpha channel is set to alpha=100% which equals 100% opacity.

In the example below you can see the same image with:

1 – A white background.
2 – A checkerboard background
3 –The grayscale image of the alpha channel. Lighter areas are more opaque, the darker areas are more transparent.

Source: Wikipedia

The Alpha Value can be measured as a Real Value, a Percentage, or an Integer:

  • The full transparency is defined as 0.0 ; 0% or 0, visualized in the alpha channel image as pure black.
  • The full opacity is defined as 1.0, 100%, or 255, visualized in the alpha channel image as pure white.

Most graphic design applications offer an adjustable opacity of the alpha value.

RGBA model
Example of an RGBA image composited over a checkerboard background layer. Alpha is 0% at the top and 100% at the bottom.

If you, for example, reduce the opacity of the foreground elements to alpha = 40%, the color of the underlying layer will become visible at 60% opacity in the areas where both layers overlap. The resulting color-blending effect will create the illusion of a completely new color to the viewer. In our case, the color blending effect of the black source color with an opacity of 40% combined with the white background image creates the illusion of a gray rectangle.  

Two black rectangular shapes on a white background. The rectangle on the left has the value of alpha = 100 %. The one on the right has the value of alpha = 40 %. The blending effect between the black rectangle and the white background layer creates here the illusion of gray.

Alpha Channels can be received and exported in three different ways:

1. As an external or separate alpha channel
2. As an integrated (premultiplied) alpha
3. As a straight alpha

1. External or Separate Alpha

When saving a file in the form of an external alpha channel, the transparency information is saved as a separate file. It is a grayscale file that must be interpreted as a transparency channel when opened. To display an image with an external alpha channel, both the image file and the alpha channel file must be imported, and the correct transparency of the file is established using the rendering application. This process is also called alpha channel interpretation.

2. Integrated (Premultiplied) Alpha

With the integrated alpha channel (premultiplied alpha), the transparency information is stored in a separate channel, as with the direct alpha channel. The main difference in the direct alpha channel is that the color values of the image are blended with a background color. How much of a pixel's original color is used depends on its opacity. Semi-transparent pixels, for example, are saved with 50% black and 50% background color. This integration of the alpha channel into the color channels is not done instead of, but in addition to, storing the alpha channel. This is to enable the correct display of the image even in applications that do not support an alpha channel.

3. Straight or Integrated Alpha

In files that contain the alpha channel as a so-called direct alpha channel (straight alpha), the transparency information is stored in a separate channel, in addition to the color channels. A pixel within the file is therefore not only stored with three values (R, G, B) but with four values: (R, G, B, α). For example, a dark blue pixel to be displayed at full opacity would be stored by the values (0, 0, 170, 255) at a color depth of 8 bits. The color channel information of the image is not changed by the direct alpha channel.

The Binary Alpha Channel

A binary alpha channel is a minimal alpha channel that uses only 1 bit and therefore can only indicate whether an image pixel is either fully transparent or fully opaque.

Comparable in result to the use of a binary alpha channel, a color of an image can also be defined as transparent. This type of transparency is used in Graphics Interchange Format (GIF), which allows one less hue to be used for rendering. However, it is not an alpha channel in the technical sense, since the transparency information is not stored individually for each pixel.

Alpha as a Masking and Selection Tool

Alpha channels can be used as layer masks and selecting tools in various image editing programs. Selections can also be saved in the mask image for later use. In Photoshop, temporary alpha channels are created when a layer is masked. The current selection can also be used to crop an image. This is often done by copying an existing color channel to an alpha channel, which can then be quickly edited using the image editing functions (curves, contrasts, brushes, etc.).

Image cropping via the alpha channel is a masking technique that divides a selected area of a subject in black, white, and various grayscale pixels. White relates to the selected pixels, black relates to the non-selected areas, and the various grayscale partially relates to the selected and non-selected areas.

Download
Download the PDF version here.
Was this useful?
Like articledislike article
https://www.toptal.com/developers/javascript-minifier/