5.6 The Blending Modes

Usually layers are opaque, which means that upper layers cover and visually block lower ones. Blending modes change this behavior and allow some color features of a layer to be combined with the colors of layers below it. Blending modes can also be used to affect how color from a painting tool combines with the layer the paint is applied to.

Figure 5.11(a)

  

Figure 5.11: The Blending Mode Menus

illustrates the blending mode menu for layers, which is found in the Layers dialog. Figure 5.11(b) shows the blending mode menu for painting tools , which is found in the Brush Selection  dialog.^5.1 The menu in the Brush Selection dialog applies the selected blending mode to all the paint tools: the Pencil, Paintbrush, Airbrush, Ink Pen, and Xinput Airbrush tools. In addition, this menu controls the way the Bucket Fill, Gradient, and Clone tools apply their paint.

The different blending modes are described in this section, and their practical uses and applications are described in the next. The GIMP has 16 different blending modes. They are listed in the following five logical groups:

• Normal, Dissolve, and Behind (available in paint mode only)
• Difference, Addition, and Subtract
• Multiply (Burn), Divide (Dodge), Screen, and Overlay
• Darken Only and Lighten Only
• Hue, Saturation, Color, and Value

In the following descriptions of the blending modes, the pixels of the upper layer (or of the applied paint) are referred to as the foreground pixels and those of the lower layer or layers as the background pixels. The notations F and B are used to represent their respective values. Blending the foreground pixel value F with the background value B yields the resultant pixel value R.

       
5.6.1 The Normal, Dissolve, and Behind Blending Modes

Normal, Dissolve, and Behind are pseudo-blending modes because they don't really combine the foreground and background pixel values of the image.

Normal mode is the default GIMP behavior where the foreground pixels are visible and the background pixels are not. Of course, this can be changed by adjusting the opacity slider in the Layers dialog (more on opacity and transparency is discussed in Section 5.7).

Dissolve mode works by allowing a percentage of background pixels to be seen through the foreground. It does this by making some parts of the foreground partially transparent and the rest fully transparent. These two sets are intermingled in a random way. For the Dissolve mode to have an effect, the foreground layer must have an alpha channel with values less than 255. The alpha channel for a layer can be modified with a layer mask. The details of working with layer masks are discussed in Section 4.2.

Figure 5.12

  

Figure 5.12: The Dissolve Blending Mode

illustrates the use of Dissolve. Figure 5.12(a) shows the Layers dialog which illustrates how this example is constructed. The image consists of two layers: a red background and a white foreground. The foreground has a uniform alpha channel set to a value of 191 (about 75% opaque). The Mode menu in Figure 5.12(a) shows that the Dissolve mode has been chosen for the foreground.

Figure 5.12(b) shows the result of the Dissolve blending mode. Due to the value of the foreground's alpha channel the result is that 75% of the white pixels are 75% opaque and 25% are fully opaque. The details of the effect can be more clearly seen in the small region framed by the black box shown in Figure 5.12(b). This region is zoomed 900% and redisplayed in Figure 5.12(c), which makes the relationship of the red and white pixels more apparent.

Unlike all the other blend modes in the GIMP, the Behind mode only works with painting tools. It is not available as a blending mode for layers. To understand how it works, imagine a pane of glass that has something painted on the front surface but there are some parts of the pane that are bare, or have only a partially transparent paint on it. Painting on the back surface of the pane lets the color from this new paint show through to the front wherever the front is not fully opaque. Figure 5.13

  

Figure 5.13: The Behind Blending Mode

illustrates this effect.

In Figure 5.13(a), a single-layer image with a centered red circle is displayed. The rest of the layer is transparent. The Brush Selection dialog, shown in Figure 5.13(b), has been used to choose a large, hard brush and to set the blending mode to Behind. The figure shows the result of painting a bright green stripe, using the Paintbrush tool, through the red circle. In Behind mode, however, the green is only seen through the transparent parts of the layer. This mode only works for layers with alpha channels.

       
5.6.2 The Addition, Subtract, and Difference Blending Modes

Addition, Subtract, and Difference are blending modes that add and subtract foreground and background pixel values in RGB colorspace. Figure 5.14

  

Figure 5.14: Addition and Subtraction in the RGB Cube

illustrates the effect of addition and subtraction for two pixels in the RGB cube.

