Good Image Processing (pt.4) Uniformity of Presentation.

In this forth part of my series on good image processing practices I talk about uniformity and how master templates keep your product images consistent and professional.


You’ll notice on the big websites that inspire you that product images have a uniformity of look to them. Of course this is often because they shot the products themselves so it’s no surprise but there’s no reason why you can’t achieve much the same results. Higgledy-piggledy images will instantly be off putting to prospective customers as it shows a lack of care and expertise in your presentation. So how do the big boys do it and how can you do it too?

Firstly find out from your developer what the target size is for your product images. You might need to factor in 1-3 sizes (thumbnail, product and full version). 


  • Full version – best possible image, probably pops-up when a product is clicked on.

  • Product – how the image will be displayed on a product page.

  • Thumbnail – how the product might be displayed on a category listing page.

Creating a Master Template

Start with the biggest possible image, the full version. So for example your developer tells you that the best image size is 400x400 pixels and that the ideal background colour is white.

Start by opening your image software and creating a new canvas 400 pixels wide and high and filled with white. Save this as your Master template.

Open a product image and Copy & Paste it into the 400 pixel template. This creates the image as a layer over the background. You can play with the layer without disturbing the background or size of the canvas.

Now resize the image (not the canvas!) so it occupies the middle area of the master template. Don’t let it fill the space, give it room to breathe with space around the image. A typical trick here is to hold down Shift as you resize by dragging in a corner of your product image (Shift is used to scale proportionally so if you make the image 50% shorter it is automatically scaled to be 50% narrower). When you are happy with it save out your first image to a folder marked as Full Versions. Now repeat the process by opening a master, placing in a product and attempting to match the products size and position to the previous product.

The aim is for consistency. This can be hard to achieve as we’ll see below.

Now you have you Master images complete to get your smaller images for product and thumbnail you simply open the images and resize them and save out the result. This step might not be necessary as many CMS faculties will automatically create the smaller images on upload.

*Photoshop people can achieve this even easier by use of a single master template with every product stored as a layer and use of actions to automatically export.


Part 5 continues with Image Orientation.

By Alanna at 2 Jun 2014, 14:30 PM