From Krita Documentation
Jump to: navigation, search

Blending Modes

Blending modes are a little difficult to explain. Basically, when one layer is above the other, the computer uses a bit of programming to decide how the combination of both layers will look.

Blending modes can not just apply to Layers, but also to individual strokes.

Favorites

These are the blending modes that have been ticked as favorites, defaulting these are:

Hotkeys associated with Blending modes

Defaultly the following hotkeys are associated with blending modes. You first need to use modifiers alt+shift, then use the following hotkey to have the associated blending mode:


Arithmetic

These blending modes are based on simple maths.

Addition

Adds the numerical values of two colours together:

Yellow(1, 1, 0) + Blue(0, 0, 1) = White(1, 1, 1)

Darker Gray(0.4, 0.4, 0.4) + Lighter Gray(0.5, 0.5, 0.5) = Even Lighter Gray (0.9, 0.9, 0.9)

Left: Normal. Right: Addition.

Light Blue(0.1608, 0.6274, 0.8274) + Orange(1, 0.5961, 0.0706) = (1.1608, 1.2235, 0.8980) → Very Light Yellow(1, 1, 0.8980)

Left: Normal. Right: Addition.

Red(1, 0, 0) + Grey(0.5, 0.5, 0.5) = Pink(1, 0.5, 0.5)

Left: Normal. Right: Addition.

When the result of the addition is more than 1, white is the color displayed. Therefore, white plus any other color results in white. On the other hand, black plus any other color results in the added color.

Blending modes - Addition - Sample image with dots.PNG
Left: Normal. Right: Addition.

Divide

Divides the numerical value from the lower color by the upper color.

Red(1, 0, 0) / Gray(0.5, 0.5, 0.5) = (2, 0, 0) → Red(1, 0, 0)

Darker Gray(0.4, 0.4, 0.4) / Lighter Gray(0.5, 0.5, 0.5) = Even Lighter Gray (0.8, 0.8, 0.8)

Left: Normal. Right: Divide.

Light Blue(0.1608, 0.6274, 0.8274) / Orange(1, 0.5961, 0.0706) = (0.1608, 1.0525, 11.7195) → Aqua(0.1608, 1, 1)

Left: Normal. Right: Divide.
Blending modes - Divide - Sample image with dots.PNG
Left: Normal. Right: Divide.

Inverse Subtract

This inverts the lower layer before subtracting it from the upper layer.

Lighter Gray(0.5, 0.5, 0.5) - (1 - Darker Gray(0.4, 0.4, 0.4)) = (-0.1, -0.1, -0.1) → Black(0, 0, 0)

Left: Normal. Right: Inverse Subtract.

Orange(1, 0.5961, 0.0706) - (1 - Light Blue(0.1608, 0.6274, 0.8274)) = (0.1608, 0.2235, -0.102) → Dark Green(0.1608, 0.2235, 0)

Left: Normal. Right: Inverse Subtract.
Blending modes - Inverse Subtract - Sample image with dots.PNG
Left: Normal. Right: Inverse Subtract.

Multiply

Multiplies the two colors with each other, but does not go beyond the upper limit.

This is often used to color in a black and white lineart. One puts the black and white lineart on top, and sets the layer to 'Multiply', and then draw in color on a layer beneath. Multiply will all the colour to go through.

White(1,1,1) x White(1, 1, 1) = White(1, 1, 1)

White(1, 1, 1) x Grey(0.5, 0.5, 0.5) = Grey(0.5, 0.5, 0.5)

Darker Gray(0.4, 0.4, 0.4) x Lighter Gray(0.5, 0.5, 0.5) = Even Darker Gray (0.2, 0.2, 0.2)

Left: Normal. Right: Multiply.

Light Blue(0.1608, 0.6274, 0.8274) x Orange(1, 0.5961, 0.0706) = Green(0.1608, 0.3740, 0.0584)

Left: Normal. Right: Multiply.
Blending modes - Multiply - Sample image with dots.PNG
Left: Normal. Right: Multiply.

Subtract

Subtracts the top layer from the bottom layer.

White(1, 1, 1) - White(1, 1, 1) = Black(0, 0, 0)

White(1, 1, 1) - Grey(0.5, 0.5, 0.5) = Grey(0.5, 0.5, 0.5)

