A Simple Swift iOS App from Start to Finish - Creating App Icons with InkScape

Introduction

This is part of a series of articles describing the creation of a simple iOS app. A complete list of the articles is included in the first part A Simple Swift iOS App from Start to Finish - Introduction.

I have set up a web site for the finished app at http://DaysWithoutThings.com and you can download it free directly from the app store:




Xcode assigns its default icon to all new app projects. The default icon is a pattern of lines and circles on a white background. Setting a custom app icon is not essential until the publication stage. However  I am going to add it now as I will be seeing it throughout the development of my app and it adds a sense that it is a complete app and not just an example.

Specifying the image sources

The General tab of the main project information page contains a property that specifies the source to use for the app icons.

By default the source is set to AppIcon. This name refers to the predefined section within the Images.xcassets file that was created as part of the project.

AppIcon

When I select just the AppIcon section it displays empty place holders for 12 images.  Under each place holder is description of what it will be used for, a multiplier (either 1x, 2x, or 3x), and a point size (pt).

Icon dimensions

App icons are square so the image size required to fill each place holder needs to be its point size times its multiplier in both dimensions. For example the first place holder is 2x 29pt so the actual image needs to be (29pt x 2) by (29pt x 2) which is 58x58. 
Xcode will allow you to set a place holder to a different sized image. However the image will not actually be used when you run your app.

InkScape

I’m going to use InkScape (http://www.inkscape.org) to create my images. InkScape is an open source vector drawing program. Xcode cannot use the SVG images InkScape creates directly. However InkScape can export to the PNG image formats that Xcode does support. 
InkScape can scale an image when it is exported. However it is limited to only scaling to an image size that matches the aspect ratio of the original image. As the icon image will be square  InkScape can export a single SVG version of the icon image to all the required resolutions.

The OS X version of InkScape runs on top of an X server. Instructions to install an X server are included on the download page (http://inkscape.org/en/download/mac-os/). 
If you do download InkScape OS X will prevent it from running because it is an unregistered app. To allow it to run Control click the app and select open. That will still give you a warning that it is unregistered but it also gives you a choice to open it anyway and it will remember your choice and not prompt you again.

The first time InkScape runs it configures itself and this may cause a long delay before it opens its window.

Creating the icon image

I’m going to resize my vector drawing to 100 points x 100 points using File - Document Properties and setting a custom size. Because InkScape runs in an X session its main menu is attached to its own main window. The menu bar at the top of the screen is actually the X server's menu.

I have no artistic ability at all so my icon is just going to be a simply drawing of a sunny day which sort of relates to the theme of the app.
All I’m going to do is draw a green rectangle for the ground, a blue rectangle for the sky and a yellow circle for the sun.

I’m just going to draw them in roughly the right positions and then use the XML editor (from the Edit menu) to size and position them exactly.

I’m going to make the sky fill the top 3/4 of the icon and the ground fill the last 1/4 by editing their x, y, width, and height properties.

Sky

Ground

Sun

I’m going to size and position the sun using its XML properties. cx-cy are the coordinates of the center point of the circle and rx-ry are the horizontal and vertical radii.

Exporting the image

I saved my finished image in InkScape's native SVG format and am now ready to export the image to the PNG bitmap files I need for Xcode.

The icon image sizes required for Xcode 6 are:

Point Size	Multiplier	Dimensions
29	1x	29x29
29	2x	58x58
29	3x	87x87
40	1x	40x40
40	2x	80x80
40	3x	120x120
60	2x	120x120
60	3x	180x180
76	1x	76x76
76	2x	152x152

As 3x 40 and 2x 60 are both 120x120 I only need to export the icon to a total of 9 different resolutions.

Clicking ‘Export Bitmap...’ on the File menu opens the export window.

I’m going to use the same process to create separate icon files for each of the required sizes.
In the Export Bitmap window I’m going to change the width and height in the ' Bitmap size' section to the size I need. The height and width fields are updated automatically whenever the other is changed to maintain the same aspect ratio. The change only occurs after the field that has been edited loses focus.

Next I’m going to specify the unique file name for the icon based on its size by clicking the browse button. InkScape exports to PNG format and will append the .png extension is it is not already included in my file name.

Clicking save only ‘saves’ the filename to the export window. To actually create the file I have to then click the export button.
I can use Get Info in Finder to confirm that the exported file is the correct format and size.

I will then repeat the process for all the other sizes.

Importing the icons into Xcode

I could import the image files into Xcode and then drag the imported versions to the correct place holders. However this requires importing some files multiple times to fill place holders that require the same resolution. It is much easier to drag and drop the images directly from Finder.

Once I’ve done that I can run my app in the emulator and use the 'Home' option on the Hardware menu to see that it is now using my icon. 

The new icon is also used with in Xcode in the Scheme toolbar:

Wrapping up

I am going to run my app using a few of the other simulators to check that the icon is working at different resolutions. Once I am sure it is all working I will commit the changes I have made to the Source Control repository.

In my next article  I will move on to customizing the launch screen.

Next:       A Simple Swift iOS App from Start to Finish - Customizing the Launch Screen

Previous: A Simple Swift iOS App from Start to Finish - Refactoring the ViewController's Name