Photoshop Tutorial: Color Matching

We had a customer who wanted to see how a pair of basketball shorts looked with a particular jersey.  The only problem was that we did not have the jersey and shorts on hand in the same color.  Instead of losing time and money shipping the correct color to our main office, we took this picture with mismatching colors and changed the color of the jersey in Photoshop to match the shorts.  I am going to show you how to replace and match colors in pictures so you can use this awesome tool yourself.

Color Matching Original Image

Open your picture in Photoshop.  Save this picture and give it a new name, then open the original picture again.  You should now have two copies of the original image open.  First we are going to work with the copy that is not going to have any color changes.  We are going to call this image the Source Image.  Select as much of the shorts as possible using a selection tool.  You can use the Magic Wand, Lasso, or other selection tool.  I used the Magnetic Lasso to make my selection.  I clicked around the main section of the shorts to get as much of the red color as I could.  As you can see, it is not necessary to select all of the shorts, but you do want to get the full spectrum of color so the new coloring will be accurate.

Magnetic Lasso Tool

Selected Red Shorts

Now go back to the other image.  This is the image that you will be replacing the color on.  It is the Destination Image.  Right click on the background layer in the layers panel and select duplicate layer. 

Duplicate Layer 

By default this new layer will be called Background copy.  I am going to rename this layer Color Replace and click OK to complete the step. 

Rename Layer 

We will be working with this duplicated layer to preserve the original image. Use the selection tool of your choice to select the entire area where the color should be replaced.  Again I used the Magic Wand Tool.

Selected Blue Jersey

Now go to the file menu and choose Image>Adjustments>Match Color. 

Match Color 

The Match Color Options Window will pop up.  For this example we do not need to worry about the the three sliders under the Image Options.  Under Image Statistics, make sure the two boxes are checked.  Checking the top box means that only the area selected in the Source Image will be used for color matching instead of colors from the entire image.  The second boxed is checked indicating that only the selected area in the Destination Image will be affected.  Next to Source: select the Source Image.  You will be able to see a small picture of the Source next to the Source Image name.  Click OK.

Match Color Options

You can see that the jersey is now red instead of blue, but there is still some work to be done.  We are going to adjust the contrast of the new red jersey.  Make sure this layer is still selected in the layers panel.  In the layers panel click on Create New Fill or Adjustment Layer and select Levels. 

New Adjustment Layer

New Layer - Levels

A Histogram will appear.

Histogram

There are three arrows at the bottom of the Histogram.  A black one on the left that controls the darkness of the shaded areas.  There is a gray arrow in the middle, and then a white one on the right that controls the highlights.  I am going to slide the black and white arrows inward until the contrast in the red looks how I want it to look.  If your image looks faded, this is how you fix it.  Now, in the layers panel I am going to select Luminosity so the overall color is not affected by this new layer, only the brightness of the color.

Luminosity

There you have it.  Here is a perfect sample picture to send to our customer.  It will be much easier for our customer to decide if they like how the jersey and shorts look together now.  With a blue top and red bottoms they were almost certain not to like the match.

Final Color Match Image

 

 

Welcome to WebsiteTemplateDatabase.com

Welcome to WebsiteTemplateDatabase.com, where you’ll find the templates and tools you need to build your website.  You’ll find here templates for shopping cart systems such as Zen-Cart and Magento, blogging templates for WordPress and Blogger, Content Management System (CMS) templates for Joomla and Drupal, and many others.  You’ll also find website related tutorials.  You can find instructions on using an FTP program, how to design websites using Adobe software (including Photoshop, Illustrator, Flash, and Dreamweaver), and much more information.  We invite our users to participate and contribute as much as you feel appropriate.  We hope you find these resources helpful.

Frequently Asked Questions

The following are answers to questions most frequently asked by users of WebsiteTemplateDatabase.com.  If you have questions that are not answered here, please visit our forum for more help.  If you can’t find in the forums the answer to the questions you have, you might try posting the question in the forums to see if one of our users might be able to help you.  Chances are, if you have a question, someone else has run into the same issue, and others would appreciate the opportunity to join in on the conversation.  If all else fails, you may send us an email with your question.  We can’t guarantee that we’ll be able to respond to every question we receive, but we’ll do our best to answer the questions our site visitors have.   Good luck.

Question:  How do I customize one of your templates for my own web site?
Answer:  With each of our template downloads (free and premium templates) we include a text file with instructions on customizing the template to work for your particular needs.  When you download the template, you will find a file label “CustomizationInstruction.txt”.  Follow those instructions, and you should be ready to go with your own “custom” web site.

Photoshop Tutorial: Color Accents Method 2

A fun technique to use in PhotoShop is color accenting.  You can add emphasis to your pictures by making a photo black and white and then letting the true color show through on select items.  You can accent your child in a photo by making everything but them black and white, or bring out the bright colors of a single flower.  Bright colors work best.  I am using Adobe Photoshop CS3 to do this tutorial, but you should be able to follow the same instructions for all versions of Photoshop.

Open your photo in Photoshop and use the crop tool if needed.  Here is the original image I started with and the cropped image I decided to use.

Color Accent Original Picture

Cropped Image

In the Layers Panel right click on the background layer and select duplicate layer.  Follow this step two times so you have two new layers in addition to the original background layer.  Since the original layer is often locked (indicated by the lock on the layer), you will not be able to make changes to this layer.  If your Layers Panel is not visible go to Window in the menu bar and select Layers.  By default this new layer will be called Background copy and Background copy 2.  You can change the name of a layer if you wish by double clicking on the name of the layer in the Layers Panel.

How to Duplicate Layer

Select the top layer in the Layers Panel. 

 Layers

The selected layer will be blue.  In the menu bar, select Image>Adjustments>Black & White.

Make Layer Black and White

A window will pop up that allows you to adjust how the black and white layer will look.  For this example I left the default settings, but you can play around with the available preset options or adjust the color bars to make your picture just the way you want it.

Black and White Adjustments

Black and White Image

Turn off the visibility of the black and white layer by clicking on the eye next to that layer in the Layer Panel.  Select the colored layer by clicking on this layer in the Layers Panel.  The layer will be blue in the panel showing that it is selected.  Now select the Magic Wand Tool from the Tools Panel.

Magic Wand Tool

Select the color you want to keep in the final picture with the Magic Wand Tool.  You will probably need to adjust the tolerance of the wand in the Magic Wand settings bar.  The higher the tolerance the more color variation the magic wand will select with each click.  Hold the Shift button down as you click on the image to select several areas.

Tolerance 

Now turn the visibility of the black and white layer back on by clicking where the eye icon was in the Layers Panel.  The eye icon should reappear.  Select the Eraser Tool in the Tools Panel and erase where the color should show through.  You will notice that the Eraser Tool will only work inside the selected area.

Deselect the image by choosing the Magic Wand Tool again and right clicking on the image and selecting Deselect.

Deselect

Your image is now complete.

Final Image

About WebsiteTemplateDatabase.com

WebsiteTemplateDatabase.com was created as a resource for web designers and others involved in creating and maintaining web sites.  Whether you need help setting up an online retail store or simply publishing an information site with a few pages about your organization, we hope you find something helpful here.  At WebsiteTemplateDatabase.com you will find free and premium templates that can be downloaded and installed on a web server using step-by-step instructions.  We also provide tutorials to help our audience tackle issues related to graphic design, web server administration, search engine optimization, and more.  If you can’t find the help you need by browsing or searching out tutorials, feel free to visit our forum, where you can get help from other users of WebsiteTemplateDatabase.com.  Thanks for stopping by!

Contributors to the site:

Richard Robbins

Lisa Robbins