Créer des icônes avec Icon Composer

Découvrez Icon Composer, un nouvel outil pour créer des icônes d’apps parfaitement adaptées à iOS, iPadOS, macOS et watchOS.

Avec l’amélioration des résolutions d’écran et l’arrivée des modes d’apparence pour les icônes d’app sur plusieurs plateformes Apple, la création d’icônes est devenue plus complexe et chronophage. Icon Composer s’associe à votre outil de design pour simplifier la création d’icônes d’apps. À partir d’un seul visuel, vous pouvez désormais créer un fichier d’icône unique qui s’adapte à plusieurs plateformes Apple (iPhone, iPad, Mac et Watch) et aux modes d’apparence (sombre, teinté, clair).

Pour des graphiques plats, utilisez un outil vectoriel exportant en SVG pour un rendu optimal à toutes les tailles. Utilisez les modèles d’icônes d’app déjà prêts pour exporter des fichiers bien formatés avec la nouvelle grille d’icônes. Travaillez avec des calques pour ajuster rapidement les couleurs et autres propriétés selon les modes d’apparence des icônes d’app. Gardez votre visuel source plat, opaque et simple. Utilisez Icon Composer pour ajouter des effets dynamiques comme flou, ombre et reflets.

Si vous utilisez Illustrator, utilisez le script inclus dans le modèle d’icône pour générer automatiquement des ressources. Téléchargez le script sur le site Apple Design Resources. Assurez-vous que la taille du canevas est constante pour les œuvres exportées, afin de préserver leur position dans Icon Composer, qui utilise les noms de fichiers numérotés pour gérer l’ordre de composition en Z. Ajoutez des couleurs de fond unies et des dégradés dans Icon Composer. Convertissez le texte en contour avant l’exportation. Exportez les dégradés personnalisés, images matricielles et éléments non-SVG au format PNG avec arrière-plan transparent. Les masques arrondis (rectangle ou cercle) ne sont pas inclus dans l’export, ils sont appliqués automatiquement après.

Pour personnaliser l’arrière-plan des icônes d’app, sélectionnez le canevas et choisissez une couleur ou un dégradé dans l’inspecteur. La barre latérale organise les calques en groupes, qui contrôlent l’empilement et les effets de transparence. Les groupes peuvent avoir entre 1 et 4 couches. En bas du canevas, vous trouvez les options pour plateforme et modes d’apparence. L’inspecteur permet de gérer les propriétés d’apparence et les réglages du document. Les calques reçoivent automatiquement l’effet Liquid Glass, que vous pouvez désactiver. Les contrôles de couleur et composition facilitent la création de variantes selon les modes d’apparence. En mode sombre, les remplissages et autres couleurs doivent parfois être ajustés pour garantir la lisibilité. Pour les apparences monochromes, il est recommandé de mettre au moins un élément en blanc et de mapper les autres couleurs en nuances de gris. Le panneau d’aperçu montre les icônes en contexte, teste la lisibilité et superpose les grilles.

Pour livrer, enregistrez le fichier .icon, glissez-le dans Xcode et sélectionnez-le dans l’éditeur de projet. L’outil simplifie la création des ressources, réduisant le temps passé dans les logiciels de design à recréer les effets de verre et à générer les ressources.