If you are new to iOS app development, then take a look at my first foray into Swift development. Despite the rough start, I did build an app that’s selling on the app store. It’s given me enough extra income to buy a double espresso every 3 or 4 days (hey I’m not complaining)… could be worse.
I chose to use Sketch for prototyping and for generating icons used in my app. Let’s be clear, I’m no designer and don’t pretend to be. My previous experience with graphic editors was Adobe Fireworks (which they stopped supporting years ago), and a very small dabble with Photoshop.
Sketch is great, and many of the features are intuitive. That said, I still got myself rather confused at times – mainly due to the complexity of different resolution displays on various iDevices, and how you account for them.
I will go through an example of creating tab bar icons – the ones that most apps have at the bottom of the iPhone screen.
1. Points, Pixels, and Retina
A point is a resolution-independent measure. A pixel is the smallest physical unit on a device. It’s important to think in points (pts) when designing, but when we are exporting images we are thinking in pixels (px).
We now have 3 different resolution devices from apple (and probably by the time I’ve come back from lunch there’ll probably be more).
|iPad 1 & 2, iPad Mini 1, iPhone 3||1x|
|iPad Air & iPad Retina & iPad Pro, iPad Mini 2 upwards, iPhone 4 upwards||2x||Retina|
|iPhone 6+, 6S+||3x||Retina HD|
I think it’s safe to say that there aren’t too many iPhone 3’s around, and that 1x asset resolutions are going the way of the dinosaurs.
According to Apple, a good size for a tab bar icon is 25x25px on a 1x resolution. So for a Retina device we need that in 50x50px, and a 75x75px for a 3x resolution.
However as we are designing we really just want to think about one size (25×25) and let Sketch take care of the rest.
2. Using Prototypes and Templates
We have a few good options for this. But listen closely, because there are some issues that really confused me here.
Different iOS templates for Sketch come in different sizes.
Use the default iOS template by going File > New From Template > iOS UI Design
On closer inspection we discover that the width for the whole tab bar on the default Sketch template is 375 pixels. Yet on most other templates the default width for each iPhone screen is 750px. This is the width of the iPhone 6.
Selecting the tab bar prototype in Philip Armour’s template. Width is 750px
This makes sense as the iPhone 6 is already a retina device, and we are editing it at Retina resolution. However this has big implications for when we export out – more about that later.
3. Editing The Icon
Sketch is a vector-based tool. You create lines and connect them together (great tutorial here). This is resolution-independent and exactly what we want for iOS screens. You can of course import bitmaps (like photos) into Sketch, but these are NOT resolution-independent and you will not have any joy from exporting out at different resolutions.
Using an icon set
The easiest way to create icons is to buy an icon set. I bought this set of icons from Pixel Love. The chances are you will want to edit them, so you will want to find icons that are in Sketch format (vector-based). Of course sketch can import a bunch of formats, but save yourself some stress and get an icon set that is already in Sketch format.
I’m going to have a soccer ball icon, so I open the Sketch sports icons document, and, and select and copy the soccer_ball icon. These icons are 64x64px, so I may have to do some resizing.
I paste it into my iOS UI template:
Remember this is just some prototyping (i’ve change the word to Soccer and deleted the old icon). Amazingly, the size looks pretty good. This is because this template is already at retina (2x) resolution, so a suggested icon size of 25×25 will be 50x50px at retina! My 64×64 soccer icon actually has some whitespace in it – the actual width of the football is 54×54 (it’s possibly a little big).
The color’s a bit off, so I match that, and also resize down a little bit.
4. Exporting The Icon
- Select the icon (this may mean selecting the group in the left hand layer browser).
- On the bottom right, click the + next to Export.
- We need three sizes: 0.5x (no suffix), 1x (@2x suffix), and 1.5x (@3x suffix) – all PNG.
Why these sizes? Because we are already editing at 2x resolution! So our 1x export is actually really 2x. This will give us 3 images, a 25x25px, 50x50px, and a 75x75px.
If you were working on a 1x resolution prototype (say 375px wide for an iPhone 6) your export would be much more orthodox: 1x (no suffix), 2x (@2x suffix), and 3x (@3x suffix).
This really tripped me up as I was using different prototypes, not immediately realizing they were at different resolutions to begin with! At first I confused myself thinking my retina Macbook had something to do with it – it doesn’t.
5. Importing into Xcode
In your application, select the Assets.xcassets file. Then go to Finder and select your three png images and drag them into the middle window. You’ll end up with something like this.
Xcode automagically separates them out based on the suffix name.
There are a number of Sketch plugins that will automatically do this process, but it’s important to know how to do this manually.
Help, I’ve selected an image for my tab bar item in Xcode and it comes up as a grey box!
The PNG must have a transparent background.
Depending on where you got your icon from you may need to check this. Also, the slicing process in Sketch can cause a problem. If it includes part of a layer behind your icon it will be exporting this as the background color (not transparent).
This is solved by making sure your icon layers are grouped and you select the group layer when adding your exports. This will make sure only the grouped layers are included in the slice to be exported.
See the little knife next to the group? That means the grouped layer is exportable.
Exporting a layer by itself means that no other elements on the canvas will be exported with it. If there’s a layer on top or a background below it, neither of those will be included in the export.
Xcode ignored my icon color
Xcode will automatically set the color of your icon to the system default. This can be changed in code, and is how it uses a tint color for a selected state. You don’t need to import images for the icon selected state unless you want the selected icon to be different. This is typical as we often use a ‘filled in’ look for the selected icon.
My Sketch icon already has an 70x70px slice, but the actual icon is smaller
Select the slice and add your exports, but check the Trim Transparent Pixels option. This will remove all the superfluous area around the actual icon.
7. Importing PDFs into Xcode
This is a newer feature of Xcode, and is surely the way forward. Why have multiple copies of the same image when you don’t need to?
- Export a single PDF.
- Drag into the asset catalog.
- Select the image and set the Scale Factors to Single Vector.
- You may then need to drag the image up to the All / Universal box.
However – I’ve found one major problem. Sketch PDF export does not seem to export it as vector. Xcode will use whatever resolution you export at, and just stretch this (like a bitmap). The Sketch documentation says it will “preserve vector objects”, but clearly I’m missing something here.