Creating Mobile Application Icons with Fireworks

One of the many issues you have to manage when creating mobile applications is the myriad number of icon sizes you have to deal with. There’s a great summary of them at SavageLook.com.

As a developer, your first instinct is that there has to be some way of automating this. In fact, one of my coworkers, Piotr Walczyszyn has created one of these.

The difficulty with this approach in my opinion, is that you end up with suboptimal icons. For my current cross screen applications, I need to make icons that range in size from 512×512 pixels, to 29×29 pixels. The automatic approach will have you create an icon at 512×512 and size down to each size you need until you hit 29×29 pixels. But 512×512 is so much more room to work with. You could add extra text, more graphics, or detail. At the other end, 29×29 is so small, words aren’t able to fit and be legible. Often you want to just have initials or one letter. Often you have to change the font to make it legible at that size even for one letter.

The best solution would be to have individual files for each icon. But that seems like a lot of pain. I’m sure people do it. I’m sure I do not want to be one of those people.

So I want to have one file I need to edit to create my icons, I want to be able to have multiple resolutions of icons, and have each one be different, if needed. But I’d also like to just cut and paste and resize if need be.

My solution: Fireworks and slices. I made a template that has guides for all of the icon resolutions that I currently support. I added in slices, and named them to get good file names via the export. Then I just export the slices to get the icon files.

To use:

  • Download the template
  • Place all your icons on the template
  • Chose File -> Export from the menu
  • Change Export to “Images Only”
  • Deselect “Include Areas without Slices”
  • Export

 

Now I have one file to tweak when I have to tweak icons. I can tweak all of the icons separately. I can get all of the icons out in one export command. Exactly what I wanted, good and fast.

Let me know if the template helps you guys out at all.

2 thoughts on “Creating Mobile Application Icons with Fireworks

  1. Bobby, if it works for you, great. But for me, that still has the inherent problem of just being a automatic scaling, and not a tweaked scaling of all of the icons.

    Like

Leave a Reply to Bobby Rafferty Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s