[Tutoriel] Les avatars sur le forum Revivre

Répondre
Avatar du membre
misstux
Messages : 72
Enregistré le : 16 févr. 2010, 23:25
Localisation : Baie-Comeau, Québec
Contact :

[Tutoriel] Les avatars sur le forum Revivre

Message par misstux » 28 mai 2010, 02:10

Suite à la mise en place de mon avatar pingouin, certains ont commencé à me demander comment mettre un avatar. Mais l'expliquer simplement en un petit post court ne suffit pas, puisque certains ici n'ont jamais manipulé une image.

Ce tutoriel sera donc divisé en parties suivantes :
  1. Connaître les dimensions et le poids requis
  2. Trouver un avatar sur le Net
  3. Redimensionner son avatar
  4. Installer l'avatar sur le forum
  5. Problèmes pouvant être rencontrés
1. Connaître les dimensions et le poids requis

Avant de se lancer à la recherche d'avatar, il faut premièrement savoir qu'il y a une limite à respecter sur les dimensions et le poids de l'avatar qu'on veut mettre. Puisque ces limites varient d'un forum à l'autre, voici comment les connaître sur un forum phpBB3 comme celui-ci. Pour ce tuto, les captures correspondront à un thème subsilver2, mais les liens peuvent être localisés différemment si le thème est différent, en particulier pour les type prosilver comme sur phpBB-Fr)

Cliquez sur le lien Panneau de contrôle de l'utilisateur en haut à droite, sous le bandeau gris.

Image

Allez dans Profil, dans le menu de gauche.

Image

Puis allez dans ȃditer l'avatar dans ce sous-menu

Image

Vous avez maintenant cette page-ci :

Image

Juste en dessous de Image actuelle, vous verrez les dimensions maximales et le poids maximal (en octets binaires, soit 1024 octets pour un Kio) en vigueur sur le forum.

Image

Une deuxième chose qu'il faut savoir, c'est que seuls les formats JPEG, GIF et PNG sont autorisé, donc n'essayez pas d'envoyer un BMP, car une image sous ce format non-compressé pèse une tonne et donc pour cette raison, ce format n'est généralement pas accepté sur les forums.

Même si théoriquement, les gifs animés ne sont pas interdits, la limite de poids sur ce forum est telle que les animations sont fortement déconseillées, car elles sont plus lourdes que les images statiques.


Maintenant que vous savez quelles sont les dimensions et le poids demandés, on passe à la suite !


2. Trouver un avatar sur le Net

Il existe pleins de sites où vous pouvez trouver des avatars prêts à être utilisés. Je vous donne quelques liens où vous pouvez en trouver. Pour ça, je vous copie-colle une liste que j'ai trouvée, avec les commentaires de l'auteur original du post d'où j'ai pris les liens.
http://membres.lycos.fr/avatarhoglard
Un site ayant pour theme Harry Potter. Il n’est donc pas rare de retrouver des avatars des personnages du livre (d’ailleurs une section y est dédiée). Il existe plusieurs sections différentes, d’abord répartie par sexe, ensuite par maison puis par type d’avatar (manga, réaliste, etc…)

http://www.shadowsdreamers.net/1024_ava ... manga.html" onclick="window.open(this.href);return false;
Un site Web remplit d’avatars de petites tailles. Parfait pour ceux qui ne veulent pas se tuer à écrire de longs messages .

http://hikarigates.free.fr/quartdelune/" onclick="window.open(this.href);return false;
Un Site Web contenant une quantité impressionnante d'avatars de toutes les tailles et de tous les types. Il y a plusieurs artistes sur ce site, pour voir leurs avatars il faut cliquer sur leurs noms et la taille voulue.

http://pageperso.aol.fr/revolutionmiki/sommaire.html" onclick="window.open(this.href);return false;
Ce site Web possède plusieurs pages d’avatars, tous des mangas. Les avatars n’ont pas été personnalisés et travaillés, si vous voulez un design vous pouvez toujours en demander un dans ce forum!

http://perso.wanadoo.fr/cassinus/" onclick="window.open(this.href);return false;
Un Site avec une centaine de pages d'avatars fantastiques divers, hommes et femmes. Les types sont plutôt variés, vous en reconnaîtrez surement quelques-uns.

http://www.egs-avatars.com/accueil.php" onclick="window.open(this.href);return false;
Un Site riche en avatars, tout les styles y sont présents (dessins, mangas, etc…). Vous avez le choix entre trois tailles d’avatars.

