Blend modes

Blend modes (or Mixing modes^{[citation needed]}) in digital image editing are used to determine how two layers are blended into each other. The default blend mode in most applications is simply to hide the lower layer with whatever is present in the top layer. However, as each pixel has a numerical representation, a large number of ways to blend two layers is possible. Note that the top layer is not necessarily called a "layer" in the application. It may be applied with a painting or editing tool.

Most applications, like Adobe Photoshop and GIMP, allow the user to modify the basic blend modes - for example by applying different levels of opacity to the top picture.

Normal blend mode

This is the standard blend mode which uses the top layer alone, without mixing its colors with the layer beneath it.

$f(a, b) = b$

Where a is the value of a color channel in the underlying layer, and b is that of the corresponding channel of the upper layer. The result is most typically merged into the bottom layer using "simple" (b over a) alpha compositing, but other Porter-Duff operations are possible. The compositing step results in the top layer's shape, as defined by its alpha channel, appearing over the bottom layer.

Dissolve

The dissolve mode takes random pixels from both layers. With high opacity, most pixels are taken from the top layer. With low opacity most pixels are taken from the bottom layer. No anti-aliasing is used with this blend mode, so the pictures may look grainy and harsh.

Multiply and Screen

Multiply and Screen blend modes are basic blend modes for darkening and lightening images respectively. There are several different combinations of them like Overlay or Soft Light (mentioned further down) and Vivid Light, Linear Light and Pin Light.

Multiply

Multiply blend mode multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. The result is a darker picture.

$f(a,b) = ab$, where a is the base layer value and b is the blend value.

If the two layers contain the same picture, multiply blend mode is equivalent to a quadratic curve. If one layer contains a homogeneous color, for example the gray color (0.8, 0.8, 0.8), multiply blend mode is equivalent to a curve which simply is a straight line. For image editing it is sometimes more convenient to simply go to the curves dialog of the software, as it gives more flexibility in the shape of the curves.

Screen

With Screen blend mode the values of the pixels in the two layers are negated, multiplied, and then negated again. This yields an inverse effect from multiply. The result is a brighter picture.

$f(a,b) = 1 - (1 - a)(1 - b)$, where a is the base layer value and b is the blend value.

• 

  Example top layer

• 

  Example bottom layer

• 

  Multiply blend mode applied to the example pictures

• 

  Screen blend mode applied to the example pictures

Overlay

Overlay combines Multiply and Screen blend modes. Light parts of the picture become lighter and dark parts become darker. An overlay with the same picture looks like an S-curve.

$f(a,b) = \begin{cases} 2 a b, &\mbox{if } a < 0.5 \\ 1 - 2 ( 1 - a ) ( 1 - b ), &\mbox{otherwise} \end{cases}$

where a is the base layer value and b is the blend value.

Soft Light

Comparison of soft light blend modes

This is a softer version of Overlay. Applying pure black or white does not result in pure black or white.

There are a variety of different methods of applying a soft light blend. The formula used by Photoshop has a discontinuity, and other formulas correct it. Photoshop's formula is:

$f_{photoshop}(a,b) = \begin{cases} 2 a b + a^2 (1 - 2 b), &\mbox{if } b < 0.5 \\ 2 a (1 - b) + \sqrt{a} (2 b - 1), &\mbox{otherwise} \end{cases}$

where a is the base layer value and b is the blend value.

Pegtop's formula is smoother and corrects the discontinuity at a = 0.5:

$f_{pegtop}(a,b) = (1-2b)a^2 + 2ba$

A third formula defined by illusions.hu corrects the discontinuity in a different way, preserving some gamma properties:

$f_{illusions.hu}(a, b) = a^{( 2^{2(0.5 - b)} )}$

The formula specified by recent W3C drafts for SVG and Canvas is mathematically equivalent to the Photoshop formula with a small variation where b≥0.5 and a≤0.25:

$f_{w3c}(a, b) = \begin{cases} a - (1 - 2 b) \cdot a \cdot (1 - a) & \text{if } b \leq 0.5 \\ a + (2 b - 1) \cdot (g_{w3c}(a) - a) & \text{otherwise} \end{cases}$

where

$g_{w3c}(a) = \begin{cases} ((16 a - 12) \cdot a + 4) \cdot a & \text{if } a \leq 0.25 \\ \sqrt{a} & \text{otherwise} \end{cases}$.

This is also the formula used by Cairo, and in earlier PDF documentation.

Hard Light

Hard Light combines Multiply and Screen blend modes. Equivalent to Overlay, but with the bottom and top images swapped.

Dodge and burn

Further information: Dodging and burning

Dodge and burn change the lightness of the pictures, inspired by the dodging and burning performed in a darkroom. Dodging lightens an image, while burning darkens it.

• Dodge modes:
  • The Screen blend mode inverts both layers, multiplies them, and then inverts that result.
  • The Color Dodge blend mode divides the bottom layer by the inverted top layer. This decreases the contrast to make the bottom layer reflect the top layer: the brighter the top layer, the more its color affects the bottom layer. Blending with white gives white. Blending with black does not change the image. This effect is similar to changing the white point. The operation is not invertible.
  • The Linear Dodge blend mode simply sums the values in the two layers. Blending with white gives white. Blending with black does not change the image.

