Eric Granata

  • Blog
  • About
  • Birbs
  • Search
crop_export.png

Automate Product Photos with JavaScript and Photoshop

April 19, 2014 by Eric Granata in Automation, Graphic Design, Company Stores

I spend a lot of time in Photoshop preparing images for e-commerce stores. The bulk of the work done involves cropping and saving images at different sizes. That might not sound so bad, but consider your typical t-shirt product which might include the following images:

  1. Front

  2. Back

  3. Profile

  4. Model

  5. Lifestyle

Five images. Okay. But this shirt comes in 6 different colors so we're going to bump that up to at least 10 images for this product. Oh, but our store requires each image in three sizes for the thumbnail, default and zoom on the product detail page. That's 30 images for one product. Start putting together images for a catalog of a few dozen items and you can see that this may take an afternoon. The solution?

Automatically Crop and Export Product Photos with JavaScript

Did you know that you can script many Adobe applications with JS? Awesome! But why would I use scripting instead of recording a Photoshop Action? Well, I needed a solution that was a little smarter than that. Something that would take into account the varying shapes and sizes of my source images, let me determine padding and crop sizes on the fly, and save all my files with a consistent naming convention.

I'm not going to go into detail about how scripting Photoshop is done. There are far better articles on that subject. I am going to encourage you to keep JavaScript in mind, however, when you're regularly faced with repetitive tasks in Adobe Creative Suite. If you don't know JavaScript, check out codecademy.com and work through their interactive course.

 Download My Script

Finally, I'm going to let you download the script I use to quickly crop and export product images. Here's how you use it:

  1. Download and unzip this JSX document.

  2. Place the document in your Scripts folder. On my Mac it's at Applications > Adobe Photoshop > Presets > Scripts

  3. Open Photoshop and execute the script by choosing File > Scripts > crop_export

  4. Set your source folder (the folder with all your images needing processed)

  5. Set your destination folder (where you want the cropped images to be saved)

  6. Set your image dimensions for the product, thumb and zoom image. They'll be cropped square.

  7. Set your padding (the number of pixels you want between your product and the edge of the image)

  8. Set your JPG quality (75 works for me)

  9. Click OK and watch as the script crops and saves a whole bunch of images for you!

Your images are saved with the original file name and a suffix for the image size you set previously. I've used this script to output thousands of images. You'll find it works best for photos where the product has already been isolated on white. I hope you find it useful. With that in mind, you may find room for improvement. If you do, please let me know and share alike!

Crop Export Photoshop Script by Eric Granata is licensed under a Creative Commons Attribution-Non Commercial-Share Alike 4.0 International License. Based on a work at http://www.ericgranata.com. Permissions beyond the scope of this license may be available at http://www.ericgranata.com.

April 19, 2014 /Eric Granata
Automation, Photoshop, Product Photos
Automation, Graphic Design, Company Stores
  • Newer
  • Older

Disclosure: This is the personal website of Eric Granata who may receive compensation from the companies whose products he writes about. Eric uses each product that he links to and will only endorse those that he feels confident in recommending. This site is independently owned and operated. The opinions expressed herein belong solely to Eric Granata.