http://site.voila.fr/plume.ange/" onclick="window.open(this.href);return false;
Généralement des avatars mangas, ils sont classé par sexes et sont presque tous de la même grandeur (155*225)

http://www.elfemagie.com/images/as.htm" onclick="window.open(this.href);return false;
Des avatars qui ne sont pas nécessairement des mangas, mais plutôt des dessins de style réalistes. Ils possèdent presque tous la même taille.

http://www.mangavatars.com/index.php3?page=themes" onclick="window.open(this.href);return false;
Site d’avatars, essentiellement des mangas. Ceux-ci sont de grandes tailles et classés selon le nom du manga où qu’il provient.

http://membres.lycos.fr/xio/" onclick="window.open(this.href);return false;
Une centaine d’avatars vous ait proposé, pour les hommes comme les femmes.

http://portraits.rpgfr.net/" onclick="window.open(this.href);return false;
Le marché des portraits, qui touche plus à des avatars fantastiques que mangas
À cela s'ajoute ma contribution :

http://www.crystalxp.net" onclick="window.open(this.href);return false;
Si vous recherchez un petit pingouin comme le mien, ceci est LE site de référence où vous trouverez des centaines d'avatars de Tux, le pingouin aussi connu pour être la mascotte de Linux, dans tous les styles, couleurs et accoutrements. Vous pourrez aussi en commander un personnalisé à votre goût sur le forum du site, ou le faire vous-même à partir des tutoriels disponibles si vous êtes habiles en graphisme.

Note : Si vous avez trouvé un site qui n'est pas dans la liste, vous n'avez qu'à le poster ici, j'éditerai ce post pour l'ajouter.

Vérifier les dimensions d'une image

Lorsqu'une image trouvée vous intéresse, vous pouvez vérifier ses dimensions en faisant un clic-droit dessus, puis en allant dans Propriétés. Si par contre vous utilisez Firefox 3.6, vous devrez passer par Voir les infos de l'image (ou quoi que ce soit qui équivaut à "View image info" - mon firefox est en anglais, donc je ne suis pas certaine à 100% de la traduction).

Dans la fenêtre qui s'ouvre, vous connaîtrez alors les dimensions (largeur puis hauteur) en pixels, et son poids.

Enregistrer l'image

Lorsque vous trouvez une image sur un site, il est fortement conseillé de l'enregistrer sur votre ordinateur puis de le réhéberger par vos moyens OU d'utiliser l'option du transfert depuis un lien. J'en parlerai plus en détails plus bas, mais je tiens à vous sensibiliser sur le phénomène du vol de bande passante qui est nuisible pour de nombreux sites et dont je suis moi-même concernée en tant que webmaster.

Pour enregistrer une image sur votre ordinateur, faites un clic-droit sur l'image, puis allez dans Enregistrer l'image sous. Vous choisissez ensuite l'emplacement où vous voulez y stocker votre image.

Si l'avatar que vous avez trouvée est trop grande pour les dimensions requises et qu'aucune bordure ou autre décoration n'empêche un redimensionnement possible, vous pourrez le redimensionner vous-même, et c'est ce dont la partie qui suit va aborder.


3. Redimensionner son avatar

Pour ceux qui sont sur Windows, ils disposent de Paint, un logiciel de dessin basique pour pouvoir redimensionner ses photos. Mais il a quelques inconvénients : On ne peut réduire/étirer que par pourcentages et donc, on peut difficilement calculer la taille finale qui risque donc d'être trop grande malgré tout. De plus, il ne supporte pas du tout la transparence, donc si vous essayez d'ouvrir un Tux récupéré sur CrystalXP par exemple, il apparaîtra avec un fond opaque et vous ne pourrez pas le ré-enregistrer avec la transparence.

Pour cette partie, je vais donc vous montrer à le faire avec GIMP 2.6, qui est beaucoup plus puissant que Paint, et qui est gratuit, libre et qui est compatible avec Windows, Mac, Linux et bien d'autres plateformes. Étant sous Linux, c'est ce logiciel que j'utilise principalement et pour lequel je suis le plus à l'aise.

Pour ceux qui sont sur Windows, je conseille la version nomade qui est plus simple d'installation et qui ne touche pas à la base de registre, contrairement à la version classique, et qui peut se transporter sur une clé USB. C'est donc très pratique pour les mises à jour.

Voici le lien pour le télécharger : http://www.aljacom.com/~gimp/download.html" onclick="window.open(this.href);return false;

En cas de souci ou de questions, n'hésitez pas à vous tourner vers Gimp-Attitude qui est la plus grande communauté francophone dédiée à Gimp : http://www.gimp-attitude.org" onclick="window.open(this.href);return false;

