Aller au contenu

[Tutoriel] Se faire un avatar digne de ce nom

namewithn0man

Par namewithn0man
dans Débats et Discussions

Messages recommandés

namewithn0man Compétent

namewithn0man

Posté(e)
Posté(e)

Avoir un bel avatar de forum, c'est bien.

Ne pas le massacrer au moment de l'uplaod, c'est mieux.

Le but de ce bref tutoriel est de montrer comment faire cette transformation :

kavap5mx.png

Plan de l'exposé :

  • 1- Outils utiles
  • 2- Les contraintes du forum
  • 3- La retouche
  • 4- Le resampling
  • 5- La compression
  • 6- Les avatars MSN

Je me sers de l'exemple de l'avatar de Krapace pour illustrer mes propos.

1- Outils utiles - - - - - - - - - -

Les Linuxiens étant par définition des experts en GIMP, je décris la manipulation sous Windows.

Pour la retouche d'image, bien souvent MS Paint, utilisé à bon escient, est amplemant suffisant.

Pour la manipulation de l'image retouchée, je vous invite à télécharger IrfanView, un petit logiciel freeware.

A première vue, ce n'est qu'un simple visualisateur - détrompez-vous, malgré sa simplicité il propose des options de manipulation assez poussées. Notemment, il prend en charge un grand nombre de formats de compression.

Petit hors sujet au passage : pour imprimer une image, je connais pas mieux.

Enfin, il vous faut une image :cartonrouge: . Choisissez celle que vous voulez, mais il est impératif qu'elle soit de grande taille (400x400 minimum).

2- Les contraintes du forum - - - - - - - - - -

Notre forum adoré a ses contraintes concernant l'avatar utilisé :

  • Image au format BMP, PNG, JPEG ou GIF
  • 15 ko maximum
  • Taille maximale : 120x120

De plus, deux caractéristiques sont remarquables :

  • La couleur de fond est RVB[64,64,64] ("404040" en hexa)
  • Une image de trop grande taille sera resizée au format adéquat. J'y reviendrai pour montrer pourquoi cette fonctionnalité doit être évitée dans tous les cas.

Lien vers le commentaire
Partager sur d’autres sites
  • Réponses 91
  • Créé
  • Dernière réponse
namewithn0man Compétent

namewithn0man

Posté(e)
  • Auteur
Posté(e)

3- La retouche - - - - - - - - - -

Observons l'original de l'image :

ffon25ol.jpg

On remarque rapidement :

  • que le fond est globalement blanchâtre,
  • qu'il y a une tâche blanche au milieu à gauche, due à l'éclairage

Dans un premier temps, on convertit l'image en BMP avec IrfanView pour pouvoir l'éditer facilement :

File/ Save as...

ex13ui.th.png

On peut maintenant ouvrir l'image avec MS Paint :

ex23sb.th.png

D'habitude, on commence par recadrer l'image.

Ctrl+C puis Ctrl+V dans une autre instance de Paint.

