In this post, we’ll look at how to batch process those larger images into three different sizes, and how to automate that process for future work. The original icons were created quite large – 244 pixels square, to be exact. This made it easy to be very detailed when creating the look of the icons. And while this is useful from and editing and creative perspective, the project requires three sets of smaller dimension icons for an Android application. Well, Fireworks excels at this type of workflow and produces very small files to boot.
I’ve written about batch processing a few times at Community MX, but it never hurts to look at things a second time.
Here’s the process I went through to batch process these 8 separate icons to 3 sizes – 72px, 48 px and 36px. Now, this may seem like a lot of steps BUT, the steps can be saved as custom commands, so the next time you need to batch process the files to a certain dimension, it’s only a matter of a couple mouse clicks. From a learning perspective, this means students get a solid handle on the work involved and learn how to speed the process up for future projects.
NOTE: Batch processing scripts can be created even if you don’t want to process any images right away, but I’ll walk through the workflow as if I’m going to scale down these 8 images to 72px, rename them and re-export them as PNG 32 files.
- Open Fireworks.
- Select File > Batch Process.
- Browse to a folder containing the images you want to scale.
- Select the images in the browse window and choose Add. Make sure to deselect the option to include currently open images.
- Click Next.
- In the Batch Options window, select the following commands and click the Add button to move them to the Includecolumn.
- Select the commands in the Include window and use the arrow icons in the upper right corner to change the order of the Commands as follows: Scale, Rename, Export.
- Select the Scale command. Options for scaling appear at the bottom of the window.
- Choose Scale to Fit Area and set the Height and Width to 72 pixels. This forces the scaling to be proportional. Not an issue with our square icons, but it is worth noting if you have images of different aspect ratios.
- Select the rename command and choose Add Prefix (you can use whatever option you want in this command, so long as it makes sense to you.)
- Type in a suitable prefix, like “72px_” without the quotes.
- Select the Export Command.
- Change the settings to either, Use settings from each file, or Custom. As our files are already PNG 32, it makes sense to pick the former, but if you wanted to export the images as jpegs, or GIFs, you might want to pick Custom.
- Click Next.
Saving the script for future use
On this final screen, you can choose a location for the exported files and also save the script. Saving the script means you can access it anytime, without having to go through all the previous steps. A great way to speed up your workflow.
- For Batch Output, choose same location as original. We’ve added a prefix to the batch export so the files can be written to the same location. If you don’t rename the files, you may overwrite your originals, so be careful!
- Choose Save Script. On the Mac, browse to your user name > Library >Application Support >Adobe > Fireworks CS5.1 > Commands. This will make the script accessible from the Commands menu in Fireworks, so you can access it any time. On Windows 7 the path is C:\Users\USERNAME\AppData\Roaming\Adobe\Fireworks CS5\Commands.
Output and Backup options
If you prefer, you can choose a custom location to store the resulting batched files, but this may cause issues with the saved script command, if that custom folder can’t be found by the script. Test this out to see if it works for you.
The other option is enabling the Backups feature. If you are saving to the same location as the original, this forces Fireworks to move the original files into a sub folder called Original Files, so even if you didn’t use any renaming functions, your original images would be safe.
Once the script has been saved to the proper directory, you will be able to easily access it from the Fireworks Commands menu. By default, you will find the command at the bottom of the Commands list, appearing with the name you used for the file itself.
So next time your students need to batch process a bunch of images to 72 pixels wide or high, they won’t have to go through all those steps again. All they will need to do is choose the images to be processed!
Now that you’ve walked through the process with your class, challenge them to create additional custom commands to process their files to 48px and 36 px. Remind them to adjust the file renaming accordingly and to save each script, so they can access them whenever they need to.
NOTE: It’s worth mentioning to your students that they can also access the Batch Process Command panel from within Adobe Bridge. Just select the files (other than RAW files) in Bridge, then choose Tools > Fireworks > Batch Process. In fact, Bridge is integrated with several Adobe products, including Photoshop, Illustrator and InDesign.
One caveat though; depending on how your school’s lab computers are imaged, custom commands may be removed when students logout, so I’d recommend you test this out prior to the walk-thru, or have a quick chat with your school’s IT department. Ideally, have students create back ups of the scripts on a Flash drive. If students are doing the work on their own personal systems, this won’t be an issue.
Below is one set of icons, including the original, flat file.