Vous serez certainement dérouté lorsque vous verrez Gimp s'ouvrir, puisque son interface est composée de trois fenêtres, en plus que l'interface d'ouverture et d'enregistrement des fichiers diffère de ce dont Windows vous a habitués.

Pour cela, je vous invite à lire ces deux tutoriels dont j'en suis l'auteure :
:arrow: Découvrir et personnaliser l'interface de GIMP 2.6
:arrow: Créer et enregistrer un document

Une fois ces première bases acquises avec les deux tutoriels, vous voilà prêts à redimensionner votre avatar ou votre photo.

Depuis la fenêtre centrale, allez dans Fichier > Ouvrir et allez chercher votre image sur votre ordinateur.

Pour les besoins du tutoriel, je vais prendre une photo de mon ancienne chatte que j'ouvre donc avec Gimp :

Image

Note : Si l'image que vous voulez modifier est au format GIF, commencez par changer son mode de couleur pour le passer du mode indexé (256 couleurs) au mode RVB (16 millions de couleurs), pour des raisons de qualité optimale de l'image au moment de la réduire. Pour cela, depuis la fenêtre centrale, allez dans Image > Mode > RVB

On va commencer par recadrer la photo, pour garder principalement la partie avec le chat.
Dans votre boîte à outil à gauche, prenez l'outil Tranche, que j'entoure de rouge :
Image

Ensuite, sur votre image, partez d'un coin à partir duquel vous voulez encadrer la partie à garder, puis en maintenant le bouton gauche enfoncé, faites un rectangle qui couvrira la partie à garder, avant de relâcher.
Image

Si vous avez besoin de faire des ajustements, sachez que vous pouvez ajuster les bords du cadrage à l'aide des coins que vous voyez pour ajuster sur deux sens, ou à l'aide de "poignées" qui apparaissent lorsque vous passez votre souris près des bords, pour ajuster dans un sens, Ces manipulations se font en glissant votre souris en ayant le bouton gauche enfoncé. Une fois que le recadrage vous satisfait, cliquez au milieu du cadre pour valider.

Voilà notre chat recadré :
Image
Notez que vu le grand vide sur les côtés et que la photo d'origine était très grande, j'ai passé le zoom de 50% à 100% (dans le bas de la fenêtre) et redimensionné la fenêtre.

Maintenant, notre photo est encore très grande, donc il reste à la redimensionner. Pour cela, depuis la fenêtre centrale, allez dans Image > Échelle et taille de l'image. Vous verrez cette fenêtre apparaître :
Image

À moins de vouloir une photo toute déformée, laissez la chaîne attachée vis à vis les valeurs de Taille de l'image pour que la réduction reste proportionnelle. Ensuite, abaissez la plus grande des deux valeurs à 90 pixels ou moins, l'autre valeur suivra de façon proportionnelle.
Image
Laissez les autres valeurs à celles par défaut, puis validez en cliquant sur Échelle.

Voilà notre image réduite, à sa taille réelle :
Image

Maintenant, reste à enregistrer votre image (Fichier > Enregistrer sous). Si vous avez lu mon tuto sur la création et l'enregistrement d'un document, vous savez comment le faire avec cette interface atypique.

Pour la photo de notre chat, le format JPEG est idéal et dans ce cas, réglez la qualité à 80 ou même à 70, ce qui est un bon compromis entre la qualité et le poids de l'image résultante.

Si votre image a des contours nets et peu de couleurs (comme un logo par exemple), privilégiez le format GIF, qui ne crée pas un "bruit" autour des contours comme le fait le JPEG.

Si l'image a à la fois beaucoup de couleurs (ex: présence de dégradés) et des contours net OU si l'image a de la transparence, comme c'est le cas de mon pingouin, choisissez le format PNG, et n'hésitez pas à l'optimiser avec l'outil en ligne SmushIt pour le faire maigrir (n'oubliez pas de télécharger l'archive après).

Mais en général, dans le cas d'une modification, on garde le même format que celui de l'image original, sauf s'il était dans un autre format que les trois recommandés.

Et surtout, très important lorsque vous enregistrez une image modifiée : Donnez un nom différent, pour éviter d'écraser l'image originale !

