Awesome Mobile App Icons — Using Acorn and AppleScript for Clean and Tight Looking Apps

Posted by | July 12, 2013 | development, systems, technology | No Comments

If you’re like most app developers, dealing with mobile app icons and icon sets in general can be a tragic sink of time and effort as you hunt ingloriously around the web for the latest gimp-inspired set of icons if you are lucky ending up with a set that is at least consistent, flat-ish and not embarrassing.

Designers have their bag of tricks including the ability to custom-design icons, but this can be time consuming pixel pushing work that a lean startup just cannot afford. And some companies have invested in custom icons because of the critical nature of the icons to their product perhaps including highly domain-specific glyphs.

But for the rest of us, sometimes we just want quick, dirty, nice, and awesome.

Which brings us to … Font Awesome!

http://fortawesome.github.io/Font-Awesome/cheatsheet/

Basically you can have at it under the GPL with this set of clean, concise, internationally recognizable icons which have been conveniently and cleverly rendered as a font. So much like the anemic webdings of yore, the FontAwesome icon set is really a sweet “font” of icons. 🙂

[slider] [slide]http://starter.io/wp-content/uploads/2013/06/Screen-Shot-2013-06-12-at-12.15.54-PM1.png[/slide] [slide]http://starter.io/wp-content/uploads/2013/06/Screen-Shot-2013-06-12-at-12.56.34-PM1.png[/slide] [slide]http://starter.io/wp-content/uploads/2013/06/Screen-Shot-2013-06-12-at-12.14.34-PM1.png[/slide] [/slider]

If like most startups you are interested in capital efficiency then you know it can be a costly to purchase Adobe Suite for simple image tasks. You just need something simple to just get the simple job done.

For my taste, the Acorn Image Editor from FlyingMeat is a great choice. At about $30, I am still looking for things that I need that it cannot do and have yet to find anything. Great tool.
http://www.flyingmeat.com

So to combine the Font Awesomeness with your app, often you will require bitmaps (PNG files) for the icons you are using.

In the past, when I needed to automate image editing tasks, I used to use the Photoshop “droplet” scripting — which was always very powerful as it created an executable that would perform the automation — and this executable was itself scriptable. But after a short web search I found that with a dash of Automator and AppleScript, I am able to automate Acorn to create a Font-astic cache of production-ready icons in a variety of sizes.

After opening the FontAwesome cheat sheet, you can simply select the icon, copy, and paste it into Acorn. I used a 250pt font in a 256px square image. I leave it to you to be handle copying and pasting the icons you need from the cheat sheet into acorn. I found that using “Save As” to rename the icon file to the next icon (using a naming convention is super important!)

Find your rhythm with the copy and paste (alt+tab is your friend!) then you can expect to do this manual step in about 20 seconds per icon. That means 15 new icons for every five minutes of work, not bad because the rest of the process is automated from here!

When done creating your new acorn icon files, you should end up with a folder something like:


icon_facebook_dark.acorn
icon_linkedin_dark.acorn
icon_twitter_dark.acorn

The next step is to create an Automator script to make quick work of your new files converting them into a coherent and consistently clean set of new icon files for your application.

1. Launch Automator from LaunchPad/Other

2. Add the following built-in actions:

– Get Specified Finder Items
– Get Folder Contents
– Run AppleScript
3. Add the following code to your “Run AppleScript” action:


on run {input, parameters}

set sizes to {16, 32, 64, 128, 256}

repeat with size in sizes
repeat with fileAlias in input
tell application "Acorn"
set doc to open (POSIX path of fileAlias)

set newPath to (POSIX path of fileAlias)
set newPath to rich text 1 thru ((offset of "." in newPath) - 1) of newPath
set newPath to newPath & "_" & size & ".png"

tell doc
web export in newPath as PNG width size
close
end tell
end tell

end repeat
end repeat

end run

This Automator will Create your PNG files from a folder full of Acorn Images

This Automator will Create your PNG files from a folder full of Acorn Images

 

Anyway, I leave it to the reader for extra credit to handle output folders and other niceties. For now I’ve got a mobile app to build! Happy automating!

About John McMahon

John is a serial entrepreneur and full-stack developer. John is currently CEO of Starter Inc. a mobile and web development company, and is the founder of Humor Me Inc. maker of the Chukles consumer mobile humor app. John also currently serves as the CTO for MatanzasGroup, a Global Pharma Consulting Firm. John founded Extentech in 1998, growing it into a leading Web 2.0 spreadsheet tools vendor. In 2012, John sold his 100% stake of Extentech to Infoteria Corporation -- a publicly listed Japanese company. John has recognized expertise in startups, mobile and web development, open source, and cloud computing. John has been a contributor to Accounting World and has been interviewed and featured in stories on PandoDaily and Forbes.com.

Leave a Reply

%d bloggers like this: