Tuto : Comment faire un zoli post Rp

Tuto : Comment faire un zoli post RpLun 20 Sep 2010 - 1:34

Salut à tous !

Récemment j'ai reçu un paquet de messages me demandant comment je faisais pour faire des messages avec textes en couleur, cadres, images personnalisées et autres spécialités de l'instant. Faut dire, ça fait toujours joli un message avec des belles couleurs et des images un peu partout. Mais pour ça, faut avoir quelques bases dans différents domaines. Rassurez vous, je suis pas un tordu des codes HTML des de la retouche d'image et il n'y a rien de sorcier, tout le monde peut faire ça, accessible à un minimum de personnes qui veulent prendre leur temps à faire de jolis post, bien entendu.

Donc j'ai décidé de faire un tuto sur plusieurs parties, d'abord, on apprendra les bases du HTML, ensuite, la retouche d'image et enfin, l'homogénéité de tout ce petit bazar pour avoir un rendu pas trop lourd et pas trop chargé, parce qu'il y a des choses à éviter tout de même.

Premièrement, la mise en forme grâce au HTML

Bon, déjà, il faut savoir qu'il y a aussi le BBCode, mais le BBCode, c'est trop simple. Pour utiliser le HTML et le voir, vous devez activer l'option dans votre profil. Ensuite, commencez à écrire votre petit message. Le HTML fonctionne avec des balises, un peu comme le BBCode. Vous ouvrez une balise pour définir le style de mise en page, et la fermez quand vous voulez que ça s'arrête. Jusque là, ça va, et je vais pas non plus vous refaire tous les cours du SiteduZero ^^

Quelques exemples d'effets plutôt sympa au niveau de l'écriture :

Code:

 <font size=x></font>
Où x est une valeur de 1 à 7, avec pour 1 une police plus petite et 7 la plus grande. Je vous conseille de jongler entre deux chiffres, notamment 2 et 3, en utilisant 2 pour la narration et 3 pour les dialogues, agrémenté de gras pour les mots importants ou les phrases criées.

Texte. Texte. Texte.

Code:

<span style="font-variant:small-caps;"></span>
Cette balise ferra apparaître votre texte avec des caractères majuscules.

Texte.

Code:

<span style="letter-spacing:1px"></span> 
Cette balise ferra apparaître des espaces entre chaque lettre de votre texte, définissez le nombre de pixels que vous voulez entre les lettre mais n'allez pas au dessus de 5, sinon, c'est moche.

Texte.

Code:

<span style="margin-left: 100px"></span>
Cette balise n'est autre qu'un alinéa, c'est utile pour ceux qui ne veulent pas s'embêter à faire des espaces ou les plus malins d'entre vous qui utilisent des tirets et les mettent en couleur noir après... Ne mentez pas, je sais qu'il y en a qui l'ont fait ^^

Texte, saut de ligne,
Exemple.

Code:

<blockquote></blockquote>
Balise qui est sensé être utilisée pour les citations, mais elle enlève le script de base des citations du forum et ajoute des marges d'un côté et de l'autre de votre texte.

Texte. (Marge à gauche, et il y aura une marge, également, sur le côté droit de la page, je vais essayez de l'atteidnre en faisant une phrase longue pour que vous voyez l'exemple xD)

Voilà, on en a donc fini avec les effets sympathiques. Mais ça ne vous servira pas à grand chose si vous ne les faites pas accompagner de couleurs et d'images. Alors, on va passer à la partie qui vous intéresse tous, j'en suis sûr... Les z'images !

Deuxièmement, l'insertion d'image.

Comme d'habitude, insérer une image que vous trouvez telle qu'elle sur le net sera moins intéressant qu'une image que vous aurez retouché. Il y a plusieurs moyen de retoucher une image et beaucoup de logiciels libres sont mis à votre disposition. Pour ce tuto, j'utiliserais Photofiltre, qui est gratuit, et que vous pouvez très facilement trouver grâce à notre ami Google. Téléchargez le, installez le, et lancez le. Bien...

Avant tout, il faut que l'on ait une image sur quoi bosser. Mais pour ça, il faut une bonne base de donnée. Parfois, Google suffit amplement. Si vous voulez faire un plan large de la scène sur une planète connue, tapez le nom de la planète, Star Wars est d'assez bonne réputation pour se trouver sur Google et vous fournir des images. Si vous ne trouvez pas votre bonheur, voici quelques autres sites intéressants (Citez dès que vous le pouvez les auteurs des images, par respect):
DeviantArt
Epilogue
Le Kaerl céleste (Plus fantaisiste)

