Tyler G. Merkel Blog: How to Use Duotone Technique with Helpful Resources, Tools and Tutorials

Thanks to Spotify's 2015 campaign, Duotone, an old-time technique that is used to boost monochrome images with the help of applied tonal ranges and different colors to a particular part, has become increasingly popular. This year it has established itself as a fresh trend.

While traditionally the solution brings about pretty dull and gloomy pictures that are based on the grayscale mode or somber tones, in the website design sphere, it has sparkled with absolutely new colors.

Red, green, yellow, blue, purple, pink and other powerful bright tones have been put to work. The creatives take the risk of experimenting with various combos of shades resulting in top-notch and startling images.

If you also want to become a part of this mainstream, you should take a glance at our list of helpful tools and tutorials. We have considered various ways to achieve this effect quickly and efficiently.

Duotone Resources

Colofilter

Inspired by the gorgeous design of Spotify's 2015 ads, the artist has created this little solution. Getting the most out of blend-mode properties of CSS, the Colofilter opens an opportunity to create different sorts of duotones. The only drawback is that it experiences some browser compatibility issues.

jQuery Duotone

jQuery Duotone is a lightweight plugin to automatically convert images into duotones. Specify linear gradient or gradient maps and stop color positions in order to achieve the desired effect.

Multitoner

Multitoner is a program that enables you to create not only duotone but also monotone, tritone, and quadtone files. It works with CMYK colors so that the result is well-suited for printing purposes.

Duotone

Duotone is a tiny instrument that transforms all the upload images into duotone ones. By default the color palette is based on an outrageous combination of red and green that catches the eye right away.

Duotoner

Unlike the previous example, this small tool allows you to set tones by yourself. Just upload the picture and experiment with pairs of shades.

Dynamic Duotone Backgrounds

The idea of a concept is that it should dynamically load images from the featured folder, spice them up with a duotone effect produced with the help of filters and blend-modes and use them as backgrounds.

Image Colorization via SVG Filter by Casey Corcoran

Casey Corcoran goes for a time-proven, lightweight and efficient way of implementing SVG filters that are pretty powerful in what they can do. Use the preview window for experimentation, and Codepen to reproduce the same effect for your project.

Duotone Effect in iOS

As the name implies, the solution is applicable for iOS platform. It converts images into duotones without any hustle and bustle. The author has succeeding in recreating Spotify's bright images using the same range of colors.

Imagatic

Imagatic is an online playground with a basic toolset for manipulating and editing images. Here you will find an option to add duotone effect. Save the picture and use it in your project.

TwotoneFX

TwotoneFX is a WordPress plugin that helps to painlessly transform all the images on your website into duotone ones. The compact editor allows you to choose the starting and ending colors and apply it to visuals of all sizes, including thumbnails and pictures in posts.

Tutorials

How To Create a Colorful Fluoro Duotone Photo Effect

This comprehensive tutorial walks you through the routine of turning a simple stock image into an outstanding duotone with an applied halftone effect for piquancy. Chris Spooner is a real pro in this matter so that this article is a must-have.

Reproduce the ‘colorizer’ effect of Spotify

Pier Rellev provides you with instructions on how to recreate a vibrant and intensive duotone effect seen on Spotify. It takes a while before getting a grip on the technique; however, it is worth it.

Video Tutorial: Spotify Style Duotone Photo Effect

This is another masterpiece by Chris Spooner in our collection. He shows how to imitate Spotify's duotone photos using basic instruments of Adobe Photoshop. This time, it is a video tutorial that lasts just a few minutes. The solution is quick and efficient.

Photoshop Tip: Quick duotone effect

Much like the previous example, Simon Skellon pretty quickly explains the basics of the technique. You can easily experiment with colors to obtain different results.

Spotify Duotone Effect in Photoshop

The author concisely familiarizes readers with the simple yet efficient method of creating a duotone effect. He employs color schemes taken from Spotify's recent campaign. At the end of the post, you will also find several helpful tips and tricks.

Photoshop Tutorial, Spotify Duotone Photo Effect

It seems that everyone is obsessed with Spotify since this tutorial is also dedicated to producing duotone images seen on the music portal. Enjoy the video and follow step-by-step guidance.

How to use Duotones and Tritones in Photoshop

Dani Dixon lifts the veil from the popular halftone reproduction of an image by explaining several ways of crafting it at home using Photoshop. He describes how to work with gradients and curves, give a boost to colors and turn blacks to your advantage.

How to Create Duotones in Photoshop

The tutorial is broken into six small steps that eventually lead you to duotone effect. Read the article or watch the accompanying video in order to practice the technique.

Duotone Colors: Photoshop

The solution is based on getting the most out of gradient maps. The five-minute video walks you through the basic stages of converting an image into a duotone. It is a great start for newbies.

How to Use Gradient Maps to Create A Cool Duotone Effect In Photoshop

Although the author does not go into details, the technique is evident and can be easily repeated. He also encourages readers to experiment with brightness and contrast as well as how to wisely choose shades. The effect is based on the skillful use of gradient maps, so be ready to upgrade your skills in this area.

Conclusion

If you need a duotone image right away to enrich a website or make a theme look up-to-date and juicy, then you can go for ready solutions such as plugins and editors.

However, if you are interested in getting the hang of the technique, then you should familiarize yourself with the tutorials, the more so the effect can be easily reproduced just with the help of standard instruments of Photoshop.