[Tuto & Commandes] Dialogues dans un style RPG.

Suite aux demandes de plusieurs personnes intéressées, je poste ici un petit tutoriel concernant la manière de faire, dans ses RP, des dialogues donnant un effet RPG sans trop se casser la tête.



- EXEMPLE DE RENDU -

Le but final est d'obtenir un texte de dialogue ressemblant, grosso modo, à cela : une image, à gauche, représentant le visage du personnage, puis un rectangle blanc contenant le texte.

- COMMENT FAIRE ? -

C'est assez simple: il suffit tout bonnement d'insérer un tableau. Le code de ce tableau est le suivant.

Pour que l'image du personnage soit à gauche :

Code:

<table border="0" cellpadding="5"><tr><td><img src="URL DE L'IMAGE DU PERSONNAGE"></td><td bgcolor="#ffffff">TEXTE</td><td width="60"></td></tr></table>

Pour que l'image du personnage soit à droite :

Code:

<div align="right"><table border="0" cellpadding="5"><tr><td><td width="60"></td><td bgcolor="#ffffff">TEXTE</td><td width="60"><img src="URL DE L'IMAGE DU PERSONNAGE"></td></tr></table></div>

Merci à Ileas Cain qui m'a fourni ce code, plus propre que l'ancien (que j'avais la flemme de peaufiner, à vrai dire ^^').



- A QUOI TOUT CELA CORRESPOND-IL ? -

Code:

<table border="0">

Détermine la largeur de la bordure du cadre: ici, elle est à "0" pixels, raison pour laquelle on ne la voit pas.

Code:

<tr></tr>

Signale le début et la fin de la première ligne du tableau.

Code:

<td></td>

Signale le début et la fin des différentes colonnes du tableau. On place, dans la première, l'image du personnage; dans la seconde, le texte; puis, dans la dernière, l'image transparente destinée à laisser un écart entre la fin du texte et le bord de la page.

Code:

<td bgcolor='#ffffff'>

Détermine la couleur de l'arrière-plan de la seconde colonne. Ici, il est blanc.

Code:

<td width="60">

Permet la création d'une marge de 60 pixels, sur la droite.

Code:

<img src="URL DE L'IMAGE DU PERSONNAGE">

Ici, vous placerez simplement le lien pour la petite image de votre personnage à insérer (ne pas ôter les guillemets).

Citation :

TEXTE

Faut-il vraiment une explication à ce champ? Remplacez tout simplement par le texte que vous souhaitez voir s'afficher. Notez que vous pouvez y appliquer une mise en forme classique selon vos envies (couleur, alignement, etc).



- ET L'IMAGE DE MON PERSONNAGE, ALORS ? -

Là, par contre, à moi de jouer. Je prends des commandes, je les réalise et je vous donne l'image finale.
Pour toute demande, merci de poster à la suite, selon ce modèle.
Les délais sont bien sûr en fonction de mes disponibilités, bien que ce ne soit pas très long à réaliser. ^^

Code:

[b]Image du personnage :[/b] Un lien vers une image de votre personnage. De préférence de face, pour un meilleur rendu.
[b]Nom à placer :[/b] Le nom que vous souhaitez voir dans la barre placée sous l'image du personnage. Merci de ne pas excéder sept ou huit caractères, pour des raisons d'esthétisme: au-delà, ça ne rentre plus. =p

: Version du PNJ à utiliser dans les dialogues avec de tels personnages. Utilisez simplement la version du code destinée à l'afficher à droite.

Merci à Seth Darkhan, qui a bien voulu m'aider lorsque je n'avais plus accès à aucun logiciel de graphisme, ainsi qu'à Laia Kahann pour son initiative. Merci également à Kuja qui m'assiste. ^^

Image du personnage : http://www.picdo.net/Fichiers/3ec94cf278d787f934eeb1878ded9c8e/staynight19epi5.jpg
Nom à placer : Blake

C'est génial ton truc !
Image du personnage :
Nom à placer : Waldy

Merci d'avance ^^ !

Super!!

Image du personnage:

Nom à placer: Kaïtos

Merci aussi d'avance!

Image du personnage : Image: https://sd-1.archive-host.com/membres/images/92850865523762432/deck.png ou https://sd-1.archive-host.com/membres/images/92850865523762432/9446_render_Render_Genesis2.png
je te laisse choisir.

Nom à placer : Deckard

Merci d'avance.

Ca à l'air super-fun =)

Image du personnage:

Spoiler:

http://home.earthlink.net/~ruthssp/mibu/dbs-0.jpg

Nom à placer: Je pense qu'il vaut mieux abréger en "Segis".

Je suis le mouvement si ça ne te dérange pas xD

Image du personnage : Elle ou bien elle, je te laisse choisir. Si jamais aucune ne convient, préviens moi je dois pouvoir en trouver d'autres xD
Nom à placer : Seth

Merci d'avance ^^

Image du personnage : Celle-ci ou bien celle-là
Nom à placer : Casey

Voili voilu, merci d'avance x)

C'est vraiment trop class' oO

Image du personnage :

Spoiler:

Nom à placer : Arqeos

Wouaw! C'est classe, j'adhère

Image du personnage:

Nom à placer: Tatsu

Merci pour le temps perdu par notre faute ^^

Vu que c'est vraiment bien trouvé et génial, je vais faire le mouton =D

Image du personnage : Ici
Nom à placer :Spike

Merci d'avance =)

bêêêê bêêêêê (moi aussi je sais faire le mouton !)

Image du personnage : Clik Clik
Nom à placer : Samuel

sans dec s'est super bien fait !

Comme tous les autres, je suis le troupeau et j'en suis fier ^o^

Image du personnage :Celle-ci ou Celle-là
Nom à placer : Phoenix

Image du personnage:

Spoiler:

Nom à placer: Kyle

Merci ^^

PS: C'est vraiment trop classe

Je l'avais déjà vu dans certain RP et en effet ça rend vraiment très bien.

J'aurais donc à mon tour voulu faire une petite demande si tu trouves le temps de le faire bien sûr ^^

Image du personnage : Ici

Nom : Hylios

Merci d'avance pour ton temps

Ça c'est une idée qu'elle est bonne... Je dirais pas non xD

Image: http://www.freewebs.com/janellybelly/63d1640c.jpg

Nom: Ileas

En fait vu qu'on autorise le code html directement sur le forum, c'est plus propre de faire ça:

Code:

<table border="0" cellpadding="5"><tr><td><img src="URL de l'image"></td><td bgcolor="#ffffff">TEXTE</td><td width="60"></td></tr></table>

Ça évite l'image vide et le redoublement de la balise td qui pourrait poser problème avec certains navigateurs. Et ça permet de mettre un espacement intérieur autour du dialogue.

Merci c'est géant !

Image du personnage : http://planetrenders.net/renders/displayimage.php?pos=-27703
Nom à placer : Karme

Et tout ça accompagné d'un s'il te plait : o

Vraiment sympa cette idée J'aime beaucoup ^^
Je fais aussi du graph si tu utilise photoshop, je peux t'aider à faire les commandes
(enfin il me faudrais dans ce cas là le psd pour faire pareil que toi)

Image du personnage : ici
Nom à placer : Laia

Désolé de le re demander mais peux tu me refaire une image de mon perso car je trouve que noir et blanc est pas terrible.

Image du perso:

Spoiler:

ou celle-ci si possible

Spoiler:

ou encore celle-ci à toi de voir

Spoiler:

Nom à placer: Kaïtos



Merci d'avance!!