Icônes d'applications iPhone - Rayon exact?

Question

Je suis en train de créer l'icône pour mon application iPhone, mais je ne sais pas comment obtenir le rayon exact utilisé par les icônes de l'iPhone. J'ai cherché et cherché un tutoriel ou un modèle mais je n'en trouve pas.

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

Édition:

Quel est le rayon pour l'iPad Retina?

Answer 1

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

• rayon de coin pour l'icône 512x512 = 80 (iTunesArtwork)
• rayon de coin pour l'icône 1024x1024 = 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 et il ne ajoutera pas l'effet de brillance mais il placera un fond noir en dessous et arrondira quand même les coins de l'image avec ces rayons de coin, donc si le rayon de coin sur l'une des icônes est plus grand alors cela affichera du noir autour des bords/coins.

Modifier: Voir le commentaire de @devin-g-rhode et vous pouvez voir que toutes les tailles d'icônes futures devraient avoir un ratio de 1:6.4 de rayon de coin à la taille de l'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 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é icon@2x.png 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 launch@2x.png à 640x960.

Answer 2

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

1. Icon1024.png - 1024px - 179.649
2. Icon512.png - 512px - 89.825
3. Icon.png - 57px - 10
4. Icon@2x.png - 114px - 20
5. Icon-72.png - 72px - 12.632
6. Icon-72@2x.png - 144px - 25.263
7. Icon-Small.png - 29px - 5.088
8. Icon-Small@2x.png - 58px - 10.175

Aussi, comme mentionné dans d'autres réponses, vous ne voulez pas réellement recadrer les images que vous utilisez dans le binaire ou que vous soumettez à Apple. Elles doivent toutes être carrées et ne pas avoir de transparence. Apple masquera automatiquement chaque icône dans le contexte approprié.

Connaître ce qui précède est important, cependant, pour l'utilisation des icônes dans l'interface utilisateur de l'application où vous devez appliquer le masque dans le code ou pré-rendu dans photoshop. C'est également utile lors de la création d'œuvres d'art pour les sites web et autres supports promotionnels.

Lecture supplémentaire :

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

Marc Edwards de Bjango sur les différentes options pour créer des roundrects dans Photoshop et pourquoi cela compte : roundrect

Docs officiels d'Apple sur la taille des icônes et les considérations de conception : Icônes et Images

Mise à jour :

J'ai effectué quelques tests dans Photoshop CS6 et il semble qu'3 chiffres après le point décimal suffisent pour obtenir le même vecteur exact (du moins tel qu'affiché par Photoshop à 3200% de zoom). L'outil Rounded Rectangle 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 Rounded Rectangle n'a pas arrondi vers le haut et a en fait montré plusieurs chiffres après le point décimal. Je ne sais pas ce qui se passe là-dedans, mais il utilise et stocke certainement le nombre plus précis qui a été saisi.

Quoi qu'il en soit, j'ai actualisé la liste ci-dessus pour inclure seulement 3 chiffres après le point décimal (auparavant il y en avait 13 !). Dans la plupart des situations, il serait probablement difficile de distinguer la différence entre une icône de 512px transparente masquée avec un rayon de 90px et une masquée à 89.825, mais le lissage des coins arrondis serait sûrement légèrement différent et serait probablement visible dans certaines circonstances, surtout si un deuxième masque plus précis est appliqué par Apple, dans le code ou autrement.

Answer 3

Je vois beaucoup de discussions sur les "px" mais personne ne parle des pourcentages qui sont le nombre fixe que vous voulez calculer.

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

Avant iOS 8, Apple utilisait moins d'arrondis, en utilisant 15,625%.

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

Answer 4

Important : équation d'icône iOS 7

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

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

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

Vous pouvez bien sûr changer le numéro 120 avec la taille d'icône souhaitée pour obtenir la fonction correspondante.

Original

Vous devriez fournir une image qui a 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 d'arrondir les coins de vos icônes du tout. 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 risquent de paraître cassées sur tel ou tel appareil, car le masque d'arrondi a tendance à légèrement changer d'une version iOS à une autre. Parfois vos icônes seront légèrement plus grandes, parfois (soupire) légèrement plus petites. Utiliser une icône carrée vous libérera de ce fardeau, et vous vous assurerez d'avoir toujours une icône à jour et belle pour votre application.

Cette approche est valable pour chaque taille d'icône (iPhone/iPod/iPad/retina), et également pour les illustrations iTunes. J'ai suivi cette approche à plusieurs reprises, 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, veuillez vous référer à la documentation officielle d'Apple sur les icônes iOS. Sur 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. Éclat réfléchissant (sauf si vous empêchez l'effet de réflexion)

Ainsi, vous pouvez obtenir l'effet que vous souhaitez en dessinant simplement une icône carrée et en y ajoutant du contenu. Le rayon d'angle final sera quelque chose de similaire à ce que les autres réponses ici disent, mais cela ne sera jamais garanti, puisque 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 ?

Answer 5

La réponse de dbarnard contient la formule pour calculer le rayon correct, mais comme vous cherchiez les modèles, tous les masques et superpositions peuvent être trouvés 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 sera probablement à l'intérieur de /Developer).

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

(crédits pour cette découverte vont à Neven Mrgan si je me souviens bien)