The Addition blending mode works as follows. Given a foreground and background pixel, represented by the RGB vectors F=[r₁,g₁,b₁]and B=[r₂,g₂,b₂], the pixel obtained from the Addition blending mode is R=F+B=[r₁+r₂,g₁+g₂,b₁+b₂]. Thus, in Figure 5.14(a), the two blue arrows represent a foreground and background pixel, and the red arrow is the vector sum of the two. Addition always produces a resultant color that is as light or lighter than either the foreground or background colors. This is because the vector sum must have a projection onto the neutral axis that is closer to white than the projection for either the background or foreground colors.

In the event that the vector sum produces a result outside of the color cube (that is, by producing any RGB component greater than 255), its value is clipped to the surface of the cube. The equation describing the Addition blending mode is

$$R=\min \{F+B,W\}$$

where W is the vector [255,255,255] and the $\min$ function performs component-wise minimization of the two vectors.

Cyan, magenta, and yellow are the sums of green and blue, red and blue, and red and green, respectively. Thus, cyan, magenta, and yellow appear lighter than red, green, or blue because they project higher up onto the neutral axis. Furthermore, any of these secondary colors (cyan, magenta, yellow) summed with the complementary primary color (red, green, blue) produces white, the lightest color of all.

Figure 5.15

  

Figure 5.15: Using the Addition Blending Mode

illustrates an application of the Addition blending mode. Figure 5.15(a) displays the image of a flower, and Figure 5.15(b), showing the associated Layers dialog, indicates that this image consists of two-layers. The upper layer is the flower image, and the lower layer is filled with a medium gray whose pixel values are uniformly 127^R 127^G 127^B.

Figure 5.15(a) shows the flower image for the Normal blending mode. Figure 5.15(c) shows the same image when the blending mode of the upper layer is changed to Addition. This has the effect of adding 127^R 127^G 127^B to every pixel in the flower layer, which lightens the entire image considerably. In fact, some parts of the image are completely blown out to white.

The effect of the Subtract blending mode is illustrated in Figure 5.14(b). This blending mode works as follows. Given a foreground and background pixel, we'll again represent each as an RGB vector F=[r₁,g₁,b₁] and B=[r₂,g₂,b₂]. The pixel obtained from the Subtract blending mode is R=B-F=[r₂-r₁,g₂-g₁,b₂-b₁]. Thus, for the two blue arrows labeled F and B in Figure 5.14(b), the result of subtracting the foreground from the background is given by the red arrow labeled R.

Unlike the Addition blending mode, Subtract is not symmetrical (that is, subtracting F from B is not the same as subtracting B from F). The result of subtracting the foreground from the background can produce negative values. If a component of the resulting RGB vector is less than zero, it is clipped to the surface of the cube. Thus, the equation representing the Subtract blending mode is

$$R=\max \{B-F,0\}$$

where 0 represents the color 0^R 0^G 0^B and $\max$ is the function that performs component-wise maximization of the two vectors. Because the foreground color is always a positive number, the result is always darker than the background (unless either the foreground or background are black, and then there is no change).

The Difference blending mode is like Subtract, but the result is symmetrical between the foreground and the background. Difference is symmetrical because it applies an absolute value to the difference of the foreground and background values. Thus, if one of the RGB components is negative after subtraction, its sign is reversed to make it positive. The resulting mathematical expression for the Difference blending mode is

R=|F-B|

where the vertical bars in the equation represent the absolute value function.

Figure 5.16

  

Figure 5.16: Using the Subtract and Difference Blending Modes

illustrates the application of the Subtract and Difference blending modes. The modes are applied to the image from Figure 5.15(a), which consists of the flower in the upper layer and a medium gray in the lower layer. You can see that the result of using Subtract, shown in Figure 5.16(a), has regions that are totally black. This is where the difference between the foreground and background creates negative values that are clipped to zero. Difference, shown in Figure 5.16(b), however, has no clipped values because it employs the absolute value of the difference. Note that for both the Subtract and Difference modes, the results are darker than the original flower image.

         
5.6.3 The Multiply (Burn), Divide (Dodge), Screen, and Overlay Blending Modes

Multiply, Divide, Screen, and Overlay are all multiplicative blending modes. The resulting pixel values are the product or a function of the product of the foreground and background pixels.

The actions of the Multiply and Screen modes on pixels represented in the RGB cube are illustrated in Figure 5.17.

  

Figure 5.17: The Multiply and Screen Modes in the RGB Cube

For a foreground pixel whose position in the RGB cube is [r₁,g₁,b₁] and a background pixel whose position is [r₂,g₂,b₂], the resultant pixel for Multiply mode is the component-by-component product of the two, or [r₁r₂/255,g₁g₂/255,b₁b₂/255], where the division by 255 is necessary to normalize the result back into the RGB cube. This can be succinctly expressed by the equation

