How to Create Photoshop Duotones in Three Easy Steps

Duotones are images that only use two colors. It’s a technique that’s been around since the advent of photography. In the 19th century, duotones were often sepia-toned but today you’re more likely to see them in brighter colors.

Print designers often use duotones to save money on printing costs. Full-color images require four colors (CMYK) to make a print, twice the amount of a duotone. It’s more work to prepare four printing plates than two, so duotones are half as expensive.

This image would require four printing plates to print…

…but this image only needs two printing plates to reproduce.

In recent years web designers have started using duotones for aesthetic reasons. What was once something that was done out of necessity, is now done because it looks cool.

Sometimes you’ll get a project where you’re handed a mix of photographs, all taken under different conditions. If you used all of the photos together in full color, the differences in lighting, camera lenses, and photography style would be distracting. The design wouldn’t feel cohesive. But if all of the photos are treated in the same duotone colors, it can pull your design together. Like this, this, or this.

Finding the right images and color combinations is often more work than the technique itself. Not all images work great as duotones, and you’ll have to play around a bit to see what works. I’ve found that these kinds of photos work best:

• Simple
• Close up
• High Contrast
• Deep depth of field

How to Create a Duotone

Step 1:
In Photoshop go to Layer > New Adjustment Layer > Gradient Map

Step 2:
Choose two colors for your gradient. Pick a dark color for the dark parts of your image and a light color for the light parts.

Step 3:
Sometimes tweaking the levels after you’ve chosen your colors can make the duotone pop more. Notice below how the image has more contrast after I adjusted the levels here:

That’s it! If you’d like to play with the above duotones, here is the .psd.

If you would like to reproduce this effect using CSS, check out this article: CSS Image Filter Toolbox.