Comment faire un avatar Star Wars ?

Ah l’avatar, si important pour que l’on puisse vous reconnaitre sur les forums. Indispensable pour montrer à tous sa différence et sa personnalité. Mais voilà, pour y arriver, encore faut-il en faire un. Avoir un avatar proposé par un site, c’est risquer d’être confondu avec d’autres personnes. Seulement vous n’y connaissez rien en graphisme ? Pas de problème !

Cela n’est pas très compliqué à faire, et cela ne prend pas beaucoup de temps. Tout d’abord nous allons voir quels outils nous utilisons, puis on verra comment choisir ce qui sera notre futur avatar avant de le réaliser à proprement parler. Si vous deviez avoir des questions, n’hésitez pas à aller sur le forum et plus précisément sur le sujet dédié à ce tutorial.

Les outils à employer

Pour ma part, j’utilise Paint Shop Pro 8.03 - disponible en démo sur clubic.com. Il s’agit d’un logiciel de dessin / retouche photo très performant et relativement abordable pour un débutant.

Choisir son avatar

Pas question ici de discuter de goûts ou autres !! Nous allons voir ce qu’il faut utiliser comme type d’image source. Vous pouvez prendre un fond d’écran, en général cela permet d’avoir de bons résultats. Mais en fait on peut détourner n’importe quelle image. Afin de ne pas trop se compliquer la vie au départ, il est sage de trouver un personnage (si on fait un personnage, ca sera le cas dans mon exemple) qui se détache bien du fond... Plus le fond de l’image est proche des couleurs de notre personnage, et plus la manoeuvre est compliquée à faire ! Sachez que la qualité de l’image est importante, si elle est très compressée - comprennez dégradée - cela complique votre tâche. Bref dans mon exemple je vais prendre un personnage bien net, j’utilise un fond d’écran en 1024x768 au format BMP (2,25 megas). La voici en apercu, cliquez pour le grand format.

Fig.1 Notre image originale

Nous allons donc faire un avatar de la belle blonde à droite

1ère étape : Recadrage

La première étape consiste à recadrer l’image. En effet l’essentiel ne nous sert à rien, donc nous allons le supprimer ! Il existe un outil recadrer qui permet de créer une sélection et de supprimer ce qui se trouve hors de cette sélection par un double clic. Vous pouvez donc encadrer la jeune femme asser largement, mieux vaut en avoir de trop que pas asser :) Notez l’outil recadrage signalé par la flèche rouge sur la gauche de notre écran. Vous pouvez aussi voir l’étendue de la sélection que j’ai réalisée dans notre exemple.

Fig.2 Le recadrage dans Paint Shop Pro

Une fois ma sélection définie, je double clique à l’intérieur de cette dernière : et hop, le reste est effacé. A ce stade il est utile de sauver l’image, faites fichier > enregistrer sous et choisissez "Windows or OS/2 Bitmap (*.bmp). Il s’agit du format graphique standard de windows, il n’utilise aucune compression ce qui est parfait car nous ne causerons aucune altération de notre image. Voyez d’ailleurs le résultat ci dessous.

Fig.3 Notre image une fois recadrée

Après recadrage notre image est donc exploitable.

2ème étape : Effacer le superflu

Une partie de notre image recadrée n’est pas à conserver, il faut donc l’éliminer. Ceci est d’ailleurs l’essentiel de notre travail en fait. On va remplacer l’ensemble de ce qui ne nous intéresse pas avec une couleur unique et bien évidemment opaque ! Attention, cette couleur DOIT être proche de la dominante du forum sur lequel vous utiliserez l’avatar... forum sombre, couleur sombre, forum clair, couleur claire :) Pour le forum de Générations StarWars nous utiliserons une couleur #404040 (ou 64,64,64 en RVB) ce qui correspond à un gris très sombre. Paint Shop Pro, comme tout logiciel de retouche photo qui se doit, propose l’outil remplacer. Il permet de remplacer une couleur par une autre au passage du pinceau (enfin de votre souris). Nous allons rapidement étudier cet outil et les options qu’il propose. Voici une image de ma barre d’outils, je l’ai placée à l’horizontale pour vous faciliter la vue.