Pour finir cette partie, j'ajoute cette astuce bonus : Si vous n'êtes pas sûr que votre image va passer à cause du poids, enregistrez-la dans différentes grandeurs (90, 80, 75, 70, 60). Pour cela, défaites votre réduction en faisant Édition > Annuler puis refaites la manipulation avec des valeurs plus petites, puis enregistrez une nouvelle copie à chaque fois.
Pour ensuite vous y retrouver dans le renommage, ajoutez simplement le chiffre correspondant à la valeur de la plus grande des deux dimensions dans le nom du fichier (ex: monimage80.png, monimage70.png, et ainsi de suite). Ceci est particulièrement pratique pour ceux qui fréquentent plusieurs forums Internet.


4. Installer l'avatar sur le forum

Puisque l'envoi d'un avatar est activé sur ce forum, vous n'aurez pas besoin de le réhéberger. Il n'y aura donc que deux cas de figure qui se présenteront, et je les expliquerai.

Vous retournez donc dans Panneau de contrôle de l'utilisateur, puis dans le menu Profil puis Éditer l'avatar, comme je vous l'avais expliqué au début du tutoriel.
Vous avez donc à nouveau ce panneau :
Image

Maintenant, vous devrez faire selon le cas de figure que vous rencontrez.

1- Votre image trouvée est sur le Net et a les bonnes dimensions

Pour cela, vous devrez récupérer l'adresse Internet de l'image.

Sur certains navigateurs tels que Mozilla Firefox, vous faites un clic-droit puis vous allez dans Copiez l'adresse de l'image.

Si vous utilisez Internet Explorer ou un autre navigateur qui n'a pas ce raccourci, faites un clic-droit puis allez dans Propriétés, et copiez entièrement l'adresse qui finit par une extension d'image (jpg, gif, png) sur la fenêtre affichant les informations.

Maintenant, dans le panneau des avatars, utilisez le champ Transférer depuis un lien et collez-y l'adresse récupérée.
Image

2- Votre image est sur votre ordinateur

Que ce soit une photo personnelle ou une image récupérée que vous avez redimensionnée, vous utilisez simplement le champ Transférer depuis votre ordinateur. Avez le bouton Parcourir, vous allez simplement chercher votre image sur votre disque dur.
Image


Dans les deux cas que je vous ai montrés, votre image est transférée sur le serveur qui héberge le forum, donc ça vous épargne le souci d'avoir à trouver un hébergeur d'image tout en évitant le vol de bande passante.


5. Problèmes pouvant être rencontrés

Cette partie-ci est consacrée aux problèmes récurrents que les utilisateurs ici pourraient rencontrer.

1- L'image que je veux enregistrer est en GIF, mais je ne peux pas enregistrer dans d'autres formats que le BMP !

Ce problème arrive surtout avec Internet Explorer, puisqu'il est connu pour mal gérer le cache.

Il s'agit de fichiers que votre navigateur stocke sur votre ordinateur pour recharger les pages plus rapidement. Si vous visitez une page pour la première fois, votre navigateur stocke les informations (style, scripts, etc.) au sujet de la page. Cela fait que lorsque vous revenez sur cette page par la suite, votre navigateur reconnaît la page que vous visitez et va donc chercher dans les fichiers stockés sur votre ordinateur pour accélérer le chargement, puisqu'il n'a pas besoin de relire les styles et scripts présents. Cela explique donc pourquoi il peut arriver que lorsqu'un site change de peau, votre navigateur peut voir encore l'ancien design.

Pour tous les navigateurs, il y a un seuil de saturation sur la quantité de cache qui peut être stockée, mais dans le cas d'Internet Explorer, quand il est trop plein, celui-ci a un comportement anormal caractérisé par des problèmes d'enregistrement, comme par exemple le fait de n'avoir que le format BMP comme choix lorsqu'on veut enregistrer une image. Je ne sais pas si ce problème est encore récurrent dans les versions 7 et 8, mais les cas de ce type étaient nombreux avec la version 6.

Pour savoir comment le faire, voici un tutoriel qui l'explique pour Internet Explorer 6 et 7, ainsi que les navigateurs concurrents : http://www.commentcamarche.net/faq/3037 ... explorer-7" onclick="window.open(this.href);return false;

Pour prévenir la réapparition du problème, je vous conseille de paramétrer la gestion du cache d'Internet Explorer. Pour savoir comment le faire, consultez ce lien : http://www.commentcamarche.net/faq/2237 ... t-explorer" onclick="window.open(this.href);return false;
Et pensez à le vider régulièrement.

Si d'autres problèmes récurrents sont soulevés, je les ajouterai dans ce post
Image
Les logiciels que j'utilise sont libres, mais j'aimerais aussi être libre de ma prison mentale qui m'étouffe.

Tuto - Mettre un avatar sur le forum
Mon blog gourmand

Catnips

