If you only have a single product to display on your Web site for sale, you can have images at whatever size and aspect ratio that you want. Even with only a couple, you have flexibility. But with more images, it is extremely important that all images have identical dimensions. If you are dealing with book covers or movie boxes, you can standardize on a size that isn’t square. With a variety of products, it is best to work with a square size.
I’m going to use a box shot of my CorelDRAW X6 Unleashed training DVD as an example. Note that it is no longer a DVD, it is only a download that you get immediately after purchase. When I created a box shot of the box and disc, the master image was not square.
Select the Image | Paper Size command if you are using Corel PHOTO-PAINT or the Image | Canvas Size command if you are using Photoshop. The screen shot below shows the dialog box next to our image in Corel PHOTO-PAINT. While there are slight differences, the settings in Adobe Photoshop are very similar.
For this image the height is greater than the width. Whichever dimension is greater, put the same dimension in the other text box. So for this image, I entered 1401 for the width so that height and width are identical and the image will be square. This will not change the actual “photo”, just the padding around the edges.
Once the image is square, you may want to save a copy of the file as your master version at the highest resolution possible. The next step will be only be required if you are working with images greater than the size you want to use for final display. My suggestion is that product shots should be 1000 pixels square. If details of the photo are important, you may need even larger.
Our next step will be to resample the image to the final size of 1000 pixels square. Select Image | Resample in Corel PHOTO-PAINT or Image | Image Size in Adobe Photoshop. In the dialog box that appears, you should see that the width and height are equal. If not, you missed something in the earlier step. Below is the Resample dialog box after I’ve changed the size to 1000 pixels. Again, the Photoshop dialog is slightly different but the process is identical.
After decreasing the size of the image, you may want to use the Effects | Sharpen | Unsharp Mask filter in Corel PHOTO-PAINT or the Filter | Sharpen | Unsharp Mask filter in Adobe Photoshop to give the image a little tweak. Now save it and load it into your shopping cart!
When all images are the identical size, rows and columns of products will line up perfectly and still look great on your site!