Pure white image backgrounds with Paint.Net

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 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 Edges 1

Feather Edges 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

Easily transform your photos into professional looking images with Paint.Net

Three very simple things you can do to improve the quality of your "average" digital photos so they are good enough to publish on your website or in your marketing emails. Once mastered you can easily transform a photo into a professional looking image in less than a minute.

We are going to use a free image and photo editing software called Paint.Net, which you can download from www.getpaint.net/download.html.

• Brighten up the dull colours - In the menu bar select 'Adjustments' then 'Auto-level' and voilà the colours in your image are immediately brightened. Auto-level can also be used to darken an image that is overly bright.
  (click on an image to enlarge it)
  

Original image

Select Auto-level from menu

After colour correction

• Remove surplus background - Using the 'Rectangular select' tool drag a rectangle over the area you want to keep using your left mouse button. In the menu bar select 'Image' and then 'Crop to selection'.

Rectangle select tool

Crop image

• Reduce the image size - If you want to use your image as a product image in FoodCommerce then the maximum size permitted is 1024 x 1024 pixels. If you are reducing an image to use in a HTML marketing email then 300 x 300 pixels is probably about the right size. To resize your image click on 'Image' and then 'Resize' in the menu. The 'Maintain aspect ratio' box should be checked so just type in the new width or height value depending on whether your image is wide or tall, and then click 'OK'.

Resize image

Final result

The implementation of 3D Secure and why we now only support the Protx Payment Gateway

3D Secure is the latest fraud prevention initiative launched by the payment card industry and if you accept card payments online it will soon be mandatory for you to use it (July 2008 at the time of writing). There are two schemes: Verified by Visa (VbV) and MasterCard Secure Code (MSC).

3D Secure works by the shoppers registering a password for their card with the appropriate scheme and then enter it when they place an order online to prove it is really them. There is a spin off benefit for the retailer in that the liability for these transactions being fraudulent now shifts from them back to Visa or MasterCard.

At first glance this appears to be an excellent idea however implementing it was not that simple. To verify the transaction it now needed to be passed backwards and forwards between three domains; us, the bank and Visa or MasterCard. So we contacted one of our current payment gateway providers, HSBC, for detailed technical documentation and/or code samples to find out how this was done only to find out they could not help. Ironically this same bank were at the same time writing to our clients insisting they implemented 3D Secure and threatened them with penalties if they didn't. Another one of our payment gateway providers, Barclaycard, then wrote to say they would be making a multi-million pound upgrade to their system "to support Maestro cards with SecureCode" only to withdraw at the eleventh hour with no explanation. Eventually this update was done four months later.

Angry and confused we went looking for alternatives and eventually we found Protx, an independent payment gateway who not only worked with all the major UK acquiring banks but would handle all this 3D Secure stuff for us. Eureka! And then we looked deeper and found even more benefits and features that would not only make integration a simple and painless process but would allow us to develop FoodCommerce further in the future. The amount Protx would charge our clients was surprisingly easy to find; it was on their website; none of this smoke and mirrors price on application stuff. We also checked and to our relief the help desk is based in the UK.

The decision therefore was not a difficult one; in future we would only support the Protx Payment Gateway, our current clients would be transferred and the payment gateways that were giving us so much trouble would be retired and removed completely. Protx and 3D Secure is now fully implemented and we are now free to create new features in FoodCommerce for the benefit of our clients and their customers rather than being bogged down supporting the payment gateways of the incompetent bully boy banks.

Customer focused and retailer friendly, our new courier system really does deliver

Ben, at Fordhall Farm, has 8,000 shareholders dotted around the UK who are potential customers for his online shop. Until now we hadn’t paid much attention to courier delivery but this gave us a challenge to really make it work for retailers and customers alike. Knowing the problems and pitfalls with delivering perishables by courier we set about creating a courier system to really deliver. Here’s what it does:

• The customers get to choose when their order is delivered – we understand that many customers want their food orders delivered when they are there to accept them, so in a similar way to our other delivery services they can now select the delivery date for their order from the ones offered by the retailer on their website. The retailer can also use text to describe the different services they offer; for example ‘anytime’, ‘before 12 noon’, ‘before 9am’.

• FoodCommerce tells the retailer when customer orders need to be dispatched – because the customer is expecting their order on a certain date the retailer needs to makes this happen by dispatching it at the right time. In ‘orders | needing attention’ we tell you which orders need dispatching today.

• FoodCommerce closes off delivery slots to match production – for those that are constrained by extended production cycles we’ve added a ‘preparation leadtime’ parameter that effectively closes off delivery slots when production needs to start. As Ben only sends animals to slaughter on Mondays and needs to know how many to send this is a very valuable feature.

• FoodCommerce limits the number of orders in a delivery slot – when you’ve got 8,000 shareholders to send marketing emails to, there is a chance you could get swamped with orders and be unable to cope. This is why there is a limit, set by the retailer, to the number of orders in each delivery slot.

We are really pleased with our new courier delivery service and believe we have given the retailer the tools to deliver exceptional customer service without exceptional effort.

18% of Brits buy groceries online

Nearly one fifth of the UK population now buy their weekly groceries on the Internet according to a recent article on the IMRG (Interactive Media in Retail Group) website. The survey of 1,624 people found that 18% of Britons now choose online grocery shopping to avoid supermarket stores. It also revealed that 42% of online grocery shoppers live in the North of England, 36% live in Southern England, 13% are from Scotland and 9% live in Wales. The survey was carried out by voucher discount site MyVoucherCodes.