0

I was always, always using Adobe Illustrator to make and export icons for iOS and Android until i knew about this "problem."

Scenario: Whenever i export icons via AI (currently using CC 2019 though i had it updated from cc2018 because i thought it would solve the issue), i use Asset Export panel/window. default configuration when exporting to iOS (1x,2x,3x,svg)

"Problem" appears when i preview the exported icons on my mac. i noticed that when opening icons from the Preview app, the @1x and @2x are the exact same icon size, icon dimensions only changes when @3x. However, when opening icons via quick preview (tapping spacebar to open), the icon dimensions does change. screenshot attached.

enter image description here

I've tried to export the icons via AI on windows, same situation happens.

However, trying to narrow down the issue i used different apps to export icons. interestingly they turn out "correct" when opening via preview app, and quick preview (spacebar).

enter image description here

i noticed this issue because our developer noticed that the icons were too small to be useable. hence our confusion.

Maybe i'm just missing something that i'm ignorant about or maybe you guys can help me out. any updates would be greatly appreciated. Thank you very much!

1
  • Your question is a bit confusing. If you use 2 different programs to export icons and 2 other to open the files you might have may different problems to solve. Ignore Preview and Quick Preview, what does the File Info (CMD+i) say it's the image size? Try to edit your question to focus on ONE problem, check How to Ask for more info on how to write a good question.
    – Luciano
    Nov 4, 2019 at 10:25

1 Answer 1

3

I don't think there is a problem.

I can clearly see the first icon is 100 x 100px (72ppi), and the 2x icon is 200 x 200px (144ppi). These look correct to me.

Clearly the perceived problem is merely the difference in the way the two different previewing applications are rendering the image on screen. One appears to be respecting the resolution setting while the other is simply ignoring it.

Try opening both these PNGs in Photoshop or a similar raster image editor, and setting the zoom to 100% (1:1). You should be able see the size difference there.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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