Dois-je inclure dans les coins arrondis dans mon design d’icône d’application iPhone ?



par

Comme d'autres l'ont dit, vous ne voulez pas't arrondir vos coins. Vous voulez expédier des graphiques carrés plats (pas de couches ou d'alpha). Apple a modifié le masque qu'ils utilisent pour arrondir vos coins dans iOS7, puis à nouveau dans iOS8. Vous pouvez trouver ces masques dans votre paquet d'applications Xcode. Le chemin change avec chaque nouvelle version du SDK qu'ils publient. Donc, je'vais vous montrer comment vous pouvez toujours le trouver.

  1. find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework' 

At this very moment, the path found by that command is /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework but don't trust that. Use the command to find it yourself.

That path points to a directory with these files (again, at the time of this post)

  1. ./AppFolderBadgeIconMask-128_1only_.png 
  2. ./AppFolderBadgeIconMask-16_1only_.png 
  3. ./AppFolderBadgeIconMask-256_1only_.png 
  4. ./AppFolderBadgeIconMask-32_1only_.png 
  5. ./AppFolderBadgeIconMask-512_1only_.png 
  6. ./AppFolderBadgeIconOverlay-128_1only_.png 
  7. ./AppFolderBadgeIconOverlay-16_1only_.png 
  8. ./AppFolderBadgeIconOverlay-256_1only_.png 
  9. ./AppFolderBadgeIconOverlay-32_1only_.png 
  10. ./AppFolderBadgeIconOverlay-512_1only_.png 
  11. ./AppFolderBadgeIconShadow-128_1only_.png 
  12. ./AppFolderBadgeIconShadow-16_1only_.png 
  13. ./AppFolderBadgeIconShadow-256_1only_.png 
  14. ./AppFolderBadgeIconShadow-32_1only_.png 
  15. ./AppFolderBadgeIconShadow-512_1only_.png 
  16. ./AppIconMask@2x~ipad.png 
  17. ./AppIconMask@2x~iphone.png 
  18. ./AppIconMask@3x~iphone.png 
  19. ./AppIconMask~ipad.png 
  20. ./AppIconMask~iphone.png 
  21. ./CarAppIconMask.png 
  22. ./CarNotificationAppIconMask.png 
  23. ./DefaultIcon-20.png 
  24. ./[email protected] 
  25. ./[email protected] 
  26. ./DefaultIcon-29.png 
  27. ./[email protected] 
  28. ./[email protected] 
  29. ./DefaultIcon-40.png 
  30. ./[email protected] 
  31. ./[email protected] 
  32. ./DefaultIcon-60@2x~iphone.png 
  33. ./DefaultIcon-60@3x~iphone.png 
  34. ./DefaultIcon-76@2x~ipad.png 
  35. ./DefaultIcon-76~ipad.png 
  36. ./DocumentBadgeMask-145.png 
  37. ./[email protected] 
  38. ./DocumentBadgeMask-20.png 
  39. ./[email protected] 
  40. ./[email protected] 
  41. ./DocumentBase-320@2x~ipad.png 
  42. ./DocumentBase-320~ipad.png 
  43. ./DocumentBase-48.png 
  44. ./[email protected] 
  45. ./[email protected] 
  46. ./DocumentMask-320@2x~ipad.png 
  47. ./DocumentMask-320~ipad.png 
  48. ./DocumentMask-48.png 
  49. ./[email protected] 
  50. ./[email protected] 
  51. ./[email protected] 
  52. ./[email protected] 
  53. ./[email protected] 
  54. ./[email protected] 
  55. ./[email protected] 
  56. ./[email protected] 
  57. ./[email protected] 
  58. ./[email protected] 
  59. ./[email protected] 
  60. ./[email protected] 
  61. ./[email protected] 
  62. ./[email protected] 
  63. ./NewsstandDefaultMagazine_1only_.png 
  64. ./NewsstandDefaultNewspaper_1only_.png 
  65. ./NewsstandMagazineGradientLeft@2x~ipad.png 
  66. ./NewsstandMagazineGradientLeft@2x~iphone.png 
  67. ./NewsstandMagazineGradientLeft~ipad.png 
  68. ./NewsstandMagazineGradientLeft~iphone.png 
  69. ./NewsstandMagazineGradientRight@2x~ipad.png 
  70. ./NewsstandMagazineGradientRight@2x~iphone.png 
  71. ./NewsstandMagazineGradientRight~ipad.png 
  72. ./NewsstandMagazineGradientRight~iphone.png 
  73. ./NewsstandMagazineSwitcherGradientLeft.png 
  74. ./[email protected] 
  75. ./NewsstandNewspaperGradientBottom@2x~ipad.png 
  76. ./NewsstandNewspaperGradientBottom@2x~iphone.png 
  77. ./NewsstandNewspaperGradientBottom~ipad.png 
  78. ./NewsstandNewspaperGradientBottom~iphone.png 
  79. ./NewsstandNewspaperGradientLeft@2x~ipad.png 
  80. ./NewsstandNewspaperGradientLeft@2x~iphone.png 
  81. ./NewsstandNewspaperGradientLeft~ipad.png 
  82. ./NewsstandNewspaperGradientLeft~iphone.png 
  83. ./NewsstandNewspaperGradientRight@2x~ipad.png 
  84. ./NewsstandNewspaperGradientRight@2x~iphone.png 
  85. ./NewsstandNewspaperGradientRight~ipad.png 
  86. ./NewsstandNewspaperGradientRight~iphone.png 
  87. ./NewsstandNewspaperSwitcherGradientBottom.png 
  88. ./[email protected] 
  89. ./NewsstandNewspaperSwitcherGradientLeft.png 
  90. ./[email protected] 
  91. ./NewsstandNewspaperSwitcherGradientRight.png 
  92. ./[email protected] 
  93. ./NewsstandThumbnailShadow@2x~ipad.png 
  94. ./NewsstandThumbnailShadow@2x~iphone.png 
  95. ./NewsstandThumbnailShadow~ipad.png 
  96. ./NewsstandThumbnailShadow~iphone.png 
  97. ./NotificationAppIconMask.png 
  98. ./[email protected] 
  99. ./[email protected] 
  100. ./SpotlightAppIconMask.png 
  101. ./[email protected] 
  102. ./[email protected] 
  103. ./TableIconMask.png 
  104. ./[email protected] 
  105. ./[email protected] 
  106. ./TableIconOutline.png 
  107. ./[email protected] 
  108. ./[email protected] 

As you can see, there are a lot of different masks, but they are named pretty clearly. Here is the AppIconMask@3x~iphone.png image:

main-qimg-fa13beb8faa5b5ad2b5534932f5c1f7f.webp

You can use that to test your icon to see if it will look okay after it is masked. But, don't round your corners. If you do, when Apple changes those masks again, you will have artifacts.