Mixing groups with blend modes

The hierarchy in the Layers panel follows a simple rule: in the Canvas, what's above in the Layers tree is displayed in front of what's below. When you add a shape, it covers the shapes that are behind, so by default you'll only see through it if your top object has some kind of transparency.

I say "by default" because how groups are mixed together depends on the Blend Mode that is applied.  

What are blend modes?

You might have already heard about Blend Modes as they are quite commonly found on digital editing or compositing apps. The Blend Mode of a layer determines how it is blended with the layers below. 

Blend modes are actually a bunch of formulas that take each pixel of the blend layer and each pixel directly below, applies some math operations and gives you a result. Each blend mode uses a different formula, that's why you get a different mix with each one. We won't get into details about the formulas, as it would probably take me a whole year to write, but feel free to do your own research, there are plenty of resources on the subject on the internet.

In HeavyM, blend modes are applied on groups. The "Normal" blend mode is the default one that we described and that is pictured in the introduction: each group obscures the groups below it.

How to use blend modes in HeavyM

There are 26 blend modes to choose from. To change the blend mode of a group use its drop-down menu in the Layers panel, accessible with this button and simply choose the one you want from the list. When you hover over an item of the list, its effect is previewed in the rendering.

Once you click on a mode, it'll be applied and you'll see the result of the new mix instantly. Remember that a blend mode should be applied to a top layer. And of course, each group can have its own blend mode so you combine them and reach a very complex composition.

Note: the blend mode button has two states: if the "Normal" blend mode is applied, if it's any other mode.

The different types of blend modes

As mentioned before, there are 26 blend modes to choose from, each with a different formula. Depending on the content you blend, they'll give very different mixes and their name won't help you much usually, so it can be hard to guess the result at first. The best way to discover them is to try by yourself!

One thing that can help you though, is how the blend modes are ordered. You might have noticed in the list that they are categorized. Indeed, some blend modes share some similarities in their behavior:

• Normal modes (Normal): we've already talked about this one, it's on its own and is the default one.
• Darken modes (Darken, Multiply, Color Burn, Linear Burn): as you can guess, there's something about darkening the rendering here. They make white disappear on the blended group.
• Lighten modes (Lightening, Screen, Color Dodge, Linear Dodge (add)): as you can guess, there's something about lightening the rendering here. They make black disappear on the blended group.
• Contrast modes (Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix): these ones both darken and lighten at the same time, which in turn enhances the contrast.
• Inversion/Cancellation or Comparative modes (Difference, Exclusion, Subtract, Divide, Invert, InvertRGB): these work on the similarities or differences of the blended and base groups. Well, just try them and see what happens.
• HSL or Composite group (Hue, Saturation, Color, Luminosity): these play on different color properties, as implied by their names.

Blend mode examples

Well, I think that's enough blabla for this article. Let's just see what kind of stuff you can make with these. Instead of describing them one by one, here are a few examples of blend modes in use in HeavyM:

Multiply <3

Note: Multiply is a quite commonly used. As seen above one of its great use case in HeavyM is to put a texture in a group with the Multiply blend mode and in a base group below put white group effects on shapes. The result will look like the texture is printed on the effects!

Screen

Overlay

Exclusion