Grasping the art of duotone with helpful resources, tools and tutorials

Ready to expand your skills in Photoshop?

In this gripping tutorial, we will blow off the cobwebs of your keyboard and stretch the cord of your mouse as we unearth the Jekyll and Hyde of bitmap imagery, pulling apart pixels to alter their DNA.

It is that exciting, and you know why? This method of image manipulation allows your designs to communicate and resonate with far more precision, expressing colors that tie in with the aesthetic of your design projects.

Duotone, why two tones?

It is the very limit before you reach a situation where your image will simply disappear. Two tones are needed to distinguish visual contrast between light and shade. The benefits of this limitation helps generate striking contrast and gives the designer total control over the color of the image. Perhaps you want to tie in your visual with brand identity or want a more cohesive look for a poster design.

One of the most popular filters used for making duotone images seem even more interesting is the sepia filter. This filter can give images a more antique look, adding depth and character to an already captivating style. Tracing the evolution of duotone images and their historic significance truly highlights their impact on the art of photography. For some visual excitement, check out this highly inspirational collection of duotone images, designed with impact in mind.

Resources for your duotone project

The three essentials you need to kickstart your duotone project are as follows:

• Sourcing high-resolution images: It’s in your best interest to find high-quality images to use for your project. The reason? Because the more pixels per square inch, the more control you have when editing in raster-based software like Photoshop. Photoshop will also be able to detect far more contrasting pixels when there are more of them, enabling gradient maps to blend with better results. Poor quality can be amplified to embarrassing levels when bitmap images are enlarged beyond their original size. Therefore, it is highly recommended you select your image from a certified stock image library full of popular photos that are quality-checked and ready for personal or professional use.
• Choosing the right image: It goes without saying how important the image is to your project. However, there may be a few characteristics within the image of choice that can work against the outcome of your project. For the best results, select images with high contrast and white or negative space. The reason? The overlaying color will have more of a chance of pulling through. It also gives designers space within the images to infuse other elements into the design.
• Color choice: If you didn’t know this already, color communicates moods and feelings, speaking to our subconscious as they influence and inspire us. So, to get the most out of duotone, it’s hugely beneficial to develop an understanding of color psychology based on proven theory instead of what your gut tells you. On the other hand, you may be creating artwork destined for a rebrand or advertising campaign that follows strict design principles, in which case you may need to select colors from brand guidelines.

Photoshop duotone effect tutorial

Get your seat in the upright position, and ensure your coffee is within reach as we dive straight into the immersive world of duotone. This skill, when done correctly, will most certainly help bolster your abilities to infuse imagery with more straight-edge graphic content, bridging the gap between pixel and vector to help your designs resonate that little more through the use of stronger color language, yet still obtaining the true power behind your image.

Preparing your workspace

Open up your carefully selected image in Photoshop, and change the image mode to CMYK (four colors). This means the color language will remain the same when revisiting the project.

Convert your image to grayscale

For your duotone color overlay to work its magic, you will need to convert the image into grayscale or black and white. Head into the Image menu found in the top menu bar, click on Adjustments, then either desaturate the image via the saturation tool or simply click on the Black and White option, and your image will instantly ping into a black and white.

Adjust contrast

To not to encourage any disappointment further down the editing process, it’s good practice to adjust levels before we overlay any color gradients. Using Curves, Levels, Contrast, and Brightness, tweak the image till you reach a satisfactory level of black-and-white contrast. This will then strengthen the effects applied to the image later.

It’s time to clean

This is the perfect moment to get the Clone Stamp tool out to start cleaning up your image. Any unnecessary marks, elements, and noise in the image can be erased with barely any effort, leaving your image clean and pristine.

Applying the duotone effect

The most thrilling part of the exercise, it’s now time to apply the duotone effect. All you need to do is head over to the Adjustment Layer menu in the bottom right corner and select the Gradient Map option. This will instantly apply a random gradient to your image and create a new Adjustment Layer named Gradient Map. Double-click on the Adjustment layer to open up the Gradient Map properties menu, where you can access the Gradient editor. Within this menu, you can either select from numerous preset gradients or customize your own gradient by selecting from the color wheel or adding in two Pantone, Hex, or colors from your own Swatches library.

Explore the split-tone effects! As you slip deeper into the colorful explosions going on in front of you, observe the way the image reacts to different hues, experimenting with different values, maps, and directions.

If the image appears as a negative, don’t panic! Simply click on the reverse button, and your image should look as intended.

