J'essaie de créer l'icône pour mon application iPhone, mais je ne sais pas comment obtenir le rayon exact que les icônes de l'iPhone utilisent. J'ai recherché et recherché un didacticiel ou un modèle, mais je n'en trouve pas.

Je suis sûr que je suis juste un crétin, mais comment obtenir les coins arrondis exactement avec votre icône Illustrator ou Photoshop?

Éditer:

Quel est le rayon de l'iPad Retina?

Vous pouvez créer quatre icônes (à partir d'aujourd'hui) pour votre application et elles peuvent toutes avoir un aspect différent - pas nécessairement basé sur l'image 512x512.

• rayon d'angle pour l'icône 512x512 = 80 (iTunesArtwork)
• rayon d'angle pour l'icône 1024x1024 = 180 (iTunesArtwork Retina )
• rayon d'angle pour l'icône 57x57 = 9 (iPhone / iPod Touch)
• rayon d'angle pour l'icône 114x114 = 18 (iPhone / iPod Touch Retina )
• rayon d'angle pour l'icône 72x72 = 11 (iPad)
• rayon d'angle pour l'icône 144x144 = 23 (iPad Retina )

Si vous créez un ensemble d'icônes personnalisées, vous pouvez définir UIPrerenderedIcon option sur true dans votre fichier info.plist et il n'ajoutera pas l'effet de brillance mais il placera un fond noir en dessous et contournera toujours les coins de l'image avec ces rayons de coin donc si le rayon des coins sur l'une des icônes est plus grand, il apparaîtra en noir autour des bords / coins.

Edit: Voir le commentaire de @ devin-g-rhode et vous pouvez voir que toutes les tailles d'icônes futures devraient avoir un1:6.4 rapport rayon de coin / taille d'icône. Il y a aussi une très bonne réponse de https://stackoverflow.com/a/29550364/396005 qui a l'emplacement des fichiers de masque d'image utilisés dans le SDK pour arrondir les coins des icônes

Pour ajouter un fichier compatible avec la rétine, utilisez le même nom de fichier et ajoutez «@ 2x». Donc, si j'avais un fichier pour mon icône 72x72 nommé icon.png, j'ajouterais également un fichier PNG 114x114 nommé [email protected] au projet / cible et Xcode l'utiliserait automatiquement comme icône sur un écran Retina. Vous pouvez le voir en action sur la page Résumé de la cible de l'application si vous l'avez fait correctement. La même chose fonctionne pour vos images de lancement. Utilisez launch.png à 320x480 et [email protected] à 640x960.

Après avoir essayé certaines des réponses de ce post, j'ai consulté Louie Mantia (ancien designer Apple, Square et Iconfactory) et toutes les réponses jusqu'à présent sur ce post sont fausses (ou du moins incomplètes). Apple commence avec l'icône 57px et un rayon de 10, puis monte ou descend à partir de là. Ainsi, vous pouvez calculer le rayon pour n'importe quelle taille d'icône en utilisant 10/57 x new size(par exemple, 10/57 x 114donne 20, qui est le rayon approprié pour une icône de 114 px). Voici une liste des icônes les plus couramment utilisées, des conventions de dénomination appropriées, des dimensions en pixels et des rayons d'angle.

1. Icon1024.png - 1024px - 179,649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. [email protected] - 114px - 20
5. Icon-72.png - 72px - 12.632
6. [email protected] - 144px - 25.263
7. Icon-Small.png - 29 pixels - 5,088
8. [email protected] - 58px - 10.175

En outre, comme mentionné dans d'autres réponses, vous ne voulez pas recadrer les images que vous utilisez dans le fichier binaire ou soumettre à Apple. Ceux-ci devraient tous être carrés et ne pas avoir de transparence. Apple masquera automatiquement chaque icône dans le contexte approprié.

Cependant, il est important de savoir ce qui précède pour l'utilisation des icônes dans l'interface utilisateur de l'application, où vous devez appliquer le masque en code ou pré-rendu dans Photoshop. Il est également utile lors de la création d'illustrations pour des sites Web et d'autres supports promotionnels.

Lecture supplémentaire:

Neven Mrgan sur les tailles d'icônes supplémentaires et d'autres considérations de conception: tailles d'icônes de l'application iOS

Marc Edwards de Bjango sur les différentes options pour créer des roundrects dans Photoshop et pourquoi c'est important: roundrect

