What do the websites at Pottery Barn Kids, Gymboree and Macy's, and most other large eCommerce sites all have in common? Aside from large web design budgets and full-time design staff, they all have product pages with beautiful, uniform thumbnail pictures. One of the reasons that these sites, and others like them, look so professional, is the product pictures. Every picture is the same size, large enough to see detail, but small enough to laod quickly. Even though their photos are professionally shot, edited, cropped and optimized, you can get the same effect with some basic photo editing software.

The first thing you need is photo editing software. There are many different options available, in this guide we will use Photo Plus as our demo software, because it is free and available to anyone, and also fairly easy to use. Many of the steps will be quite similar in Photoshop as well.. You don't have to use this software, all of the techniques are available with any decent photo editing program, it's just a matter of reading through the manual or searching the help guide to find out how to carry out the same steps. If you are using pictures from your vendor, chances are you can skip step 1 and 2 and move right to 3, although sometimes I have worked with vendor pictures that were a little fuzzy or dark, in which case you would start at step 2.

Step 1. Resize. Pictures that come right off a digital camera are very large. Much to large to use on your website, both size wide and page load time wise. The first thing I do is resize the picture down to a useable size. This is the size that you would have on your product page and I recommend not using pictures over 500 px wide.

First, open your image and rotate it to the correct position for the picture. Then, find the image drop down from the top and scroll down until you find image size. (fig 1)

When the next box opens up, change the width of the picture to the width appropriate for your store. Again, for a traditional, left navigation store, I recommend no more than 500px wide. If you don't have side navigation and have more room to work with, you could go as big as 600px, but the bigger the picture, the longer the download time. When you set your width, make sure that the "maintain aspect ratio" box is checked. This will automatically resize the height proportionally to what you have set the width for. In the pictue below, I set the width to 500 and checked the maintain aspect ratio. Make sure your measure is set for pixels. Then click OK. (fig. 2)

(Note: in Photo Plus, you can also play with the resampling method. This will allow you to save the image so that it has a faster or slower load time. The faster load the time, the lower the quality of the image. You should play with your images, but you should stay somewhere between 30% and 70% on the slider. In Photoshop, this is done when you save the image, use the save for web option and look for a box called "quality".)

Now your image is resized and ready for Step 2.

Step 2. Brighten and sharpen: The first thing I do when working on product pictues is brighten and clarify them. Even if your pictures are a bit dark or fuzzy, a little brightening and sharpening can go a long way.

in the above pictures you'll notice that although my picture is fairly clear, it is quite dark. We can brighten it up a bit by using the brightness and contrast settings. Go to your image drop down and choose "Adjust, and then the "Brightness/Contrast tab (fig 3).

Use the slider bars to adjust the contrast and brightness to achieve a brighter picture. This is trial and error. I usually bump up the brightness a little then the contrast and back to the brightness if I still need more tweaking. Be careful, if you go too bright your picture will look washed out. (fig 4)

You can see the difference by looking at a comparison of the images before and after:

You can further tweak the colors by adjusting the Saturation and Lightness of the image. Again, go to the images drop down, select "Adjust" and then the "Hue/Saturation/Lightness" tab. (fig 6)

When the new box opens up you can use the Saturation and Lightness slider to brighten the image more. (fig 7)

The next step is to sharpen the image. This image is fairly clear, so the difference won't be dramatic, but it can still help with the final image.

Again, go to the image tab, scroll down to "Other" and choose "Sharpen". (In photoshop, sharpen is found in the "Filter" tab). (fig 8)

Use the slider to sharpen the image, checking the preview as you go. (fig 9)

Our final comparison shows that the final image is not perfect, but so much more appealing than our original out of the camera image:

Save the image by going to the "File" tab and choose "save original as", and you now have your main product image. When saving, it's best to use shorter names with no spaces. I always use the same name for the thumbnail and main image, with some sort of letter at the end to distinguish between the two. For this image, I might use something like this:

mk-velocity-lg.jpg for the large image and after I go through the cropping step my thumbnail would be mk-velocity-sm.jpg.

Step 3. Crop

Cropping your image will give you a uniform and fast loading thumbnail for your main page. This step is often skipped which results in using a thumbnail image that is resized by your cart, but still taking just as long to load as a large image - if you have a cateogry page with 9 - 12 of these images, your shoppers won't wait around for the page to load.. If you take the time to crop your image down, your shoppers will be rewarded with category pages that load quickly, giving you more of a chance of making a sale.

First, decide on what size you want all of your thumbnails to be. I recommend a width and height between 125px and 200px. You want something that will allow 3 - 4 images per row and you want proportions that will work for all of your images. This can get a little tricky to determine beforehand, I think 200px by 150px works pretty well for items other than clothing, and 150px by 200px works well for clothes, but you may have to play around to find the best fit for your store. If you have both clothes and other items, try working with one of each to find the best size for your thumbnails.

(The following directions are very different from how you crop in Phootoshop, but if you read through their crop section in the Help manual, you can get the same effect.)

Next, you need to resize your image once again, close to your final desired image. My final image will be 200px wide, so to get close to this I resize my image to 250px wide - again, making sure to check the "maintain aspect ratio". This is a little bit of trial and error, if you find the main part of your image is still too big when you go to crop, you can resize again. Also, remember, anytime you make a mistake, just go up to the image tab and use the "undo" option. (fig 11)

After you resize, you need to click on the selction tool from the sidebar.

Choose the rectangle, and then go to your image and draw the rectangle around your image, looking at the bottom of the screen to achieve the correct size, in my case 150px by 200px. Don't worry if the rectangle is not centered over your image, you want to concentrate on getting the size in the lower right corner. Once you are finished with the rectangle it will switch to a dashed line. (fig 12)

When the dashed line appears, you can click on the rectangle and move it to center it over the picture.

Next, go the "image" tab and choose "Crop to Selection". This crops your image to your new thumbnail size.

Finally, save the image using the file tab, select "save original as" and save as a .jpg.

Here is your final thumbnail:

Although this may take some time at first, with practice you should be able to do one image in about 3 or 4 minutes. Sometimes, it is hard to get your image to fit into your chosen thumbnail size. You may be able to either crop out some of the main picture (remember it's just a thumbnail to give your customers an idea of the product) or you can leave some white space around the edges. You can move your rectangle selection beyond the picture, anything outside of the picture will become white space when you save the picture. If you do this it's best to try to even out the space, with an equal amount of white on all sides.

NOTE: You may have noticed that in the screen shots the product picture was upside down. Even professionals make mistakes! I got through the entire tutorial before I realized the picture was upside down. For the final pictures, I simply rotated them 180 degrees to get them rightside up, but didn't add this to the tutorial - I didn't want to confuse anyone, but I did want to mention it in case anyone noticed the discrepancy.

Copyright © 2008 Modern Sugar. No part of this article may be used without prior approval.