Question:
Comment puis-je générer des icônes de style iOS / Flurry sous OS X?
yusf
2012-03-15 19:00:03 UTC
view on stackexchange narkive permalink

Comme certains d'entre vous le savent peut-être, le traitement iOS des icônes d'application est impitoyablement strict. Il force une certaine rondeur des coins et ne permet aucune transparence, renforçant ainsi un look unifié. Je trouve ça sympa.

Je suis récemment tombé amoureux du jeu d'icônes Flurry d'Iconfactory et la création de nouvelles icônes dans ce style m'a fait réfléchir; quel est le moyen le plus simple d'appliquer un masque et une superposition sur une image personnalisée et de générer toutes les tailles nécessaires pour un fichier d'icône OS X complet (icns)?

Comme mentionné ci-dessous, je Je ne cherche pas d'explications techniques sur la façon dont iOS génère ses icônes, ni une solution à l'échelle du système pour générer des icônes à la volée. Juste ce qui est mentionné en gras ci-dessus. Je connais également l'approche IconBuilder et bien que ce soit un excellent outil, ce n'est pas ce que je demande. Je préfère une interface de type glisser-déposer.

Cinq réponses:
user10355
2012-03-19 04:31:02 UTC
view on stackexchange narkive permalink

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

iOS a un cadre en place pour traiter avec les icônes SpringBoard. Les fichiers sont les suivants (convention de dénomination tirée d'iOS 5. Les versions précédentes d'iOS suppriment le suffixe ~ iphone):

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

(1) est le masque d'écrêtage, qui dicte la forme de l'icône. ( 2) est l'effet "brillant" qui est quelque peu tombé en disgrâce ces dernières années et qui est facultatif. (3) est la base de l'icône, l'ombre qui est appliquée sous le produit final.

J'ai fait un graphique et une explication d'accompagnement de la façon dont ils fonctionnent tous ensemble sur mon site Web, ce qui devrait aider à mieux expliquer comment iOS fournit des icônes sur son appareil respectif.

Jaku iOS Theme icon mask pictogram

OS X n'a ​​pas de système de ce type 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 pourrait essayer de contacter un développeur Cocoa sur le portage du MobileIcons.framework d'iOS vers OS X, mais encore une fois, comme Finder peut ajuster les tailles (dans Lion, n'importe où à partir de 1024x1024 vers le bas), je reste sceptique que cela soit possible.

Merci cksum d'avoir expliqué les techniques sous-jacentes du traitement des icônes iOS. Votre compréhension de ma question est cependant un peu erronée. Je ne vise pas une version OS X de MobileIcons.framework, juste un moyen de générer toutes les tailles appropriées pour un icns, avec masquage et gloss à mon goût.
Ah, je vois. Essayez http://iconfactory.com/software/iconbuilder. Il vous permet de créer un modèle PSD qui inclut la taille de votre choix, puis de les enregistrer en tant que fichier icns unique. Vous devrez exécuter Ps en mode 32 bits car il n'a pas été mis à jour depuis un certain temps, mais il fait exactement ce que vous voulez. Il produit quelque chose comme ceci: http://iconfactory.com/graphics/software/iconbuilder/screen1.jpg Puisqu'il exploite la puissance de Ps, une fois que vous avez configuré les modèles, vous pouvez créer vos icônes avec une relative facilité.
Merci! Je connais l'approche IconBuilder et je l'ai utilisée mais je ne la considérerais pas comme "générer des icônes".
Vaptorious
2012-03-20 04:54:27 UTC
view on stackexchange narkive permalink

Les autres applications mentionnées ont leurs utilisations, mais pour votre demande, il existe 2 applications qui l'accomplissent très facilement:

Les deux sont disponibles sur le Mac App Store, mais je préfère les icônes entre les deux - c'est beaucoup plus robuste et assez poli. Comme vous le verrez sur le capuchon d'écran que j'ai ajouté, icons facilite grandement le bricolage de toutes les variables (coins, brillance, tailles d'exportation, etc.) - et c'est une seule partie de l'application! (Les autres onglets concernent les icônes non-iDevice…)

