Duotone

I wanted a duotone effect on the photos on this site and at first I thought I would like to create it through CSS but what I found seemed to require adding extra HTML, which isn’t something I want to spend my time on for this site (I’m using GeneratePress and I’m not in the mood for a child theme at the moment), and as I was searching for different ways to create the effect, I came upon this little tutorial for Photoshop.

Title: Digging into Duotone: How to Create & Use Colorized Images in Web Design

Where: @ Template Monster by Matthew Cain

Of note: The layout of the article is a bit odd in places. You can also use three colors or just one.

The article starts with a bit of history, more current examples, a bit more technical explanation of what it is and then three methods for how to achieve it in Photoshop:

1. Gradient Map Tool – Add an adjustment layer > gradient map. Pick a dark color for a dark color and a light one for your second color. As with any gradient, you can add a third color by adding a point between these two and choosing a new color for it. Since this is, obviously in between the dark and the light color, this will map to the midtones.
2. Color Fill Layers – Start with a black & white adjustment layer. Add a color fill layer for each color. Set the blend mode for the light color to multiply and for the dark one to screen. This creates a very different effect from method 1, because the colors aren’t actually mapped to the dark and the light areas of the photo, the way they are with the gradient map, they’re applied equally all over. This is also the basic method when doing it directly on your site with CSS, see the Codepen below.
3. Duotone Mode – Change the mode of the image to grayscale, then convert the image to duotone mode. The results of this method are more similar to the first method but slightly gentler.

Thoughts: I did not use Photoshop, I used Affinity Photo, but it works similar enough for methods 1 and 2. I’m not sure if method 3 is possible in Affinity as well.

Codepen: duotone with CSS

You won’t be able to see the effect of the CSS duotone photo if you’re using Edge or Internet Explorer to view this site. You’ll only be able to see the one created with an image editor.

[codepen_embed height=”555″ theme_id=”0″ slug_hash=”wVJVJw” default_tab=”result” user=”blindeman”]See the Pen <a href=’https://codepen.io/blindeman/pen/wVJVJw/’>css duotone</a> by Naomi Blindeman (<a href=’https://codepen.io/blindeman’>@blindeman</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Also, …

There is sort of a follow up to this post @supports makes me happy that addresses the lack of support in some browsers for the technique used in the Codepen.