Re: [Tutoriel] Les avatars sur le forum Revivre

Message par Catnips » 28 mai 2010, 08:39

Un gros MERCI à toi Misstux! :) Ça fonctionne et ton tutoriel est très bien fait. :)

Merci!

Catnips

Avatar du membre
Hibou Profane
Messages : 185
Enregistré le : 08 mars 2010, 16:36

Re: [Tutoriel] Les avatars sur le forum Revivre

Message par Hibou Profane » 28 mai 2010, 12:51

Personnellement, je n'en avais pas besoin, mais je dois que c'est un excellent tutoriel.

Si je peux me permettre d'ajouter une petite suggestion, un bon truc pour faire diminuer le poids de votre image est d'utiliser l'outil "postériser" dans GIMP pour diminuer le nombre de couleurs dans l'image. Ça va même souvent l'améliorer en la rendant plus contrastée.

On ne dira jamais assez de bien de GIMP. Au lieu de vous faire ch*er à contourner les prtections anti-copie de Photoshop, apprenez à vous servir de GIMP, qui suffit amplement aux besoins de l'utilisateur maison moyen.
Pourquoi remettre à demain ce qu'on peut faire la semaine prochaine?

Avatar du membre
misstux
Messages : 72
Enregistré le : 16 févr. 2010, 23:25
Localisation : Baie-Comeau, Québec
Contact :

Re: [Tutoriel] Les avatars sur le forum Revivre

Message par misstux » 28 mai 2010, 20:26

Hibou Profane a écrit :Si je peux me permettre d'ajouter une petite suggestion, un bon truc pour faire diminuer le poids de votre image est d'utiliser l'outil "postériser" dans GIMP pour diminuer le nombre de couleurs dans l'image. Ça va même souvent l'améliorer en la rendant plus contrastée.
Je ne connaissais pas ce truc, puisqu'en temps normal, je fais surtout du webdesign et donc, j'utilise très peu les filtres.
On ne dira jamais assez de bien de GIMP. Au lieu de vous faire ch*er à contourner les prtections anti-copie de Photoshop, apprenez à vous servir de GIMP, qui suffit amplement aux besoins de l'utilisateur maison moyen.
Je suis du même avis. Combien de fois je vois des jeunes cracker Photoshop pour ne l'utiliser qu'à 5% de sa capacité. Ça me rappelle ce billet que j'ai lu sur un blog que je suis régulièrement et dont l'auteure est également une gimpeuse : Quelques grammes de responsabilité dans un monde de pirates

J'ai un cours de GIMP en cours de rédaction sur le Site du Zéro, mais en ce moment, c'est un peu en pause, car je vais bientôt mettre à niveau ma Ubuntu Linux, mais vu que le visuel a beaucoup changé entre ma version actuelle et la nouvelle version du pingouin, je ne sais pas encore si je suis mieux de remplacer toutes les copies d'écran qui ont été mise en ligne jusqu'à maintenant.
Image
Les logiciels que j'utilise sont libres, mais j'aimerais aussi être libre de ma prison mentale qui m'étouffe.

Tuto - Mettre un avatar sur le forum
Mon blog gourmand

Avatar du membre
misstux
Messages : 72
Enregistré le : 16 févr. 2010, 23:25
Localisation : Baie-Comeau, Québec
Contact :

Re: [Tutoriel] Les avatars sur le forum Revivre

Message par misstux » 23 juin 2010, 01:54

Le sujet étant rendu en 2e page, je le remonte !

Serait-il possible qu'un modérateur le mette en post-it pour que ça reste à la vue des nouveaux membres ? Merci d'avance !
Image
Les logiciels que j'utilise sont libres, mais j'aimerais aussi être libre de ma prison mentale qui m'étouffe.

Tuto - Mettre un avatar sur le forum
Mon blog gourmand

Danny96
Messages : 15
Enregistré le : 13 déc. 2011, 05:21
Contact :

Re: [Tutoriel] Les avatars sur le forum Revivre

Message par Danny96 » 13 déc. 2011, 06:05

Ah super je vais essayer de me faire un avatar avec mon chat ! Ça m'a donné des idées, atelier créatif en prévision !
Sauvez des vies avec les défibrillateurs ou sinon voici des absorbants hydrocarbures pour éviter de polluer.

ardens
Messages : 1717
Enregistré le : 15 févr. 2010, 19:44

Re: [Tutoriel] Les avatars sur le forum Revivre

Message par ardens » 13 déc. 2011, 10:14

Salut, je devrais me mettre dans ça moi aussi mais je suis un peu paresseux :lol:

Répondre