Ionic: Icon and Splash Screen Automation

  • January 29th, 2016

If you’ve ever put together a mobile app – you know how many different icon and splash screens you may have to produce. Take a look at the iOS Human Interface Guidelines, for example. Here’s a quote:

For the best results, enlist the help of a professional graphic designer. An experienced graphic designer can help you develop an overall visual style for your app and apply that style to all the icons and images in it.”

No offense to designers but from experience, I know this can sometimes be a huge headache. For example:

iOS Splash Screen Formats

I was excited to get back my splash screens from the designer. But hell, wait, I’m missing a few formats! I guess now I’ll email them back and wait another day, week, month or even a year.

Automation – to the rescue

If you’re using the Ionic Framework, you’re in luck as far as saving a ton of time and energy.

The good people over there have added an awesome feature into the CLI that you may not know about – icon and splash screen automation.

So, instead of waiting for the designer to get back to you with those missing formats, you can generate all your icons and splash screens off of one image each.

The steps are so simple, it’s refreshingly hilarious:

1. Download the template PSDs they have kindly provided: Icon and Splash Screen.

2. Create your designs, and save as your icon as icon.png, icon.psd, or icon.ai in the resources directory at the root of the Cordova project.

3. Do the same for your splash screen – save as splash.png, splash.psd, or splash.ai in the same resources directory.

4. Run ionic resources in your command line. The splash screens and icons will be generated in seconds.

And that’s it. Now, this may not always be a suitable replacement for professional-level design. But, when you are looking to put together an app at the prototype level, I can tell you it does the trick.

Tags: , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *