When we need design work done, we have a designer do it. Sometimes, though, there are small jobs that you want done quickly. Changing colors in an image is one that you can do yourself.
For example, while working on a recent website, we used the image at left to illustrate a page. It looked good at the time, but when the designers updated the theme with a tomato red, it clearly clashed with the page it was on. There are so many times this can come up: when you choose a photo to illustrate your blog post based on the idea you want to convey, when you need to use a pre-made banner from a vendor, when your small budget for photos gives you few choices for images of products — you can get a bad clash on your website.
Are you thinking that it doesn’t matter? Most people, you may think, are not that sensitive to color, and will be okay with clashing colors. Not true. Just like sour notes in music, sour visual notes give people an uncomfortable feeling even if they can’t identify what’s wrong.
Instead, fix your colors. There are several ways to do this.
If you own Photoshop software, you can do all sorts of things with colors. Start by creating an adjustment layer, as shown in the screenshot below. If you have a different version of Photoshop, your dashboard will look a bit different, but this should be fairly close.
You can choose among several options for making general color changes. Here’s how the various adjustments looked:
Here I used Color Balance to move the overall color range toward warmer colors.
You have sliders, as you can see in the screenshot below, and you can simply play with them to adjust the overall effect. Keep the website you’re working on open on your screen so you can compare the colors with the site and choose a good match. I moved the sliders from cyan (bright blue) toward red and from blue toward yellow to warm up the colors of the image so they would look better with the red on the page.
Here I used Hue and Saturation.
As you can see in the screenshot below, Hue and Saturation also gives you sliders. I moved the Hue slider toward the warm side.
For the third option, I used Hue and Saturation, but I reduced the saturation of the colors, since the brightness of the blue and green was part of the problem.
The designer preferred the second option of the three above, so that’s the one we chose.
Both of the methods shown above allow you to adjust and see how your changes will look. Sometimes, you might prefer to choose a particular color. In such cases, you might want to use Color Overlay.
Here’s a section of our original infographic created by Jay Jaro:
We wanted to create some variations for a presentation. Jay made one with color overlay:
Photoshop files have layers: that is, each part of the picture is a separate image. So Jay chose the number 1, which was wine colored in the original, and changed it to blue. He changed the heading from gold to a deeper blue. He changed the icons from blue to gray. This detailed work makes the variant look as good as the original, with different colors.
You can’t do this if you don’t have the layered PSD file, and you might want a quicker method sometimes. I made the changes to the example below with the same Adjustment Layer tricks that I used on the photo illustration at the top of the post.
Just by moving the sliders, you can change all the colors in a JPG file: the wine, gold, and blue changed to green, blue-gray, and gold, respectively. You won’t have complete control with this method. I couldn’t have changed the icons to green, for example. However, you can make an overall change quickly.
This is not by any means a tutorial on how to use colors in Photoshop. If you need a tutorial like that, you don’t need a quick “how to fix that clashing color” tip. If you don’t own Photoshop, call your designer when you need those adjustments made.
However, if you often do things with images at your own website, you should own Photoshop. There’s a special offer on Elements, the “lite” version, below.
Leave a Reply