How to Optimize and Resize Graphics for iOS

So you want to start designing for iOS, but you don’t know where to start?

In theory, it’s easy. You just need to apply your master drawing skills to your design process, put some layout magic into it, add a sprinkle of perfectly chosen color combinations and there you go, your design is almost finished!

“Whoa, whoa, whoa! What are you talking about,” you may ask. “If designing was this easy, anyone could be a designer!”

You are right, my dear Watson. If you want to call yourself a design professional, let me reveal some design secrets to you.

  1. Retina vs. non retina

What on earth is (non) retina?

Trust me on this one, nowadays you want to design for retina screens. Retina screens have a pixel density that’s so high the human eye can’t differentiate individual pixels. Non-retina devices are still owned by many, but they are becoming outdated and slowly being replaced. However, you should support both retina and non retina displays because you want your app to look crisp on all screens.

In order to understand what retina screens are, you have to familiarize yourself with the concept of density first. Density directly influences the sharpness of the screen. It refers to the number of pixels in a square inch – the more pixels there are, the higher the density is, the sharper your app looks (yay for that!).

Originally, all drawings for the iPhone were specified in points. At the beginning, the number of points corresponded to the number of pixels on the screen (@1x), but this is not the case anymore. Now we have better, retina and HD retina displays that support significantly more detail and therefore you need to provide larger design assets. Point coordinates are now multiplied by a scale factor (@1x, @2x and @3x) to get pixel coordinates. The higher the scale factor is, the sharper your app looks. That’s why we need to prepare all the graphics in three different sizes in order to support different devices. If you want to read more about this, you can do it here.

  1. Where do I start?

The easiest way to get started is to design for the latest iPhone. At the time of writing, the most recent iPhone is the iPhone 6 Plus with a resolution of 1242×2208 pixels that gets downsampled to 1920×1080 device pixels.

This is where all the confusion comes from.

It is not crucial for you to understand the concept of downsampling if you are still learning the basics. However what you must know is that the canvas size in your design file should be 1242 x 2208 if you are designing for the iPhone 6 Plus.

In case you want to design for an older device first just because you have it in your pocket, we made this infographic for you. Otherwise, let’s continue where we left off.

ios graphics

So, now that you’ve tamed the biggest beast (iPhone 6 Plus | @3x assets), let’s take care of the smaller ones.

Unfortunately, older iOS devices don’t have as high a density as the iPhone 6 Plus which means you must deliver all of your graphics in three different sizes: @3x, @2x and @1x to the developer. These different size assets will appear as the same size on different density displays.

ios graphics 2

Delivering every single asset in three different sizes to the developer(s) is no fun. Imagine all the time you would need to spend doing one repetitive action such as downsizing dozens of assets. What a waste of time, right? Absolutely, unless you have DROPTIMIZER.

Wait, what??

DROPTIMIZER is a tool developed for designers and developers by 12Rockets that optimizes and generates assets for your iOS app. All you have to do is drop your @3x graphic onto Droptimizer, and it will automatically generate @3x, @2x and @1x assets with the appropriate filenames on your desktop.

Generating iOS assets has never been easier. After you are done generating the necessary assets, make a small .zip present for your developer(s), surprise him/her and go, call your mom. It’s been a while since you’ve done so.

And that, my dear Watson, is the story of how to generate assets for iOS.