Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
How to create a duotone image in Photoshop

How to create a duotone image in Photoshop

As you’re working on your next site design, there’s a common type of background you may be considering: photography. While this trend isn’t necessarily unique, it sure is effective at setting the scene and immersing a user into the environment of a site. If you’re looking for a way to use photography but with a little more pizazz, you could always try a duotone image – they’re both interesting to look at and easy to create! Tweet

Before we learn how to create a duotone image in Photoshop, first let’s dive a little deeper into this design trend.

What is a duotone image?

At its core, a duotone is simply an image that’s made of two colors. You’ve probably seen them before in campaigns like Spotify’s 2015 Year in Review.

This is becoming increasingly popular, especially among agencies and smaller brands. Duotone effects are a great way to incorporate and reinforce your brand and its colors throughout your work and your website. To give you a little inspiration, FCINQ is a wonderful example of how to use this. NewDealDesign and LPK also use duotone images to create bright and interactive design on their website.

layout by flywheel duotone how to newdealdesign Courtesy NewDealDesign, San Fransisco, California

If you’re interested in trying out this technique, you’ll want to be strategic in the photo you choose to manipulate. While technically you can apply the duotone effect to any photo, it’ll look better on an image with lots of contrast. I’d also recommend using an image with a solid background, preferably white – that makes it easier to establish the base color you’re looking for!

If you have access to a studio and are interested in taking custom photos, just keep these tips in mind while you set the scene. If you’re working with existing content, you can always manipulate the photo first to boost the contrast or change the background color.

Note: This tutorial is part of our 2018 Design Trends course! When you sign up, you’ll get exclusive access to a custom Photoshop action (the Duotoner!) and a tutorial to help you use it.

For the rest of the tutorial, I’m going to cover two methods you can use to manually create a duotone image in Photoshop. The first is the built-in Photoshop option (works fine, but not my favorite) and the second uses a gradient map (my preferred method, unless you’re using our free action of course!). 

Once you’re ready, load your image into Photoshop and create a duplicate layer of the photo. By editing the duplicate (instead of the original, bottom layer), you’ll always have an unedited version of the photo to fall back on.

Ready to create a duotone image in Photoshop? Let’s get started.

How to use the default Photoshop duotone option

1. Convert the image to 8 bit grayscale

In order to use the duotone option that’s built into Photoshop, first you’ll have to convert the image to an 8 bit grayscale. Select the copy of your photo and head up to Image > Mode > Grayscale. Also verify the 8 bits/Channel option is selected under the same Mode menu.

layout by flywheel duotone how to grayscale

When you select this option, a couple notifications are going to pop up. The first asks if you want to flatten the image or merge the layers before changing the color mode. If you have a lot of layers, the color change could affect how things display (in which case flattening could be helpful for preserving your work), but in this case, don’t worry about flattening the image. If you want the original copy, don’t merge your layers.

layout by flywheel duotone how to merge warning

The next notification asks if you want to discard color information. You’ll have to do this in order to use the default duotone option, so go ahead and click “Discard.”

layout by flywheel duotone how to black and white warning

2. Convert the image to a duotone

Once your image mode is in an 8 bit grayscale, you can use the default duotone option in Photoshop. Select the layer, and then go to Image > Mode > Duotone.\

layout by flywheel duotone how to duotone selection

3. Select your colors

Once the image is in duotone mode, you can start selecting your colors. The nice part is that as soon as you select a new color, the image will update so you can see how things look (as long as the Preview checkbox is checked). Beyond that, the process starts to get a little clunky. You technically can adjust the curves for each color, but the image doesn’t update in real-time, making it a little difficult to see what’s happening and resulting in a lot of back and forth. Play with the colors and settings until you find the desired effect.

layout by flywheel duotone how to blue purple color select

I’d suggest playing around with these settings for a minute, just to get a feel for them, but once you’re ready, let’s move on to the second method for creating duotones in Photoshop.

How to use a Gradient Map to create a duotone

1. Apply a Gradient Map

For this method, you won’t need to worry about altering the image or choosing a specific color mode. Of course, if you do want to edit anything, go ahead, but the photo will work fine just as it is. When you’re ready, select the copy of your image and go up to Image > Adjustments > Gradient Map.

layout by flywheel duotone how to gradient map selection

Depending on your default setting, this setting will overlay the image with a gradient for a grayscale mapping. If the default is not black and white, click the dropdown and select that option. If you followed along for the first method, you’ll see that we’re already halfway to creating our duotone.

layout by flywheel duotone how to gradient black and white

Pro-tip: See the checkbox next to Reverse? By clicking that, you’ll invert the colors in the photo. For this tutorial, we’ll leave it unchecked, but if we wanted the background to be darker than the subject, that option can help you switch things up.

2. Choose your colors

By clicking on the gradient bar, you’ll open the Gradient Editor in a new window. Here you can select your colors and adjust how they display over the image.

layout by flywheel duotone how to gradient edit color select

As you can see, the final images look quite a bit different from each other, but both result in wonderful duotones. I prefer using a Gradient Map simply because it’s a little easier to control the intensity of the colors and where the dark and light tones go, but both methods are easy to use.

Join our 2018 Design Trends course for a free duotone Photoshop action!

If you’re looking for a quick and easy resource to try out this trend, you can get the files in this tutorial, including an action with pre-made gradient map options! Sign up  with the form below to download the file, or click here for more details about the course.

Thanks for joining our Design Trends course!

First, download the Photoshop action here.

How to use the Duotoner

Install the action

Once you’ve downloaded the action, double-click the file to install it. Open the image you’d like to use in Photoshop, and then open the Actions window.

To navigate to the Actions window, select Window > Actions or hold down Shift + F9.

photoshop duotone action window

Once you’ve opened the Actions window, select the image layer you want to apply the duotone effect to.

Select and play the action

Click the drop-down on the “Flywheel – Glitch-a-tron” folder. Now, select “Glitch-a-tron – Select and hit play” and press the triangle play button at the bottom of the window.

duotone photoshop action play

Once you hit play, you’ll see a whole bunch of layers, each one with a different duotone color scheme! To switch, all you have to do is make the layer you want visible.

photoshop duotone action options

Note: If you have more than one duotone layer visible, the colors will blend together and you may start to lose some of the detail of your photo. To keep things crisp, make sure you only have one layer visible at a time (or feel free to experiment by layering the duotones for a totally different effect!)

Bonus: Reset your image in a snap

Just in case you want to backtrack, the action automatically creates a screenshot that allows you to go back to your image before the action was applied.

Navigate to the History window by selecting Window > History. Scroll up to the top, and click “Snapshot.” This resets everything so you’re good to go!

photoshop duotone action snapshot

 

What do you think of duotones? Do you think they’re a strong design trend, or do you prefer full-color images? Share your thoughts below!

What are you going to learn next? Try one of these how-tos!

1 Comment

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free