Créer des icônes avec Icon Composer

Bienvenue dans Create Icons with Icon Composer. Je m’appelle Lyam et je suis designer dans l’équipe Design. Au cours de cette séance, je vais vous montrer comment utiliser Icon Composer pour créer vos propres icônes d’apps sur iPhone, iPad, Mac et Watch.

Si vous n’avez pas encore regardé notre séance « Say hello to the new look of app icons », elle résume les nouveautés du design des icônes sur les plates-formes Apple, ainsi que de nouveaux modes de personnalisation sur iOS et macOS. Je vous recommande vivement de commencer par là, puis de revenir ici pour apprendre à tout créer vous-même. Avant de commencer, j’aimerais dire un mot sur l’évolution des icônes au fil du temps. Vous vous souvenez peut-être que pendant longtemps, les icônes d’app Mac étaient créées dans toutes sortes de tailles pour s’adapter à chaque usage. C’était avant les écrans Retina, quand il fallait aligner les éléments sur la grille de pixels pour optimiser contraste et lisibilité.

Puis sont arrivés iOS, watchOS et les écrans 2x, puis 3x, avec une densité de pixels doublée, et cela a fait beaucoup d’icônes à créer. Puis, avec les progrès des écrans haute résolution et de la mise à l’échelle automatique, on peut désormais fournir une seule image par plate-forme, et laisser le système gérer le reste, ce qui est bien plus simple. Place à 2025 !

Avec l’arrivée de nouveaux modes sombre et teinté sur iOS cette année, leur adoption sur macOS et le nouveau look sur Watch, nous sommes de nouveau à un tournant. Alors, puisque nous harmonisons le langage de nos icônes d’app, nous en avons profité pour simplifier à nouveau le processus.

Tout cela peut se faire dans un seul fichier grâce à Icon Composer.

Si votre icône est très détaillée, vous pouvez toujours importer des images séparées dans Xcode. Sans rien faire de plus, elle bénéficiera automatiquement du nouveau style de bord élégant sur l’appareil. Le terme technique pour cela est un éclat spéculaire. En revanche, si votre visuel s’adapte mieux au nouveau langage de design (comme cette version plus graphique), importez-le dans Icon Composer pour profiter des possibilités du design Liquid Glass.

Icon Composer complète vos outils de design et offre un contrôle total sur nos matériaux. Il facilite aussi la création des icônes d’app sur toutes nos plates-formes et apparences. C’est l’outil que nous avons utilisé cette année pour mettre à jour nos icônes : un vrai gain de temps. Un seul visuel suffit pour créer des icônes sur iPhone, iPad, Mac et Watch, offrant à votre app une identité cohérente, où qu’elle apparaisse. Profitez des propriétés dynamiques exclusives du verre, avec un aperçu en temps réel et la possibilité de tester nos six nouvelles apparences : Par défaut, Sombre, Transparent Clair, Transparent Sombre, Clair Teinté et Sombre Teinté.

Une fois votre visuel finalisé, vous pouvez même exporter les images pour vos besoins marketing ou autres. Plus besoin de vous soucier de créer toutes les tailles d’icônes. Les matériaux sont conçus pour s’adapter à votre icône.

Voyons à quoi ressemble le nouveau flux de travail avec Icon Composer. Commencez dans votre outil de design, exportez les calques, puis importez-les dans Icon Composer pour ajuster le rendu, les modes d’apparence et les plates-formes. Enregistrez le fichier et envoyez-le dans Xcode. Voyons tout cela de plus près. Commençons par le design. Si vous travaillez avec des graphismes plats, mieux vaut utiliser un outil vectoriel, car la possibilité d’exporter en SVG vous offrira plus de souplesse par la suite. Une fois le fichier ouvert, définissez la bonne taille de canevas. Le plus simple, selon moi, est d’utiliser l’un de nos modèles d’icônes d’app. Ils sont disponibles pour Figma, Sketch, Photoshop et Illustrator et se trouvent tous sur le site Apple Design Resources. Pour iPhone, iPad ou Mac, ces modèles utilisent maintenant un canevas unifié de 1024 px, avec une grille et une forme arrondie, plus simple à gérer. La Watch utilise un canevas de 1088 px avec la même grille, ce qui facilite l’adaptation des designs entre plates-formes.

Ensuite, vous pouvez créer votre icône avec des calques. Si vous avez déjà créé des icônes pour tvOS ou visionOS, vous maîtrisez sans doute déjà l’utilisation des calques. Chaque calque correspond à un niveau de profondeur : l’arrière-plan en bas avec les autres éléments au-dessus.

