Fireworks Mobile Design Tip: Batch Processing app icons in Fireworks

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

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.

Batch Processing

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.

  1. Open Fireworks.
  2. Select File > Batch Process.
  3. Browse to a folder containing the images you want to scale.
  4. 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

  5. Click Next.
  6. In the Batch Options window, select the following commands and click the Add button to move them to the Includecolumn.
  7. 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.

    In the Batch Options window, you select options and click the Add button to move them to the Include column

  8. Select the Scale command. Options for scaling appear at the bottom of the window.
  9. 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.

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

    Renaming the files is a good idea so you can differentiate one set of icons from another in the Mac Finder or Windows Explorer

  12. Select the Export Command.

    The Export option gives you complete control over file format and compression

    The Export option gives you complete control over file format and compression

  13. 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.
  14. 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, 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.

Conclusion

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.

Custom Commands appear at the bottom of the Commands menu

Custom Commands appear at the bottom of the Commands menu

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.

The completed icon set

The completed icon set

2 Responses to Fireworks Mobile Design Tip: Batch Processing app icons in Fireworks

  1. Ylva says:

    Hi, I have a folder with over 1000 icons stored in .eps and .png and all icons are stretched to the top/bottom and totally fill the space. I need these icons with a set invisible frame of space around each of them. Approx 10-20 pixels on a .png that is 128×128. Is there a way to resize (shrink) multiple images so you don’t have to resize them one and one, which is extremely timeconsuming? Best Y

    • Jim Babbage says:

      EPS files might be a bit of a challenge, only due to the potential lack of support within FW. But crating the command is simple enough:

      Note: there is no percentage option for this type of thing, so all your icons must be the same original size.

      1) Open any of the files (try the EPS to be sure it works)
      2) Adjust the canvas size to suit
      3) In the History panel, save that step (it’ll be a crop) as a Custom Command
      4) Go to File > Batch Process
      5) Add the fiels you want to batch and click Next
      6) In the Batch Options, open the Commands list on the left and locate your crop command
      7) Click the Add button
      8) I would also recommend adding both a rename function and an Export function to the Batch Process. Customize both functions as needed.
      9) Click Next
      10) I recommend saving the batch operation as one Command, by choosing Save Script.
      11) Run the batch process

      Hope this helps!