Prenez la zone la plus large possible. Essayez d'obtenir un format de type "paysage"

  • soit 1:1 (carré), ajustez au pixel près, par exemple 526x526
  • soit 4:3 , ajustez au mieux, par exemple 526x395
  • soit 1:1.618 (nombre d'or), par exemple 526x325,08587808244469015561267487633 environ

Bon, dans notre exemple, le format est déjà 4:3 alors on saute cette étape.

On va maintenant s'occuper de la couleur du fond.

On zoome au maximum (Ctrl+PgSuiv).

Et là commence une tâche assez pénible, longue et répétitive : le détourage.

On sélectionne et supprime toutes les zones qu'on veut voir noyées dans le fond.

ex37ux.th.png

Pour faire propre et nettoyer le crénelage, on achève le détourage à la gomme et au pinceau blanc, ce qui donne une fois fini :

ffon20hw.th.png

On remplit alors les zones blanches avec la couleur adéquate RVB[64,64,64].

ex44cx.th.pngex50ed.th.png

On va à présent s'attaquer au vilain halo de lumière au milieu à gauche.

On repasse au zoom maximal (Ctrl+PgSuiv) et on centre la vue sur l'anomalie. Bouh c'est moche.

ex64gb.th.png

Bon, à partir de là, c'est un peu plus de la bidouille, à faire au cas par cas.

On prend des morceaux à proximité de la tache et on les colle par dessus (comme des rustines sur une chambre à air).

L'opération s'effectue via l'outil "Sélection" puis Ctrl+C Ctrl+V dans la même instance de MS Paint.

Attention, il faut prendre garde à ne pas abîmer le coiffure de la madame (continuité des raies).

Pour cela, l'outil "Sélection libre" peut s'avérer utile.

Pour ne pas trop faire varier les teintes, il vaut mieux sélectionner plusieurs petits morceaux, et de préférence pas trop loin de la tâche.

ex70dz.th.pngex84gx.th.pngex90eu.th.pngex107it.th.png

Enfin, on admire le résultat final. Au passage, on n'oublie pas de le sauvegarder !

ex112sp.th.png

Je résume l'étape de retouche, dans l'ordre :

  • recadrage
  • nettoyage du fond
  • correction des aberrations
  • sauvegarde finale :cartonrouge:

A cet instant précis, on peut aller se prendre une

b_kronenbourg.jpg

bien fraîche au frigo avant d'attaquer la suite.

Lien vers le commentaire
Partager sur d’autres sites
namewithn0man Compétent

namewithn0man

Posté(e)
  • Auteur
Posté(e)

4- Le resampling - - - - - - - - - -

On a maintenant une jolie image en 800x600. C'est peut-être un peu gros pour un avatar.

Techniquement, le moteur de gestion des avatars de votre forum adoré sait "les remettre à la bonne taille".

Seulement il y a un hic : le résultat est souvent moche et pixelisé.

Pourquoi donc ? Simplement parce que la methode de "remise à la bonne taille" utilisée est archaïque : c'est un resizing.

En gros, pour une réduction d'une image 480x480 -> 120x120 le procédé est le suivant :

.................
...o...o...o...o.
.................
.................
.................
...o...o...o...o.
.................

Un "resize" ne garde que les pixels "o".

Evidemment, pour les contours qui tombent entre deux pixels pris en compte, c'est pas terrible.

Heureusement il une autre méthode, basée sur une moyenne des valeurs des pixels proches du pixel pris en compte : c'est la méthode de resampling.

C'est là que IrfanView va nous venir en aide.

On ferme Paint, on ouvre à nouveau l'image avec IrfanView.

Dans le menu "Image", on choisit "Resize / Resample" (également accessible par Crtl+R).

ex127zw.th.pngex137mc.th.png

Dans la boite de dialogue qui s'ouvre, on choisit :

  • Preserve aspect ratio
  • Size method : Resample
  • Resample filter : Lanczos filter
  • Set new size, Width : 120

Et on clique sur OK.

L'image est mise à la taille réglementaire pour le forum.

On peut enfin passer à l'enregistrement final.

5- La compression - - - - - - - - - -

Jusque là on a est resté au format d'image BMP. On va passer à un format plus adapté à un usage Web.

D'emblée je déconseille le format JPEG. Même s'il donne de très bons résultats sur des images à forte résolution et présentant des paysages, il a une méchante tendance à détruire les contrastes. Le procédé destructeur crée des artefacts de compression dans les zones à fort contraste - et c'est le cas ici, à cause du détourage. A éviter donc.

Le format roi pour ce genre de compression est le PNG : non destructeur, assez performant si des zones entières sont de la même couleur (celle du fond)... et surtout open source.

Allons-y gaiement, donc.

File/Save As... (S au clavier)

Type : PNG, Show options dialog, Compression level : 9 (tant qu'à faire), OK.

ex145pq.th.pngex151ap.th.png

On est content, on croit que c'est fini et là...

Pas moyen d'uploader l'avatar ! La raison ? La taille est 19 ko, soit 4 ko de trop... Damned !

Pas grave, en non-destructeur il y a le GIF de chez Compuserve.

On essaye. L'image fait 9 ko, tout semble aller, mais...

ex165se.th.png

De vilains pixels apparaissent dans les zones de couleur de fond. La raison : GIF ne connait que 256 couleurs, et RVB[64,64,64] n'en fait pas partie. Une moyenne est faite.

Il s'agit du même problème que lors du changement de taille : cette fois-ci, il s'agit de la profondeur des couleurs.

De même que pour le resampling, il existe une méthode plus "intelligente" de réduction, le "Floyd-Steinberg dithering" (pour les curieux, accessible sous IrfanView : Image/Decrease Color Depth).

Cette opération doit en principe être faite avant le resampling pour de meilleurs résultats.

Cela dit, avant de se lancer dans un truc compliqué, essayons un truc juste pour voir, des fois que : la bonne vieille compression JPEG, oui oui celle qui en principe n'est pas adaptée.

File/Save As... , puis JPG

Pour un meilleur résultat, on met le facteur de qualité au maximum, soit 100.

ex171ty.th.png

Tout va bien, l'image ne pèse plus que 11 ko. Pour la qualité, je vous laisse juger :

ex185iq.th.png

Les fameux artefacts sont invisibles.

Assez étonnement, il s'agit là du meilleur format dans le cas précis de l'avatar de Krapace.

Encore une fois, c'est une étape où il faut un peu bidouiller pour arriver à un bon compromis.

Dans la plupart des cas, une compression PNG devrait suffire.

Et voilà, vous vous retrouvez avec un joli avatar dont vous pouvez être fier : ffon31fx.jpg

qu'il ne vous reste plus qu'à uploader sur le forum.

Lien vers le commentaire
Partager sur d’autres sites
namewithn0man Compétent

namewithn0man

Posté(e)
  • Auteur
Posté(e)

6- Pour les utilisateurs de MSNM - - - - - - - - - -

Vous pouvez appliquer la même méthode avec les paramètres suivants :

  • Taille exacte à respecter : 100x100
  • Couleur du fond : blanc (RVB[0,0,0])

Remerciements - - - - - - - - - -

Je tiens tout particulièrement à remercier et à cirer les pompes de

  • Krapace, pour le prêt de son avatar pour l'occasion
  • ImageShack for Free Image Hosting
  • Toi, public, qui as si courrageusement lu jusque là.

Note : Toutes les images PNG ont été ramenées à 256 couleurs pour épargner votre modem.

Aucun pixel n'a été blessé au cours de l'écriture de ce tutoriel.

Lien vers le commentaire
Partager sur d’autres sites
gronky Passionné

gronky

Posté(e)
Posté(e)

Tres bon topic namewithn0man :craint:

Pour le détourage, je conseillerai juste la methode des courbes de bezier plutot que le detourage par baguette magique ou à la gomme.

avec le detouge par baguette magique:

adoptff3.png

avec le detourage par courbes

adoptff4.png

Ces deux images sont en PNG

en gif (la deuxième, malgré un détourage en courbes de beziers, est entachée d'un inesthétique liseret blanc).

adoptff4.gif

petit tuto sur leur utilisation sous GIMP (ca marche presque pareil sous totoshop)

tuto sur l'usage des corubes de bezier pour le detourage propre

voilaaaa :transpi:

Lien vers le commentaire
Partager sur d’autres sites
X-System Vétéran

X-System

Posté(e)
Posté(e)
Ok merci.

Ca n'empeche que j'ai pas compris comment ca marchais.

Parce que faire du détourage avec ça, soit j'ai rien compris, soit il y a une astuce mais la, je bloque totalement.

Utiliser la touche "alt" pour récupérer/fermer la trace.

Quand tu cliques sur un endroit et tu recliques sur l'autre endroit mais enfoncé sans lâcher, tu bouges ta souris. Ca transforme en courbe puis lâcher pour fixer ce courbe. Et tu déplaces sur le dernier point de courbe puis appuies "alt" enfoncé et cliques sur le dernier point de courbe. Ca permet de continuer les autres courbes à faire.

:chinois:

Lien vers le commentaire
Partager sur d’autres sites
X-System Vétéran

X-System

Posté(e)
Posté(e)
:yes: Ca se dit "fotochope"

On dit que tu es troller anti-Photoshop... :roll:

Alors je peux dire lindaube au lieu de Linux ? :roll:

Pour moi, je ne dis jamais les mots type de troll parce que je ne veux pas faire d'énerver les autres.

Utiliser les mots type de troll c'est débile.

Même pour Windows, je dis toujours "Microsoft Windows" ou bien "Windows" seulement.

Pareil pour Linux et les autres, je dis : "Linux", "OpenBSD", "RedHat", "Solaris", "MacOS", "Irix", etc...

Pareil pour toutes les marques.

C'est pour ça que j'ai remarqué sur quelques posts ou quelques commentaires (je ne me rappelle plus où j'avais lu) qui disent ce qu'il croient ce forum est 100% Linux parce que les INpactiens disent "windaube" :roll:

Moi je ne contre aucun les noms que je leur respecte quand j'écris (il y a les logiciels que je n'aime pas mais j'écris le mots respectés quand même ! ) :8

Sauf les mots trolls funs pour les exceptionnels, par exemple entre Gailuron66 et moi.

Voilà :mdr2:

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...