Fig.4 Les options de l’outil recadrage dans Paint Shop Pro

"L’outil de remplacement de couleur" est l’icône encadrée en bas, entre la baguette magique et le pinceau. Il est représenté par deux rectangles de couleur, et une flèche centrale. Mais attardons nous sur ses options. La plupart ne vous serons pas utile, je ne les évoquerais donc pas. Taille permet de définir la taille en pixel de l’outil, cela peut vous être utile pour colorier de grandes sections d’image, ou au contraire de réduire la taille à 4-5 pixels pour vous occuper d’une zone de petite taille. L’autre option essentielle est tolérance. Elle permet de définir la plage d’action de notre remplacement. En effet, réglée à 0 seule la couleur sélectionnée est remplacée par la nouvelle. Mais vers 20, vous remplacerez aussi les couleurs très proche de celle sélectionnée. Ainsi si vous remplacez du bleu par du gris sombre, à 0 vous ne remplacez que le bleu choisit au départ, et seul les pixels qui sont de même valeur vont changer. A 20 vous remplacerez de larges portions du ciel, la tolérance étant plus grande, l’outil remplace des couleurs proches de votre coloris initialement sélectionné. Avant d’aller plus loin je pense qu’il faut préciser que Paint Shop Pro (et encore une fois il n’est pas le seul à fonctionner ainsi) utilise deux couleurs sur votre palette d’outils. Une primaire et une secondaire : une pour le clic gauche et une pour le clic droit. Vous pouvez donc peindre au choix avec ces deux couleurs, que vous pouvez bien évidemment changer à volonté ! Dans le cas de l’outil remplacement, la couleur principale est remplacée par la couleur secondaire avec un clic droit. Mais d’un clic gauche vous pourriez aussi bien remplacer la couleur secondaire par la couleur principale. C’est une question de goût je pense.

Toujours au niveau de l’utilisation de Paint Shop Pro, sachez qu’en passant votre curseur sur l’image, et en appuyant sur la touche CTRL (control) Vous activez la pipette et pouvez ainsi sélectionner la couleur de votre choix : un clic gauche et elle sera votre couleur principale, un clic droit et elle sera votre couleur secondaire. Pour terminer avec les bases vous pouvez aussi cliquer sur ces deux couleurs dans votre barre d’outil et vous aurez un menu qui permet de choisir une couleur de votre choix. Voyez l’image suivante et les deux flèches rouges pour les détails.

Fig.5 Choix des couleurs principales et secondaires

Passons à la mise en pratique, j’ai choisit un bleu avec l’outil pipette (touche control) du ciel en haut à gauche de mon image recadrée. L’outil remplacement étant actif, j’ai réglé sa transparence à 30 pour effacer une large gamme de bleus. Ma couleur secondaire est le fameux #404040 (ou 64,64,64 en RVB) dont nous avons parlé plus haut et que j’ai sélectionné via le menu évoqué à l’instant. Voici le résultat de mon remplacage :

Fig.6 L’outil remplacement en action : le ciel devient gris sombre

Comment vous pouvez le constater, j’ai remplacé une toute petite partie du ciel, en revanche je n’ai pas du tout altéré ma jolie blonde. C’est parce que par chance elle ne contient pas de bleu, j’ai donc pu passer sans soucis mon outil. Si jamais vous avez des couleurs proches entre le fond et votre personnage il faudra utiliser une tolérance plus basse, et aussi réduire la taille du pinceau pour affecter une zone plus réduite. Vous noterez qu’il reste encore pas mal de travail, et vous pouvez tout de suite choisir un autre bleu à remplacer (touche control puis clic gauche) et la remplacer avec votre clic droit. Si vous notez que des pixels gris apparaissent sur votre personnage, revenez en arrière (CTRL+Z, ou édition > annuler) et soyez plus précis ! Vous pouvez maintenant remplacer l’essentiel du ciel de cette façon. Voyez ce que ca donne après quelques minutes :

Fig.7 Après remplacement de tout le fond, notez les "cracras" !!

