E-Commerce Site Design: Fixing Problem Backgrounds

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. 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.

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 BackgroundAnother 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.

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.

Using a layer mask and the Color layer blend mode you can recolor an image background.
(Click for larger image.)Changing ColorIn 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.


E-Commerce Design: How to Set Up Web Site Navigation
E-Commerce Payment Processing Beyond PayPal
Investor nominates 4 to board at Gaylord