Icônes d'application iPhone - Rayon exact?


313

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?


2
Pourquoi croyez-vous que vous en avez besoin?
Nick Veys

@NickVeys Quel que soit l'âge, une question sans réponse me dérange. Je ne sais pas si c'est l'intention de l'affiche, mais cela pourrait être pour une application Jailbreak ou une illustration en dehors d'iOS lui-même.
tkbx

9
Et puis iOS 7 est venu, a augmenté le rayon d'icône "par défaut" et a rendu cette question immédiatement obsolète.
marzapower

1
Les icônes ne devraient plus être arrondies. Apple requiert désormais des graphiques carrés sans arrondi .
Mark Whitaker

1
Vous avez juste besoin d'une icône carrée 1024 * 1024, utilisez une application telle que Prepo pour générer toutes les tailles nécessaires. L'appareil fera le reste pour vous.
NSDeveloper

Réponses:


340

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é 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.


9
Notez que l'icône sur l'iPhone 4 n'est pas 72x72, mais 114x114 avec un rayon de 18 . ;)
Pascal

1
@Pascal @stinkbutt: fixe et +1.
BoltClock

98
512/80 == 114/18 == 72/11 == 57/9 == 6.4 Vous pouvez prendre la longueur carrée de votre icône et la diviser par 6,4 pour obtenir le même rapport que la pomme. Donc, pour une icône 19x19, rayon de bordure 19 / 6.4 ~ 3px
Devin G Rhode

8
Le rayon de 80 pixels pour iTunesArtwork est définitivement faux. Vous pouvez trouver l'image de masque utilisée dans iTunes dans le pack iTunes. C'est 90 px. Aurait-il pu être changé récemment?
zmippie

6
Le rayon de l'iPad Retina (icône 144x144) est de 23 pixels, pour info. Et les icônes 1024x1024 devraient avoir un rayon de 160 pixels. Assez facile à calculer vous-même cependant.
Andrew R.

283

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. Icon@2x.png - 114px - 20
  5. Icon-72.png - 72px - 12.632
  6. Icon-72@2x.png - 144px - 25.263
  7. Icon-Small.png - 29 pixels - 5,088
  8. Icon-Small@2x.png - 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.


Très bonne réponse. Personnellement, j'ai toujours utilisé 512 pixels avec un rayon de 90 pixels comme point de départ, puis je réduis l'échelle au besoin. Fonctionne parfaitement.
Aleksandar Vacić

1
Aleksandar, bien que cela puisse sembler bien dans la plupart des circonstances, commencer avec 90 ne fonctionnera pas parfaitement dans toutes les circonstances. Voir ma mise à jour ci-dessus.
drbarnard

2
Excellent article avec beaucoup de détails. Très heureux d'avoir mis Louie sur écoute pour une réponse exacte. Les miens étaient tous basés sur 57px puis mis à l'échelle, mais c'était un coup de chance. Super d'avoir la confirmation que c'est ce que fait Apple.
Marc Edwards

Est-ce à dire que si l'icône de l'application n'est pas carrée, alors nous devrions utiliser Illustrator pour dessiner l'icône? parce que Photoshop ne prend pas en charge le rayon avec un point décimal .....
flypig

Veuillez voter cette réponse, car la première réponse n'est plus exacte. J'ai trouvé que mon icône 1024px avec un rayon de 160 semble ne pas convenir. Donc, après avoir relu, ce message est plus précis, le rayon pour l'icône 1024px doit être 180.
Quan Nguyen

34

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%


Pour une icône 1024x1024 (je crée des graphiques de dossier de presse), cela donne un rayon de coin de 160, ce qui est trop petit selon moi.
Chris Prince

3
À mon avis, encore une fois, pour les graphiques du dossier de presse, et non pour une soumission officielle d'Apple, 22,37% semble plus proche de l'arrondi iOS8. Par exemple, rayon de 229 px dans Photoshop pour 1024x1024.
Chris Prince

