TerrenceRyan.com

I'm a 35 year old redhead geek from Philly.
I'm currently a Developer Evangelist for Adobe.
Also the author of Driving Technical Change

Entries Tagged as Fireworks

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 512x512 pixels, to 29x29 pixels. The automatic approach will have you create an icon at 512x512 and size down to each size you need until you hit 29x29 pixels. But 512x512 is so much more room to work with. You could add extra text, more graphics, or detail. At the other end, 29x29 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:

 

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.

Categories

Monthly Archives

Tag Cloud

coldfusion web development flex coldfusion builder appearances squidhead coldfusion builder extensions higher ed html5 flash builder air mobile android driving technical change adobe apptacular running a coldfusion shop adobemax06 movable type flash catalyst flash css blackberry adobemax07 adobemax08 hero finicky adobemax09 holy crap i’m a mobile developer centaur phonegap basecamp cfc whichelement unfuddle motorola metablog irrational characters ios git evangelism edge devices code reviews ant wharton subversion security rhino philly philadelphia multidevice knowledge@wharton jobs javascript java browserlab adobemax10 adobe tv unfuddlecfc svnauth.cfc semantic html semantic html responsive web design qnx nlb linux jquery mobile it github flexorg fireworks eclipse dreamweaver apps apple adobemax11