Pour mon exemple, je vais utiliser une image de Bail Organa trouvée sur Google. Je ne sais pas pourquoi, mais il m'inspire celui là ^^ Voilà l'image de base pour ceux que ça intéresse : ici.

Donc, tout d'abord, on va lui donner un effet contour de pellicule, pour que l'image s'ancre facilement dans le Forum et respecte les tons sombres. Via le logiciel Photofiltre, allez dans Filtre > Photomasque... > Ouvrez l'effet "Diapositive" > Opacité "100" ; couleur "noire" ; mode "couleur" > Ok. L'image est entourée d'un effet sombre. Vous pouvez par la suite ajouter du texte, pour une petite citation du personnage qui se trouve dans la situation. Pour ma part, je défini un cadre que je rempli de noir, et ajoute un texte avec effet de dégradé (au préalable, utiliser le format "sélection" du texte pour le dégradé).

Tuto : Comment faire un zoli post Rp Postex10

Si vous voulez insérez votre image sur le côté de votre texte, vous allez devoir utilisez une balise HTML et mettre votre image dans un tableau. Vous définirez la position de l'image à droite "rigth" ou à gauche "left" avec la balise suivante (n'oubliez pas de définir la bordure "border" à 0 sinon le tableau sera visible) :

Code:

<table border="0"; align="left">
<tr>
<td>[img]Url de l'image ici ![/img]</td>
</tr>
</table>

Troisièmement, coloriage !

Après avoir fait votre mise en page et vos images (pas plus de deux par topics en général sinon la page devient trop chargée après), il ne vous reste plus qu'à colorier votre texte. Et pas n'importe comment ! Pour cela, ne pensez même pas à utiliser les couleurs offertes par l'hébergeur forumactif. Il y en a une centaine de milliers d'autres. Et elles fonctionnent très bien sur l'hébergeur. Forumactif n'offre qu'un échantillon de couleur, si vous voulez. Pour toutes les autres couleurs, il existe un code significatif, qu'ils appellent ça, disponible ici : Code des Couleurs. Vous pouvez également rechercher une couleur personnalisée sur http://www.code-couleur.com/

Essayez de marier les couleurs les unes aux autres, en général, deux couleurs suffisent dans un seul poste.

Et maintenant, l'exemple :

Tuto : Comment faire un zoli post Rp Postex11

Voilà, j'espère que ça vous aura plu et je vous souhaite bon courage pour la mise en page de vos Rps.
Si vous avez des questions ou des suggestions, ce sujet est ouvert à tous.

Merci !

Je précise également que les joueurs qui m'ont inspiré pour procéder au Rp de cette façon ont été nombreux. Je citerais notamment Nala'il ou encore Te Kandosii Era.

Dernière édition par R. Quechua le Jeu 23 Sep 2010 - 21:32, édité 2 fois

L'auteur de ce message est actuellement banni du forum - Voir le message

Re: Tuto : Comment faire un zoli post RpLun 20 Sep 2010 - 1:39

Dieu a parlé. J'ai pas encore lu mais je sais que ce sera magnifique. Merci papa Quechua ! :')

Re: Tuto : Comment faire un zoli post RpSam 13 Aoû 2011 - 2:19

Chaque jours qui passent Papa Xiz' nous fait progresser un peu plus sur la voie de la sagesse!

Merci Papa Xiz'!

