Sketch app is primarily a vector-based application, and although bitmap editing features are limited, you can quickly create cool-looking duo-tone images. To achieve that we’re going to use fill colors with a combination of different blending modes.
Blending modes determine how two elements are mixed into each other. And since we’re going to use fills, Sketch app will use math to determine how to blend fill colors with the colors on an image.
We’re going to cover six blending modes today. Saturation, Multiply, Screen, Overlay, Darken, and Lighten.
Saturation Blending Mode
A Saturation blending mode can be used to modify the intensity of the color on an image. A color is calculated by combining brightness and hue of an image’s color with a saturation of a fill color.
Multiply Blending Mode
A Multiply blending mode works by multiplying the brightness of a fill color with an image. This removes all the whites and replaces them with a fill color.
Screen Blending Mode
A Screen blending mode is opposite of a Multiply blending mode. It removes all the blacks and replaces them with a fill color.
Overlay Blending Mode
An Overlay blending mode is a mixture between a Multiply and a Screen blending mode. It uses a combination of a Screen blending mode on the lighter pixels, and a Multiply on the darker pixels.
Darken Blending Mode
A Darken blending mode can be used to adjust a color of the highlights in an image. It calculates which pixels of an image are darker than the fill color. All the pixels that are lighter than the fill color are replaced with the fill color whereas darker pixels stays the same.
Lighten Blending Mode
A Lighten blending mode is the exact opposite of a Darken blending mode and can be used to adjust a color of the shadows in an image. Sketch app determines which pixels are darker than the fill color and replace them with it.
Blending modes in action
If you’re like me, you enjoy practicality more than definition. It’s time for the fun part! Let’s try these blending modes in action.
Creating black and white images
First, you’re going to create a black and white version of an image. Open an image in Sketch app, select it and add a white fill in the inspector. Now change the blending mode of the fill to Saturation. This will make the image black and white.
Because Saturation blending mode combines hue and brightness with saturation, the image will turn into black and white any time saturation or brightness of a fill color is set to 0. You can check that in the HSB color picker.
If you’re currently looking at the RGB color picker, click on the RGB label and it will switch to HSB.
Adding color to black and white images
Now that you’ve converted an image into black and white try adding some color onto it. Create another fill with a color of your liking and change the blending mode to Multiply. This will replace all the white parts of your image with the color you’ve chosen.
Changing the blending mode to Screen will remove all the blacks and replace them with a fill color.
Changing the blending mode to Overlay creates a mixture of Multiply and Screen blending mode where midtones are replaced with a fill color.
Creating duo-tone images
Spotify made duo-tone images popular again. The way duo-tone images work is by using two colors that determine highlights and shadows of an image. To achieve the best effect, it’s important that you convert an image into black and white with a Saturation blending mode method explained above before adding additional colors.
Next, add another fill and replace image’s highlights by picking the color of your choosing. I’m going to pick #5EDC1A. Now change the blending mode of this fill color to Multiply to replace the whites in the image with the color.
Add another fill on top and choose a color that will replace image’s shadows. In my example, this is #041674. Change the blending mode of this fill to Lighten and there you have it – a basic duo-tone image.
Using blending modes is always trial and error so use the ones that you like the most. Additionally, you can tweak it by changing the opacity levels of the highlight and shadow fill colors.
One thing to remember is that blending mode includes anything that is beneath it. If you have four fill colors that are stacked one above the other the top one will combine the results of the ones that are underneath. Because of that, you can switch highlight or shadow fill color to create a different result.