Color Coordinating Your Website Images

This is a fairly useful technique when you need to include images in your website design or layout, and want them to coordinate with the rest of your design. We often have photos and drawings that we would like to use in a website design, but they just don’t quite fit in with the color scheme. The most common method of dealing with this is to play around with the color balance tool in Photoshop until it looks just about where you want it to be. I think the method I use is a little bit more accurate, and a tad less tedious.

Note: Unless you are really picky about how the colors in your entire site coordinate, you probably will not go to the trouble to use this for everyday photos you insert in your site, but you may find it useful for images that are integral to the site design in some way.

The first thing you will need is a screenshot of the web design you want the image to coordinate with. I’m going to use my old Midnight Rainforest design for this because it’s a very simple design and uses few colors (which makes it even more challenging to do this process with). If you have design that uses gradients or many colors, you will probably have it a bit easier.

Here’s a full screenshot of the design I want to match with:

Now I have a couple of images (from PDPhoto) I’d like to match to this design, but the colors they use are very different from the dark greens and blacks used in the Midnight Rainforest design.

Crawfish:

Hot Air Balloon:

Here’s what they look like currently in the design.

The images look fine, but I’d like to make them match the design much more. The first thing we need is that original screenshot of the design without the images.

We will open the screenshot in Photoshop. Then also open a window with one of our images, starting with the crawfish.

Make sure that you click on the image you want to change so it is the active image, as in the above image. With the image you want to change active, go to Image -> Adjustments -> Match Color…

When you click on ‘Match Color…’ it will bring up a dialog box with some options. Near the bottom of that dialog box, you want to use the drop-down that says ‘Source’ and select the image you want to GET the colors from, in this case, that’s the original Midnight Rainforest screenshot image.

From that point, you can adjust the ‘Image Options’ sliders (Luminance, Color Intensity, and Fade) to get it to look the way you want.

When you are done, click ‘Ok’ and then save and close the crawfish image. Now you can open your next image (the balloon). Note: Leave the Midnight Rainforest screenshot open so it is an option in the source selection.

Repeat the process with the hot air balloon image.

Your new design images should now coordinate alot better with the design because they are using the colors from the design itself.

Remember that the color matching works the best if you have alot of color to start with, and the starting design had only a few colors, but I think the result definitely coordinates better with the overall color scheme.

Again, I don’t suggest doing this for EVERY image you might put in a daily blog or often updated site unless you are extremely picky about the cohesiveness of the color in your design. I would instead suggest this be used to enhance certain commonly used pictures in standard websites.

A few examples where this could be used might be:

• A photo of a business location on a locations page.
• A photo of employees or the site owner.
• Graphic sets to let people link back to your site.
• Etc…

Hope this helps you out in some way!

~Nicole