Overview
Product presentation is more important for an online store than it is for a brick-and-mortar store. Rather than being able to touch an item, inspect it for quality, or try it on as the case may be, an online shopper has only two-dimensional images on which to base their decision of whether or not to buy. The more impressive the images are that are available to the customer, the better decisions your customers can make and as a result, the more you will sell. Successful retailers have known this for a long time, yet it is surprising how often we are faced with online stores that feature a blurry product against complicated wallpaper and poor lighting. In this tutorial we will cover some simple tricks to help you optimize your product images using Adobe Photoshop.
What does it mean to optimize an image? If we look at how a product image is presented to a potential customer, we are faced with two immediate challenges. Our first challenge is to engage the customer visually with the best looking photo that we can present. The second challenge is to make sure that the image has a reasonable file size so that it will download quickly.
To meet the first challenge we will cover some simple techniques in Adobe Photoshop that can make our products stand out. We will be removing the background from a product image in order to show it on a white backdrop with some shadowing. We will then adjust the sharpness, contrast, and levels of the image to best display our product. Finally, we will resize and crop our product image to ensure that it looks it’s best at the size it will show on a website.
The second challenge that we face in presenting a product image to a customer on a website lies in the file size of the image. While larger images allow a better view of your product, they tend to have a large file size as well– which can mean long download times. Any time you leave your customers waiting, they are likely to go somewhere else. This is true in any business, online or off. In order to make sure that our product image will have a reasonable file size, we will finish by exporting our image from Photoshop as a JPEG, which will be ready for use on our website.
Maintaining a professional look and presentation of an online store is crucial to building consumer confidence, and standing out among your competition. By presenting your customers with impressive product images you ensure that your design and marketing efforts are not being undermined, which will lead to increased sales. Making sure that your images download in a timely manner means that your visitors will spend less time waiting, and decrease the chances that they will leave your store. In the end, product presentation is everything, and these simple steps will introduce you to some of the tools available for optimizing your product images.
Instruction
To begin removing the background, we will use the marquee tool to select the area around the magazine. Click on hold on the Lasso tool in Photoshop, located at the top left of the toolbar. You will be presented with the other available lasso tools– the Polygonal Lasso Tool and the Magnetic Lasso Tool. SELECT > INVERSE
, which will select all of the pixels outside of the magazine. Click DELETE
to erase the carpeting. Create a new layer beneath this and fill it with white by going to EDIT > FILL
. We have just removed our carpeting rather quickly, and are left with the magazine against a white background as shown below.
EDIT > FILL
and fill the selection with black. Next we want to blur our shadow to make it more realistic. Go to FILTER > BLUR > GAUSSIAN BLUR
to blur the layer. We want our shadow to be kind of subtle, so I used a value of 15 pixels in the blur. You can experiment with the settings to get a look that you like.
EDIT > TRANSFORM > DISTORT
to change the shape of the shadow. Notice in the image below that I have moved the top of the shadow layer down quite a bit to provide depth, and also pulled the top corners out from the center a bit to provide perspective. Move your shadow into a position that you are comfortable with, and click the check box at the top to commit the transform. By distorting the shadow layer in this manner we can simulate the look of a shadow being cast onto a surface.
IMAGE > ADJUSTMENTS > LEVELS
. This feature of Photoshop let’s us change the settings of each color channel in an image, which can be very complicated and is better explained in another tutorial. However, by default we will be presented with a histogram of all the color channels combined, which is what we want to work with. Simply grab the triangle markers on the left and the right and move them to the edge of the histogram, as shown below.
FILTER > SHARPEN > UNSHARP MASK
to see if we can’t clean it up a bit. The Unsharp Mask is almost the opposite of a blur, and certainly has a confusing name. Take a look at the settings that I used below, but experiment to find the best settings for you.
IMAGE > ADJUSTMENTS > BRIGHTNESS/CONTRAST
. You can see the settings that I used below, but again make sure to experiment.
Now if we look at our product image, we have made a dramatic improvement in the visual presentation of our product. We have cleared away the carpet from the background, created a shadow to add some depth, sharpened the image and made adjustments to make it more vivid. With only a few minutes in Photoshop, we have a made a night and day change in the way that this image looks.
IMAGE > IMAGE SIZE
and enter the dimensions that you want. Another option is to crop an image to the correct size, which is done by making a selection with the Rectangular Marquee tool at the top left of the toolbar, and then choosing IMAGE > CROP
. This will crop away everything outside the selection that you made. Once you have gotten your image to the proper size, we need to take care in exporting it to ensure that the file size is not too large.
FILE > SAVE FOR WEB
which will bring up a new dialog box with lots of settings in it. There are really only two choices when creating images for the web as far as file format– GIF or JPEG. Please see out previous tutorial on web graphics for an explanation of which to choose. In this case, since our magazine has many different colors, we are going to choose JPEG. So at the top right of our dialog box we want to choose “JPEG High” as the preset for our image. You may notice that this puts the image quality at 60 percent, which is just fine. Unless you are intending to use this image in another application, there are very few instances when anyone will notice the difference between 60 and 100 percent. To give you an idea of what this does for us, this image will export into about a 7 kB file at 60 percent, but creates a file twice that size when exported at 100 percent. That is a tremendous file size saving without really affecting the visual image. Save your image file and we are finished.
Hopefully this tutorial was able to expose some of the tools available to make your product images look better. While not every image requires this amount of editing, it is important to be aware that there are simple techniques that only take minutes that can make a monumental difference in your images.