I have been assigned the task of exporting iOS icons for an app that my office is developing. I have never done this and I am struggling with the workflow and getting pixel perfect icons.
I am working in Illustrator and referencing this article on Apple’s developer website, and my main source of frustration is that my I can’t seem to get my artboards and icons to all be perfectly aligned.
It seems that I don’t have any issue when dealing with icon dimensions in even numbers, such as 40×40 px, but I am getting extra pixels when exporting icons with uneven numbered dimensions, and I can’t align my art with the artboard properly while remaining “pixel perfect”. For instance, the iPad Pro app icon is supposed to be 83.5px @ 2x. Does this mean I need an 83.5px artboard (2x) or can I use a 167px artboard (1x)? Either way I end up with a 168×168 pixel icon, one pixel too many.
Am I missing something? Why is Apple asking for icons in uneven number dimensions if this prevents me from achieving pixel perfect icons? It’s obviously something I am doing wrong, but I can’t figure it out.
I apologize if this is a ridiculous question. This is my first job in the field and I recognize that I have a lot to learn.
Any help is very appreciated!
The half pixel dimensions @2x or @3x are for high density displays (Retina, Super Retina, etc.) which are used by pretty much all modern Apple devices. This means it will take twice the number of pixels to occupy the same amount of space on the screen.
ex. Think of it like two checkerboards. They’re both the same size and occupy the same amount of space on the table, but one has twice as many squares on the board.
In The Case Of The iPad Pro
- @2x means this device’s screen has twice the pixel density than standard (twice as many squares on the checkerboard)
- 83.5px is the rendered size of the icon displayed on the device (the size of the checkerboard on the table)
- 167px is the exported size png from your design software, which will be scaled down to the 83.5px size on the device (the number of squares wide and tall on the checkerboard)