Sachez que j’ai utilisé l’outil pinceau pour effacer certaines portions, surtout quand elles sont éloignées du sujet que je désire garder et qu’il n’y a donc pas de risque que je l’abîme. Certaines zones qui contiennent trop de couleurs différentes (comme le morceau d’un autre personnage en bas à à gauche de notre image) sont aussi à traiter ainsi si on ne souhaite pas y passer trop de temps. Vous noterez qu’il reste quelques cracra autour de l’image, ceci n’est pas trop grave puisqu’une fois réduite ils disparaitront probablement. Vous pouvez néanmoins utiliser l’outil baguette magique, cliquer sur le fond gris pour le sélectionner en entier. Ensuite allez dans le menu sélections > modifier > étendre et choisissez 1 pixel. alors votre sélection attrape les fameux cracras... vous pouvez alors appuyer sur la touche supprimer, qui en fait remplace toute la sélection par votre couleur secondaire (le fameux gris sombre), mais de facon progressive. Vous noterez que les cracras deviennent plus sombres. Appuyez plusieurs fois pour les assomblir suffisament. Il existe plusieurs méthodes différentes pour réaliser cette "diminution des cracras" mais j’ai volontairement choisit la plus simple. N’oubliez pas de faire TOUTES les zones passées en gris foncé, par exemple sous le menton de notre amie il y a deux zones à traiter ! Voici le résultat final :

Fig.8 Nettoyage des bords de notre personnage

Pas mal vous ne trouvez pas ? Nous avons donc pratiquement terminé notre oeuvre ! Il faut maintenant penser à finaliser tout ca : recadrage et redimensionnement au programme.

3ème étape : recadrage, redimensionnement

Avec tous ces éléments effacés, il y a des parties qui ne sont désormais plus utiles à notre avatar, nous allons de nouveau utiliser l’outil recadrer pour effacer ce qui ne sert à rien. Il faut aussi savoir que nous allons aussi définir de façon permanente ce qui sera visible sur notre avatar. Sachez que 80x80 pixels ce n’est pas grand il faut donc conserver uniquement les parties essentielles à votre future image, aussi rappellez vous que 80x80 est un carré. Lors de ce recadrage nous allons éliminer les morceaux devenus inutiles, ceux qui se seront de toute façon pas visible, et aussi faire en sorte que notre image soit aux bonnes proportions : une largeur égale à la hauteur. Regardez l’image suivante :

Fig.9 Subtilité du recadrage : respecter le ratio hauteur/largeur

La flèche rouge indique un élément important : l’étendue de notre recadrage. Lorsque vous utilisez l’outil de recadrage, Paint Shop Pro affiche deux informations à l’endroit indiqué : la largeur et la hauteur de cette dernière et surtout le ratio entre les deux ! Un ratio de 1 indique que la largeur est égale à la hauteur, ce qui est notre désir dans ce cas ! N’oubliez pas également qu’une fois votre sélection faite, vous pouvez cliquer sur l’un des bords pour le tirer, c’est plus facile que de jouer sur la diagonale uniquement. Dans mon cas j’ai baissé le bord du haut pour me rapproche du sommet de la tête de la belle. J’ai réduit l’espace à gauche car il n’y avait rien d’intéressant, et j’ai coupé la zone droite de façon à supprimer le texte présent. Pour terminer j’ai placé la zone du bas de façon à atteindre mon ratio de un, et avoir une sélection carré. Evidemment à vous de trouver l’équilibre entre ce qui est coupé et ce qui ne l’est pas, on peut déplacer de quelques pixels chaque côté pour arriver à nos fins ! Voyez le résultat ci dessous :

Fig.10 Résultat final du recadrage

Pas mal hein ? Il reste désormais à la réduire à sa taille finale : 80 pixels de côté. Allez dans le menu "Image > Redimensionner" (resize) ou appuyez sur SHIFT+S. Choisissez une taille en pixel, 80 dans notre cas, et vérifiez que vous êtes bien sur "taille intelligente" pour que tout se passe au mieux.

Fig.11 Changer la taille de notre image dans Paint Shop Pro

Vous pouvez maintenant admirer notre image finale, ou presque, dans sa taille réelle ci dessous. Mais en avons nous terminé pour autant ? Presque ! Mais prennez quelques secondes pour admirer notre oeuvre :

