Comment créer un avatar et une sign ?

[Kingmojo]

Salut j`ouvre ce topic par ce que là  je voudrais bien créer moi même mes propre avatars et signatures. Mais bon il faudrait bien que quelle qu`un me montre comment  le fair donc sais pour ça que j`ai ouvert ce topic donc si vous pouvez m`aider venez poster.

[Rhokua]

Ta question est trop vaste, parce qu'il existe des millions de façons de créer une avatar et une sign. mais je vais essayer d'y répondre.

Pour commencer, il te faut le matériel:
-Ton render(image qui sera sur la sign et l'avatar).
-Une idée plus ou moins précise de ce que tu as l'intention de faire.
-Un logiciel de graphismeassez puissant, je te conseille The Gimp qui est gratuit ou Adobe Photoshop CS2 si tu as les moyens de te l'offrir.
-Apprendre à maîtriser le logiciel via des tutos, etc...

Ensuite pour la sign. c'est souvent en 5 parties:
1. Choisir les couleurs pour le fond qui vont bien avec ton render.
2. Trouver une bonne place à ton render sur la sign.(c'est plus de réfléxion qu'on ne le croit).
3. Créer le fond en mettant tout à la même couleur avec des tons différents.
4. Ajouter des effets à ton render de manière à ce que ça aille bien avec le fond.
5. Finir ta sign en rajoutant du texte ou encore des effets ou même un cadre.

Description plus détailée des 5 parties:
1. Le choix des couleurs et l'un des éléments les plus importants, c'est ça qui va différencier une sign bordélique à une sign réfléchie. Ce que je conseille c'est de ne pas trop mélanger les couleurs claire avec le foncé, mais si on veut faire plusieurs nuances, il faudrait essaye clair avec blanc et foncé avec noir. Mais tout dépend du personnage sur le rendre et les sentiments qu'il exprime(oui une sign ça parle^^).
2. La place du render dépend beaucoup de sa posture, sinon c'est principalement une question de goût ou de logique.
3. LA partie qui pose le plus de problèmes et qui, souvent, comporte le plus de défauts. Il faut vraiment synchroniser les couleurs de la sign et pas avoir un mélange bordélique de tout, il faut rester logique et ça passe.
4. Les effets sur le render ne doivent pas être trop déformeurs, cela veut dire que l'on doit quand même pouvoir reconnaître le render. Ce que je conseille c'est de créer plusieurs calques du même render et d'appliquer des effets différents sur chacun, parfois ça rend bien.
5. Vous pouvez finaliser votre sign avec un joli cadre en biseautage ou avec votre pseudo bien décoré. Mais vous pouvez toujours retoucher certaines parties de la sign. et rajouter quelques petits coups de brush, par-ci et par-là pour enjoliver un peu.

C'est exemple de sign. parmis tant d'autres et donc ne vous sentez pas obligé de toujours les faire comme ça.

Pour l'avatar, c'est à peu près la même technique, si ce n'est qu'il faut éviter les trop gros effets, ça rend souvent assez mal.

J'espère t'avoir aidé

[Daru13]

Je me suis dit que ça serait bien qu'un topic comme ceic sois crée .
Maintenant que c'est fait, j'arrete le HS .

Alors, moi je pense que chacun et chavune à son style pour creer ses avatar / signatures, mais chacun a aussi ses outils et leur métrise.

Par exemple, si tu as photoshop, mais que tu ne sais rien faire dessus, aps la peine d'avoir photoshop ! Il faut d'abbord apprendre à s'en servir.

Je vais t'expliquer comment je réalise mon style actuel de signature.
coté avatar, j'en ai trop peu réalisé pour me rapeler comment je fais, de plus, je suis bien meilleur à mon goût en bann' que en avatr .

Voila, alors j'utilise Paint.NET pour mes créations.
Il est simple, français, pratique et gratuit.
Vous pouvez cliquer ici pour le telecharger .
C'est un *.zip

Images :
pour vous aider dans la réalisation de votre bannière .


Architecture de votre bannière.


Une fois le tuto terminé ( sans les cadres colorés bien sur ).



Couleurs des cadres = ?
Bleu : Texte (pseudo).
Vert : Epaisseur semi-transparente
Rouge : Personnage / objet / signe




Alors, pour commencer, faites un nouveau document ( Fichier > Nouveau ) et mettez 400 en largeur et 115 en hauteur ( pixels).
Une bann' blanche et vide vous apparait.

Un truc important que l'on va utiliser dans ce tuto souvent : des couches.
Pour creer une nouvelle couche, cliquez sur le + de la petite fenetre en bas à droite.
Pour modifier son opacité ( et d'autres choses dont nous ne nous serivrons pas dans ce tuto ), cliquez sur l'icone à l'extreme droite de la fenetre.

Bien, alors voila comment comemncer :

1- Le fond

Pour votre signature, il faut un fond, élément important.
personnelement, je les piques sur Google Image, mais vous pouvez en prendre d'ailleur.

Petit conseil : lorsque vous importez une ou des images dans ce tuto, essaiez à tout prix de ne pas modifier leur taille .

Donc, une fois votre image importé ( Fichier > Ouvrir ), si elle dépasse les... disons 500*150, copiez seulement une partie.
Sinon copiez tout

Voila, vous avez votre fond .


2- L'épais trait semi-transparent
Faites un nouveau calque.
Puis, dans la fenetre des couleurs, choissiez une couleur ( de préférence en accord avec le fond, mais à vous de voir ) et, après avoir afficher les options avncées en cliquant sur le bouton "Plus >>", changer la transparence, mettez 50% ou dans les alentours, enfin, ce qui convient le mieux .
Ensuite, selectionnez l'outils "trait", et mettez 1, 2, ou 3 pixels d'épaisseur.
Essayez de tracer un jolie très droit vers le millieu horizontal de votre sign', puis un second, qui laisse environ l'esapce suivant plus bas :

x
x
x
x
X

Le gros X est une taille un peu grose, donc facultative.
Mais prenez au moins 4  petis "x" .

Ensuite, choissiez l'outils pôt de peinture, emttez une transparence autour des 40% ~ 30%, et choissiez un ton un peu plus clair, ou un peu plus focné pour votre couleur.
Puis , bah, entre les 2 traits tracés précédament, utilisez votre pot de peinture.


3- Personnage ou objet

Vous devez en plus du fond avoir une image d'un objet, d'un signe d'un personnage,etc...
Importez cet image, et selectionnez les contours grace aux outils de selections.
Si les parties de l'image qui ne font pas partie du perso ou de l'objet ne sont que d'une seule couleur,
optez pour la baguette magique .

De là, faites un inversement de séléction ( CTRL + i ), et copiez votre image ( CTRL + c ).
Collez-là dans un nouveau calque, au dessus de tous els uatres.
Selon l'effet que vous voulez voir apparaitre dans votre Sign', vous pouvez changer l'opacité de ce calque.

Placez votre collage ( CTRL + v ) à droite ou a gauche de votre image, en esayent de le centrer par rapport à votre trait semi-transprent .
Moi, je met tout le temps à droite mes persos, mais c'est à vous de voir. J'aime mieux avoir le texte à gauche .


4 - Votre pseudo

Voila, votre signe est finie...
Mais ?
Eh oui, vous l'avez remaqué, elle n'est pas encore ( malheuresement pour les flemmards ) finie.
Il manque un cadre, et surtout votre Pseudo .

Vous etes libres à vous d'afficher un autre texte, mais moi j'opte pour mettre un pseudo ici.
Evitez par contre de ne rien afficher, car le tuto n'est pas prévu pour un tel cas, et ça serais pas très jolie .

Creez un nouveau calque.
Pour afficher un texte, choissiez l'outils texte, symbolisé par un 'A" dans la barre d'outils .
Cliquez un peu n'importe où dans votre bann', mais pour mieux voir l'effet final, déplacez votre point d'insertion de texte vers l'oposé du centre de votre Perso / objet importé précédament.
Evitez d'augmenter la transparence de votre texte, ou alors de seulement très peu .
Ecrivez votre Pseudo, Puis choissiez la police et la taille voulue en haut de l'écran, dans la barre d'outils.

Petit conseil coté taille de police :
Arial : 36 ~ 46
Time new Roman : 34 ~ 50 / 55


Et voila, vous avez votre Pseudo écris .
Allez, courage, il ne reste que peu de choses à finir.


5 - Cadre et aspect de fond

Cadre, bordure.

Pour finaliser votre sign', je vous conseil vivement de faire un cadre.
Vous pouvez varier couleur et opacité, amsi en restant dans les sombres ( au maximum dans les 10% de lumi max.)
Vous hoisirez égalemnt si votre bordure fera 1 ou 2 pixels d'épaisseur, mais évitez plus .

Prenez l'outils Rectangle, vérifiez bien qu'il est en mode où l'on voit que le cadre, et tarcez, en partant de l'angle haut-gauche ou bas-droite pour plus de facilité (enfin, à mon goût ça aussi ).
Choissiez sur quels calues vous tracerez une bordure, mais je vous consiel d'au minimum la tracer sur le calque de votre fond.



FACULATIF :
Aspect de fond


Selon votre fond et le thème voulu pour votre bannière, vous pouvez mettre une ambiance, comme dans les bois perdus d'ALTTP .
Choissiez l'image et où vous intercalerez un nouveau calque, et creez !
Suivez la méthode d'insertion d'image que je vous ai expliqué plus haut, mais cette fois-çi, baissez grandement l'opacité, de sorte à ce qu'elle ne dépasse pas l'ordre des 35% grand maximum .
Pour un assez bon rendu, je vous conseil de la placer juste au dessus de votre fond, mais en dessous de tout le reste .



Enrgistrez votre image sous 2 formats ( conseil ) :
- le format *.pdn
- le format *.png

Le format *.pdn vous servira pour pouvoir modifier votre bannière à la suite, et le *.png pour pouvoir hoster votre bann' en bonne résolution, sans qu'elle ne pèse trop lourde .

merci de ne pas prendre ce tuto sur votre site sans autorisation par moi, ou au moins sans crédits .
Voila, j'espère que ça vous aura été utile .

N'hésitez pas à me poser des questions .

[Kingmojo]

Merci daru13  ce wek-end je vais  commencer a créer des avatars et des signes. 

[machino4]

Je sais que je remonte un topic mais j'ai un problème: 

C'est quand il faut sélectionner mon personnage / objet alors j'essaye avec le laço mais je suis pas capable donc j'essaye avec la bagette magique mais le personnage reste à moitier dans l'image. Quelqu'un peut m'aider pour le sélectionner? 

[Daru13]

Tu utilise quel logiciel, et qu'entends-tu par "reste à moitié dans l'image" ?
As-tu pensé à regler la Tolérence ?

[machino4]

Désoler je me suis mal exprimé...    Donc je travaille avec paint.net et quand j'utilise la baguette magique, plusieurs parties reste à l'endroit. Alors je demandait comment le sélectionner correctement. 

[Daru13]

D'accoorrddd....

Voici quelques trucs :
- Tu peut maintenir "CTRL" en cliquant quelquepart pour pouvoir selectionner plusieurs morceaux.
- Pense à changer la tolérence, comme je te l'ai dit.

Si tu n'y arrive toujours pas, envois-moi ton image par MP, que j'essaie .

[machino4]

Ok merci beaucoup et j'ai réussis à séllectionner mon image avec la tolérence et CRTL encore merci

[Kingmojo]

Voila je voudrais s'avoire dans quelle site prenez vous vos fonds  pour faire des Avatars  et des Signes? Par ce que moi je n'est que Google image pour l'instant mais si vous s'avez ou trouver des beau fond sur un site soyer sympa de mètre un lien ici sur se topic.

Merci. 

[VolcA]

C'est la meilleur celle la 

Désolé mais la plus part qui sont ici font leur fond sois-même comme moi

Un PM aurait suffit non?!

[Daru13]

Comme le dit VoLc4nO, la plupart d'entres nous les créent eux-même !

Par contre, peut-être que ça peux t'intéresser, voila quelques urls pour des renders ( les personnages / ou autre ) :
http://www.renders-graphiques.fr/
http://www.planetrenders.net/

Je sais pas s'il y en a sur deviant' ...
Bref, les fonds en général sont perso', les renders par contre...

[mooglwy]

Pareil je  fais toujours mes fonds. 

[mathias]

Apprend à te servir de Brushes tu verra c'est Cool, moi je fais à la Bien main 

[Eidarloy]

Pour les fonds, tu as les C4D et les brushes.

http://browse.deviantart.com/resources/applications/psbrushes/

[Kingmojo]

Comment vous faite pour faire vos fonds?

[Daru13]

Comment vous faite pour faire vos fonds?

Eidarloy t'as dit ce qu'il faut savoir .

Tu utilise des brushes, qui sont en fait des formes si tu veux, en jouant avec les calques et les options que le logiciel utilisé te propose ( fusion, opacité... )
Les C4D, ce sont des images à appliquer à l'aide de calques sur tes fonds pour améliorer le rendu .

[mooglwy]

Dans la section graphisme il y a des topics dessus. 

Il parait que certains contiennent des tutoriels. 
Il paraitrai même qu'une fonction rechercher ai été ajoutée à ce forum... 
Mais où va le monde. 

[Eidarloy]

Dans la section graphisme il y a des topics dessus. 

Il parait que certains contiennent des tutoriels. 
Il paraitrai même qu'une fonction rechercher ai été ajoutée à ce forum... 
Mais où va le monde. 

Il paraitrait même que je sois trop gentil

http://forums.zelda-solarus.com/index.php/topic,18381.0.html

(Je fais de la pub, n'hésitez pas à compléter mon post )

[Mymy]

King Mojo, tu avais déjà un topic à propos des avatars et signatures, alors pourquoi ne pas le reprendre pour poser tes questions, et au pire, tu changes (ou rajoute) le titre du topic Parce que sinon, tu créeras un topic "où trouvez-vous vos renders" la prochaine fois ?

Hop, je fusionne.

[Kingmojo]

J'ai une question hier j'ai télécharger des police d'écriture je voudrais s'avoire comment on fait pour le mètre sur le logiciel Photofitre Studio?


Merci.

[Daru13]

Si tu es sous Windows XP, coupe ou copie tes polices, et rends toi dans le répertoire "Fonts" ( C:/ WINDOWS / Fonts ), et là tu les colles. Si tout s'est bien passé, une fenêtre va s'afficher et très vite disparaitre. Si c'est le cas, tes police sont bien installé. lance ou redémarre PSstudio et voila .

Sous Vista, fais un simple clique droit dessus et choisis l'optin "installer".

[Kingmojo]

Je suis sur Vista et je n'est pas vu cette optin.instale  Voila une preuve. 

http://img517.imageshack.us/my.php?image=problmejf3.jpg

[Neo2]

Faut l'extraire de l'archive zip avant.

[Kingmojo]

Oh oui sa fonctione maintenant merci beaucoup Daru et Neo2

[Kingmojo]

Désolé pour le double poste mais je voudrais s`avoir comment on fait pour faire un userbar? Est-ce que c`est le même principe que faire une signe?

Merci. 

[mathias]

Sur le Fond oui, tu fais une sign plus petite, ensuite, un fond uni ou léger dégradé, puis un motif, un petit agrément comme un sprite, un texte borduré, et c'est fait 

[Daru13]

J'avais posté une image que tu pourra appliquer sur un calque au dessus du fond et cie ( pas obligatoirement au dessus du texte ) dans une galerie graphique.
Voici l'image, je pense que ça pourra t'aide, au début du moins.

( il y a de la transparence )

Joue aussi avec l'opacité du calque !

[Eidarloy]

Bah, de toute façon, il n'y a jamais et il n'y aura jamais de norme pour faire des signatures, avatars, design, userbars.
Ca se fait comme tu le sens. Des avatars, par exemple, peuvent ne pas avoir d'images ni de texte et n'être qu'un joli fond. Idem pour les signatures.

Pour ce qui est des userbars, c'est pareil (sauf que un texte est obligatoire vu que c'est fait pour ça ).
La plupart des userbars sont rectangulaire presque à l'extrème. Dedans, tu peux mettre un fond unicolor ou alors deux couleurs en dégradé et par dessus tu peux y coller un render puis du texte.
Dans un autre cas, tu peux mettre une image entière pour remplacer le fond et rajouter ensuite du texte.
Après, il existe des variantes, en rajoutant dessus un effet de transparence, de l'épaisseur sur les bords, de l'animation, des motifs...

[Daru13]

Un petit up, juste au passage. C'est pas vraiment le bon topic, mais ça va avec : les userbars ( ou userbann pour certains ^^ ).
J'ai écrit un tuto dessus, donc si ça vous intéresse... Par ici ( avec Paint.NET ).

Voila, ça évitera des topics pour un ajout de scanlines, du moins j'espère .

[Kingmojo]

Un petit up, juste au passage. C'est pas vraiment le bon topic, mais ça va avec : les userbars ( ou userbann pour certains ^^ ).
J'ai écrit un tuto dessus, donc si ça vous intéresse... Par ici ( avec Paint.NET ).

Voila, ça évitera des topics pour un ajout de scanlines, du moins j'espère .

Merci pour le tutos mais il y a juste un petit problème moi j'ai Photofitre Studio donc sa ne peut pas vraiment m'aider.

[mooglwy]

Nan mais arrête le principe est le même partout. 
Qu'on utilise gimp, toshop, ou vos logiciel, c'est pareil. 

[Kingmojo]

Bonjour dite comment on fait pour faire ce genre d'avatar comme celui si? Et est ce que ces possible de le faire avec Photofitre Studio?

Merci. 

[Cetais]

Qu'est qui as de spécial l'avatar que tu montre?

[Couet]

Je ne sais pas si photofiltre le permet mais il s'agit de plusieurs images qui se succèdent et en format gif, je sais qu'adobe image ready le gère.

[binbin]

Moi je fais toutes les images sur photoshop et j'assemble mon gif avec Gif Movie Gear 4

[Kingmojo]

Je ne sais pas si photofiltre le permet mais il s'agit de plusieurs images qui se succèdent et en format gif, je sais qu'adobe image ready le gère.

Est ce qu'il existe un tutos pour faire se genre d'avatar?

[Arca]

Je ne sais pas si photofiltre le permet mais il s'agit de plusieurs images qui se succèdent et en format gif, je sais qu'adobe image ready le gère.

Est ce qu'il existe un tutos pour faire se genre d'avatar?

Je suis un peu comme cetais là, je ne vois pas ce qui y a de difficile.
Si tu parles d'un avatar animé, tu peux tous gérer avec PFS, mais je ne sais plus si il y a de la transparence sur le gif après.

[mooglwy]

Bien sur qu'il y a de la transparence sur le gif mais ie gère très mal ça. 

[Daru13]

Un *.gif c'est effectivement faisable avec ImageReady .
Mais il existe beaucoup de logiciels alternatifs, comme le très bon Gif movie gear 4 ( démo, 30 jours ).

Tu crée tes images, avec un logiciel qui enregistre en *.gif ( PF enregistre en *.gif j'imagine ), et tu les assembles dans l'ordre qui te plait sous le logiciel choisi .

Au niveau de la transparence, oui  il y en a, mais sur un seul canal  ( en gros, soit c'est transparent, sois c'est opaque, il n'y a pas de canaux intermédiaires ).

[mooglwy]

Euh non ça gère bien l'alpha, aussi bien que le png24. Mais bon après j'aime pas le format gif c'est pas top niveaux qualité je trouve.

[Memo]

Bonjour dite comment on fait pour faire ce genre d'avatar comme celui si? Et est ce que ces possible de le faire avec Photofitre Studio?

Merci. 

Eh mon avatar !

Alors le miens c'est pas un gif, c'est un APNG (PNG animé). J'ai créé les animations avec The Gimp en format PNG qui gère la transparence et les ai assemblés avec APNG Editor pour Firefox 3. Cela fait une autre image en *.png mais celle-ci est animée (comme un gif a la même extension mais peut être aussi bien animé que static). Mais je crois que la question se tourne plus sur la création de Gif animés non?

Alors moi j'utilise (toujours) Gimp pour faire les images en *.gif, mais j'ai un meilleur, à mon avis, assembleur que Gif movie machin truc. Alors moi j'utilisais un logiciel dont j'ai malheureusement perdu le nom et qui marchait très bien... Mais j'ai aussi trouvé ce site qui te permet de faire ça en ligne et gratuitement.

Alors voilà, bon bidouillage!

[Arca]

Ah, parce-qu'il est animé ton avatar là ?
Erf, j'ai pas FF3, pour ça ! ='(

[Daru13]

Euh non ça gère bien l'alpha, aussi bien que le png24.

Ai-je dit que le gif ne gérait pas du tout l'apha ? .
Le format *.gif ne gère qu'une seule couleur transparente. Alors que le *.png en gère sur 255 niveau, plus opaques, ou plus transparentes .

http://philippe.prados.name/Internet/Gif/index.html

[ayaaaa]

Je pense que ma question va bien ici.
Comment ça s'apelle ça ?
ET comment est ce qu'on en fait ?
Merci de vos réponses.

[Arca]

Je pense que ma question va bien ici.
Comment ça s'apelle ça ?
ET comment est ce qu'on en fait ?
Merci de vos réponses.

Il y a plusieurs noms, mais le noms le plus commun, je dirais "userbar".
Pour faire ça, il y a des tutos un peu partout sur le net dont Cristal XP !

[Marco]

Mais bon après j'aime pas le format gif c'est pas top niveaux qualité je trouve.

Pour sur mais le gif est plus léger que le png sauf erreur de ma part, et sous toshop le rendu est quand même bon mais bon IE a du mal avec la transparence du .png...

[binbin]

Il faut indexer les couleurs non pour que ie prenne la transparence?

[Neo2]

Pour qu'IE affiche bien une image PNG, il faut ouvrir l'image avec Firefox *sort loin*
Pour ma part, mes images PNG, je les enregistres en PNG-24, via "Enregistrer sous le web", sur Photoshop.
PS : L'avatar de Memo défile trop vite (eh oui, Firefox 3 user)

[LINK-MOJO]

Merci à vous grace à ce topic intéressant j'espère faire le mien.