A customer’s decision to buy will often be influenced by the image of the product on your website so it is important that it is of reasonable quality and shows the product off well. Conversely poor images may reflect badly on your products and your website. A tell-tale sign of how much care and effort was put into creating your images is the background. A good background will either be an integral part of a well composed picture, or should be pure white so the image blends in with the page without leaving a grubby grey square footprint.
This article explains how to transform the background of your images to pure white using a free image and photo editing software called Paint.Net, which you can download from www.getpaint.net/download.html. To complete the tutorial you will also need to download and install the BoltBait plugin pack from http://paintdotnet.forumer.com.
-
Taking your photo – If you want your image to have a pure white background then you should try to get as close to this as possible when you take your photo. A good contrast between the subject and the background will make it considerably easier to adjust the photo later and well worth the initial effort.
The photo we are going to begin with in this tutorial is the final image from my previous article Easily transform your photos into professional looking images with Paint.Net. It is not a particularly good image as the contrast between the label on the jar and the background is poor and it will therefore be difficult to separate the subject from the background. You will be able to see this in some of the images later in the article.
Our original image (click to enlarge)
-
Create a new layer – The first thing to do once you have opened your photo in Paint.Net is create a background layer so that we can separate the background from the subject. In the layers window click on the ‘new layer’ button.
With the new layer selected click on the layer properties button and rename the layer ‘Background’. We now have two layers called ‘Background’.
Now use the ‘move layer down’ button to move the new background layer to the bottom of the stack.
Select the old background layer and click on the properties button and rename it ‘Jar’.
Then with the top layer selected click on the ‘Properties’ button and change its name to ‘Jar’.
Add new layer button
Layer properties button
Layer properties
Move layer down button
Jar layer
-
Turn the ‘Background’ layer white – In the layers window uncheck the box in the ‘Jar’ layer so it is no longer visible. Ensure the ‘Background’ layer has now become selected, or active.
Now select the ‘Paint Bucket’ tool, check that the background colour is white, and then right mouse click on the image to make it all turn white.
Paint bucket tool
-
Selecting and deleting the background from the ‘Jar’ layer – In the layer window select the ‘Jar’ layer to make it active. Now use the ‘Magic Wand’ selection tool to select the background area you want to delete.
If the contrast between the subject and the background in your original photo is good then you may be able to do this in just a single click. If the contrast is poor then you will need to work at this in order to select everything you want to delete and nothing you want to keep. Reducing the tolerance will cause a smaller area to be selected when you click on the image, increasing it will cause a larger area to be selected. To add an area to your selection hold down the Ctrl key when you click the left mouse button; to remove an area from your selection click on it using the right mouse button. If the last addition to your selection is just plain wrong just press Ctrl and Z to undo, then adjust the tolerance and try again. If necessary do the best you can and then finish off any awkward bits using the ‘Eraser’ tool. Use Ctrl and + to zoom in and Ctrl and – to zoom out.
When you are happy with your selection press the delete key to delete everything you have selected.
If there are any odd pixels that you failed to select and delete then use the ‘Eraser’ tool to delete them.
If there are any bits you deleted that you shouldn’t have then use the ‘Clone Stamp’ tool to repair them. To select the area you want to copy from hold down the Ctrl key and left mouse click; then left mouse click on the area you want to copy to. Adjust the brush width if necessary.
Selecting the background 1
Selecting the background 2
-
Feather the edges of the subject – The edges of your subject are now probably a bit harsh and unreal so we are going to feather them to make them softer and more realistic. To complete this step you must have downloaded and installed the BoltBait plug-ins.
In the layers window ensure that the ‘Background’ layer visibility box is unchecked and that the ‘Jar’ layer visibility is checked and it is selected as the active layer. Select Effects, Object, Feather from the menu and the image takes the effect immediately and again when you make changes to the settings. Ensure the ‘True Feather’ box is checked and then accept the default settings of radius = 2 and effect = 2 and then click OK. Now repeatedly select Effects, Repeat Feather from the menu until you get the feathered edges you desire; and if you go too far just press Ctrl and Z to undo.
Feather edge 1
Feather edge 2
-
Flatten the image – With all layers checked as visible select Image, Flatten from the menu.
Now save your file as either a JPEG, PNG or GIF image ready to be used on your website or marketing emails. Only save as a Paint.Net file if you want to maintain the layers in order that you can continue to work on the image.
Flatten image
Final result
In summary this is a fairly easy procedure provided there is a reasonable contrast between the background and subject of the original photo.
To learn how to brighten, crop and resize an image please see my earlier article Easily transform your photos into professional looking images with Paint.Net