Souvent, un calque de fond et un de premier plan suffisent, comme pour l’icône Messages. Votre visuel peut aussi avoir plus de calques, comme pour l’icône Maison.

En plus de la superposition, séparer les couleurs par calques permet de garder plus de contrôle dans Icon Composer. Voyons l’icône Traduire. Les bulles utilisent deux calques séparés, c’est déjà une bonne base. En séparant aussi le texte des bulles, j’obtiens encore plus de contrôle : pour créer la version mode sombre dans Icon Composer, il me suffit alors de modifier un seul fond, et c’est terminé.

Un autre point à garder en tête : certaines décisions créatives se prennent directement dans Icon Composer. Retour à l’icône Traduire. Ça serait sympa d’ajouter un léger flou à la zone de chevauchement, voire une ombre subtile pour lui donner du relief.

Comme je vais créer ces calques dans le design Liquid Glass, ces propriétés dynamiques (comme le flou, la brillance, l’opacité ou la translucidité) peuvent être ajoutées dans Icon Composer.

Au lieu d’intégrer ces effets directement dans mon fichier, je préfère garder un visuel simple, plat et facile à modifier.

Une fois le visuel prêt, vous allez exporter les calques au format SVG. Cela peut varier selon l’outil utilisé. Pour Illustrator, un script de conversion calques en SVG est disponible en téléchargement pour automatiser la tâche. Exporter avec la bonne taille de canevas garantit un bon positionnement dans Icon Composer. Numérotez-les selon la profondeur, l’ordre sera respecté automatiquement. Sinon, vous pouvez les réorganiser plus tard.

Les couleurs de fond et dégradés se gèrent directement dans Icon Composer, pas besoin de les exporter.

Si je veux utiliser du texte, il faut le convertir en contours avant d’exporter, car le format SVG ne conserve pas les polices. Et pour les dégradés personnalisés, les images matricielles ou les éléments non compatibles SVG, nous exportons ces calques au format PNG. Ce format sans perte conserve la transparence du fond. Dernier conseil : n’incluez jamais le masque en rectangle arrondi ou en cercle dans vos exports. Pour cet exemple Siri, évitez d’exporter avec ce masque, car il est appliqué automatiquement plus tard pour garantir un recadrage parfait. Ah, c’est mieux.

Une fois les calques exportés, vous êtes prêt à ouvrir Icon Composer. Jetons un coup d’œil à un projet existant.

À gauche : la barre latérale avec le canevas, les groupes et les calques. Au centre : le panneau d’aperçu avec les visuels et les contrôles de prévisualisation. À droite : l’inspecteur avec les propriétés d’apparence et les options du document.

À l’ouverture d’Icon Composer, seule la zone de travail (canevas) est visible, comme ceci.

Mais vous ne voudrez sans doute pas utiliser cette teinte de bleu. Pour définir la couleur de fond, sélectionnez simplement le canevas dans la barre latérale, puis choisissez une couleur ou un dégradé dans l’inspecteur. Je vais utiliser l’un de ces préréglages système, des fonds clairs et sombres optimisés pour nos nouveaux matériaux, et la mise à jour s’affiche dans le panneau de prévisualisation.

Vous pouvez voir comment ces sections se combinent. Voyons chaque zone, en commençant par la barre latérale. Glissez-déposez vos calques ici et ils s’organisent par ordre alphabétique dans un groupe.

Dans Icon Composer, les groupes gèrent l’empilement et les effets de verre. Par défaut, il n’y a qu’un calque, mais il peut y en avoir jusqu’à 4. Ce nombre offre un bon équilibre pour limiter la complexité visuelle d’une icône. Pour l’icône Accueil, j’ai utilisé les 4 calques afin que chacun ait son propre effet de verre.

En bas, on retrouve les plates-formes et modes d’apparence : les trois annotations habituelles pour le clair, le sombre et le teinté.

Cette année, ces options ont été renommées Par défaut, Sombre et Mono, avec un visuel générant toutes les apparences clair et teinté.

Et toutes sont prévisualisables d’un clic sur la vignette.

Dans l’inspecteur, vous trouverez tous les réglages d’apparence et les paramètres du document, Pratique pour savoir sur quelles plates-formes concevoir.

Revenons sur les contrôles d’apparence.

Quand vous faites glisser un calque dans Icon Composer, il a automatiquement le design Liquid Glass.

Au niveau du calque, vous pouvez choisir de l’activer ou non. Et vous retrouverez d’autres contrôles utiles, familiers des outils de design.

Les contrôles de couleur sont utiles pour créer des variantes en mode sombre ou mono et ceux de composition facilitent l’adaptation des visuels selon les plates-formes.

