2

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 40x40 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 168x168 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!

Improve this question
1
  • Use the pixel dimensions given. The device will resize to the effective point size/resolution. i.e. create your iPad Pro icon at 167px x 167px and export it at 1x. It will then be displayed on screen as 83.5pt x 83.5pt @2x.
    – Mysterfxit
    Apr 10, 2019 at 3:19

2 Answers 2

Reset to default
1

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)
Improve this answer
0
1

I had the same problem. Adobe Ilustrator keep generating not apropriate size of Icon images. 21 instead of 20, 30 instead of 29, 168 instead of 167.

Ready to go script solved the problem: https://github.com/MPieter/iOS-images-export-script-illustrator

The link is a script/add-on to adobe illustrator which generates all icons with apropriate naming and sizes. Also automatic content.js file is added so all files can be added to image.assets directly.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.