In the previous post, we talked about using Fireworks to create multiple application icons for an Android device, and then how to take those multiple icons and export them out as individual flat files.

In this post, we’ll look at how to batch process those 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.

Batch Processing

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. And let’s face it, from a business perspective,  we’re all hoping we build more than ONE mobile prototype.

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.

  1. Select File > Batch Process.
  2. Browse to a folder containing the images you want to scale.
  3. Select the images in the browse window and choose Add. Make sure to deselect the option to include currently open images.

    Selecting files for batch processing

    Selecting files for batch processing

  4. Click Next.
  5. In the Batch Options window, select the following commands and click the Add button to move them to the Include column.
  6. 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.
  7. Select the Scale command. Options for scaling appear at the bottom of the window.
  8. 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.

    Scale to fit area maintains an image's aspect ratio

    Scale to fit area maintains an image's aspect ratio, and bases size on the longest dimension.

  9. 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.)
  10. Type in a suitable prefix, like “72px_” without the quotes.
  11. Select the Export Command.
  12. 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.
  13. 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.

  1. 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!

    Choosing destination folder and saving the script for future use

    Choosing destination folder and saving the script for future use

  2. 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, the 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.

Conclusion

Once the script has been saved tot he 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 you need to batch process a bunch of images to 72 pixels wide or high, you will not have to go through all those steps we done in this tutorial. All you will need to do is choose the images to be processed!

From this point, you can go ahead and create additional Custom Commands that process your files to 48px and 36 px. Remember to adjust the renaming accordingly and to save each script, so you can access them whenever you need to.

Jim's home on the Web is proudly powered by WordPress and the Theme Adventure by Eric Schwarz
Entries (RSS) and Comments (RSS).

Jim's home on the Web

My thoughts and musings about photography, teaching and technology