Comment je realise mes sets d’AppIcons iOS

Il n’y a pas de solution miracle, mais le but est de ne pas perdre de temps sur cette tâche. Nous avons bien d’autres choses sur lesquelles nous concentrer !

Depuis le début, l’ajout des AppIcon a toujours été fastidieux. En effet, il est necessaire d’ajouter 10 icons de tailles différentes dans le dossier Asset/AppIcon d’une App iOS. Ce chiffre monte à 19 si l’application est compatible iPad. Il faut fournir les icons pour toutes les tailles et tous les facteurs de zoom (1x, 2x, 3x) pour les écrans retina.

La question est : comment faire cela simplement ?

Il existe de nombreuses méthodes, ressources, logiciels graphiques, en ligne de commandes… mais tous ont des résultats différents ou sont un peu moins simples à utiliser.

Photo by UX Store on Unsplash

La solution dont je vais parler ici est disponible ici : https://developer.apple.com/design/resources/
Dans la rubrique iOS, il nous est proposer de télécharger les ressources iOS pour Sketch, Photoshop et Adobe XD. Personnellement, j’utilise Sketch.

Le lien “Add iOS Sketch Library” n’est utile que pour obtenir les visuels iOS 12 officiels. Ici, ce qui nous intéresse c’est “Download for Sketch”.

Et donc ?

Après avoir téléchargé le fichier, on se retrouve avec une archive qui, une fois ouverte, regroupe TOUTES les ressources nécessaires. Je vous laisser explorer, mais ce qui nous intéresse se trouve dans le dossier “Production Templates”. Vous y retrouverez tout le nécessaire pour créer vos fichiers AppIcon et de quoi créer les icons pour vos NavigationBar, TabBar, QuickActions ou les icons pour les iMessages.

Le fichier qui nous intéresse est nommé Template-AppIcons-iOS (le même fichier prenant en charge la gamme P3 est également présent).

Comment cela fonctionne ?

Dès lors que le ficher est ouvert, on remarque qu’il fonctionne globalement comme les autres fichiers sketch de génération d’icons. Nous avons une page “Template-App Icons”, sur laquelle nous obtenons une vue globale de toutes les icons.

La particularité est dans le layer “App Icon Mask — Hide before exporting” qui permet de voir le rendu du set d’icons avant importation dans Xcode. En effet, sur les devices, les icons ont les bords arrondis, mais il faut les importer en mode carré dans Xcode…

Icon created by Pikisuperstar — Freepik.com - use for AppIcon exemple

La page “Symbols” permet d’ajouter l’icon de notre application en taille 1024p (la plus grande taille nécessaire dans les AppIcons). Ensuite, le template fait le reste.

Nous pouvons alors visualiser ce que donnera notre icon dans les différentes tailles, puis l’exporter en PNG (bouton Exporter en haut à droite) SANS OUBLIER de masquer le layer “App Icon Mask — Hide before exporting”. Sinon, l’export se fera avec les bords arrondis.

Il sera ensuite nécessaire de supprimer le canal Alpha (transparence) de tous ces fichiers (avec aperçu ou un logiciel dédié) puisque lors de la publication sur l’app Store, les AppIcons ne DOIVENT PAS avoir de canal Alpha même si l’icon n’a pas de zone de transparence.

Maintenant, plus d’excuses pour perdre du temps à créer vos sets d’AppIcons !