Blend Modes 101 — How do they work?
When it comes to Blend Modes in Sketch or Figma, my bulletproof method has always been: try one, if it didn't work, try another one. Recently, I've decided to learn more about how do they work. I'd love to share my findings with you.
There are many types of blend modes, but I'll cover only those I use more often: Multiply, Screen, Lighten and Overlay.
Hope you enjoy!
Multiply
Spotify made it famous through the duotone photo effect. As the name suggests, it works by multiplying the color values of each layer. A pixel's color is defined by the value set on the red, green and blue channels — which ranges from 0 to 255. To do the math, those values are converted to a scale between 0 to 1, 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!
Also, the first step to achieve a dutone effect is to apply a color layer on top of a photo using multiply.
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:
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.
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:
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.