(Même si de toutes façon, moi je m'y connaissais déjà et tout...) xD

Re: Tuto : Comment faire un zoli post RpSam 13 Aoû 2011 - 17:35

C'est un début ce n'est pas génial mais j'essaye. ^^

Tuto : Comment faire un zoli post Rp Llnevertell

Pour faire des arrondis j'ai compris, c'est juste que là j'avais commencé avec un rectangle. ^^ Par contre comment fait-on pour que le texte se mette correctement dans le cadre? Personnellement j'ai du l'étirer, le déplacer. :s Et c'est quoi ta police de caractère Quech? Razz

(impossible à trouver ^^").

Re: Tuto : Comment faire un zoli post RpLun 29 Aoû 2011 - 13:54

Mdr je connais plus photofiltre, quoi que le dégradé des bordures je sais pas le faire avec photoshop non plus ^^

Sinon, je capte pas, vous vous embêtez toute le temps à écrire les code? genre

Code:

<table border="0"; align="left">
<tr>
<td>[img]Url de l'image ici ![/img]</td>
</tr>
</table>

Comme ça? Damned ça à l'air super relou, y'a pas des raccourcis?

Re: Tuto : Comment faire un zoli post RpSam 17 Sep 2011 - 16:18

Pour les couleurs, plutôt que d'utiliser ton lien, Dieu, je préfère un petit logiciel qui s’appelle la boite à couleurs.

Testez vous-même Wink

Je l'utilise pour du développement de site web afin de trouver les couleurs que je souhaite utiliser.

http://www.clubic.com/telecharger-fiche18543-la-boite-a-couleurs.html

Re: Tuto : Comment faire un zoli post RpSam 17 Sep 2011 - 16:21

Ca peut être bien pratique aussi Smile

merci bien

Re: Tuto : Comment faire un zoli post RpMar 20 Sep 2011 - 12:41

En tout cas Quech thanks, je me suis lancé dans ça y a quelques jours, je trouve que ça rend les posts beaucoup plus sympas, en plus photofiltre est super facile d'utilisation... Bon les balises je les copie-colle toujours depuis ce sujet x)

Voilà donc je le conseille à tous!!

Re: Tuto : Comment faire un zoli post RpVen 13 Jan 2012 - 22:45

Je me permets de rajouter un sujet du forum d'entraide de ForumActif qui cite les balises BBCode autorisées. Si tout le monde connaît le soulignement, le grossissement, l'italique ou encore les jeux de couleur et de taille, certains effets sont moins connus.

Par exemple le floutage ~~de gueule~~ que je n'ai vu que chez Tyber Zann et Darth Oxious :
"blur" à mettre entre crochets pour ouvrir la balise, comme d'hab', et précédée d'un slash du plus bel effet pour qu'elle la boucle enfin.

Ou l'effet de dégradé mais ça marche moins bien sans doute parce que l'effet est un peu naze sur fond noir :
pareil mais avec "fade"
Test avec une couleur... bah non ça marche pas. lol

Un truc utile pour les MJ qui se sentent obligés de sortir un petit dé de leur poche : la commande "rand" qui choisit un nombre aléatoirement compris entre les bornes que vous lui imposez. Apparemment les intervalles sont fermés: les valeurs des bornes elles-mêmes sont prises en compte.

Code:

[rand]1,2[/rand]

Nombre aléatoire (1,2) : 1

Amusez-vous bien !

Dernière édition par Justice le Mar 6 Mar 2012 - 23:41, édité 1 fois

Re: Tuto : Comment faire un zoli post RpVen 13 Jan 2012 - 23:26

Il y a encore bien des effets pour enjoliver vos posts !
Par exemple :

Code:

[scroll] [/scroll]

Défilement

Code:

<blink> </blink>

Clignotement

Code:

[updown] [/updown]

Autre défilement

Re: Tuto : Comment faire un zoli post RpVen 13 Jan 2012 - 23:27

Oui, qui sont sur le lien que j'ai donné Very Happy

Sauf pour le clignotement, tu l'as trouvé où ?

Re: Tuto : Comment faire un zoli post RpVen 13 Jan 2012 - 23:28

C't'un pote MJ cultivé qui me l'a refilé... Érudition, tu le connais ?

Whistling

Re: Tuto : Comment faire un zoli post RpMar 6 Mar 2012 - 21:51

Bonjour ! Je vais vous montrer une ou deux choses que j'ai réussi à glaner ici et là, et qui pourraient vous intéresser.
Il faut souvent utiliser la fonction tableau, ce qui vous donnera peut-être des idées pour bricoler des trucs sympas selon votre imagination. Enjoy Wink

Écrire par-dessus une image

Code:


<center><table style="background-image:url(URL DE L'IMAGE); background-color: #0C0B0D; background-repeat:no-repeat; border: 3px solid #242424; height:???px width:???px; align:center;"><tr><td>[table border="0"][tr][td]

[b]Votre texte[/b]

[/td][/tr][/table]
</td></tr></table></center>

Pensez à remplacer les ??? par les dimensions de votre image (height = hauteur ; width = largeur) pour que le cadre soit à la bonne taille !

Et un exemple de résultat :

Parle à ma main !

Pour faire un tableau à coins arrondis :

Code:


<table style="-moz-border-radius: 35px; -webkit-border-radius: 35px; border-radius: 35px; background-color: #FFFFFF; height: ??px; width: ??px;text-align: center;"><tr><td>
Votre texte
</td></tr></table>

Vous pouvez vous faire plaisir, en changeant la couleur du fond (par défaut dans le code, #FFFFFF donne du blanc), et appliquer des effets au texte.

Le résultat :

Hou !!!

Un pitit écran qui défile !!!

Houlala c'est beau !!!

Re: Tuto : Comment faire un zoli post RpMar 6 Mar 2012 - 23:54

Pas mal pour les annonces Holonet ^^

Re: Tuto : Comment faire un zoli post RpVen 27 Avr 2012 - 0:22

A la demande de Justice (qui a eu droit à son tutorial privé...), un ptit tuto sur "Comment on fait-il pour faire un effet Hologramme sur une image, tonton Éru ?"

Hé ben, c'est pas si compliqué... Je commencerai par un tuto sous Photoshop, car c'est ce que j'utilise (CS3). Pour Photofiltre, ma foi... faudra attendre un peu, ou vous démerder :o

Donc, prenons une image au hasard.

Tuto : Comment faire un zoli post Rp 250px-Obi-Wan

Bon, donc on l'ouvre sous Photoshop, on l'a donc en calque d'"Arrière-plan". Il faut qu'on puisse le modifier. Donc, on le duplique, ce qui nous donne "Arrière-plan copie" comme calque supplémentaire. Ensuite on peut supprimer l'"Arrière-plan". On peut maintenant travailler. Faites vos petites modifications sur ce calque, comme un détourage par exemple. On arrive à ça :

Screenshot :

De là, on crée un nouveau calque, qu'on nomme "Holo". Sélectionner deux couleurs. L'une de premier plan : #028e7f dans mon exemple. Et une couleur d'arrière plan : #1fdbc7. Sélectionnons le tracé de l'"Arrière-plan copie" (CTRL+clic sur la vignette du calque, en bas à droite), puis remplissons le calque "Holo" avec la couleur de premier plan. On peut aussi donner une couleur au fond sur l'"Arrière-Plan copie", ici, en noir.

Screenshot :

On passe à l'effet proprement dit. Appliquons un filtre, qu'on trouvera dans la Galerie de Filtres, section Esquisse. Ce filtre se nomme "Trame de demi-teintes". Effectuons les réglages suivants :
- Taille : 5
- Contraste : 0
- Type : Segment
Et on valide
On arrive à une silhouette rayée sur fond noir. Un petit réglage de l'opacité (50%) sur le calque "Holo" et on arrive à un bon début. On ajoute un style de calque Lueur Externe, toujours sur "Holo". J'utilise la couleur d'arrière plan (en un peu plus claire) pour couleur de lueur, avec un Grossi à 35% et Taille à 10px. Je recadre selon l'utilisation que je veux en faire. Et voilà le résultat :

Tuto : Comment faire un zoli post Rp 250px-10

Non, non, ne me remerciez pas, c'est un plaisir Wink

Tuto : Comment faire un zoli post Rp

descriptionTuto : Comment faire un zoli post RpLun 20 Sep 2010 - 1:34

descriptionRe: Tuto : Comment faire un zoli post RpLun 20 Sep 2010 - 1:38

descriptionRe: Tuto : Comment faire un zoli post RpLun 20 Sep 2010 - 1:39

descriptionRe: Tuto : Comment faire un zoli post RpSam 13 Aoû 2011 - 2:19

descriptionRe: Tuto : Comment faire un zoli post RpSam 13 Aoû 2011 - 17:35

descriptionRe: Tuto : Comment faire un zoli post RpLun 29 Aoû 2011 - 13:54

descriptionRe: Tuto : Comment faire un zoli post RpSam 17 Sep 2011 - 16:18

descriptionRe: Tuto : Comment faire un zoli post RpSam 17 Sep 2011 - 16:21

descriptionRe: Tuto : Comment faire un zoli post RpMar 20 Sep 2011 - 12:41

descriptionRe: Tuto : Comment faire un zoli post RpVen 13 Jan 2012 - 22:45

descriptionRe: Tuto : Comment faire un zoli post RpVen 13 Jan 2012 - 23:26

descriptionRe: Tuto : Comment faire un zoli post RpVen 13 Jan 2012 - 23:27

descriptionRe: Tuto : Comment faire un zoli post RpVen 13 Jan 2012 - 23:28

descriptionRe: Tuto : Comment faire un zoli post RpMar 6 Mar 2012 - 21:51

descriptionRe: Tuto : Comment faire un zoli post RpMar 6 Mar 2012 - 23:54

descriptionRe: Tuto : Comment faire un zoli post RpVen 27 Avr 2012 - 0:22

descriptionRe: Tuto : Comment faire un zoli post Rp