Si on passe au niveau du groupe, on voit que les contrôles sont un peu différents. Il y a ici toutes les options pour Liquid Glass. Certaines sont définies automatiquement, mais il est recommandé de les ajuster pour obtenir le rendu souhaité.

Quand vous ajustez ces propriétés, certaines (comme l’opacité, le mode de fusion et le remplissage) sont préconfigurées pour chaque apparence, et d’autres s’appliquent à toutes, car elles restent généralement constantes entre les modes. Pour plus de contrôle, cliquez sur le plus quand vous survolez avec la souris pour créer une variante individuelle d’une propriété.

Voici quelques conseils et éléments à garder en tête quand vous utilisez ces propriétés.

Prenons le jour sur l’icône Calendrier. Je trouve que c’est un peu chargé et déformé dans les zones étroites. On peut résoudre cela en désactivant l’effet spéculaire du groupe ou en désactivant Liquid Glass sur le calque.

Les ombres. Les ombres neutres sont prédéfinies. Elles sont subtiles, polyvalentes et s’adaptent à tous les arrière-plans. Sur fond blanc, c’est l’occasion idéale de tester les ombres chromatiques. La couleur du visuel se diffuse sur l’arrière-plan, ce qui met en valeur la lumière et la texture du matériau.

On peut conserver les ombres neutres pour les modes sombre et mono en créant une variante.

En parlant du mode sombre, il y a aussi quelques points à garder en tête.

Comme les remplissages. Je les utilise toujours pour optimiser les visuels. Prenons l’icône Dictionnaire. Si je ne fais rien pour le mode sombre, elle ressemblerait à ça, un bon exemple, car cela met en évidence deux points. Un, le marque-page bordeaux se fond dans le noir. Deux, on perd un peu le rouge corail distinctif.

Il vaut mieux modifier le remplissage. Cette logique vaut aussi pour l’opacité et le mode de fusion.

Disons que j’ai importé un PNG sans pouvoir utiliser de remplissage. On peut faire de même en créant une autre image dans l’outil de design, puis en l’important comme variante.

La lisibilité est aussi essentielle en mode mono. Définir au moins un élément de l’icône en blanc, généralement le plus visible ou reconnaissable, garantit une bonne lisibilité. Et les autres couleurs peuvent être converties en nuances de gris. Icon Composer effectue une conversion automatique, mais il est important de l’ajuster pour un contraste optimal. Quand vous concevez pour des formats rectangle arrondi ou cercle, vous n’aurez souvent rien à modifier, car le nouveau canevas pour Watch est visuellement plus grand et utilise la même grille. Un point à surveiller toutefois : la composition. Faites des ajustements visuels pour la forme circulaire. Si certains éléments touchent les bords du canevas, agrandissez-les pour qu’ils atteignent à nouveau les bords de la Watch. Autre option : si vous connaissez le principe de la zone de débord, vous pouvez l’intégrer directement dans votre visuel source. Jetons à présent un dernier coup d’œil au panneau d’aperçu.

Les contrôles en haut à droite permettent de changer l’arrière-plan tout en affichant votre icône. Idéal pour la voir dans un autre contexte. Et pour tester la lisibilité en ajoutant des fonds ou des images derrière les nouveaux modes.

Vous pouvez aussi afficher la grille d’icônes, voir les effets de lumière et zoomer/dézoomer pour voir les détails.

Une fois votre travail terminé dans Icon Composer, enregistrez le fichier .icon, faites-le glisser dans Xcode et sélectionnez votre icône dans l’éditeur de projet. Lorsque vous concevez et lancez votre app, vous voyez comment l’icône s’adapte aux plates-formes et apparences.

Pour conclure, le processus de design commençait et se terminait autrefois dans des outils classiques. Avec Icon Composer, nous offrons un point de passage supplémentaire pour donner vie aux designs de façon plus dynamique dans nos produits, tout en réduisant le temps passé à créer des éléments ou à recréer des effets de verre dans Photoshop. On est tous passés par là. Le design d’icônes évolue : fini les images statiques, place à des visuels expressifs, multi-couches, qui réagissent aux interactions et s’adaptent aux modes d’affichage. Elles offrent désormais une expérience bien plus riche et intégrée sur l’appareil.

Pour en profiter, Icon Composer est disponible en version bêta et sera amélioré avec de nouvelles fonctionnalités grâce à vos retours. Nous vous encourageons à le télécharger, à utiliser l’Assistant d’évaluation pour suggérer des améliorations, et découvrir les ressources disponibles. Merci de votre attention.