Dessiner des icônes

Les contraintes

En informatique, le dessin d’une icône répond à des contraintes assez strictes. Elles doivent être :

• petites (entre 16 × 16 pixels pour les favicon, et 128 × 128 pixels pour les émojis pour Mastodon par exemple) ;
• carrées ou s’inscrire dans un carré ;
• être accessibles, notamment des personnes qui ont des troubles de perception des couleurs ;
• si possible être utilisables avec un thème clair et avec un thème sombre ;
• et être le plus universelles possible.

La dernière condition est importante si l’icône doit être intégrée, par exemple, à une application destinée à être diffusée largement. Elle n’en a pas si elles sont réservées à votre usage personnel ou à une petite communauté bien définie.

Contrainte supplémentaire, si les icônes doivent figurer dans une barre d’outils spécifique d’une extension par exemple, il faut que leur dessin ne puisse pas prêter à confusion avec celles de l’application qui reçoit l’extension. On va le voir plus bas avec le jeu d’icônes que j’ai dessiné pour PaletteMaker.

Autant dire que c’est un exercice finalement assez difficile même s’il n’exige pas de grandes capacités de dessin.

Dessiner une icône quelques trucs

Un outil pour cela, le logiciel de dessin vectoriel Inkscape dont la prise en main est plutôt facile [1]. Le logiciel figure dans toutes les bonnes distributions GNU/Linux mais est développé aussi pour Windows et MacOS.

Inkscape propose toute une série de modèles, dont des modèles d’icônes. Le mieux est de se baser dessus. Aller dans Fichier > Nouveau à partir d’un modèle… ou faire le raccourci clavier Ctrl + Alt + N.

Dans la boite Nouveau à partir d’un modèle, choisir Icon… ①. Indiquer sa taille en pixels, ②, ici j’ai paramétré la valeur 36 un peu au hasard à vrai dire. LibreOffice recommande 24 px et les redimensionne au besoin. Mais comme c’est du svg la taille importe assez peu et on peut toujours agrandir ou rétrécir le dessin au besoin et sans problème. Valider en cliquant sur le bouton Créer à partir d’un modèle ③.

Le nouveau document sera matérialisé sous la forme d’un cadre « virtuel » grisé aux bonnes dimensions. On dessine ensuite dans le cadre.

Compte tenu de la petite taille de l’icône, on jouera avec les fonctionnalités de zoom pour dessiner (augmenter le pourcentage d’affichage) et vérifier le rendu (le diminuer, je suggère d’ailleurs de vérifier avec un pourcentage inférieur à 100 %, les icônes étant susceptibles d’être affichées dans des dimensions différentes.

Pour qu’elles soient accessibles, il faut jour sur les formes et les couleurs qui donnent deux informations différentes et complémentaires. Sans être graphiste, je suggère d’utiliser une palette de couleur limitée pour simplifier le travail, une bonne occasion d’en générer une avec PaletteMaker que l’on pourra aussi transformer en palette.gpl pour Gimp et Inkscape. Et, bien évidemment, on reste sur du dessin simple et des aplats de couleur.

Personnellement, j’aime bien avoir aussi les icônes réunies dans un même document. Dans ce cas, je les copie-colle au fur et à mesure dans un nouveau fichier dans Inkscape. Cela permet d’avoir une vue d’ensemble et donc de vérifier qu’il y a une bonne unité graphique. Si vous préférez dessiner tout au même endroit, commencez par dessiner un carré aux dimensions requises et servez-vous en comme cadre pour dessiner vos icônes à l’intérieur.

Une fois l’icône dessinée, si vous l’avez basée sur un modèle, vous pouvez exporter la page au format png. Indiquer une résolution à 96 pixels par pouce (ppp ou dpi) pour garder ses dimensions. Si vous l’avez faite sur une page avec toute la série, sélectionnez-la avec son cadre pour garder la forme carrée et exportez la sélection en png, toujours avec la même résolution de 96 pixels.

Inspiration et réflexions

Ainsi que je l’ai signalé d’entrée de jeu, un jeu d’icônes doit être le plus universel possible. Si, pour prendre l’exemple de PaletteMaker, il était facile de dessiner les icônes « Déplacer vers le haut » et « Déplacer vers le bas », ce n’était pas forcément aussi évident pour les autres icônes. Tout d’abord, l’icône « Ouvrir un fichier de palette » devait à la fois faire référence aux icônes habituelles d’ouverture de fichier tout en s’en démarquant afin de ne pas pouvoir être confondue avec celle de l’application, ici Calc de LibreOffice. Ensuite, le bouton « Créer un fichier de palette à partir des définitions actuelles » devait être immédiatement compris comme celui qui générait un nouveau document.

Une palette étant, grosso modo une forme avec des points de couleurs, et comme j’avais déjà dessiné une palette de peintre par ailleurs, j’ai utilisé ce dessin, ajouté une étoile, symbole courant de nouveau en informatique (pourquoi, va savoir !), ce qui a donné l’icône de dossier (déjà dessinée par ailleurs) dans laquelle on glisse la palette.

Et enfin, les deux autres boutons : « Rafraichir les échantillons de couleurs » et « Effacer toutes les définitions » c’était encore moins évident.

Dans ce cas, j’ai fait comme souvent pour trouver l’inspiration, une recherche d’images sur internet au mot ou à l’expression qualifiant l’opération pour voir quels sont les visuels le plus souvent accolés à ces termes. Si vous pratiquez plus d’une langue, faire ces recherches dans les autres langues vous donnera plus d’ouvertures. Il ne reste plus qu’à choisir le symbole [2] qui vous parle le plus et vous semble le plus en accord avec votre jeu d’icônes et, soit l’importer dans Inkscape pour l’adapter à votre propre jeu d’icônes, soit en dessiner un vous-même à partir de ce modèle. Personnellement je préfère dessiner, je trouve que ça me prend moins de temps. Une icône c’est du dessin sommaire et pas très détaillé après tout [3].