Like people judge a book by its cover, people judge an app by its icon. I met with Liz Myers, a UX designer focused on mobile app projects out of London, and we were talking about this very thing. It came to light that while we’ve covered the importance of great icons for first impressions, monetization and app submission, we haven’t gone more deeply into the process of creating icons.  Many app developers don’t make great icons and once they have one, they don’t have a good tool chain and art pipeline for getting the range of sizes needed.

Liz has made a wonderful 20-minute tutorial and set of tools that I’d like to share with you now. The first two videos cover creating icons. These can be used to launch any kind of app or game and they can also be used for buttons and menus inside your app. The third video covers exporting those icons to all the proper sizes needed. In fact, her tool will take one icon and export for all of the fire devices in one click. So, you can start from scratch with the “Setup” video or skip to the “Export for Devices” video if you’ve already made an icon.

Thanks to Liz for this tutorial. You can learn more about Liz and her upcoming book on making app publishing easier, “appGRAFIX”, at www.myersdesign.com.

@PaulCutsinger

Getting Started
 

1. Download/install Illustrator CC 2014 (FREE trial): http://www.adobe.com/downloads.html.
2. Download templates & scripts: http://myersdesign.com/app-icons-101
3. Make a new directory for your icons and place the two .ai files inside.
4. Place AMZN-FIRE-EXPORT folder in: Illustrator > Presets > Scripts directory:
   /Applications/Adobe Illustrator CC 2014/Presets.localized/en_GB/Scripts/AMZN-FIRE-EXPORT/
5. Restart AI and view File > Scripts > AMZN-FIRE-EXPORT to see the new scripts within AI.
6. Open Amazon-Fire-Create.ai. Well done! You’re ready for the first video.

Setup

In this video, Liz will show you the templates and scripts she uses to batch-produce all app icons for Fire Devices in just one click! She will give you a brief overview of the process, as well as help you organize the workspace in Adobe Illustrator CC.

AppIcons101 Part1of3 from Liz Myers on Vimeo.

Making Icons

In this tutorial, Liz will dive into the art and science of making easy app icons for a wide range of screen sizes and pixel densities. By leveraging just a few tools and techniques, she shows you how to combine a variety of shapes to form recognizable glyphs - without actually drawing! Along the way she also shares her favorite tips and shortcuts to help you “see” solutions and keep ideas flowing.

AppIcons101 Part 2 of 3 from Liz Myers on Vimeo.

Export for Devices

In this video, Liz will use a handy script to produce and export app icons for all Fire devices in seconds! Also included is a demo of how to export app icons in three separate sizes: Large, Medium, Small - for those who want to fine tune subtle details of their app icons at various sizes.

AppIcons101 Part 3 of 3 from Liz Myers on Vimeo.