Fig.12 Notre image à la bonne taille

En effet si nous laissions notre image comme ca, elle aurait toujours ce fond sombre. Mais sur un forum il y a toujours au minimum deux couleurs, donc dans l’un des cas au moins on verrais un gros carré sombre pas beau. Il faut donc utiliser un miracle de la technologie moderne : la transparence !

4ème étape : Couleur transparente, et compression

La couleur transparente permet de définir dans l’image une couleur qui ne sera pas affichée, une couleur invisible. Le but est donc d’avoir un effet de transparence ! Avec notre fond uniforne, nous pouvons aisément réaliser cette opération !! Mais il faut tout d’abord sauver notre image ! Allez dans le menu "Fichier > Enregistrer sous" et choisissez le format GIF (CompuServe Graphics Interchange) validez tout ce qui demandé. Qu’avons nous fait ? Déjà l’image a été réduite de 16 millions de couleurs à 256 couleurs. En effet, le GIF est le seul format supportant la couleur transparente et utilisable dans tous les navigateurs internet mais il n’utilise que 256 couleurs. Pour un avatar cela suffit très largement. Maintenant on peut travailler sur notre nouvelle image.

Allez dans le menu "image > palette > couleur transparente" ou bien tapez CTRL+SHIFT+V vous arrivez dans le menu de sélection de la couleur transparente. Cliquez alors sur le fond de couleur de votre image, cela va automatiquement sélectionner cette couleur comme couleur transparente.

Fig.13 La couleur transparente dans Paint Shop Pro

Vous avez donc modifié la couleur transparente, pourtant rien n’a changé à l’écran ! Appuyez sur SHIF+V ou bien allez dans le menu "Image > Palette > Voir la transparence" et voici ce qui apparait :

Fig.14 Le résultat de la création de la couleur transparente

Mais c’est quoi ce truc tout pas beau ? Et voui, il y a un léger problème. Que s’est-il passé ? Lorsque l’image a été enregistrée en GIF, nous avons réduit les couleurs de 16 millions à 256, certaines ont donc été légèrement modifiées. De fait... notre fond uniforme n’est plus autant uniforme ! Il faut donc une fois de plus utiliser l’outil de remplacement ayez toujours notre gris sombre en couleur secondaire, et utilisez la pipette pour sélectionner l’une de ces grosses tâches puis remplacez... dès lors vous transformez ces tâches sombre en couleur transparente et le tour est joué. Inversement, certaines parties du personnages peuvent avoir disparu pour cause de couleur trop proche. Cela donne des pixels blancs (transparents) là où il devrait y avoir de la couleur. Prennez le crayon de base, choisissez une taille 1 et trouvez dans la palette une couleur proche et complétez point par point là où il faut. Enregistrez le tout et hop vous avez votre avatar ! Voici le fichier final, il pèse à peine 5ko et il s’intègre parfaitement sur les fonds sombres du forum, notez que sur fond blanc ce n’est pas très beau.

5ème étape : Fireworks et la compression

Si vous êtes particulièrement maniacs, vous pouvez utiliser FireWorks pour effectuer la compression en gif, ceci est néanmoins totalement facultatif. Tout ce que vous avez à faire c’est ouvrir votre fichier dans Paint Shop Pro, appuyer sur CTRL+A pour tout sélectionner, faire CTRL+C pour copier et aller dans FireWorks, faites "Fichier > Nouveau" et validez. Maintenant collez l’image avec un rapide CTRL+V et voilà ! Maintenant il faut exporter, appuyez sur CTRL+SHIFT+X ou bien faites le menu "Fichier > Aperçu avant exportation". Dans le menu ouvert vérifiez que vous êtes bien au format gif, et utilisez la pipette avec un + dessus pour définir la couleur transparente (cliquez sur votre image à droite. Enfin choisissez le nombre de couleurs. "Exacte" est une option qui offre la meilleure qualité, mais vous pouvez utiliser sans trop de soucis "WebSnap Adaptive" qui offre 128 couleurs et un poids inférieur. Validez le tout, le tour est joué !