$$R=\frac{1}{255}(F\times B)$$

where the $\times$ symbol means component-wise multiplication.

Due to the scale factor of 255, the component values of one RGB vector are normalized to the range [0,1]. Thus, R is component-wise smaller than either F or B. From previous discussions, you know that smaller means darker because the projection onto the neutral axis is closer to the origin. This is illustrated in Figure 5.17(a) which shows two blue arrows representing the foreground and background pixel positions and a red arrow representing the component-wise product.

Figure 5.18(a)

  

Figure 5.18: An Example of Multiply, Divide, Screen, and Overlay Modes

illustrates an example of applying Multiply mode to the flower image from Figure 5.15(a). As before, the lower layer of this image is a uniform gray equal to 127^R 127^G 127^B. The result, shown in Figure 5.18(a), is the image has been made uniformly darker. In fact, because the lower layer is a medium gray, the pixels values in the flower layer have been scaled by $127/255\approx 1/2$ everywhere.

For a foreground pixel whose position in the RGB cube is [r₁,g₁,b₁] and a background pixel whose position is [r₂,g₂,b₂], you might imagine that the resultant pixel for the Divide blending mode would be analogous to that for the Multiply mode. This would suggest something like [255r₂/r₁,255g₂/g₁,255b₂/b₁]. However, this expression presents two problems. The first problem is that when the foreground pixel has a zero component, the result is not defined; the second problem is that when the foreground pixel value is small, the result can be so large that it is no longer inside the RGB cube. The first problem is solved by adding one to each component of the foreground pixel. This prevents a division by zero. The second problem is solved by clipping values that are too large to the surface of the cube.

A succinct expression for the Divide mode is

$$R=\min \{ W , B\div \frac{(F+1)}{256} \}$$

where W is 255^R 255^G 255^B, $\div$ represents component-wise division of two vectors, and $\min$ represents component-wise minimization. Figure 5.18(b) illustrates the application of Divide to the flower image from Figure 5.15(a). Here, you can see that some parts of the resulting image are blown out to white. This occurs in regions where the original flower image has small (that is dark) pixel values. Note that Divide always lightens an image because, it divides each pixel component by a number less than 1.

The Screen blending mode has a lightening effect that is exactly analogous to the darkening effect created by Multiply. This concept is illustrated in Figure 5.17(b). As shown in the figure Screen mode redefines the origin to be 255^R 255^G 255^B, the white point in the cube. Thus, the vectors to the foreground and background pixels are as shown by the two blue arrows in Figure 5.17(b). Screen then multiplies the two vectors, producing a resultant shown as a red arrow in Figure 5.17(b). As with the Multiply mode, the resulting vector of the Screen mode is shorter than either the foreground or background vectors--but with respect to the white point in the cube. Thus, the resulting vector is closer to the white point, and, consequently, lighter than either the foreground or background colors. The mathematical expression for Screen mode is

$$R=W-\frac{1}{255}(W-F)\times (W-B).$$

Again, the factor of 255 is introduced to keep the resultant pixel values inside the RGB cube.

Figure 5.18(c) illustrates an example of applying the Screen mode to the flower image from Figure 5.15(a). As predicted, the result is everywhere brighter than in the original image of the flower. Also notice that unlike Divide, Screen mode does not blow out to white. Thus, although both Divide and Screen have similar lightening characteristics, they have very different personalities.

Finally, the Overlay mode is a combination of both Multiply and Screen. The equation for overlay mode is

$$R=\frac{1}{255}[B\times R_s + (1-B)\times R_m]$$

where R_s represents the resultant pixel value for Screen mode and R_m represents that for Multiply. This equation says that the resultant pixel value for Overlay mode is a combination of the Screen and Multiply modes. The mix of the two modes is proportional to the background pixel value.

Thus, if the background is dark (that is, has an RGB value close to zero in all three components), the result of Multiply mode will dominate and the result of Screen mode will be suppressed. The opposite is true if the background pixel is light (that is, has an RGB value close to white in all three components). Overall, Overlay mode tends to make an image darker where it is already dark and lighter where it is already light. Figure 5.18(d) illustrates an example of applying Overlay mode to the flower image from Figure 5.15(a).

      
5.6.4 The Darken Only and Lighten Only Blending Modes

