Chapter 32: Exporting Assets

We'll take a brief look at the history of iPhones, screen sizes and resolutions. We'll then learn how to properly export assets to make them pixel perfect.


What you will learn

  • How to properly export assets in Sketch for iOS

We've lightly touched on exporting assets in previous chapters, but we'll go ahead and export some of the icons in our Night Owl app as if we're ready to put them into our XCode project.

Understanding the iPhone resolution

First, we need to understand how the iPhone screen resolution works. If you have worked with iPhone assets before, you've probably noticed you need to export them at 1x, 2x, and 3x. So why exactly do we need to do this?

As the iPhone began to evolve, Apple began putting retina screens in their phones to enhance their displays. The 2x suffix represents double the density of pixels. So instead of 1px by 1px, there are 2px by 2px's occupying the same space.

The same concept is applied to 3x, meaning there are actually 3px by 3px (9 pixels) occupying the same space, making the display much richer. Apple denotes this "space" as points, which is exactly what Sketch uses.

This is great for us, because all we have to do is select our images in Sketch, and export them at 1x, 2x, and 3x, and Sketch will automatically give us the correct pixels to be displayed for each respective resolution. From there we can drop them into XCode for pixel perfect images.

XCode also uses the point system, which works out amazingly because now we can design down to the pixel.

For example, if we have a UIImage in XCode at 30pts by 30pts, we can create a 30pt by 30pt asset in Sketch, export them at 1x, 2x, and 3x and our assets will come out perfectly. On the contrary, we can design in Sketch and know the exact dimensions we need to design for in XCode.

Exporting the Night Owl Assets

Go to your Night Owl Home page and find your "Trending" icon. On the bottom right you'll notice Make Exportable. (Figure 4.8.1)

Figure 4.8.1 4.8.1 - Make Exportable.png

Once clicked, you'll notice a few options (Figure 4.8.2):

Figure 4.8.2

4.8.2 - Options.png

By clicking + Sketch will add 2x, and clicking + again adds 3x. From here we can click Export and save our assets to a destination. (Figure 4.8.3)

Notice Sketch has added the suffix's automatically, making it readable in XCode right out of the gate.

Figure 4.8.3

4.8.3 - All.png

You will also notice a little knife icon next to the +. Clicking this will create a slice instead of an exportable item. The only difference between slices and exportable items is that slices will pick up all the existing layers, whereas the exportable item will just be the layer selected.

Wrapping up

Create your designs in Sketch exactly how you would want them to look, and they can be easily exported at the correct sizes. This will make your icons and assets pixel perfect, and save you the headache of trying to scale sizes manually outside of Sketch and Xcode.

Exercise

Go ahead and export the rest of the assets in our Night Owl app using the same method above. Feel free to experiment with the other sizing options and formats to get a feel for their full capabilities!