Sketch: Blending Modes 101 (English version)

When it comes to Blending Modes in Sketch, my bulletproof method has always been: try one, if it didn't work, try another one. So, I recently decided to learn more about those techniques and I'd love to share my findings with you.

There are many different blending modes in Sketch, but here I'll cover only the ones I use more often: Multiply, Screen, Lighten and Overlay.

Hope you enjoy!

Multiply

It became recently famous because of the duotone photo effect in the new Spotify branding. As the name suggests, it works by multiplying the color values of each layer. We all know that each pixel has its color defined by the value set on the red, green and blue channels, which ranges from zero to 255. To do the math, Sketch converts them to a scale between zero to one, so in that way, the multiplication will never result in a value higher than 255.

So, what does that mean visually? Some things:

  • The result will always be darker,
  • Black color has a zero set in all the channels, in other words, every color multiplied by black will result in black,
  • White color has a one set in all the channels, in other words, every color remains the same when multiplied by white.

One consequence of that is, if you want to quickly apply an asset with a white background to your comp without bothering to manually remove it, you can with multiply!

Normal blending mode (left) and multiply (right)

Also, the first step to achieve a dutone effect is to apply a color layer on top of a photo using multiply.

Applying a layer filled with #FF465D using multipy

Screen

It's the functional opposite of multiply, which means:

  • Black pixels becomes transparent and,
  • White pixels are completely opaque.

In the following example, I wanted to apply an asset with black background on top of the image:

Normal blending mode (left) and screen (right)

Lighten

Now, we saw that we can achieve a cool look by applying a layer color on top of an image using multiply. But, it's not 100% Spotify-ish. A second color is missing. Please meet lighten.

Basically, lighten compares the color information between two pixels and registers the brightest one. I can now apply another color in some dark areas, without interfering too much in the overall color. In the following example, a blue layer is applied on top of our previous image. Notice that only the spots which are darker than the blue get to become bluish.

Applying a layer filled with #103661 using lighten.

Overlay

And the last one, overlay, is a combination between Multiply and Screen. It involves a more complicated math, but what we need to know is that it applies multiply for darker pixels and screen for the brighter ones. Visually, it increases the contrast of an image:

Applying overlay will increase the contrast

There are 15 blending modes in Sketch, we have covered just a small part of it. I hope this post encourages you guys to go and learn more about the other ones. Here are some helpful links:


PS: This was my first post ever! If you enjoy it please hit the 💚 and make my mom even more proud of me! :) It also helps people to find this content.