Darker Gray(0.4, 0.4, 0.4) - Lighter Gray(0.5, 0.5, 0.5) = (-0.1, -0.1, -0.1) → Black(0, 0, 0)

Left: Normal. Right: Subtract.

Light Blue(0.1608, 0.6274, 0.8274) - Orange(1, 0.5961, 0.0706) = (-0.8392, 0.0313, 0.7568) → Blue(0, 0.0313, 0.7568)

Left: Normal. Right: Subtract.
Blending modes - Subtract - Sample image with dots.PNG
Left: Normal. Right: Subtract.

Darken

Burn

A variation on Divide, sometimes called 'Color Burn' in some programs.

This inverts the bottom layer, then divides it by the top layer, and inverts the result. This results in a darkened effect that takes the colors of the lower layer into account, similar to the burn technique used in traditional darkroom photography.

1 - {[1 - Darker Gray(0.4, 0.4, 0.4)] / Lighter Gray(0.5, 0.5, 0.5)} = (-0.2, -0.2, -0.2) → Black(0, 0, 0)

Left: Normal. Right: Burn.

1 - {[1 - Light Blue(0.1608, 0.6274, 0.8274)] / Orange(1, 0.5961, 0.0706)} = (0.1608, 0.3749, -1.4448) → Green(0.1608, 0.3749, 0)

Left: Normal. Right: Burn.
Blending modes - Burn - Sample image with dots.PNG
Left: Normal. Right: Burn.

Darken

With the darken, the upper layer's colors are checked for their lightness. Only if they are darker than the underlying color on the lower layer, will they be visible.

Is Lighter Gray(0.5, 0.5, 0.5) darker than Darker Gray(0.4, 0.4, 0.4)? = (no, no, no) → Darker Gray(0.4, 0.4, 0.4)

Left: Normal. Right: Darken.

Is Orange(1, 0.5961, 0.0706) darker than Light Blue(0.1608, 0.6274, 0.8274)? = (no, yes, yes) → Green(0.1608, 0.5961, 0.0706)

Left: Normal. Right: Darken.
Blending modes - Darken - Sample image with dots.PNG
Left: Normal. Right: Darken.

Darker Color

Blending modes - Darker Color - Sample image with dots.PNG
Left: Normal. Right: Darker Color.

Gamma Dark

Divides 1 by the upper layer, and calculates the end result using that as the power of the lower layer.

Darker Gray(0.4, 0.4, 0.4)^[1 / Lighter Gray(0.5, 0.5, 0.5)] = Even Darker Gray(0.1600, 0.1600, 0.1600)

Left: Normal. Right: Gamma Dark.

Light Blue(0.1608, 0.6274, 0.8274)^[1 / Orange(1, 0.5961, 0.0706)] = Green(0.1608, 0.4575, 0.0683)

Left: Normal. Right: Gamma Dark.
Blending modes - Gamma Dark - Sample image with dots.PNG
Left: Normal. Right: Gamma Dark.

Linear Burn

Adds the values of the two layers together and then subtracts 1. Seems to produce the same result as Inverse Subtract.

[Darker Gray(0.4, 0.4, 0.4) + Lighter Gray(0.5, 0.5, 0.5)] - 1 = (-0.1000, -0.1000, -0.1000) → Black(0, 0, 0)

Left: Normal. Right: Linear Burn.

[Light Blue(0.1608, 0.6274, 0.8274) + Orange(1, 0.5961, 0.0706)] - 1 = (0.1608, 0.2235, -0.1020) → Dark Green(0.1608, 0.2235, 0)

Left: Normal. Right: Linear Burn.
Blending modes - Linear Burn - Sample image with dots.PNG
Left: Normal. Right: Linear Burn.

HSX

Krita has four different HSX coordinate systems. The difference between them is how they handle tone.

HSI

HSI is a color coordinate system, using Hue, Saturation and Intensity to catagorise a color. Hue is roughly the wavelength, whether the colour is red, yellow, green, cyan, blue or purple. It is measure in 360°, with 0 being red. Saturation is the measurement of how close a color is to grey. Intensity, in this case is the tone of the color. What makes intensity special is that it recognises Yellow(rgb:1,1,0) having a higher combined rgb value than blue(rgb:0,0,1). This is a non-linear tone dimension, which means it's gamma-corrected.