Darken Only creates a resultant pixel that retains the smallest components of the foreground and background pixels. Thus, if the foreground pixel has the components [r₁,g₁,b₁] and the background has [r₂,g₂,b₂], the resultant pixel is $[\min(r_1,r_2),\min(g_1,g_2),\min(b_1,b_2)]$. This is expressed more compactly as

$$R=\min\{F,B\}$$

where $\min$ means component-wise minimization. Not surprisingly, Darken Only mode makes an image darker.

Figure 5.19(a)

  

Figure 5.19: An Example of Darken Only and Lighten Only Modes

illustrates the use of Darken Only mode on the flower image from Figure 5.15(a). Because the grayscale layer below the flower is uniformly 127^R 127^G 127^B, everything in the flower that has an RGB component darker than 127 retains its character in the image. The parts of the flower image that are lighter are replaced by the flat gray.

Lighten Only mode has the opposite action of Darken Only. It selects the maximum of each component from the foreground and background pixels. The mathematical expression for Lighten Only is

$$R=\max\{F,B\}.$$

where $\max$ means component-wise maximization. Lighten Only mode makes an image lighter.

Figure 5.19(b) illustrates the use of Lighten Only mode on the flower image from Figure 5.15(a). Now, everything in the flower that has an RGB component lighter than 127 retains its character in the image. The parts of the flower image that are darker are replaced by the flat gray.

         
5.6.5 The Hue, Saturation, Value, and Color Blending Modes

The Hue, Saturation, Value, and Color blending modes all work similarly. For each mode, one HSV component is taken from the foreground pixel and the other two components from the background pixel. For example, if the Hue blending mode is chosen, the result is the hue of the foreground pixels combined with the saturation and value of the background pixels. The same process is used for the Saturation and Value blending modes. The Color blending mode, however, is slightly different. For this mode, the hue and saturation of the foreground pixels are used in conjunction with the lightness of the background pixels. Lightness, defined in Section 5.3, is less bright than value, and is simultaneously more true to the human perception of brightness.

Thus, the action of the Hue blending mode can be expressed as

R=[h(F),s(B),v(B)]

where h(F) means the hue of the foreground, s(B) represents the saturation of the background, and v(B) is the value of the background. An example of applying the Hue blending mode is illustrated in Figure 5.20.

  

Figure 5.20: An Example of Hue Mode

The flower image from Figure 5.15(a) is shown in Figure 5.20(a). This image is the foreground to the Hue mode, and the background is the blue layer shown in Figure 5.20(b). This blue layer varies horizontally in value and vertically in saturation. The result of applying the Hue mode is shown in Figure 5.20(c). Here, it can be clearly seen that the saturation and value variations of the blue layer are combining with the hue of the flower layer.

Similar to Hue, the Saturation blending mode produces resultant pixels that are a combination of the saturation of the foreground and the hue and value of the background. The expression for this is

R=[h(B),s(F),v(B)]

where s(F) is the saturation of the foreground, h(B) is the hue of the background, and v(B) represents the value of the background. An example of applying the Saturation blending mode is illustrated in Figure 5.21.

  

Figure 5.21: An Example of Saturation Mode

We see again our flower image in Figure 5.21(a) playing the role of the foreground layer. However, now the background layer, shown in Figure 5.21(b), has been constructed to vary only in hue and value. In this layer, the hue changes along the horizontal direction and the value along the vertical. The result of applying the Saturation mode is shown in Figure 5.21(c).

The Value blending mode produces resultant pixels that are a combination of the value of the foreground and the hue and saturation of the background. The expression for this is

R=[h(B),s(B),v(F)]

Here, v(F) represents the foreground value, h(B) the background hue, and s(B) the background saturation. An example of this blending mode is shown in Figure 5.22.

  

Figure 5.22: An Example of Value Mode

The background layer, shown in Figure 5.22(b), varies in hue in the horizontal direction and saturation in the vertical direction. The result of this mode is shown in Figure 5.22(c).

The final example in this section illustrates the Color blending mode. This mode combines the foreground hue and saturation with the background lightness. Lightness was defined earlier in Section 5.3; lightness is always a bit less bright than value. The expression for this blending mode is

R=[h(F),s(F),l(B)]

where h(F) and s(F) are the hue and saturation of the foreground, and l(B) is the lightness of the background. An example of this blending mode is shown in Figure 5.23.

  

Figure 5.23: An Example of Color Mode

Here, the background, shown in Figure 5.23(b), varies only in value. The result is shown in Figure 5.23(c).

©2000 Gimp-Savvy.com