Site web 80px

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

Les notions requises pour la compréhension de cet article sont :

  • les formats d'images (PNG)
  • l'utilisation du pixel
  • le codage des couleurs en RVB (Rouge, Vert, Bleu).

 

Format des icônes du site

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.

Choix de l'image de départ

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 128x128 afin d'obtenir une icône.
  5. Sauvegarder l'icône obtenu au format PNG

Xnviewmp liste des actions

Redimensionner l'image en carré

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): 

Xnviewmp recadrage

Réduction du nombre de couleurs

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.

Remplacer une couleur

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

Xnviewmp remplacer couleur

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.

Transformer l'image en icône

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 à 128 pixels, il est possible de configurer XnViewMP comme suit:

Xnviewmp nom du fichier de sortie

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

Xnviewmp 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.

Ajouter un commentaire