screen-cap of ***icons*** app interface

Merci d'avoir répondu! C'est un peu ce que je recherche, mais les icônes ont de fortes limitations: cela ne me permet pas de personnaliser le masque et je ne peux pas contrôler les masques et la superposition de "verre" pour chaque taille. La génération en masse serait bien aussi.
jgriego
2012-03-19 06:51:21 UTC
view on stackexchange narkive permalink

En vous basant 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 140 pixels environ) et vous êtes à l'aise avec le script de ligne de commande / shell, vous pouvez utiliser ImageMagick, un joli processeur d'image en ligne de commande, pour masquer et composer l'icône.

Une fois que vous avez installé ImageMagick, (http: //www.imagemagick .org) [Ils ont des instructions d'installation ici] vous devriez être en mesure de traiter votre image avec le masque, la superposition et l'ombre:

  convert YourImage.png overlay.png -composite YourImage_overlay.pngconvert YourImage_overlay.png mask.png -alpha off -compose CopyOpacity -composite YourImage2.pngconvert shadow.png YourImage2.png -composite YourImage_largest.pngconvert YourImage_largest.png -geometry 512 Iconpng .png. png  

Cela suppose que Your_Image est grande et carrée (1024x1024) et que le mask.png, en superposition .png et shadow.png ont la même taille.

Idéalement, vous ne rééchantillonneriez pas simplement la plus grande icône pour obtenir les versions plus petites, mais vous pourriez à la place utiliser un logiciel de création d'icônes normal (par exemple IconBuilder) et utilisez-le pour créer YourImage à chaque taille, puis effectuez les opérations ci-dessus pour chacune d'entre elles individuellement.

En ce qui concerne l'obtention des images de masque, de superposition et d'ombre à la bonne taille, ma meilleure recommandation serait d'agrandir puis les reconstruire (c'est-à-dire en dessinant un nouveau roundrect 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 lancer dans le propre Icon Composer d'Apples (dans le SDK iOS / Mac) pour créer les .icns

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

Merci pour cette réponse! Jamais pensé à l'approche IM. Pas très convivial, mais je suis pour si ça fait ce que je veux. Je vais l'essayer avant la fin de la prime!
En parlant de convivialité, je regardais à nouveau cela et les commandes sont dans le désordre: superposition, masque, puis ombre, pas de masque, superposition, ombre. J'ai corrigé le message, juste un avertissement.
flakshack
2012-03-19 01:50:37 UTC
view on stackexchange narkive permalink

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

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

Troisièmement, recherchez dans DeviantArt les icônes Flurry qui ont déjà été créées. Recherchez à la fois icône flurry et icône ios.

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

Désolé, cela ne répond pas du tout à ma question. Franchement, c'est tout à fait hors sujet. Et écrire «… faire de nouvelles icônes dans ce style…» indique que j'en ai déjà créé quelques-unes.
Vous avez dit: "Quelle est la manière la plus simple d'appliquer un masque et une superposition sur une image personnalisée, et de générer toutes les tailles nécessaires pour un fichier d'icônes OS X complet (icns)?" Le modèle PSD peut être utilisé pour appliquer un masque et un effet de brillance sur votre image personnalisée. Img2Icns générera alors toutes les tailles nécessaires pour un fichier icns complet. Désolé si j'ai mal compris votre question, j'essayais simplement de vous aider.
Dan
2012-03-20 19:18:11 UTC
view on stackexchange narkive permalink

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

À partir de la documentation 1:

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)
Bienvenue à Ask Different! Merci d'avoir publié une réponse! L'OP ne parle pas d'icônes d'application iOS * pour * iOS, mais plutôt d'icônes de style iOS dans * OS X *.


Ce Q&R a été automatiquement traduit de la langue anglaise.Le contenu original est disponible sur stackexchange, que nous remercions pour la licence cc by-sa 3.0 sous laquelle il est distribué.
Loading...