5 votes

Comment puis-je générer des icônes au style iOS/Flurry dans OS X ?

Tels que certains d'entre vous le savent peut-être, le traitement par iOS des icônes d'applications est impitoyablement strict. Il impose un certain arrondi des coins et n'autorise aucune transparence, imposant ainsi un aspect unifié. Je trouve que c'est bien.

J'ai récemment eu un coup de coeur pour l'ensemble d'icônes Flurry de l'Iconfactory et en créant de nouvelles icônes dans ce style, je me suis posé la question : quelle est la manière la plus simple d'appliquer un masque et un recouvrement sur une image personnalisée, et générer toutes les tailles nécessaires pour un fichier d'icône OS X complet (icns) ?

Comme mentionné ci-dessous, je ne recherche pas d'explications techniques sur la façon dont iOS génère ses icônes, ni une solution globale pour générer des icônes en temps réel. Juste ce qui est mentionné en gras ci-dessus. Je suis également conscient de l'approche IconBuilder et bien que ce soit un excellent outil, ce n'est pas ce que je demande. Je préférerais une sorte d'interface de glisser-déposer.

3voto

Peut-être que si quelqu'un écrivait un hack (mais je reste sceptique car tout cela pourrait facilement être fait en obtenant le modèle de l'icône (fichier PSD) et en le faisant manuellement.

iOS dispose d'un cadre pour gérer les icônes de SpringBoard. Les fichiers sont les suivants (convention de nommage tirée d'iOS 5. Les anciennes versions d'iOS abandonnent le suffixe ~iphone) :

  1. AppIconMask@2x~iphone.png
  2. AppIconOverlay@2x~iphone.png
  3. AppIconShadow@2x~iphone.png

(1) est le masque de découpe, qui dicte la forme de l'icône. (2) est l'effet "lustré" qui est quelque peu tombé en désuétude ces dernières années et est facultatif. (3) est la base de l'icône, l'ombre qui est appliquée sous le produit final.

J'ai créé une illustration et une explication expliquant comment ils fonctionnent tous ensemble sur mon site web ce qui devrait aider à mieux expliquer comment iOS livre des icônes sur son appareil respectif.

Masque d'icône Jaku iOS Theme pictogramme

OS X n'a pas un tel système en place. Chaque icône est simplement contrainte par les dimensions définies dans Finder. Apple n'a jamais cherché à contrôler l'apparence des icônes sur OS X, mais voulait avoir une apparence uniforme sur iOS (et je ne les blâme pas), d'où la raison pour laquelle ils ont développé un tel cadre.

Vous pourriez essayer de contacter un développeur Cocoa pour porter le MobileIcons.framework d'iOS vers OS X, mais encore une fois, comme Finder peut ajuster les tailles (dans Lion, de 1024x1024 vers le bas), je reste sceptique quant à la possibilité d'une telle opération.

2voto

domgblackwell Points 2333

Les autres applications mentionnées ont leurs utilisations, mais pour votre demande spécifique, il existe 2 applications qui y parviennent très facilement :

Les deux sont disponibles sur le Mac App Store, mais je préfère icons entre les deux - il est nettement plus robuste et assez bien réalisé. Comme vous pourrez le constater sur la capture d'écran que j'ai ajoutée, icons rend la manipulation de toutes les variables (coins, brillance, tailles d'exportation, etc.) très facile - et ce n'est qu'une partie de l'application ! (Les autres onglets concernent les icônes non destinées aux appareils iDevice…)

Capture d'écran de l'interface de l'application ***icons***

1voto

jgriego Points 296

En s'appuyant sur la réponse de cksum, si vous pouvez obtenir les images de masque, de superposition et d'ombre à une résolution suffisamment élevée (les images @2x ne font toujours que 140px carrés,) et que vous êtes à l'aise avec la ligne de commande/le scripting shell, vous pouvez utiliser ImageMagick, un bon processeur d'image en ligne de commande, pour réellement masquer et composer l'icône.

Une fois que vous avez installé ImageMagick (Ils ont des instructions d'installation ici) vous devriez être capable de traiter votre image avec le masque, la superposition et l'ombre :

convert VotreImage.png superposition.png -composite VotreImage_superposition.png
convert VotreImage_superposition.png masque.png -alpha off -compose CopyOpacity -composite VotreImage2.png
convert ombre.png VotreImage2.png -composite VotreImage_plus_grande.png
convert VotreImage_plus_grande.png -geometry 512 Icon512.png
convert VotreImage_plus_grande.png -geometry 256 Icon256.png

Cela suppose que Votre_Image est grand et carré (1024x1024) et que les fichiers mask.png, superposition.png et ombre.png sont de la même taille.

Idéalement, vous ne devriez pas simplement rééchantillonner l'icône la plus grande pour obtenir les plus petites versions, mais vous pourriez plutôt utiliser un logiciel normal de création d'icônes (par ex. IconBuilder) et l'utiliser pour créer VotreImage à chaque taille, puis faire ce qui précède pour chacune individuellement.

En ce qui concerne le redimensionnement des images de masque, superposition et ombre à la bonne taille, ma meilleure recommandation serait de les agrandir puis de les reconstruire (c'est-à-dire de dessiner un nouveau rectangle arrondi et des dégradés) en pleine résolution avec Photoshop ou GIMP.

Une fois que vous avez l'image à chaque résolution, vous pouvez la jeter dans l'Icon Composer d'Apple (dans les SDK iOS/Mac) pour créer le fichier .icns

Ce n'est pas la solution la plus facile, mais elle vous offre la flexibilité de spécifier le masque exact et d'autres effets ainsi que celui de la ligne de commande.

0voto

flakshack Points 614

Tout d'abord, consultez Img2Icns pour la manière la plus simple de créer un fichier ICNS à partir d'une image de 512x512. (La version gratuite fonctionne très bien).

Deuxièmement, vérifiez CandyBar pour gérer et installer des icônes de remplacement. Cela coûte quelques dollars, mais c'est un excellent programme.

Troisièmement, cherchez sur DeviantArt des icônes Flurry qui ont déjà été créées. Recherchez à la fois flurry icon et ios icon.

Enfin, si vous ne trouvez pas ce que vous cherchez, utilisez ce modèle Flurry pour créer de nouvelles icônes.

0voto

Dan Points 2783

Il n'est pas nécessaire de créer les coins et la brillance, ils sont ajoutés automatiquement par votre application au moment de la compilation.

D'après les documents1:

Lorsque iOS affiche l'icône de votre application sur l'écran d'accueil d'un appareil, il ajoute automatiquement les effets visuels suivants :

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

LesApples.com

LesApples est une communauté de Apple où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres utilisateurs d'appareils Apple, poser vos propres questions ou résoudre celles des autres.

Powered by:

X