Multi-resolution images, Photoshop, and ExtendScript

Extendscript editor

In the initial version of the upcoming Update conference web site, I'm optimizing for desktop, iPad, and iPhone-tier phones. This means that I have to create five different versions of nearly every image. One for the desktop size, one for 320px wide screens, one for 480px wide screens, and two for the Retina (@2X) resolutions. Of course, saving all those images by hand would suck. And it's not enough just to resize the images and export them for web since, when resized, I need to unsharp mask them to make sure they're not blurry.

I initially thought I could record an action to do this, but the Photoshop file I have for the graphics has dozens of layers. I thought I could use the Layer comps to files… script that ships with Photoshop but – while it let me export layer comps to files – it wouldn't let me add custom actions in the middle of the process (in this case to unsharp mask the image once it was resized).

So, I thought I'd bite the bullet and write my own script. The process was surprisingly painless. Adobe have done a rather awesome job with ExtendScript. Using JavaScript, and the Adobe Photoshop CS5 JavaScript Reference (PDF), I was able to whip up a quick script that cycles through the range of image sizes I need to support, unsharp masks all the layers, then activates each layer comp in turn and saves it out to its own file.

Here's the script:

It probably won't be too much use to you in exactly its current form but you can easily modify it to suit your needs and it might just get you to start playing with ExtendScript – it's like Actions on steroids. Enjoy!

Comments