iphone - your - ios icons




iPhone App Icons-rayon exact? (11)

Important: l'équation d'une icône iOS 7

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

Il semble que pour une icône 120px, 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 changer le numéro 120 avec la taille d'icône désirée pour obtenir la fonction correspondante.

Original

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

La meilleure approche ne consiste pas à arrondir les coins de vos icônes. Si vous définissez votre icône en tant qu'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 des coins arrondis pour vos icônes, elles apparaîtront probablement cassées dans tel ou tel périphérique, 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 de belle apparence pour votre application.

Cette approche est valable pour chaque taille d'icône (iPhone / iPod / iPad / Retina), ainsi que pour l'illustration iTunes. J'ai suivi cette approche plusieurs fois, et si vous voulez, 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 reporter à la IconsImages officielle d' IconsImages . Dans cette page, il est clairement indiqué qu'une icône carrée obtiendra automatiquement ces choses lorsqu'il est affiché 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 désiré en dessinant simplement une icône carrée et en remplissant le contenu. Le rayon final sera quelque chose de similaire à ce que disent les autres réponses, 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?

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 tutoriel ou un modèle mais je ne peux pas en trouver un.

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

Modifier:

Quel est le rayon de l'iPad Retina?


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

  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 - 29px - 5.088
  8. [email protected] - 58px - 10.175

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

La connaissance de ce qui précède est toutefois importante pour l'utilisation des icônes dans l'interface utilisateur de l'application, où vous devez appliquer le masque dans le code ou le pré-rendu dans photoshop. Il est également utile lors de la création d'illustrations pour des sites Web et d'autres documents promotionnels.

Lecture supplémentaire:

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

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

Les documents officiels d'Apple sur la taille des icônes et les considérations de conception: IconsImages

Mettre à jour:

J'ai fait quelques tests dans Photoshop CS6 et il me semble que 3 chiffres après la virgule décimale suffisent à obtenir exactement le même vecteur (au moins tel qu'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 rond n'a pas arrondi et a effectivement montré plusieurs chiffres après la virgule décimale. Pas sûr de ce qui se passe là-bas, mais il utilise et stocke définitivement le nombre 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 le point décimal (avant il y avait 13!). Dans la plupart des situations, il serait probablement difficile de faire la différence entre une icône 512px transparente masquée à 90px et une masquée à 89.825, mais l'anti-crénelage du coin arrondi serait certainement légèrement différent et serait visible dans certaines circonstances, en particulier si un second masque plus précis est appliqué par Apple, en code, ou autrement.


Il y a deux réponses totalement contradictoires avec un grand nombre de voix: l'une est 160px @ 1024 l'autre est 180px @ 1024. Alors, une 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é iTunes U icône de l'App Store, il est 175x175px je l'ai upscaled dans photoshop à 1024px et mettre deux formes sur elle, une avec 160px rayon et une avec 180px.

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

C'est ce que je fais maintenant dans PhotoShop:

  1. Je crée une toile de 1026x1026px avec un masque de 180px pour la conception principale Smart Object .
  2. Je duplique l'objet Smart principal 5 fois et les redimensionne à 1024px, 144px, 114px, 72px et 57px.
  3. J'ai mis une "Nouvelle Tranche Basée" sur chaque Smart Objects et j'ai renommé les tranches en fonction de leur taille (par exemple icon-72px).
  4. Lorsque je sauvegarde l'illustration, je sélectionne "All User Slices" et BANG! J'ai toutes les icônes nécessaires pour mon application.

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


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


La réponse de dbarnard a la formule pour calculer le rayon correct, mais comme vous cherchiez les templates, tous les masques et overlays 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 versions plus anciennes il sera probablement dans / Developer /).

Comme d'autres l'ont noté, 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.

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


Les gens se disputent sur le fait que le rayon du coin soit légèrement augmenté, mais 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 un 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:


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

Ce que je fais maintenant est de créer un projet vide avec Xcode, de définir un fichier PNG complètement blanc comme icône et de désactiver le biseau et le brillant prédéfinis. Ensuite, je cours 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 obtiendra des coins parfaitement arrondis.


Si vous ne comptez pas de course, le rayon exact est en réalité 10px pour l'icône 57x57.

Je reçois cette information de iconreference .



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 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 n'ajoutera pas l'effet de brillant mais il placera un arrière-plan noir en dessous et entourera toujours les coins de l'image avec ces coins rayons si le rayon du coin sur l'une des icônes est plus grand alors il montrera noir autour des bords / coins.

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

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 aussi un fichier PNG 114x114 nommé [email protected] au projet / cible et Xcode l'utiliserait automatiquement comme icône sur un écran rétine. 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 pour vos images de lancement. Utilisez launch.png à 320x480 et [email protected] à 640x960.





icons