icônes d'applications iPhone - Rayon exact?
J'essaie de créer l'icône de mon application iPhone, mais je ne sais pas comment obtenir le rayon exact utilisé par les icônes de l'iPhone. J'ai recherché et recherché un tutoriel ou un modèle, mais je n'en trouve pas.
Je suis sûr que je ne suis qu'un crétin, mais comment obtenir les coins arrondis parfaitement avec votre icône d'Illustrator ou de Photoshop?
Modifier:
Quel est le rayon pour l'iPad Retina?
Vous pouvez créer quatre icônes (à compter de ce jour) pour votre application et leur apparence peut être différente - pas nécessairement basée sur l'image 512x512.
- rayon de coin pour l'icône 512x512 = 80 (iTunesArtwork)
- rayon de coin pour le 1024x1024 icon = 180 (iTunesArtwork Retina)
- rayon de coin pour l'icône 57x57 = 9 (iPhone/iPod Touch)
- rayon de coin pour l'icône 114x114 = 18 (iPhone/iPod Touch Retina)
- rayon de coin pour l'icône 72x72 = 11 (iPad)
- rayon de coin pour l'icône 144x144 = 23 (iPad Retina)
Si vous créez un ensemble d’icônes personnalisées, vous pouvez définir l’option UIPrerenderedIcon sur true dans votre fichier info.plist. Il n’ajoutera pas l’effet de brillance, mais un fond noir apparaîtra en dessous et restera entouré des coins de l’image. rayons, donc si le rayon des coins de l’une des icônes est plus grand, le noir apparaît autour des bords/coins.
Edit: Voir les commentaires de @ devin-g-rhode et vous constaterez que les futures tailles d'icônes devraient avoir un rapport 1:6.4 du rayon du coin à la taille de l'icône. Il existe également une très bonne réponse de https://stackoverflow.com/a/29550364/396005 qui contient 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 Retina, 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 bien fait. Les mêmes travaux pour vos images de lancement. Utilisez launch.png en 320x480 et [email protected] en 640x960.
Après avoir essayé certaines des réponses de ce billet, j’ai consulté Louie Mantia (ancien concepteur d’Apple, Square et Iconfactory) et toutes les réponses fournies jusqu’à présent sur ce billet sont erronées (ou du moins incomplètes). Apple commence avec l’icône 57px et un rayon de 10 puis s’agrandit ou décroît à partir de là. Ainsi, vous pouvez calculer le rayon pour toute taille d’icône à l’aide de 10/57 x new size (par exemple, 10/57 x 114 en donne 20, qui correspond au rayon approprié pour une icône de 114 pixels). Voici une liste des icônes les plus couramment utilisées, les conventions de dénomination appropriées, les dimensions en pixels et les rayons de coin.
- Icon1024.png - 1024px - 179.649
- Icon512.png - 512px - 89.825
- Icon.png - 57px - 10
- [email protected] - 114px - 20
- Icon-72.png - 72px - 12.632
- [email protected] - 144px - 25.263
- Icon-Small.png - 29px - 5,088
- [email protected] - 58px - 10.175
En outre, comme indiqué dans d'autres réponses, vous ne souhaitez en aucun cas rogner les images que vous utilisez dans le fichier binaire ou que vous envoyez à Apple. Ceux-ci devraient tous être carrés et ne pas avoir de transparence. Apple masquera automatiquement chaque icône dans le contexte approprié.
Il est toutefois important de connaître les éléments ci-dessus pour utiliser les icônes dans l'interface utilisateur de l'application, où vous devez appliquer le masque dans le code ou dans le rendu préalable dans Photoshop. C'est également utile lors de la création d'illustrations pour des sites Web et d'autres supports promotionnels.
Lecture complé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 ronds dans Photoshop et pourquoi c'est important: roundrect
Documents officiels d'Apple sur la taille des icônes et la conception: IconsImages
Mettre à jour:
J'ai fait quelques tests dans Photoshop CS6 et il semble que 3 chiffres après le point décimal soit suffisamment précis pour aboutir au même vecteur exact (du moins celui affiché par Photoshop avec 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 fois, l'outil Rectangle arrondi n'a pas arrondi et a en fait montré plusieurs chiffres après le point décimal. Je ne sais pas ce qui se passe là-bas, mais il s'agit bien d'utiliser et de stocker le nombre plus précis qui a été entré.
Quoi qu'il en soit, j'ai mis à jour la liste ci-dessus pour n'inclure que 3 chiffres après le signe décimal (avant qu'il n'y en ait 13!). Dans la plupart des situations, il serait probablement difficile de faire la différence entre une icône transparente de 512px masquée à un rayon de 90px et une icône masquée de 89,825, mais l'antialiasing du coin arrondi finirait par être 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 voulez calculer par
15,625% est le pourcentage clé ici. Multipliez toutes les tailles d'image mentionnées ci-dessus par 0,15625 et vous obtiendrez le rayon de pixel correct pour cette taille.
EDIT: Merci @Chris Prince pour ses commentaires avec iOS le 09/08/10 pourcentage de rayon: 22.37%
Important: équation de l'icône iOS 7
Avec la prochaine version d'iOS 7, vous remarquerez que le rayon de l'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 est la superellipse suivante:
|x/120|^5 + |y/120|^5 = 1
Évidemment, vous pouvez modifier le numéro 120 avec la taille d’icône souhaitée pour obtenir la fonction correspondante.
Original
Vous devez fournir une image présentant des angles à 90 ° (il est important D'éviter de rogner les coins de votre icône. IOS le fait pour vous lorsqu'il Applique le masque arrondissant les coins). ( Documentation Apple )
La meilleure approche consiste à ne pas arrondir les coins de vos icônes. Si vous définissez votre icône comme une icône carrée, iOS superpose automatiquement l'icône à un masque prédéfini qui définira les coins arrondis appropriés.
Si vous définissez manuellement les coins arrondis de vos icônes, elles auront probablement l'air cassées dans tel ou tel périphérique, car le masque d'arrondi change 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. En utilisant une icône carrée, vous serez libéré de ce fardeau et vous serez assuré d'avoir une icône toujours à jour et esthétique 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 envoyer un lien vers une application qui utilise des icônes carrées natives.
Modifier
Pour mieux comprendre cette réponse, reportez-vous à la documentation officielle de 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 périphérique iOS:
- Coins arrondis
- Ombre portée
- Brillance réfléchissante (sauf si vous empêchez l'effet brillant)
Ainsi, vous pouvez obtenir l’effet souhaité en dessinant simplement une icône carrée et en remplissant son contenu. Le rayon de virage final sera 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 Apple sur iOS. Ils vous demandent de dessiner des icônes carrées, alors ... pourquoi pas?
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
(chemin est pour les versions récentes de XCode. Pour les versions plus anciennes, il sera probablement dans/Developer /).
Comme d'autres l'ont noté, vous ne devriez PAS les masquer vous-même, mais vous pouvez les utiliser pour vérifier l'aspect de vos icônes une fois masquées.
(les crédits pour cette conclusion vont à Neven Mrgan IIRC)
Les gens se disputent à propos du rayon de coin qui augmente légèrement, mais ce n'est pas le cas.
De ce blog :
Le «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 que l’on appelle continuité de la courbure.
Vous inutile pour appliquer un rayon de coin aux icônes pour iOS. Il suffit de fournir des icônes carrées. Mais si vous voulez toujours savoir comment, la forme actuelle s'appelle Squircle et voici la formule:
Le rayon de l'angle de l'icône de 57 x 57 pixels est de 9 pixels.
Comme d'autres l'ont dit, vous ne voulez pas contourner vos angles. Vous souhaitez envoyer des graphiques carrés (pas de calques ni alpha). Apple a modifié le masque utilisé pour arrondir les angles dans iOS7, puis à nouveau dans iOS8. Vous pouvez trouver ces masques dans votre lot d'applications Xcode. Le chemin change avec chaque nouvelle version du SDK qu'ils publient. Alors, je vais 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.framework mais ne vous fiez pas à cela. 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 cet article)
./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
./[email protected]
./[email protected]
./DefaultIcon-29.png
./[email protected]
./[email protected]
./DefaultIcon-40.png
./[email protected]
./[email protected]
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./[email protected]
./DocumentBadgeMask-20.png
./[email protected]
./[email protected]
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./[email protected]
./[email protected]
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./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
./[email protected]
./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
./[email protected]
./NewsstandNewspaperSwitcherGradientLeft.png
./[email protected]
./NewsstandNewspaperSwitcherGradientRight.png
./[email protected]
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./[email protected]
./[email protected]
./SpotlightAppIconMask.png
./[email protected]
./[email protected]
./TableIconMask.png
./[email protected]
./[email protected]
./TableIconOutline.png
./[email protected]
./[email protected]
Comme vous pouvez le constater, il existe de nombreux masques différents, mais leur nom est assez clair. Voici l'image AppIconMask@3x~iphone.png:
Vous pouvez utiliser cela pour tester votre icône pour voir si elle va bien paraître après son masquage. Mais, ne contournez pas vos coins . Si vous le faites, lorsque Apple modifiera à nouveau ces masques, vous aurez des artefacts.
Si vous n'envisagez pas de course, le rayon exact est en réalité 10px pour l'icône 57x57.
Je reçois cette information de iconreference .
Toutes les réponses précédentes à cette question sont maintenant obsolètes. Depuis au moins mai 2015, Apple vous oblige à fournir des icônes carrées non arrondies:
Conservez les coins des icônes. 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/
Lors de la conception de mes icônes d'application avec Photoshop, j'ai constaté qu'aucun rayon de coin entier ne correspond au masque exactement du périphérique.
Ce que je fais maintenant, c'est créer un projet vide avec Xcode, définir un fichier PNG entièrement blanc comme icône et désactiver le biseau et le brillant prédéfinis. Ensuite, je lance l'application et prend 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 carrée de 57x57 png et vous devriez être bon
Il y a deux réponses totalement contradictoires avec un grand nombre de voix: 160px @ 1024, 180px @ 1024. Alors, une sorcière?
J'ai fait des expériences et je pense que c'est 180px @ 1024, donc drbarnard est correct.
J'ai téléchargé l'icône iTunes U depuis l'App Store, c'est 175x175px. Je l'ai agrandie dans Photoshop à 1024px et ai placé deux formes dessus, l'une avec un rayon de 160px et l'autre avec 180px.
Comme vous pouvez le voir ci-dessous, la forme (fine ligne grise) avec 160px (la première) est un peu en retrait, tandis que celle avec 180px est très belle.
C'est ce que je fais maintenant dans PhotoShop:
- Je crée un canevas de taille 1026x1026px avec un masque de 180px masque pour maindesign Objet malicieux .
- Je duplique le Smart Object principal 5 fois et les redimensionne à 1024px, 144px, 114px, 72px et 57px.
- Je mets une "nouvelle tranche basée sur les calques" sur chaque objet dynamique et je renomme les tranches en fonction de leur taille (par exemple, icon-72px).
- Lorsque je sauvegarde l'illustration, je sélectionne "Toutes les tranches d'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/
Comprend:
Conservez les coins de l'icône. Le système applique un masque qui arrondit automatiquement les coins des icônes.
et
Gardez le fond 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 pour ne pas écraser d’autres icônes d’application à proximité. Vous n'avez pas besoin de remplir toute l'icône 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.