Create a Duotone Effect in Sketch | 5 Amazing Styles

There are times when you see some really cool effects on an image, poster, banner, billboard, website or whatever, and then you go “Hmnn! That looks awesome. How did they do that?”.

Well right now, it’s the duotone effect that has been made popular by the online music streaming service known as Spotify.

Take a look at these album arts, notice the duotone effects used on the images.

Screenshot from the Spotify app

In this tutorial, I will be showing you how to create this same duotone effect in Sketch.

And yes, I know Sketch isn’t Photoshop but it’s pretty amazing.

First of all, if you use Sketch for UI and product design, then you already know there’s a limit to what you can achieve when it comes to image editing. That said, we can still leverage the a few key features to create stunning duotone effects.

To do this, you’ll need to understand how different blending modes in Sketch work. With this knowledge alone you will be able to create a duotone effect on any image.

But if you really want to go beyond just creating a basic duotone effect, keep reading :)

Blending Modes

In Sketch, there are 16 blending modes to choose from, but for the sake of this tutorial, we’ll be taking a look at just 3 of them.

1. Color

The Color Blending Mode allows you to add color to the image without affecting the lightness values. To achieve this, simply add a new layer above your image and change its blending mode to Color.

Color Blending Mode

2. Multiply

The Multiply Blending Mode multiplies the brightness of a layer’s color with an image. It simply multiplies each component in the two layers.

Multiply Blending Mode

3. Lighten

The Lighten Blending Mode replaces pixels darker than the blend color, and preserves pixels lighter than the blend color.

Lighten Blending Mode

Now that we understand how these three blending modes work, it’s time to create that duotone effect.

Creating a Duotone Effect

To create a duotone effect, we’ll need to follow these steps:

1. Transform your image to black and white

• Add a layer over the image
• Choose a black color e.g #000000
• Change its blending mode to color

2. Add a layer over the back and white image

3. Choose a vibrant color e.g #FF0000

4. Change its blending mode to multiply

5. Add another layer over the entire composition

6. Choose another color (dark shade) e.g #382194

7. Change its blending mode to lighten

And there you have it.

You have just created a duotone effect.

One quick tip though, if you’d like your image to pop more, you could increase the contrast level of your image. So that the darks are somewhat darker, and the whites are whiter.

Advanced Duotone Effects

Now that you know how to create a very regular duotone effect, you may want to step it up a notch to get some more interesting results (like the ones below).

Gradient Duotone

Gradient Duotone

Overlay Duotone

Overlay Duotone

Abstract Duotone

Abstract Duotone

Art (Poster) Duotone

Art (Poster) Duotone

To do this, I have created a step-by-step guide in Sketch with 5 different techniques on how to create these cool-looking duotone effects.

Here is a list of what you can expect:

1. Regular duotone (Alternative)
2. Gradient duotone
3. Overlay duotone
4. Abstract duotone (Spotify)
5. Art duotone

You can download the Duotone Effect sketch file here.

Feel free to twee me your amazing results, would love to see them :)

Enjoyed this tutorial? Let me know in the comment section. Also, don’t forget to clap 👏👏👏👏

For more interesting content, visit the Designcrispy Blog.