I recently wrote a post about point-and-shoot product photography - a task many web designers will perform again and again. Taking photos is one thing. Getting them ready for the web is another.

1) Original files and retouching. Always duplicate your original image before you begin adding details and correcting flaws, and work with the highest quality files available. Even though your images will probably end up small and low-res, you should keep a full-size, high-res version handy. You never know when you’ll need it, but I can assure you that when a magazine asks for a print-ready version, you don’t want to have to start from scratch.

2) Signature thumbnail treatments. Adding some type of treatment to your thumbnails can anchor them in the massive grid common to most e-commerce sites. A border or a very (very!) subtle drop shadow will keep your thumbnails from seeming as if they’re floating in space, and will also frame cropped images.

Shanalogic.com uses a fine green line produced in CSS to create a signature look that both suits her brand and grounds the thumbnails.

The trick here is to keep your treatments as simple and subtle as possible. Make you’re your treatments are consistent with your brand and the overall appearance of your site. Color can go a long way in this regard. Your treatments should be really easy to reproduce, so I’d recommend using a saved Photoshop style or action. (Create your own, because the defaults are scary.) CSS is another option I would suggest. If you go that route, you won’t have to alter every individual thumbnail should you redesign your site or update your color scheme.

3) Optimization. While it’s true that more users than ever before have high-speed connections, many still arrive at e-commerce sites by way of a dial-up connection, cell phone, or some other slow pipe. Still, you need high quality images if you want to display any sort of detail, so strike a good balance with a JPEG setting of about 60-70. Save the setting that you feel works best for the majority of your images.

In Photoshop’s Save for Web and Devices dialog, it’s easy to save a setting.

4) Automation. While your first foray into e-commerce may only require a handful of images, you may soon needs hundreds, if not thousands more, so if you want to have time to eat or sleep, you should start thinking about automation at the outset. Create Photoshop actions for your image treatments, common sizing routines, and optimization procedures. You can even send your actions to others if they’re working on the same project.

Link your actions to hot keys, and you’ll save yourself loads of time.

Whenever possible, apply your actions using a batch process - File > Automate > Batch - in Photoshop. When you process in batches, you’re applying your action to a whole slew of images at once, but each is saved individually with a logical file name. Web designers don’t often get to use this feature, since most web graphics require individual attention. E-commerce shots, on the other hand, are perfect for batching.

As you can see, it’s all about achieving good results with minimum effort, for as tedious as this work may be, it can make or break an e-commerce site. Your clients will appreciate a job well done.

This entry was posted on Thursday, November 8th, 2007 at 2:18 pm and is filed under Photography, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.