HSL

HSL is also a color coordinate system. It describes colors in Hue, Saturation and Lightness. Lightness specifically puts both yellow(rgb:1,1,0), blue(rgb:0,0,1) and middle grey(rgb:0.5,0.5,0.5) at the same lightness(0.5).

HSV

HSV, occasionally called HSB, is a color coordinate system. It measures colors in Hue, Saturation, and Value(also called Brightness). Value or Brightness specifically reffers to strength at which the pixel-lights on your monitor have to shine. It sets Yellow(rgb:1,1,0), Blue(rgb:0,0,1) and White(rgb:1,1,0) at the same Value(100%)

HSY

HSY is a color coordinate system. It catagorises colors in Hue, Saturation and Luminosity. Well, not really, it uses Luma instead of true luminosity, the difference being that Luminosity is linear while Luma is gamma-corrected and just weights the rgb components. Luma is based on scientific studies of how much light a color reflects in real-life. While like intensity it acknowledges that Yellow(rgb:1,1,0) is lighter than blue(rgb:0,0,1), it also acknowledges that Yellow(rgb:1,1,0) is lighter than Cyan(rgb(0,1,1), based on these studies.

HSX Blending Modes

Color, HSV, HSI, HSL, HSY

This takes the Luminosity/Value/Intensity/Lightness of the colours on the lower layer, and combines them with the Saturation and Hue of the upper pixels. We refer to Color HSY as 'Color' in line with other applications.

Left: Normal. Right: Color HSI.
Left: Normal. Right: Color HSI.
Blending modes - Color HSI - Sample image with dots.PNG
Left: Normal. Right: Color HSI.
Blending modes - Color HSL - Sample image with dots.PNG
Left: Normal. Right: Color HSL.
Blending modes - Color HSV - Sample image with dots.PNG
Left: Normal. Right: Color HSV.
Blending modes - Color - Sample image with dots.PNG
Left: Normal. Right: Color.

Hue HSV, HSI, HSL, HSY

Takes the saturation and tone of the lower layer and combines them with the hue of the upper-layer. Tone in this case being either Value, Lightness, Intensity or Luminosity.

Blending modes - Hue HSI - Sample image with dots.PNG
Left: Normal. Right: Hue HSI.
Blending modes - Hue HSL - Sample image with dots.PNG
Left: Normal. Right: Hue HSL.
Blending modes - Hue HSV - Sample image with dots.PNG
Left: Normal. Right: Hue HSV.
Blending modes - Hue - Sample image with dots.PNG
Left: Normal. Right: Hue.

Increase Value, Lightness, Intensity or Luminosity.

Similar to lighten, but specific to tone. Checks whether the upper layer's pixel has a higher tone than the lower layer's pixel. If so, the intensity is increased, if not, the lower layer's tone is maintained.

Blending modes - Increase Intensity - Sample image with dots.PNG
Left: Normal. Right: Increase Intensity.
Blending modes - Increase Lightness - Sample image with dots.PNG
Left: Normal. Right: Increase Lightness.
Blending modes - Increase Value - Sample image with dots.PNG
Left: Normal. Right: Increase Value.
Blending modes - Increase Luminosity - Sample image with dots.PNG
Left: Normal. Right: Increase Luminosity.

Increase Saturation HSI, HSV, HSL, HSY

Similar to lighten, but specific to Saturation. Checks whether the upper layer's pixel has a higher Saturation than the lower layer's pixel. If so, the Saturation is increased, if not, the lower layer's Saturation is maintained.

Blending modes - Increase Saturation HSI - Sample image with dots.PNG
Left: Normal. Right: Increase Saturation HSI.
Blending modes - Increase Saturation HSL - Sample image with dots.PNG
Left: Normal. Right: Increase Saturation HSL.
Blending modes - Increase Saturation HSV - Sample image with dots.PNG
Left: Normal. Right: Increase Saturation HSV.
Blending modes - Increase Saturation - Sample image with dots.PNG
Left: Normal. Right: Increase Saturation.

Intensity

Takes the Hue and Saturation of the Lower layer and outputs them with the intensity of the upper layer.

Blending modes - Intensity - Sample image with dots.PNG
Left: Normal. Right: Intensity.

Value

Takes the Hue and Saturation of the Lower layer and outputs them with the Value of the upper layer.

Blending modes - Value - Sample image with dots.PNG
Left: Normal. Right: Value.

Lightness

Takes the Hue and Saturation of the Lower layer and outputs them with the Lightness of the upper layer.

Blending modes - Lightness - Sample image with dots.PNG
Left: Normal. Right: Lightness.

Luminosity

As explained above, actually Luma, but called this way as it's in line with the terminology in other applications. Takes the Hue and Saturation of the Lower layer and outputs them with the Luminosity of the upper layer. The most preferred one of the four Tone blending modes, as this one gives fairly intuitive results for the Tone of a hue

Blending modes - Luminosity - Sample image with dots.PNG
Left: Normal. Right: Luminosity.

Saturation HSI, HSV, HSL, HSY

Takes the Intensity and Hue of the lower layer, and outputs them with the HSI saturation of the upper layer.

Blending modes - Saturation HSI - Sample image with dots.PNG
Left: Normal. Right: Saturation HSI.
Blending modes - Saturation HSL - Sample image with dots.PNG
Left: Normal. Right: Saturation HSL.
Blending modes - Saturation HSV - Sample image with dots.PNG
Left: Normal. Right: Saturation HSV.
Blending modes - Saturation - Sample image with dots.PNG
Left: Normal. Right: Saturation.

Decrease Value, Lightness, Intensity or Luminosity

Similar to darken, but specific to tone. Checks whether the upper layer's pixel has a lower tone than the lower layer's pixel. If so, the tone is decreased, if not, the lower layer's tone is maintained.

Left: Normal. Right: Decrease Intensity.
Left: Normal. Right: Decrease Intensity.
Blending modes - Decrease Intensity - Sample image with dots.PNG
Left: Normal. Right: Decrease Intensity.
Blending modes - Decrease Lightness - Sample image with dots.PNG
Left: Normal. Right: Decrease Lightness.
Blending modes - Decrease Value - Sample image with dots.PNG
Left: Normal. Right: Decrease Value.
Blending modes - Decrease Luminosity - Sample image with dots.PNG
Left: Normal. Right: Decrease Luminosity.

Decrease Saturation HSI, HSV, HSL, HSY

Similar to darken, but specific to Saturation. Checks whether the upper layer's pixel has a lower Saturation than the lower layer's pixel. If so, the Saturation is decreased, if not, the lower layer's Saturation is maintained.

Left: Normal. Right: Decrease Saturation HSI.
Left: Normal. Right: Decrease Saturation HSI.
Blending modes - Decrease Saturation HSI - Sample image with dots.PNG
Left: Normal. Right: Decrease Saturation HSI.
Blending modes - Decrease Saturation HSL - Sample image with dots.PNG
Left: Normal. Right: Decrease Saturation HSL.
Blending modes - Decrease Saturation HSV - Sample image with dots.PNG
Left: Normal. Right: Decrease Saturation HSV.
Blending modes - Decrease Saturation - Sample image with dots.PNG
Left: Normal. Right: Decrease Saturation.

Lighten

Blending modes that lighten the image.

Color Dodge

Similar to Divide. Inverts the top layer, and divides the lower layer by the inverted top layer. This results in a image with emphasized highlights, like Dodging would do in traditional darkroom photography.

Blending modes - Color Dodge - Sample image with dots.PNG
Left: Normal. Right: Color Dodge.

Gamma Light

Outputs the upper layer as power of the lower layer.

Blending modes - Gamma Light - Sample image with dots.PNG
Left: Normal. Right: Gamma Light.

Hard Light

Similar to Overlay. A combination of the Multiply and Screen blending modes, switching between both at a middle-lightness.

Hard light checks if the colour on the upperlayer has a lightness above 0.5. Unlike overlay, if the pixel is lighter than 0.5,it is blended like in Multiply mode, if not the pixel is blended like in Screen mode.

Effectively, this decreases contrast.

Blending modes - Hard Light - Sample image with dots.PNG
Left: Normal. Right: Hard Light.

Lighten

With the darken, the upper layer's colors are checked for their lightness. Only if they are Lighter than the underlying color on the lower layer, will they be visible.

Blending modes - Lighten - Sample image with dots.PNG
Left: Normal. Right: Lighten.

Lighter Color

Blending modes - Lighter Color - Sample image with dots.PNG
Left: Normal. Right: Lighter Color.

Linear Dodge

Exactly the same as Addition.

Put in for compatibility purposes.

Blending modes - Linear Dodge - Sample image with dots.PNG
Left: Normal. Right: Linear Dodge (exactly the same as Addition).

Linear Light

Similar to Overlay.

Combines Linear Dodge and Linear Burn. When the lightness of the upper-pixel is higher than 0.5, it uses Linear dodge, if not, Linear burn to blend the pixels.

Left: Normal. Right: Linear Light.
Left: Normal. Right: Linear Light.
Blending modes - Linear Light - Sample image with dots.PNG
Left: Normal. Right: Linear Light.

Pin Light

Checks which is darker the lower layer's pixel or the upper layer's double so bright. Then checks which is brighter of that result or the inversion of the doubled lower layer.

Left: Normal. Right: Pin Light.
Left: Normal. Right: Pin Light.
Blending modes - Pin Light - Sample image with dots.PNG
Left: Normal. Right: Pin Light.

Screen

Perceptually the opposite of Multiply.

Mathematically, Screen takes both layers, inverts them, then multiplies them, and finally inverts them again.

This results in light tones being more opaque and dark tones transparent.

Left: Normal. Right: Screen.
Left: Normal. Right: Screen.
Blending modes - Screen - Sample image with dots.PNG
Left: Normal. Right: Screen.

Soft Light(Photoshop) & Soft Light SVG

These are less harsh versions of Hard Light, not resulting in full black or full white.

The SVG version is slightly different to the Photoshop version in that it uses a slightly different bit of formula when the lightness of the lower pixel is lower than 25%, this prevents the strength of the brightness increase.

Blending modes - Soft Light (Photoshop) - Sample image with dots.PNG
Left: Normal. Right: Soft Light (Photoshop).
Blending modes - Soft Light (SVG) - Sample image with dots.PNG
Left: Normal. Right: Soft Light (SVG).

Vivid Light

Similar to Overlay.

Mixes both Color Dodge and Burn blending modes. If the color of the upper layer is darker than 50%, the blending mode will be Burn, if not the blending mode will be Color Dodge.

 ! This algorithm doesn't use color dodge and burn, we don't know WHAT it does do but for Color Dodge and Burn you need to use Hard Mix
Blending modes - Vivid Light - Sample image with dots.PNG
Left: Normal. Right: Vivid Light.

Misc

Bumpmap

This filter seems to both multiply and respect the alpha of the input.

Combine Normal Map

Mathematically robust blending mode for normal maps, using Reoriented Normal Map Blending.

Copy

Copies the previous layer exactly. Useful for when using filters and filter-masks.

Blending modes - Copy - Sample image with dots.PNG
Left: Normal. Right: Copy.

Copy Red, Green, Blue

This is a blending mode that will just copy/blend a source channel to a destination channel. Specifically, it will take the specific channel from the upper layer and copy that over to the lower layers.

So, if you want the brush to only affect the red channel, set the blending mode to 'copy red'.

The copy red, green and blue blending modes also work on filter-layers.

This can also be done with filter layers. So if you quickly want to flip a layer's green channel, make an invert filter layer with 'copy green' above it.

Blending modes - Copy Red - Sample image with dots.PNG
Left: Normal. Right: Copy Red.
Blending modes - Copy Green - Sample image with dots.PNG
Left: Normal. Right: Copy Green.
Blending modes - Copy Blue - Sample image with dots.PNG
Left: Normal. Right: Copy Blue.

Dissolve

Instead of using transparency, this blending mode will use a random dithering pattern to make the transparent areas look sort of transparent.

Blending modes - Dissolve - Sample image with dots.PNG
Left: Normal. Right: Dissolve.

Mix

Allanon

Blends the upper layer as half-transparent with the lower. (It add the two layers together and then halves the value)

Blending modes - Allanon - Sample image with dots.PNG
Left: Normal. Right: Allanon.

Alpha Darken

As far as I can tell this seems to premultiply the alpha, as is common in some file-formats.

Blending modes - Alpha Darken - Sample image with dots.PNG
Left: Normal. Right: Alpha Darken.

Behind

Does the opposite of normal, and tries to have the upper layer rendered below the lower layer.

Blending modes - Behind - Sample image with dots.PNG
Left: Normal. Right: Behind.

Erase

This subtracts the opaque pixels of the upper layer from the lower layer, effectively erasing.

Blending modes - Erase - Sample image with dots.PNG
Left: Normal. Right: Erase.

Geometric Mean

This blending mode multiplies the top layer with the bottom, and then outputs the square root of that.

Blending modes - Geometric Mean - Sample image with dots.PNG
Left: Normal. Right: Geometric Mean.

Grain Extract

Similar to subtract, the colors of the upper layer are subtracted from the colors of the lower layer, and then 50% grey is added.

Blending modes - Grain Extract - Sample image with dots.PNG
Left: Normal. Right: Grain Extract.

Grain Merge

Similar to addition, the colors of the upper layer are added to the colors, and then 50% grey is subtracted.

Blending modes - Grain Merge - Sample image with dots.PNG
Left: Normal. Right: Grain Merge.

Greater

A blending mode which checks whether the painted color is painted with a higher opacity than the existing colors. If so, it paints over them, if not, it doesn't paint at all.

Greaterblendmode.gif

Hard Mix

Similar to Overlay.

Mixes both Color Dodge and Burn blending modes. If the color of the upper layer is darker than 50%, the blending mode will be Burn, if not the blending mode will be Color Dodge.

Left: Normal. Right: Hard Mix.


Hard Mix (Photoshop)

This is the hard mix blending mode as it is implemented in photoshop.

This add the two values, and then checks if the value is above the maximum. If so it will output the maximum, otherwise the minimum.

Hard Overlay

New in version 4.0

Similar to Hard light but hard light use Screen when the value is above 50%. Divide gives better results than Screen, especially on floating point images..

Blending modes - Hard Overlay - Sample image with dots.PNG
Left: Normal. Right: Hard Overlay.

Normal

As you may have guessed this is the default Blending mode for all layers.

In this mode, the computer checks on the upper layer how transparent a pixel is, which colour it is, and then mixes the colour of the upper layer with the lower layer proportional to the transparency.

Blending modes - Normal 50% Opacity - Sample image with dots.PNG
Left: Normal 100% Opacity. Right: Normal 50% Opacity.

Overlay

A combination of the Multiply and Screen blending modes, switching between both at a middle-lightness.

Overlay checks if the colour on the upperlayer has a lightness above 0.5. If so, the pixel is blended like in Screen mode, if not the pixel is blended like in Multiply mode.

This is useful for deepening shadows and highlights.

Blending modes - Overlay - Sample image with dots.PNG
Left: Normal. Right: Overlay.

Parallel

This one first takes the percentage in two decimal behind the comma for both layers. It then adds the two values. Divides 2 by the sum.

Blending modes - Parallel - Sample image with dots.PNG
Left: Normal. Right: Parallel.

Negative

These are all blending modes which seem to make the image go negative.

Additive Subtractive

Subtract the square root of the lower layer from the upper layer.

Blending modes - Additive Subtractive - Sample image with dots.PNG
Left: Normal. Right: Additive Subtractive.

Arcus Tangent

Divides the lower layer by the top. Then divides this by Pi. Then uses that in an Arc tangent function, and multiplies it by two.

Blending modes - Arcus Tangent - Sample image with dots.PNG
Left: Normal. Right: Arcus Tangent.

Difference

Checks per pixel of which layer the pixel-value is highest/lowest, and then subtracts the lower value from the higher-value.

Blending modes - Difference - Sample image with dots.PNG
Left: Normal. Right: Difference.

Equivalence

Subtracts the underlying layer from the upper-layer. Then inverts that. Seems to produce the same result as Difference.

Blending modes - Equivalence - Sample image with dots.PNG
Left: Normal. Right: Equivalence.

Exclusion

This multiplies the two layers, adds the source, and then subtracts the multiple of two layers twice.

Blending modes - Exclusion - Sample image with dots.PNG
Left: Normal. Right: Exclusion.

Sources

Basic blending modes: http://en.wikipedia.org/wiki/Blend_modes Grain Extract/Grain Merge: http://docs.gimp.org/en/gimp-concepts-layer-modes.html For most of Krita's mystery blendingmodes: http://illusions.hu/effectwiki/doku.php?id=list_of_blendings