@ChrisPrince Cette réponse a certainement besoin d'être mise à jour pour iOS8, merci pour l'entrée
bitwit

En fait, le pourcentage est de 22,5%.
saagarjha

28

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?


Oui, tout de suite. C'est exactement la conclusion à laquelle je suis arrivé; sauf si l'on a le temps de payer un concepteur pour créer ET TESTER chaque taille d'icône individuellement pour chaque appareil.
Dogweather

Vos icônes seront très mauvaises lorsqu'elles seront réduites.
Ryyst

Ils ne sont pas réduits. Vous devez définir la taille d'icône correcte pour chaque appareil, mais au lieu de dessiner les coins, vous laissez simplement les icônes dans un format carré simple. Apple fera le reste du travail pour vous. Aucune mise à l'échelle nécessaire. Essayez et faites le moi savoir!
marzapower

Marzapower, vous avez raison, tant que vous êtes satisfait de l'effet d'éclairage d'Apple. Vous ne pouvez pas en avoir un sans l'autre à moins de pré-rendre
Gordon Dove

L'effet d'éclairage d'Apple n'a rien à voir avec les coins arrondis. Au fait, vous pouvez modifier l'effet de superposition dans vos icônes à l'aide d'une icône carrée, et tout fonctionnera bien.
marzapower

20

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 .

entrez la description de l'image ici

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:

entrez la description de l'image ici


2
Les icônes iPhone ne sont plus des carrés avec des coins arrondis depuis iOS 7. Cela devrait être la réponse acceptée (même si la formule n'est pas une réponse claire à la taille des coins incurvés) .
Crazyrems

1
@Crazyrems merci mais il n'y a pas de taille de rayon à donner bec. les coins sont courbés (non arrondis) selon la taille du carré avec une "formule" spécifique.
Onur Yıldırım

16

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)


1
Ce chemin change avec chaque version du SDK. Vous pouvez localiser le chemin actuel avec cette commandefind /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'
Bruno Bronosky

8

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


2
Willc2, vous avez raison - mais si Frank conçoit correctement les icônes de l'iPhone, il travaillerait avec une image 512 x 512 et le rayon de la bordure à ce niveau est de 80 pixels, ce qui arrondit à 9 pixels lorsque vous le réduisez à 57 x 57.
Jessedc

6

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:

AppIconMask@3x~iphone.png

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.


6

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/


1
Le lien doit être mis à jour dans cette réponse à: developer.apple.com/ios/human-interface-guidelines/graphics/…
Jeremy Wiebe

5

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 .


1
Je suis d'accord avec ça. L'utilisation d'un rayon de 9 pixels ne semble pas très bien si vous encadrez l'icône de votre application avec un trait intérieur pour obtenir un effet comme l'application Paramètres. 10px pour une icône 57x57px et 20px pour l'icône @ 2x me semblent beaucoup mieux.
Alex Robinson

4

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.


Voir la réponse @Agos, utilisez les masques png dans le dossier qu'il mentionne.
Gustav

3

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


4
Pour les applications officielles, cela est vrai (enfin, en quelque sorte. 57x57 n'est certainement pas la seule taille dont vous avez besoin). Mais, pour les applications de jailbreak, cet arrondi n'est PAS fait pour vous. Vous devez arrondir les graphiques PNG eux-mêmes. Donc, cela pourrait très bien être important.
Nate

3

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.

forme avec rayon 160pxentrez la description de l'image ici

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.

que se passe-t-il si vous redimensionnez l'image tout en conservant la fine ligne grise? réponse: il finira par correspondre à la ligne grise. donc ce n'est pas le rayon de la frontière qui est faux, mais la taille de l'icône pour ce rayon de la frontière ...
MoralCode

2

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


y nous devrions appliquer des radios?, sans radios, les icônes carrées fonctionneront parfaitement.
Vinayak

2

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.


Oui, j'ai créé une icône carrée sans coins arrondis et avec "Icon Set Create" (dans l'App Store), toutes les icônes sont générées automatiquement.
J.Fdez

1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.