Création d'une icône pour illustrer une page, un évènement ....

Les icônes ARSF respectent la charte graphique du site en utilisant une couleur proche de la couleur principale du thème.

Les dimensions des icônes sont 128 pixels x 128 pixels. Les icônes sont donc carrées. C'est important à noter, car les images qu'on souhaite transformer en icones, ne le sont pas nécessairement.

En résumé, pour créer une icône, on part d'une photo, d'une image, d'un clipart qu'il faut ensuite transformer pour aboutir à une image carrée ne comportant que 2 ou 3 couleurs (mauve, blanc, noir) de dimensions 128px x 128px au format PNG.

Point important: L'image de départ doit être libre de droits. 

Idéalement, l'image de départ est carrée et ne possède que peu de couleurs différentes, idéalement 2, le noir et le blanc. Auquel cas, remplacer la couleur noire par la couleur mauve ne posera pas de difficulté particulière. Si ce n'est pas le cas, il faudra réduire le nombre de couleurs avant de passer à l'étape "Remplacer une couleur".

Le processus requiert, en général, les étapes suivantes:

1. Recadrer l'image pour qu'elle soit carrée
2. Réduire le nombre de couleurs idéalement à 2.
3. Remplacer les couleurs résiduelles
4. Redimensionner l'image en 80x80 afin d'obtenir une icône.
5. Sauvegarder l'icône obtenu au format PNG

La 1ère étape consiste à redimensionner l'image pour qu'elle soit carrée. Cette opération, appelée parfois Crop, est disponible dans de nombreuses applications. XnViewMP (disponible sur Linux, Windows et MacOSX) qui sera utilisé plus loin pour travailler les couleurs, est capable de retailler une image comme suit (cliquer sur l'image): 

Pour réduire le nombre de couleurs, le plus simple est de transformer l'image en Noir et Blanc.

Si l'image de départ est bien constrastée, le résultat sera satisfaisant.  XnViewMP  va transformer les couleurs foncées en noir et les couleurs claires en blanc. Si l'image de départ n'est pas suffisamment contrastée, il y a 2 solutions: changer d'image ou travailler l'image avec un logiciel dédié pour la contraster davantage.

Après avoir transformé l'image en Noir et Blanc, l'étape suivante consistera à remettre l'image en couleurs pour pouvoir ensuite remplacer les pixels noirs en pixels conformes à la charte graphique du site.

XnViewMP (disponible sur Linux, Windows et MacOSX) a la capacité de remplacer une couleur par une autre, tel que décrit ci-dessous:

Si l'image utilise plus de 2 couleurs, il ne faudra pas hésiter à jouer sur le paramètre de tolérance pour transformer plusieurs couleurs en une seule. Une valeur de 100 va permettre de non seulement prendre en compte les pixels noirs, mais aussi les gris foncés, pour les coloriser en mauve, alors qu'une tolérance nulle va simplement transformer les pixels noirs en pixels mauves, tandis que les pixels gris foncés resteront gris foncés.

Pour transformer l'image en icône, il suffit de redimensionner l'image, qui, suite aux traitements précédents, est carrée et conforme à la charte graphique. Encore une fois, XnViewMP dispose de cette capacité. Pour distinguer aisément l'image de départ et l'image réduite à 80 pixels, il est possible de configurer XnViewMP comme suit:

Et, pour réduire l'image, il faut sélectionner l'action Redimensionner :

Notez que XnViewMP est capable non seulement d'enchainer une séquence d'actions, l'une après l'autre, mais il est capable de traiter plusieurs fichiers dans un seul lot. 

Il vous reste à faire l'exercice: transformer une image quelconque en icône. Il est préférable de débuter avec une image qui ne comporte que quelques couleurs, avant de prendre une photo d'un(e) cycliste et d'en produire une icône.