Documents officiels d'Apple sur la taille des icônes et les considérations de conception: icônes et images

Mettre à jour:

J'ai fait quelques tests dans Photoshop CS6 et il semble que 3 chiffres après le séparateur décimal soient suffisamment précis pour se retrouver avec exactement le même vecteur (au moins tel qu'affiché par Photoshop à un zoom de 3200%). L'outil Round Rect arrondit parfois l'entrée au nombre entier le plus proche, mais vous pouvez voir une différence significative entre 90 et 89.825. Et à plusieurs reprises, l'outil Rectangle arrondi n'a pas arrondi et a effectivement affiché plusieurs chiffres après la virgule décimale. Je ne sais pas ce qui se passe là-bas, mais il utilise et stocke certainement le numéro plus précis qui a été entré.

Quoi qu'il en soit, j'ai mis à jour la liste ci-dessus pour inclure seulement 3 chiffres après la virgule décimale (avant il y en avait 13!). Dans la plupart des situations, il serait probablement difficile de faire la différence entre une icône transparente de 512 pixels masquée à un rayon de 90 pixels et une masquée à 89,825, mais l'antialiasing du coin arrondi finirait certainement légèrement différent et serait probablement visible dans certaines circonstances, en particulier si un deuxième masque plus précis est appliqué par Apple, en code ou autrement.

Je vois beaucoup de discussions "px" mais personne ne parle de pourcentages qui est le nombre fixe que vous souhaitez calculer.

22,37% est le pourcentage clé ici. Multipliez l'une des tailles d'image mentionnées ci-dessus par 0,2237 et vous obtiendrez le rayon de pixels correct pour cette taille.

Avant iOS 8, Apple utilisait moins d'arrondi, avec 15,625%.

EDIT : Merci @Chris Prince pour avoir commenté avec le pourcentage de rayon iOS 8/9/10: 22,37%

Important: équation d'icône iOS 7

Avec la sortie prochaine d'iOS 7, vous remarquerez que le rayon d'icône "standard" a été augmenté. Essayez donc de faire ce que Apple et moi avons suggéré avec cette réponse.

Il semble que pour une icône de 120 pixels, la formule qui représente le mieux sa forme sur iOS 7 soit la superellipse suivante:

|x/120|^5 + |y/120|^5 = 1

Évidemment, vous pouvez modifier le 120nombre avec la taille d'icône souhaitée pour obtenir la fonction correspondante.

Original

