E-Commerce Site Design: Fixing Problem Backgrounds
Posted by mr bill | Posted in | Posted on 9:45:00 AM
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.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 layerselected, 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.
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.
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.
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.Source:http://www.ecommerce-guide.com
Comments (0)
Post a Comment