5.6 The Blending Modes
Keywords: GIMP, gimp, Gimp, GNU Image Manipulation Program, gnu image manipulation program, Gimp tutorials, GIMP tutorials, gimp tutorials, Linux applications, linux applications, editing digital images, digital image editing, photo touchup, photo enhancement, enhancement photos, touchup, enhancement, image touchup, image enhancement, enhancement images, touchup images, digital collage, collage, compositing, photo montage, montage, photos, images, stock photos, copyright free photos, selection, selections, mask, masks, color correct, color correction, colorspace, colorspaces, RGB, rgb, hsv, HSV, free-hand tool, free hand tool, lasso tool, bezier path tool, Bezier path tool, layer mask, layer masks, layer, layers, gradient tool, gradients, blend tool, blending, threshold tool, thresholding, histogram, curves tool, curves, levels tool, levels, color picker, eyedropper, wilber, wilber the gimp, Wilber the GIMP, magic wand, fuzzy-select tool, fuzzy select tool, crop tool, transform tool, text tool,  [cell cut: 1485 characters, first 1000 kept]

Next: 5.7 Opacity and Transparency Up: 5. Colorspaces and Blending Previous: 5.5 Conversion to Grayscale
Subsections

- 5.6.1 The `Normal`, `Dissolve`, and `Behind` Blending Modes
- 5.6.2 The `Addition`, `Subtract`, and `Difference` Blending Modes
- 5.6.3 The `Multiply (Burn)`, `Divide (Dodge)`, `Screen`, and `Overlay` Blending Modes
- 5.6.4 The `Darken Only` and `Lighten Only` Blending Modes
- 5.6.5 The `Hue`, `Saturation`, `Value`, and `Color` Blending Modes

#
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=[r1,g1,b1]and B=[r2,g2,b2], the pixel obtained from the `Addition` blending mode is R=F+B=[r1+r2,g1+g2,b1+b2]. 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

where W is the vector [255,255,255] and the 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 127R 127G 127B.

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 127R 127G 127B 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=[r1,g1,b1] and B=[r2,g2,b2]. The pixel obtained from the `Subtract` blending mode is R=B-F=[r2-r1,g2-g1,b2-b1]. 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

where 0 represents the color 0R 0G 0B and 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 [r1,g1,b1] and a background pixel whose position is [r2,g2,b2], the resultant pixel for `Multiply` mode is the component-by-component product of the two, or [r1r2/255,g1g2/255,b1b2/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

where the 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 127R 127G 127B. 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 everywhere.

For a foreground pixel whose position in the RGB cube is [r1,g1,b1] and a background pixel whose position is [r2,g2,b2], 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 [255r2/r1,255g2/g1,255b2/b1]. 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

where W is 255R 255G 255B, represents component-wise division of two vectors, and 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 255R 255G 255B, 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

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

where Rs represents the resultant pixel value for `Screen` mode and Rm 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 [r1,g1,b1] and the background has [r2,g2,b2], the resultant pixel is . This is expressed more compactly as

where 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 127R 127G 127B, 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

where 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).

Next: 5.7 Opacity and Transparency Up: 5. Colorspaces and Blending Previous: 5.5 Conversion to Grayscale
©2000 Gimp-Savvy.com