iAchieved.it

Software Development Tips and Tricks

By

Managing iOS Application Icons


Editors Note: This article was originally published on January 26, 2014. The included automator script needs to be expanded to include icon dimensions for the latest lineup for iPhones, but you can easily do that with OS X Automator.

You might be interested in checking out our new post on quickly creating Apple Watch icons!

I will admit that I’m a terrible graphic artist. Any icons, logos, graphics, etc. coming out of iAchieved.it LLC most certainly did not come from me. Yet, I do have to deal with taking the artwork created for us and importing it into our iOS applications, and although it has gotten easier, Apple hasn’t yet made it trouble-free. Trouble-free in my opinion would be supplying one file (the original master) to XCode and letting it take care of the rest. But, we aren’t there yet so let’s look at the next best thing.

In this blog post I’ll look at how to take your application icon and create all the right files to import into your XCode project. Now, there will be a few assumptions. They are:

  • you have an original 1024×1024 PNG file of your application icon
  • you are using XCode 5 and are ready to explore the joys of Images.xcassets
  • you’ve at least heard of OS X Automator

If you don’t have a 1024×1024 PNG of your application icon, I suggest you go get one. You will at least need it to create your application entry in iTunesConnect. Every other year Apple seems to be raising the resolution that the AppStore icon must be in. Suffice it to say, this year its 1024×1024.

As the iPhone and iOS operating system have evolved over the years, so have the icon sizes required in your application bundle. On a “non-retina” iPhone (such as the 3GS), you could get by with supplying a 57×57 PNG and be done with it. Unfortunately on an iPhone 4 (retina display), the 57×57 PNG looked like, well, less than crisp. So, you had to begin bundling a 114×114 (note that 114 is 57 times 2) icon with your application. If you read up on Apple’s documentation you could supply on a single icon labeled @2x that was 114×114 and the OS would display the image correctly regardless of the phone.

With iOS 7 and XCode 5 it gets even crazier. You can supply all of the following dimensions for your application icon:

  • for an iOS 7 launchpad icon, supply a 60pt icon in 2x resolution (that is 120×120)
  • for an iOS 5 or 6 launchpad icon, supply a 57pt icon in 2x resolution (that is 114×114)
  • for an iOS 7 Spotlight icon (the miniature icon that displays when you search for an application), supply a 40pt icon at 2x resolution (that is, 80×80)
  • for an iOS 5 or 6 Spotlight icon, supply a 29pt icon at 2x resolution (58×58)
  • for an iOS 5, 6, or 7 Settings icon, supply a 29pt icon at 2x resolution (58×58)

And for any phone that has a target earlier than iOS 7 you have to supply 1x versions for the Spotlight and Launchpad icons, 29pt and 57pt, respectively. Yikes!

I don’t know about you, but I get tired of resizing icons and all that. So, before we get to using Images.xcassets, let’s take a look at an Automator script that we can add to our Mac as a Service. This will allow us to take our source application icon (the one at 1024×1024 resolution), and generate all of the little icons we need. Then its drag-and-drop into XCode and done.

Enter Automator, and better, enter Automator Services. We’ll save how to create Automator scripts (actually, I think they are called “workflows”) for a later date. For now, we’ll just give you our Automator Service Workflow CreateXCodeIcons. To get it, simply download CreateXCodeIcons.zip, unzip, and then right-click on the CreateXCodeIcons file. The application is currently unsigned, so you will get a prompt requesting whether or not to open a file from an unknown developer. Click Open.

A prompt that looks like this will ask whether or not you want to install the CreateXCodeIcons service.

want_to_install_service

Click Install, and now you will have a new menu item in your Finder called CreateXCodeIcons.

workflow_installed

Okay, now take your 1024×1024 icon (which in our screenshots we’ll call icon.png), place it in its own folder (this is important to keep everything organized, otherwise the Service will scatter icons in whatever location you had your original in) and right click on it, scroll down to Services and select CreateXCodeIcons. The automator service will begin creating copies of the original and resizing them to the dimensions that will be loaded into your XCode project.

ding_finder_icons

Notice the original icon.png followed by

  • 60pt@2x.png
  • 57pt@2x.png

and so on. These are the files that you will drag into the XCode Images.xcassets folder to provide icons for your application. The names we created are arbitrary, when you add them to your XCode project they will actually be copied and embedded into the project. But, there is a method to our madness. The names line up with where you will place them on the AppIcon canvas. For example, the 60pt@2x.png icon would be dragged to the location that indicates “2x 60pt”, as shown below:

ios760pt

Adding Icon Assets to Your XCode Project

Now that we can easily create all of the icons we need for our application, let’s look at adding them and some of the nuances involved. For a quick start, download our ding project from GitHub. Select the master branch which does not contain any app icon assets.

Open the XCode project, select the ding target, and go to the General tab of the target. Scroll down to the section that says App Icons and notice it probably looks like this:

asset_catalog_panel

To get started with using an asset catalog for your app icons first select the text that says “Don’t use asset catalogs” and then you must click on the button that says “Use Asset Catalog”. A dialog indicating that there currently isn’t an asset catalog will pop up, and you will want to click Migrate.

