Sometimes you want to make an underlying image to pop-up, make it darker or brighter, apply texture or just vanish some colors completely. You can achieve all of these things with the blending modes in Gravit Designer.
The Core Concepts of the Blending Modes
The core concepts behind the blending mode are very complex. Hopefully, to use them, you don’t need to understand everything, although there are some basics you should know:
- In Gravit Designer, you can select blending mode for the Fill(2), the Border(3), and the whole object(1) itself. Thus you can access blending modes from different parts of Gravit Designer’s interface.
It also means that you can have an infinite number of blending variations coming with each fill or stroke you are applying to the object.
- The changes they bring to the images are non-destructive. You can reverse them at any moment by visiting the Blending dropdown.
- They are based on the mathematical equations and calculate the color levels of both objects.
- The first objects, carrying the original color you want to change is a base color.
- The object carrying the blend mode is called a blend color.
- The result color is the result of their interaction.
Note: As for the all of our examples further in this article, we are using the image of an eye as our base color, the circle with the gradient fill for the blend color, and their intersection as the result color
- Most of the blending options have a neutral color – the color that has no effect on the base color. For example, if you are applying Multiply blending mode for white blend color, you would produce no result, because white is the neutral color for the Multiply mode.
Neutral Colors and Blend Mode Groups
Neutral colors come in handy when you want to learn all 30 blending modes available in Gravit Designer because several blend modes with the same neutral colors can be combined into the groups.
- Darken group has a neutral color of white. This group unites the Multiply, Darken, Color Burn, and Linear Burn blend modes. The darker the blend color, the stronger the effect of the blend.
- Lighten Group has a neutral color of black. This group unites the Screen, Lighten, Color Dodge, and Linear Dodge blend modes. The lighter the blend color, the stronger the effect of the blend.
- Contrast Group has a neutral color of 50% grey. This group unites the Overlay, Soft Light, Hard Light, Vivid Light, Pin Light, Hard Mix, Difference, and Exclusion. These blend modes compare pixels of the with the mid-tone and darken the darker pixels, lightning the lighter pixels.
- Component Group has no neutral color. This group unites Hue, Saturation, Color, and Luminosity blend modes.
- Inversion Group has a neutral color of black. This group unites the Difference and Exclusion blend modes.
- Cancelation Group unites the Subtract and Divide blend modes, which have opposite neutral colors. The Divide has white and Subtract has black as a neutral color.
Opposite Blend Modes
Each blend mode from the Darken group has the opposite from the Lighten group.
Inside the Blend dropdown, these pairs of opposites are going together.
These pairs are doing the same calculations, but with the opposite result. So both Multiply and Screen are multiplying the pixels, but first multiplies dark ones and the second multiplies the light ones.
Each Blend Mode Explained
Multiply Blend Mode
Formula: Base x Blend
The multiply blend mode multiplies the luminance levels of the blend and base color pixels. Result color is always darker.
Because white has a luminosity of 1, it has no effect on the pixels of the base color. Black has a luminosity of 0, so the result color would always be 0.
Screen Blend Mode
Formula: 1 – ( 1-Base ) x ( 1-Blend )
The screen blend mode multiplies the reverse values of the luminosity of the blend and base colors. Then it subtracts the product from the luminosity of white, which is one. It is opposite to the Multiply mode, so the brighter blend color, the brighter the result color would be.
Black has no effect on the base color.
Overlay Blend Mode
The overlay blend mode boosts the contrast of the base image. Takes 50% of the grey as the threshold. If the pixels are brighter than 50%, it will brighten them even more and it would multiply the darker pixels.
Darken Blend Mode
The darken blend mode doesn’t blend colors. It makes a selection of the darkest pixels from both images, picking either base or blend colors.
Lighten Blend Mode
The lighten blend mode is looking for the brighter pixels in both colors. If the pixels of the base color is darker than of those in the blend color, they would be replaced. Thus, it would vanish the darker pixels.
The result color is always lighter, but bear in mind that selection and comparison of the pixels has a per-channel basis, so pixels would be selected for each RGB-channel separately.
Color Dodge Blend Mode
Formula: Blend / ( 1 – Base )
The color dodge blend mode blows the bright pixels of the base color while for the dark pixels the result would be very moderate. The end result would be higher contrast.
Color Burn Blend Mode
Formula: 1 – ( 1 – Blend ) / Base
The color burn divides the inverted blend color luminosity by the luminosity of the base color. Then it inverts the result. The darker the base color, the more it is used into the result color.
The result color is always darker with more contrast between light and dark pixels.
Hard Light Blend Mode
The hard light blend mode uses color dodge formula for bright pixels and color burn formula for darker pixels, boosting the contrast between them. Both formulas are at half straight.
Soft Light Blend Mode
The soft light blend mode applies screen blend mode formula for pixels that are brighter than 50% grey and multiplies the pixels that are darker.
Both formulas are used in the half straight, resulting in more soft and organic fusion.
Difference Blend Mode
Formula: Brightest pixels – Darkest pixels.
The Difference blend mode subtracts the darker pixels from the lighter. So it is looking for the brighter pixels in both blend and base colors and produces the subtraction then.
The black color doesn’t have any impact on the color: Color – 0.
White makes 100% inversion of the color: 1 – Color
Exclusion Blend Mode
Formula: Brightest pixels – Darkest pixels.
The exclusion blend mode is a bit bizarre. It uses the difference blend mode math equation, but it ignores the results close to the zero, rendering them into the mid tones as if the result is 0.5. For similar colors, it produces grey instead of black. So result color is similar to those in difference blend mode but less saturated.
Luminosity: base color = 0.451, blend color = 0.450
Difference blend mode: 0.451 – 0.450 = 0.001. The result color is black
Exclusion blend mode: 0.451 – 0.450=0.001 =~ 0.5. The result is grey.
Hue Blend Mode
The hue blend mode creates a result color with a hue of the blend layer and luminance and saturation of the base color.
This is what we call “true recoloring” since the only hue is changed.
Saturation Blend Mode
The saturation blend mode gets the saturation from the blend color, hue and luminosity – from the base color.
Color Blend Mode
The color blend mode borrows the hue and saturation from the blend color and luminosity from the base.
Luminosity Blend Mode
The luminosity blend mode borrows the luminosity from the blend color and hue with saturation from the base color.
Linear Burn Blend Mode
Formula: Base + Blend – 1
The linear burn blend mode subtracts the luminosity of white from the sum of the luminosity of the base and the luminosity of the blend color.
The result color is always darker than the base color, except you are using white for the blend color.
The linear burn is darker than color burn and multiply blend modes with low contrast and saturation because most of the negative and low values are rendered to black.
Linear Dodge Blend Mode
Formula: Base + Blend
The linear dodge blend mode sums of the luminosities of both colors. Obviously, for the bright colors, this sum might exceed 1, so it would be rendered into the white.
The result color is usually very bright, has low saturation and contrast.
Linear Light Blend Mode
The linear light blend mode uses the linear dodge mode formula for pixels that are brighter than 50% grey, and the linear burn formula for darker pixels. Both equations are used in half straight.
The selections and calculations are based on the luminosity of the blend color.
Vivid Light Blend Mode
The vivid light blend mode uses a combination of the color burn for darker pixels and color dodge for lighter pixels.
The vivid light selects pixels to burn or dodge based on the luminosity of pixels of the blend color. If pixels are lighter than 50% grey, it dodges them, if they are darker – it burns them. Both equations are applied in the half of the straight.
Pin Light Blend Mode
The pin light blend mode can darken or lighten images depending on the luminosity of the blend color.
If the luminosity of the blend color is more than 50% grey, it applies lighten blend mode’s algorithm and replaces all the darker pixels of the base color by corresponding pixels of the blend color.
If the luminosity of the blend color is less than 50%, it applies darken blend mode’s algorithm, so it drops all light pixels of the base color in favor of the corresponding pixels of the blend color.
Divide Blend Mode
Formula: Blend / Base
The divide blend mode divides luminosity of the pixels of the blend color by the luminosity of the corresponding pixels of the base color.
Gives an extreme spotlight effect, lightens the blend color dramatically producing near the white result color.
Add Blend Mode
Formula: Base + Blend
The add blend mode sums up the luminosity values of both colors, resulting in the lighter color. Because the result color is always brighter, add blend mode is usually referred as “plus light” mode.
Subtract Blend Mode
Formula: Blend – Base
The subtract blend mode subtracts pixel values of the base color from the corresponding values of the blend color. if the values are negative, the black is displayed. Result color is always darker.
Hard Mix Blend Mode
The hard mix blend mode uses only eight colors to render a result color: red, green, magenta, blue, cyan, black and white.
It goes through all RGB channels of the blend and base colors, rounding the values of the luminosity either to 1 or 0:
- lightens the light pixels to white
- darkens the dark pixels to black
Then it turns all the 8 channels into the composite channel and scatters eight colors according to the composite channel luminosity values.
Unique Blend Modes
There three unique blend modes, that only Gravit Designer has. Oppose to the more conventional one, they are base on more eloquent math equations, such as quadratic or harmonic mean.
Power Blend Mode
Formula: √ ( Base² + Blend² ) / 2
The power blend mode uses quadratic mean to blend colors. It is useful if you want the result color to be equally distant from the base and the blend colors.
It diesn’t have neutral colors. A black color makes image darker, white always makes image brighter.
Harmonic Blend Mode
Formula: 2 / ( 1/Base + 1/Blend )
The harmonic blend mode uses harmonic mean to blend colors. In this equation two is divided by the sum of reciprocal values of blend and base colors.
Doesn’t have neutral colors. White makes things whiter, black doesn’t produce a blend because you cannot divide by zero.
Less agressive than the power blend mode , it can be used to add a subtle accent of the one color over the other.
Sine Blend Mode
Formula: sin( Blend + Base ) x π/2
The first blend mode to use the trigonometric function for blending colors. The sine blend mode is a sine of the sum of the blend and base colors, divided by two and multiplied by π (3.141828….).
The result color is very unique and can be use for special effects.
Black makes base color to appear brighter, white invertes the base color.
The “Special 8” Blend Modes
There are eight blend modes that would respond differently to 40% of the Opacity and 40% of the Fill Opacity.
This special group of blending modes, that reacts differently on the Fill Opacity is called “Special Eight“. It extends your capabilities when dealing with these blend modes giving you more creative space to explore. So this “Special 8” universe of blending modes includes:
- Color Burn
- Linear Burn
- Color Dodge
- Linear Dodge (Add)
- Vivid Light
- Linear Light
- Hard Mix
For these blend modes, you can play with Fill Opacity of the blend color and see how it changes the result color. Start right now, explore with Gravit Designer!
MASK BLENDING MODES
Along with the Blending Modes available under the Appearance menu, meaning the modes that are applied to the whole element and not separately for Fills or Borders, you can find the masking blending modes, Mask and Inverse Mask.
The mask modes work transforming a normal layer into something similar to a clipping mask, but without actually placing one layer inside the other. The element itself is transformed into a mask.
Mask blending mode
The Mask mode clips everything under the selected element inside the boundaries of this element, including the whole background.
Inverse Mask blending mode
The Inverse Mask mode, as the name indicates, clips everything under the selected element outside the boundaries of this element, leaving the inner shape “empty”.
A very common use case of Mask and Inverse Mask blending modes is using a transparent PNG texture, with a few dots or scratches, and apply it over a design to give it a distressed look. This technique is used a lot when producing designs for Print On Demand T-shirt services.
Let’s take this design and combine it with a distressed texture:
Placing the texture layer above the design and setting it to Mask, we get a much more interesting look to our design.
The same thing can be done by combining the same design with another kind of texture, this one with much less negative space, and then using Inverse Mask:
Place the texture layer above the design as well, but this time apply Inverse Mask:
Place the finished design, exported as a PNG image, over one of Gravit’s Print on Demand templates, and you have a preview of your finished product.