Ten years ago PromoPilot founder, Eric Granata, published a Photoshop script that he produced to help automate the task of cropping and saving product photos on his personal website. Today we're adapting that content for PromoPilot. He told us we could. We've also updated the script to support PNG source files.
Online company store professionals spend a lot of time in Photoshop preparing images for e-commerce stores. Often, a lot of time is spent preparing product images – including 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:
- Front
- Back
- Profile
- Model
- 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
Automatically Crop and Export Product Photos with JavaScript
Note: While we prefer to keep code out of the materials we produce in the interest of keeping it accessible to industry technologists, it is important to note that you do not need to know JavaScript to use this script.
That said, if you are learning or are just curious, you open the script in a text editor to see how it works. You could even try tweaking it. We just ask that, if you improve it in some way, that you honor the Creative Commons license linked to at the bottom of this article.
Did you know that you can script many Adobe applications with JavaScript? It's quite cool. But why use scripting instead of recording a Photoshop Action? Well, in our case we needed a solution that was smarter than what an action could do. We needed to take into account the varying shapes and sizes of the source images, allow users to set the padding and crop sizes before processing, and save all of the files with a consistent naming convention to make it easier to prepare a batch upload CSV.
This article will not go into detail about how scripting Photoshop is done. There are far better articles on that subject. If you don't know JavaScript but are interested in learning, check out codecademy.com and work through their interactive course.
Download the Script
Finally, we're going to let you download the script Eric used to quickly crop and export product images. Here's how you use it:
- Download and unzip this folder.
- Open Adobe Photoshop.
- Run the script by selecting "File > Scripts > Browse..." and locating the PromoPilot Crop and Export.jsx file.
- Set your source folder – the photos you're going to process. Source images should be .jpg or .png and have the products already isolated on a white or transparent background.
- Set your output folder. This is where your processed images will be saved.
- The script will output up to three images for each source image. These can be used as your default, thumbnail, and zoom images. You can the choose the width of each output. The resulting images are square.
- Set your desired Padding and Quality and press OK.
The processed images will appear in your output folder. Each image file retains the original file name and appends it with the pixel width numbers that you configured.
Your images are saved with the original file name and a suffix for the image size you set previously. Use this script to output thousands of images quickly. You'll find it works best for photos where the product has already been isolated on white. We hope you find it useful. If you do, please let us know and share this post with your friends and co-workers!
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.
