This trend has gained popularity especially among agencies and smaller brands. Duotone effects are a great way to incorporate and reinforce your brand colors throughout your work and your website.<\/p>\n\n\n\n
If you\u2019re interested in trying out this technique, you\u2019ll want to be strategic in the photo you choose to manipulate. While technically you can apply the duotone effect to any photo, it\u2019ll look better on a simple image with lots of contrast. We\u2019d also recommend using an image with a solid background, preferably white\u2014that will make it easier to establish the base color you\u2019re looking for!<\/p>\n\n\n\n
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\u2019re working with existing content, you can always manipulate the photo first to boost the contrast or change the background color.<\/p>\n\n\n\n
For the rest of the tutorial, we\u2019ll cover two methods you can use to manually create a duotone image in Photoshop. The first is the built-in Photoshop<\/a> option and the second uses a gradient map<\/a>.<\/p>\n\n\n\n Before we move on, load your image into Photoshop and create a duplicate layer of the photo. By editing the duplicate (instead of the original, bottom layer), you\u2019ll always have an unedited version of the photo to fall back on.<\/p>\n\n\n\n Ready to create a duotone image in Photoshop? Let\u2019s get started.<\/p>\n\n\n\n\n\n In order to use the duotone option that\u2019s built into Photoshop, first you\u2019ll have to convert the image to an 8 bit grayscale. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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\u2019t worry about flattening the image. If you want to keep the original copy, don\u2019t merge your layers.<\/p>\n\n\n\n The next notification asks if you want to discard color information. You\u2019ll have to do this in order to use the default duotone option, so click \u201cDiscard.\u201d<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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).<\/p>\n\n\n\n Beyond that, the process starts to get a little clunky. You technically can adjust the curves for each color, but the image doesn\u2019t update in real-time, making it a little difficult to see what\u2019s happening and resulting in a lot of back and forth. Play with the colors and settings until you find the desired effect.<\/p>\n\n\n\n We\u2019d suggest playing around with these settings for a bit to get a feel for them. But for a simpler option, let\u2019s move on to the second method for creating duotones in Photoshop.<\/p>\n\n\n\n For this method, you won\u2019t need to worry about altering the image or choosing a specific color mode. Of course, if you do want to edit any of your settings, feel free, but the photo will work fine just as it is. <\/p>\n\n\n\n When you\u2019re ready, select the copy of your image and click Image > Adjustments > Gradient Map.<\/p>\n\n\n\n Depending on your default setting, this setting will overlay the image with a gradient for a grayscale mapping. <\/p>\n\n\n\n If the default is not black and white, click the dropdown and select that option. Good news, we\u2019re already halfway to creating our duotone!<\/p>\n\n\n\n Pro-tip: See the checkbox next to Reverse? By clicking that, you\u2019ll invert the colors in the photo. For this tutorial, we\u2019ll leave it unchecked, but if we wanted the background to be darker than the subject, that option can help you make it happen.<\/p>\n\n\n\n By clicking on the gradient bar, you\u2019ll open the Gradient Editor in a new window. Here you can select your colors and adjust how they display over the image.<\/p>\n\n\n\n As you can see, the final images look quite a bit different from each other, but both result in wonderful duotones. <\/p>\n\n\n\n Gradient Map is our preferred option of the two, simply because it\u2019s 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.<\/p>\n\n\n\n And now, let\u2019s move on to the simplest option of the three!<\/p>\n\n\n\n To get started, you must first download this Photoshop action<\/a>. Once you\u2019ve downloaded it, double-click the file to install it. <\/p>\n\n\n\n Open the image you\u2019d 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.<\/p>\n\n\n\n Once you\u2019ve opened the Actions window, select the image layer you want to apply the duotone effect to.<\/p>\n\n\n\n Click the drop-down on the \u201cFlywheel \u2013 Duotoner\u201d folder. Now, select \u201cDuotoner \u2013 Select and hit play\u201d and press the triangle play button at the bottom of the window.<\/p>\n\n\n\n Once you hit play, you\u2019ll 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. You can also adjust the colors within each layer to bring them in line with your brand standards.<\/p>\n\n\n\n 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!).<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Navigate to the History window by selecting Window > History. Scroll up to the top, and click \u201cSnapshot.\u201d This resets everything so you\u2019re good to go!<\/p>\n\n\n\n What do you think of duotones? We think they\u2019re a strong design trend that provides some contrast to traditional, full-color images.<\/p>\n\n\n\n Want additional resources for building and designing incredible sites with WordPress? Visit WP Engine\u2019s Resource Center<\/a> for our vast library of educational, how-to content created for WordPress users of all technical skill levels!<\/p>\n\n\n\n Find out more about WP Engine’s hosting platform for WordPress<\/a>, or speak to a representative now<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" As you\u2019re working on your next site design, there\u2019s a common type of background you may be considering: photography. While this trend isn\u2019t necessarily unique, it sure is effective at setting a scene and immersing a user into the environment of a site. If you\u2019re looking for a way to use photography but with a…<\/span><\/span><\/p>\n","protected":false},"author":326,"featured_media":139918,"template":"","resource-topic":[1396],"resource-role":[1397,897],"resource-type":[916],"class_list":["post-22094","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to use the default Photoshop duotone option<\/h2>\n\n\n\n
Convert the image to 8 bit grayscale<\/h3>\n\n\n\n
![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/03\/1-grayscale.png\")
<\/figure>\n\n\n\n![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/03\/2-merge.png\")
<\/figure>\n\n\n\n![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/03\/3-black-and-white.png\")
<\/figure>\n\n\n\nConvert the image to a duotone<\/h3>\n\n\n\n
![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/03\/4-duotone.png\")
<\/figure>\n\n\n\nSelect your colors<\/h3>\n\n\n\n
![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/03\/5-blue-purple.png\")
<\/figure>\n\n\n\nHow to use a gradient map to create a Duotone<\/h2>\n\n\n\n
Apply a gradient map<\/h3>\n\n\n\n
![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/03\/a-gradient-map.png\")
<\/figure>\n\n\n\n![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/03\/c-gradient-black-white.png\")
<\/figure>\n\n\n\nChoose your colors<\/h3>\n\n\n\n
![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/03\/d-color.png\")
<\/figure>\n\n\n\nHow to use the duotoner<\/h2>\n\n\n\n
Install the action<\/h3>\n\n\n\n
![\"photoshop](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/01\/Screen-Shot-2018-02-06-at-2.46.39-PM-1024x656.png\")
<\/figure>\n\n\n\nSelect and play the action<\/h3>\n\n\n\n
![\"duotone](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/01\/Screen-Shot-2018-02-06-at-2.49.03-PM-1024x674.png\")
<\/figure>\n\n\n\n![\"photoshop](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/01\/Screen-Shot-2018-02-06-at-4.52.10-PM-1024x496.png\")
<\/figure>\n\n\n\nBonus: Reset Your Image in a Snap<\/h3>\n\n\n\n
![\"photoshop](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2018\/01\/Screen-Shot-2018-02-06-at-4.53.38-PM-1024x585.png\")
<\/figure>\n\n\n\nDesign your dream site with WP Engine!<\/h2>\n\n\n\n