Fine-tuning your duotone effect

There are a million and one ways to refine the look of your image to give it some personality and the ‘IT’ factor many of us crave. At this stage, we are looking at a fresh new image compared to what you started with, so going over the tone levels and adjusting the Curves, Levels, Contrast, and Brightness once again is a recommendation.

What’s more, you can also look into overlaying interesting textures that don’t interfere with the foundations of the image but simply add flavor, or what some may call Zing or Umph.

Noise

This is a classic example of texturizing an image as it mimics the effects of raw photography. For a more technical explanation, the adjustable ISO settings on a camera affect how the camera behaves in different light conditions. The higher the value, the more grainy or noisy the image is. To create this vintage look for your duotone image, select your image layer and find Noise in the drop-down Filter menu, then click on Add Noise. Select Monochrome for the classic black-and-white noise effect, and watch your image transform.

Textured overlays

Another way to enrich the overall aesthetic of your image is by using textured overlays. These are transparent images that when layered on top of your image layer, add depth and realism to your duotone image. All the work is done for you, just download the overlay and place it into a new layer above your featured image.

Adding text and graphic elements to your duotone image

For a more refined design project, adding text, illustrations, and graphic elements to your design will give it functionality, all of which can be found in Freepik’s vast assets library. From big bold fonts to intricate vector drawings and logos, there is anything and everything, all just a click away. However, it’s not as simple as dropping and pressing print. Now it has become a design project, certain aesthetic rules should to be followed to accomplish a cohesive look:

• Colors: To keep the duotone look, use the same two colors you picked for the image. This will further consolidate the overall design, creating a nicely balanced visual that cuts through with striking contrast.
• Spacing: As previously discussed, when picking the image, try to exploit the white space available for adding graphical elements such as logos, vector designs, or text. Applying other visual elements over busy areas of the image can often lead to a trashy design that puts off viewers.
• Let the image do the talking: Images speak much more than words can, so avoid belittling its power by using overpowering elements within the design. One way to keep a lid on things is by using grid layouts over the artboard. You could even incorporate the golden ratio, a mathematical proportion that is found in pretty much every natural thing!

Exporting your duotone design in Photoshop

Depending on the intended purpose of the image, there are a few exporting options available that will enhance the image’s functionality.

JPG: This is the go-to file format for those who intend to print the image. However, it is often the standard format for most image uploads across the internet. Simply go to File, Export, Export As… and choose JPG in the File settings.

PNG: The go-to file format for use across the internet, they serve well when creating websites and anything digital for that matter. You will also be given the option to switch on transparency, a great attribute when using the image for other design projects that involve layering other visual elements. Go to File, Export, Export As… and choose PNG in the File settings.

PDF: If you’re sending your design off to the printers, they may request a PDF file format. This format is more of a document-style format that allows you to save multiple artboards at a time. It also allows you to adjust more output settings and add crop and bleed to the image. To save in this way, go to File, Save As, and then select Photoshop PDF in the format options. Once you click save, a new window will appear, providing custom options. You can even save your preferences for future use by selecting the Save Preset option.

Some truly sensational examples of duotone

To express just how effective this image technique is, let’s take a look at some exceptional examples of real-world advertising. Take note of the images, color combinations, and any other effects you may identify, to see if there is anything you can learn from these highly perfected works of art.

Spotify’s ‘Dance like Nobody’s Paying’ announced a new look for the brand, adopting the duotone style. The vibrant tones have really helped exaggerate the energy and shapes captured in the image to the point where you feel what the subject feels.

This 50’s classic, directed by Stanley Donen, used the duotone style to captivate their target audience at a time when full-color print was a luxury. In a world where black and white quite literally paved the streets, a poster such as this would have stuck out like a sore thumb!

On the subject of on-brand advertising, check out this pristine ad from Bombay Sapphire. The duotone effect has really pushed the boundaries of visual testosterone, emphatic on the allure of their world-famous, evidently blue, alcoholic beverage. With perfect contrast and the strength of this blue hue, it certainly makes for a memorable visual that has a strong connection with the product in question.

Duotone is undoubtedly one of the most sought-after visual effects out there. Its vibrance inspires all who observe it. The beauty of the two-tone mix goes much further than its alluring attractiveness, providing designers an opportunity to blur the line between design and imagery. Take this design skill along with you on your creative journey, perfect it, and watch your portfolio pop with exuberance.