Vous devez fournir une image avec des coins à 90 ° (il est important d'éviter de recadrer les coins de votre icône - iOS le fait pour vous lorsqu'il applique le masque d'arrondi des coins) ( Documentation Apple )

La meilleure approche n'est pas du tout d'arrondir les coins de vos icônes. Si vous définissez votre icône comme une icône carrée, iOS superposera automatiquement l'icône avec un masque prédéfini qui définira les coins arrondis appropriés.

Si vous définissez manuellement des coins arrondis pour vos icônes, elles auront probablement l'air cassées dans tel ou tel appareil, car le masque d'arrondi passe légèrement d'une version iOS à une autre. Parfois, vos icônes seront légèrement plus grandes, parfois (soupir) légèrement plus petites. L'utilisation d'une icône carrée vous libérera de ce fardeau, et vous serez sûr d'avoir une icône toujours à jour et belle pour votre application.

Cette approche est valable pour chaque taille d'icône (iPhone / iPod / iPad / rétine), ainsi que pour l'illustration iTunes. J'ai suivi cette approche plusieurs fois, et si vous le souhaitez, je peux vous publier un lien vers une application qui utilise des icônes carrées natives.

Éditer

Pour mieux comprendre cette réponse, veuillez vous référer à la documentation officielle d' Apple sur les icônes iOS . Dans cette page, il est clairement indiqué qu'une icône carrée obtiendra automatiquement ces éléments lorsqu'elle sera affichée sur un appareil iOS:

1. Coins arrondis
2. Ombre portée
3. Brillance réfléchissante (sauf si vous empêchez l'effet de brillance)

Ainsi, vous pouvez obtenir l'effet que vous souhaitez en dessinant simplement une icône carrée et en y remplissant le contenu. Le rayon de coin final sera quelque chose de similaire à ce que disent les autres réponses ici, mais cela ne sera jamais garanti, car ces chiffres ne font pas partie de la documentation officielle d'Apple sur iOS. Ils vous demandent de dessiner des icônes carrées, alors ... pourquoi pas?

Les gens se disputent au sujet du rayon de coin étant légèrement augmenté, mais en fait ce n'est pas le cas.

De ce blog :

Un «secret» des produits physiques d'Apple est qu'ils évitent la tangence (où un rayon rencontre une ligne en un seul point) et façonnent leurs surfaces avec ce qu'on appelle la continuité de courbure .

Vous n'avez pas besoin d'appliquer le rayon de coin aux icônes pour iOS. Fournissez simplement des icônes carrées. Mais si vous voulez toujours savoir comment, la forme réelle est appelée Squircle et ci-dessous est la formule:

La réponse de dbarnard a la formule pour calculer le rayon correct, mais puisque vous cherchiez les modèles, tous les masques et superpositions se trouvent dans ce répertoire:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(le chemin est pour les versions récentes de XCode. Pour les anciennes versions, il se trouvera probablement dans / Developer /).

Comme d'autres l'ont remarqué, vous ne devez PAS les masquer vous-même, mais vous pouvez les utiliser pour vérifier à quoi ressembleront vos icônes une fois masquées.

(les crédits pour cette découverte vont à Neven Mrgan IIRC)

Le rayon de coin de l'icône 57 x 57 pixels est de 9 pixels.

Comme d'autres l'ont dit, vous ne voulez pas contourner vos coins. Vous souhaitez envoyer des graphiques carrés plats (sans couches ni alpha). Apple a changé le masque qu'ils utilisent pour arrondir vos coins dans iOS7, puis à nouveau dans iOS8. Vous pouvez trouver ces masques dans votre ensemble d'applications Xcode. Le chemin change avec chaque nouvelle version du SDK qu'ils publient. Je vais donc vous montrer comment vous pouvez toujours le trouver.

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

En ce moment même, le chemin trouvé par cette commande est /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.frameworkmais ne vous y fiez pas. Utilisez la commande pour le trouver vous-même.

Ce chemin pointe vers un répertoire avec ces fichiers (encore une fois, au moment de ce post)

./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./AppIconMask@2x~ipad.png
./AppIconMask@2x~iphone.png
./AppIconMask@3x~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./DefaultIcon-20@2x.png
./DefaultIcon-20@3x.png
./DefaultIcon-29.png
./DefaultIcon-29@2x.png
./DefaultIcon-29@3x.png
./DefaultIcon-40.png
./DefaultIcon-40@2x.png
./DefaultIcon-40@3x.png
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./DocumentBadgeMask-145@2x.png
./DocumentBadgeMask-20.png
./DocumentBadgeMask-20@2x.png
./DocumentBadgeMask-20@3x.png
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./DocumentBase-48@2x.png
./DocumentBase-48@3x.png
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./DocumentMask-48@2x.png
./DocumentMask-48@3x.png
./NanoDefaultIcon-24.0@2x.png
./NanoDefaultIcon-27.5@2x.png
./NanoDefaultIcon-40.0@2x.png
./NanoDefaultIcon-44.0@2x.png
./NanoDefaultIcon-86.0@2x.png
./NanoDefaultIcon-98.0@2x.png
./NanoIconMaskChiclet-24.0@2x.png
./NanoIconMaskChiclet-27.5@2x.png
./NanoIconMaskChiclet-40.0@2x.png
./NanoIconMaskChiclet-44.0@2x.png
./NanoIconMaskChiclet-86.0@2x.png
./NanoIconMaskChiclet-98.0@2x.png
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./NewsstandMagazineGradientLeft@2x~ipad.png
./NewsstandMagazineGradientLeft@2x~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./NewsstandMagazineGradientRight@2x~ipad.png
./NewsstandMagazineGradientRight@2x~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./NewsstandMagazineSwitcherGradientLeft@2x.png
./NewsstandNewspaperGradientBottom@2x~ipad.png
./NewsstandNewspaperGradientBottom@2x~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./NewsstandNewspaperGradientLeft@2x~ipad.png
./NewsstandNewspaperGradientLeft@2x~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./NewsstandNewspaperGradientRight@2x~ipad.png
./NewsstandNewspaperGradientRight@2x~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./NewsstandNewspaperSwitcherGradientBottom@2x.png
./NewsstandNewspaperSwitcherGradientLeft.png
./NewsstandNewspaperSwitcherGradientLeft@2x.png
./NewsstandNewspaperSwitcherGradientRight.png
./NewsstandNewspaperSwitcherGradientRight@2x.png
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./NotificationAppIconMask@2x.png
./NotificationAppIconMask@3x.png
./SpotlightAppIconMask.png
./SpotlightAppIconMask@2x.png
./SpotlightAppIconMask@3x.png
./TableIconMask.png
./TableIconMask@2x.png
./TableIconMask@3x.png
./TableIconOutline.png
./TableIconOutline@2x.png
./TableIconOutline@3x.png

Comme vous pouvez le voir, il existe de nombreux masques différents, mais ils sont nommés assez clairement. Voici l' AppIconMask@3x~iphone.pngimage:

Vous pouvez l'utiliser pour tester votre icône pour voir si elle ira bien après son masquage. Mais ne contournez pas vos coins . Si vous le faites, lorsque Apple modifie à nouveau ces masques, vous aurez des artefacts.

Toutes les réponses précédentes à cette question sont désormais obsolètes. Depuis au moins mai 2015, Apple vous demande de fournir des icônes carrées sans arrondi:

Gardez les coins des icônes bien droits. Le système applique un masque qui arrondit automatiquement les coins des icônes.

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

Si vous ne considérez pas le trait, le rayon exact est en fait de 10 pixels pour l'icône 57x57.

Je reçois ces informations de iconreference .

Lors de la conception des icônes de mon application avec Photoshop, j'ai constaté qu'aucun rayon de coin entier ne correspond au masque de l'appareil exactement au .

Ce que je fais maintenant, c'est créer un projet vide avec Xcode, définir un fichier PNG complètement blanc comme icône et désactiver le biseau et le brillant prédéfinis. Ensuite, je lance l'application et prends une capture d'écran de l'écran d'accueil. Maintenant, vous pouvez facilement créer un masque à partir de cette image, que vous pouvez utiliser dans Photoshop. Cela vous donnera des coins parfaitement arrondis.

L'iphone arrondit les coins pour vous, tout ce dont vous avez besoin est une icône png 57x57 carrée et vous devriez être bon

Il y a deux réponses totalement contradictoires avec un grand nombre de votes, l'une est 160px @ 1024, l'autre est 180px @ 1024. Alors quelle sorcière?

J'ai fait quelques expériences et je pense que c'est 180px @ 1024 donc drbarnard est correct.

J'ai téléchargé l'icône iTunes U sur l'App Store c'est 175x175px Je l'ai mise à l'échelle dans Photoshop à 1024px et y ai mis deux formes, une avec un rayon de 160px et une avec 180px.

Comme vous pouvez le voir ci-dessous, la forme (fine ligne grise) avec 160 px (la 1ère) est un peu décalée tandis que celle avec 180 px semble très bien.

Voici ce que je fais maintenant dans PhotoShop:

1. Je crée une toile de taille 1026x1026px avec un masque 180px pour le Smart Object design principal .
2. Je duplique l'objet intelligent principal 5 fois et je les redimensionne à 1024px, 144px, 114px, 72px et 57px.
3. Je mets une "Nouvelle tranche basée sur des couches" sur chaque objet intelligent et je renomme les tranches en fonction de leur taille (par exemple, icon-72px).
4. Lorsque j'enregistre l'illustration, je sélectionne "Toutes les tranches utilisateur" et BANG! J'ai toutes les icônes nécessaires à mon application.

J'ai essayé un rayon de 228px pour 1024x1024 et cela a fonctionné :)

Mise à jour (à partir de janvier 2018) pour les exigences relatives aux icônes d'application:

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Gardez les coins des icônes bien droits . Le système applique un masque qui arrondit automatiquement les coins des icônes.

Gardez l'arrière-plan simple et évitez la transparence . Assurez-vous que votre icône est opaque et n'encombrez pas l'arrière-plan. Donnez-lui un arrière-plan simple afin qu'il ne domine pas les autres icônes d'applications à proximité. Vous n'avez pas besoin de remplir l'icône entière avec du contenu.

Vous n'avez pas besoin d'appliquer un rayon de coin à l'icône de votre application, vous pouvez simplement appliquer des icônes carrées. L'appareil applique automatiquement le rayon de coin.