• Burn modes:
  • The Multiply mode simply multiplies each component in the two layers.
  • The Color Burn mode divides the inverted bottom layer by the top layer, and then inverts the result. This darkens the top layer increasing the contrast to reflect the color of the bottom layer. The darker the bottom layer, the more its color is used. Blending with white produces no difference.
  • The Linear Burn mode sums the value in the two layers and subtracts 1. This is the same as inverting each layer, adding them together (as in Linear Dodge), and then inverting the result. Blending with white leaves the image unchanged.

• Vivid Light: this blend mode combines Color Dodge and Color Burn. Dodge applies to values lighter than middle gray, and burn to darker values.

• Linear Light: this blend mode combines Linear Dodge and Linear Burn. Dodge applies to values lighter than middle gray, and burn to darker values. The calculation simplifies to the sum of bottom layer and twice the top layer, subtract 1.

Simple arithmetic blend modes

Divide

This blend mode simply divides pixel values of one layer with the other, but it's useful for brightening photos if the color is on grey or less.

Addition

This blend mode simply adds pixel values of one layer with the other. In case of values above 1 (in the case of RGB), white is displayed.

Subtract

This blend mode simply subtracts pixel values of one layer with the other. In case of negative values, black is displayed.

Difference

Difference subtracts the top layer from the bottom layer or the other way round, to always get a positive value. Blending with black produces no change, as values for all colors are 0. (The RGB value for black is 0,0,0). Blending with white inverts the picture.

One of the main utilities for this is during the editing process, when it can be used to verify alignment of pictures with similar content. Exclusion is a very similar blend mode with lower contrast.

Darken Only

Darken Only creates a resultant pixel that retains the smallest components of the foreground and background pixels. If the foreground pixel has the components r1, g1, and b1, and the background has r2, g2, b2, the resultant pixel is

$[min(r_1, r_2), min(g_1, g_2), min(b_1, b_2)]$

Lighten Only

Lighten Only 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

$[max(r_1, r_2), max(g_1, g_2), max(b_1, b_2)]$

Boolean arithmetic blend modes

Rarely, applications such as Aviary's Peacock will supply boolean arithmetic blend modes. These combine the binary expansion of the hexadecimal color at each pixel of two layers using boolean logic gates. The top layer's alpha controls interpolation between the lower layer's image and the combined image.

Hue, saturation and luminosity

Photoshop’s hue, saturation, color, and luminosity blend modes are based on a color space with dimensions that the article HSL and HSV calls hue, chroma, and luma. Note that this space is different from both HSL and HSV, and only the hue dimension is shared between the three; see that article for details.

Unlike all of the previous blend modes described, which operate on each image channel independently, in each of these modes, some dimensions are taken from the bottom layer, while the remainder are taken from the top layer. Colors which end up out of gamut are brought inside by mapping along lines of constant hue and luma. This makes the operations uninvertible – after a top layer has been applied in one of these blend modes, it is in some cases impossible to restore the appearance of the original (bottom) layer, even by applying a copy of the bottom layer in the same blend mode above both.

• The Hue blend mode preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.
• The Saturation blend mode preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.
• The Color blend mode preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.
• The Luminosity blend mode preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.

Because these blend modes are based on a color space which is much closer than RGB to perceptually relevant dimensions, it can be used to correct the color of an image without altering perceived lightness, and to manipulate lightness contrast without changing the hue or chroma. The Luminosity mode is commonly used for image sharpening, because human vision is much more sensitive to fine-scale lightness contrast than color contrast. See Contrast (vision).

Few editors other than Photoshop implement this same color space for their analogs of these blend modes.^{[citation needed]} Instead, they typically base their blend modes on HSV (aka HSB) or HSL. Blend modes based on HSV are typically labeled hue, saturation, and brightness. Using HSL or HSV has the advantage that most operations become invertible (at least in theory), but the disadvantage that the dimensions of HSL and HSV are not as perceptually relevant as the dimensions of the space Photoshop uses.

See also

• Alpha compositing
• Comparison of raster graphics editors
• Digital image editing
• Raster graphics
• Image processing

References

• Paul R. Dunn, “Insight into Photoshop 7.0 Blending Modes”
• “Photoshop math with GLSL shaders”
• “Photoshop Blend Mode Math”, includes C code.
• Ron Bigelow, “Using Blend Modes in Photoshop – Part I”, a tutorial
• The gimp manual
• Adobe's website on blend modes
• Adobe Master transparency and blends pdf file
• Gimp and Photoshop Blending Modes visually explained and compared, parts one, two, three, and four
• JAVA demo on the image blending operator, an interactive JAVA-based image blending demo
• All the math behind photoshop compositing (including math for using alpha in complex compositions like softlight)
• Image Blending Algorithm