migrate_app_icons

You will now see a new folder in your project named Images.xcassets.

new_images_xcassets

Once you’ve added the Images.xcassets folder you will want to add a LaunchImage as well, otherwise you will receive the error Asset Catalog Compiler Error: None of the input catalogs contained a matching launch image set named "LaunchImage".. This is simple to fix: click on the Images.xcassets folder and then beneath the list (of one) that contains AppIcon, click the plus sign and choose New Launch Image. The asset catalog compiler error will go away.

You can build the application at this point, you will just get the default iOS “pencil-sketch” icon. Let’s add some icons. Take the 60pt@2x.png icon that was generated and drag-and-drop onto the AppIcon canvas in the spot for iPhone App iOS 7 60pt. If your target is for iOS 7.0 and higher you can stop right here. This is the only icon you actually are required to supply, but since we already generated the Settings and Spotlight icons, you might as well add them, they are highly recommended in the Human Interface Guide from Apple.

iOS 6 and Earlier

By default our ding target is set to deploy to iOS 7.0 and higher. It turns out that iOS 7 is available only for iPhone 4 and up, and those models do not use a 57×57 “low-resolution” icon. However, if you want to target the iOS 6, that OS runs on the iPhone 3GS which does use the lower resolution icons. To see what happens when you don’t provide all of the required icon assets for your Deployment Target, go back to the Deployment Info panel of the ding target application and change 7.0 to say, 6.1. XCode won’t recognize right away that you haven’t included all of the proper icons, but if you then run the application (or build it), you will see a warning along the lines of A 57x57 app icon is required for iPhone apps targeting releases of iOS prior to 7.0, as well as a warning similar indicating that a @2x icon is required. To fix, drag-and-drop the 57pt@2x.png and 57pt.png icons onto the AppIcons canvas and XCode will automatically create entries for the devices/targets they support. The final canvas should have these entries:

final_icons

Remember, Apple recommends you supply icons for Settings and Spotlight, and the CreateXCodeIcons service from above creates the right icons for these too!

Conclusion

Managing all of the various dimensions of application icons required for an iPhone application can be a real pain. Fortunately, we can automate and streamline a lot of the drudgery. Using the OS X service CreateXCodeIcons and the Asset Catalog feature of XCode 5 projects, app icon management overhead can be kept to a minimum.

The final ding project, with application icons added, can be viewed by switching the GitHub ding project to the with_app_icons branch.

By

Creating Attractive Flat Buttons on iOS 7

Update! – If you are interested in learning more about Apple’s new Swift programming language, we have a version of using FlatButton with Swift over here. Enjoy!

Well, it’s certainly been a while since our last post.  We’ve been busy working on a variety of projects, but things have slowed down a bit as the 2013 holiday season approaches so here we are with a simple tutorial on creating attractive “flat” buttons on iOS. For the impatient that want the code, everything below is in an XCode project hosted on Github.

While many of our tutorials assume you’ve done no iOS programming in the past, this one will assume you are familiar with how to create a new iOS application, add 3rd-party frameworks and code, etc.  We’ll be using Jason Everett’s FlatButton class, which you can download from Github.  You only need to include FlatButton.m and FlatButton.h in your project, but make sure and link to the QuartzCore framework.

After creating your project and including FlatButton.h and .m (and link to QuartzCore!), add the following to your ViewController.m file:

#import "FlatButton.h"

and

-(void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  UIButton* flatButton = [[FlatButton alloc] initWithFrame:CGRectMake(20,350,280,40)
                                             withBackgroundColor:[UIColor colorWithRed:0.521569
                                                                                 green:0.768627
                                                                                  blue:0.254902 alpha:1]];
  flatButton.layer.cornerRadius = 10;
  [flatButton setTitle:@"Sign In" forState:UIControlStateNormal];
  flatButton.titleLabel.font = [UIFont fontWithName:@"Avenir-Black" size:20.0f];
  [flatButton addTarget:self action:@selector(flatButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:flatButton];
}

-(void)flatButtonPressed:(id)button {
  NSLog(@"flatButtonPressed");
}

A brief discussion on what’s going on here. First, rather than drag-n-drop of your button from XCode onto the view controller canvas, you’re programmatically creating the button. FlatButton inherits from UIButton so you can assign directly to a UIButton*. When creating UI elements programmatically you have to explicitly set things that XCode did for you when using NIBs or storyboards. For example, above we declare the where and what of the button layout with CGRectMake, as well as the details of the background color of the button.

To add additional appeal we use the cornerRadius attribute of the UIButton‘s layer object. Setting this to 10 as shown above will give the button’s corners a nice rounded effect.

Finally, we set the font name and size of the button label, add the method that we want called when the button is pressed (UIControlEventTouchUpInside), and then add the button to our view controller’s view!

flatbutton

That’s really all there is to it. The “hard part” is programming the button placement on an iPhone 4 vs. an iPhone 5 (perhaps another blog post or we’ll extend this one). Everything else is handled nicely by the FlatButton class. For more details on FlatButton see Jason Everett’s blog.

Don’t forget you can follow us on Twitter, where you’ll get the latest updates on our iOS tutorials.