E-Commerce Site Design: Fixing Problem Backgrounds

Don't let distracting product image backgrounds backfire by turning off potential customers. We show you how to fix problem backgrounds in a few simple steps so your merchandise shots will entice buyers.
Mismatched photos are the bane of Web designers. You've probably already encountered the scenario where you have some product images for your e-commerce site that don't match the look of the photos elsewhere on your site or that have ugly backgrounds. It might be that you've taken a product photograph using a different background than the one you used elsewhere, or, the photos might have been provided by different manufacturers and so differ in appearance in regard to backgrounds.
Editor's Picks
» Web Shop Design: Plugging into Photoshop

» Web Shop Design: Tips on Using Color

» Prepping Product Shots for Web Shops

» Time is Money: Batch Edit Photos, Boost Bottom Line

» Web Shop Design: Font Fantastic

» Five Photoshop Shortcuts for Quick Image Editing

» Web Shop Design: Putting Color into Action

» Web Shop Design: Using Text with Images in Photoshop

Regardless of how they got there, photos with either distracting or differing backgrounds backfire in terms of enticing shoppers. Instead of making the merchandise compelling, it turns off potential customers, and in some cases, will cause you to lose sales. So, how to address the issue? Fortunately, there are a number of techniques in Photoshop that you can use to edit product photos to minimize — if not fix — the problem. In this article I'll have a look at some of the approaches that you can take, depending on your specific needs.

Using the Crop Tool

One simple solution for mitigating distracting backgrounds is to get rid of them using the crop tool. In many instances you can remove the background by simply cropping in close around the subject. This approach has the added benefit of maximizing the size of the product in the image. Even if some of the unwanted background remains, it won't be so obvious.


Using Blur to Fix Problem Backgrounds
One way to remove a distracting background is to blur it so it is less obvious.
(Click for larger image.)

Blur and Desaturate a Background

If cropping does not solve the issue, you can dilute the unsightly background by blurring it or by desaturating it. Both methods use a similar solution. You'll begin by duplicating the image layer — right click it in the layer in the Layer palette and choose Duplicate Layer. Then with the top-most duplicate layer selected, apply a blur to it by choosing Filter > Blur > Gaussian Blur. You'll want to use a radius value that blurs the background but without making it look totally unrealistic.

Return to the image and make a rough selection around the product or subject that you want to remain in focus. (It is often easier to do this if you hide the blurred layer by disabling its visibility icon and make your selection using the image data on the underlying layer.) When the selection is made, click the blurred layer to ensure it is selected and click its visibility icon to display it again. Hold the Alt key as you click the Add Layer Mask icon at the foot of the Layers palette. This adds a Layer Mask that reveals the underlying layer only in the selected area so your product is in sharp focus and the rest of the image is blurred.


Using Desaturate to Fix Problem Backgrounds
You can remove distracting color from a background by desaturating the background.
(Click for larger image.)
You can also reduce the impact of a distracting background by converting it to black and white or by partially desaturating it to remove some of its color. This effect can be combined with a blur so you can blur and desaturate a background. To convert a background to grayscale, follow the steps for blurring the background and, instead of blurring it, desaturate it by choosing Image > Adjustments > Hue/Saturation and drag the Saturation slider to -100. Alternately, you can use your favorite method of converting a layer to grayscale. Then, when you add the layer mask to the top layer, you'll see the colored layer through the mask.

Replace the Background

Another solution for fixing the background of an image is to replace it entirely. To do this, you will need a replacement background, for example, another image, a solid color or a gradient fill. In this scenario you will make a cutout around your product and then drop in a replacement background below it. For this to be successful, you will need to pay attention when using the selection tool to ensure you don't have jagged edges when trimming around the item.


Replacing Background to Fix Problem Backgrounds
You can replace an image background if desired to give it an entirely new look.
(Click for larger image.)
Start by converting the background layer of your image into a regular layer by double clicking it and click Ok. Make a selection around the subject and then click on the Add Layer Mask icon at the foot of the Layers palette. This isolates the object from its background. At this point you can make adjustments to the mask by painting on it with black to remove areas of background and painting on it with white to reveal parts of the image that you may have removed in error.

Once you have a good mask in place, drop a background behind your cut-out object. To use an image as a background, drag and drop the background layer from a second image into this image and drag its layer to the bottom of the Layer palette. To create a custom background, create a new layer and create your background on it by filling it with a solid color or a gradient fill.

When this is done, you can soften the edges of the image by clicking on the Layer Mask thumbnail, choose Filter > Blur > Gaussian Blur and apply a small radius blur to the mask. This will softens the mask's edges and help blend the image into the underlying layer.


Recoloring to Fix Problem Backgrounds
Using a layer mask and the Color layer blend mode you can recolor an image background.
(Click for larger image.)

Changing Color

In some cases all you need is to change the color of the image background to better match the other images on your Web site. To do this, first make a selection around the object, then with the selection still active, choose Layer > New > Layer and click Ok. Hold the Alt key as you click the Add Layer Mask button on the foot of the layers palette. This adds a layer mask to the new empty layer.

Set the layer blend mode to Color, select the color to use and paint on this new layer with the paintbrush. The mask will prevent the paint from spilling over the subject of the image. When you paint on this layer, you retain the texture of the image background as you recolor it.

Bottom Line: Don't Distract, Convert!

When an image has a distracting or unmatched background, it makes your merchandise much less appealing to shoppers. So, do make the time to address the issue. You have a number of options available for fixing the problem. Which technique you use will depend on the result you need to achieve but with a little time and expertise you should be able to blend the image in with the others on your Web site and turn browsers into buyers.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com.

Do you have a comment or question about this article or other e-commerce topics in general? Speak out in the SmallBusinessComputing.com E-Commerce Forum. Join the discussion today!

Comment and Contribute
* Required Field
Your email address will not be published


Note: No advertising, no spam, no keyword in name/nickname field. Thank you!

Free Resources

  • eBook
    Virtualization Security Is Not an Oxymoron An overwhelming majority of organizations have adopted virtualized servers and those numbers are on the rise. While the business benefits of...
  • eBook
    Complexity Ate My Budget The exponential growth of data, along with virtualization, is bringing a disruptive level of complexity to your IT infrastructure. Having multiple...

Subscribe To Our Daily Newsletter