Aller en bas
Prince
Prince
Immortel du Forum
Nombre de messages : 2647
Age : 28
Date d'inscription : 20/01/2007
http://www.swor-jdr.com/t11007-le-prince-xizor

Tuto : Comment faire un zoli post Rp Empty Tuto : Comment faire un zoli post Rp

le Lun 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


Autre Compte : Narrateur

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

Ethan Acera
Ethan Acera
Professionnel
Nombre de messages : 1001
Date d'inscription : 14/10/2009
http://www.swor-jdr.com/fiches-validees-f63/ethan-acera-v20v-t10

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Lun 20 Sep 2010 - 1:39
Dieu a parlé. J'ai pas encore lu mais je sais que ce sera magnifique. Merci papa Quechua ! :')


Tonight is the night.
Tyber Zann
Tyber Zann
Immortel du Forum
Nombre de messages : 1543
Age : 28
Date d'inscription : 08/01/2010
http://www.swor-jdr.com/9642-chroniques-recits-9642-f105/chroniq

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Sam 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


    « Je ne les plains pas, parce que je devine que leurs effusions oratoires leur procurent des voluptés égales à celles que d'autres tirent du silence et du recueillement; mais je les méprise. »

Spoiler:
Darth Vader
Darth Vader
Immortel du Forum
Nombre de messages : 2078
Age : 38
Date d'inscription : 28/09/2009

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Sam 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 ^^").


« Votre manque de foi me consterne. »
Tuto : Comment faire un zoli post Rp Scaled.php?server=12&filename=vaderonhoth
IG-88
IG-88
Maître Incontesté
Nombre de messages : 1340
Age : 25
Date d'inscription : 03/03/2008

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Lun 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?


"Why do people keep hiring him? They're risking the wrath of the Empire."
"Sir, I believe it's because IG-88 always gets the job done."
- Gurdun et Minor Relsted


Besoin d'éradiquer quelqu'un? Votre solution est ici !!
Acédie
Acédie
Maître du Jeu ▪
Nombre de messages : 110
Age : 27
Date d'inscription : 01/09/2010

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Sam 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


Toi aussi Invité, tu seras pris de torpeur et ton esprit connaîtra l'Acédie.

Contact

Spoiler:
Maetel // Neese
Tyber Zann
Tyber Zann
Immortel du Forum
Nombre de messages : 1543
Age : 28
Date d'inscription : 08/01/2010
http://www.swor-jdr.com/9642-chroniques-recits-9642-f105/chroniq

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Sam 17 Sep 2011 - 16:21
Ca peut être bien pratique aussi Smile merci bien


    « Je ne les plains pas, parce que je devine que leurs effusions oratoires leur procurent des voluptés égales à celles que d'autres tirent du silence et du recueillement; mais je les méprise. »

Spoiler:
Koth Melan
Koth Melan
Professionnel
Nombre de messages : 1223
Age : 26
Date d'inscription : 11/06/2011

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Mar 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!!


Koth Melan s'avança en triturant sa barbe, il avait ce sourire espiègle qui signifiait tout et rien à la fois et dit: "Qui êtes vous?"... L'homme allait parler et Koth l'interrompit: "Je plaisante je sais déjà qui vous êtes et ce que vous voulez, ce sera 20 000 crédits, dans deux jours vous l'aurez..."

Besoin d'une information? d'un document? de savoir si votre femme couche avec ce salaud de Tyr Aman? C'est par ici mon ami Wink

Bothan Spynet, all rights reserved.

Comptes:
Koth Melan / Créativité
Wilhuff Tarkin
Wilhuff Tarkin
Bon Connaisseur
Nombre de messages : 391
Date d'inscription : 28/11/2011

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Ven 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
Darth Oxious
Darth Oxious
Sage Erudit
Nombre de messages : 806
Date d'inscription : 11/07/2011
http://www.swor-jdr.com/t11498-chroniques-de-darth-oxious

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Ven 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


Tuto : Comment faire un zoli post Rp Signat11

Tuto : Comment faire un zoli post Rp Bouton17Tuto : Comment faire un zoli post Rp Bouton18Tuto : Comment faire un zoli post Rp Bouton19Tuto : Comment faire un zoli post Rp Bouton20

Darth Oxious / Frankie Werkx / MJ Érudition
Tuto : Comment faire un zoli post Rp C_3p010
2012
Wilhuff Tarkin
Wilhuff Tarkin
Bon Connaisseur
Nombre de messages : 391
Date d'inscription : 28/11/2011

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Ven 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ù ?
Darth Oxious
Darth Oxious
Sage Erudit
Nombre de messages : 806
Date d'inscription : 11/07/2011
http://www.swor-jdr.com/t11498-chroniques-de-darth-oxious

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Ven 13 Jan 2012 - 23:28
C't'un pote MJ cultivé qui me l'a refilé... Érudition, tu le connais ?

Whistling


Tuto : Comment faire un zoli post Rp Signat11

Tuto : Comment faire un zoli post Rp Bouton17Tuto : Comment faire un zoli post Rp Bouton18Tuto : Comment faire un zoli post Rp Bouton19Tuto : Comment faire un zoli post Rp Bouton20

Darth Oxious / Frankie Werkx / MJ Érudition
Tuto : Comment faire un zoli post Rp C_3p010
2012
Érudition
Érudition
Administrateur ▪
Nombre de messages : 375
Age : 35
Date d'inscription : 14/10/2011

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Mar 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 !!!









L'Érudition, c'est la mémoire et la mémoire, c'est l'imagination.
Préférences RP:

RP entre Manipulateurs de la Force
RP d'infiltration
RP Bataille spatiale de petite et moyenne envergure)

Darth Oxious / Frankie Werkx / Érudition


H.
Prince
Prince
Immortel du Forum
Nombre de messages : 2647
Age : 28
Date d'inscription : 20/01/2007
http://www.swor-jdr.com/t11007-le-prince-xizor

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Mar 6 Mar 2012 - 23:54
Pas mal pour les annonces Holonet ^^


Autre Compte : Narrateur
Érudition
Érudition
Administrateur ▪
Nombre de messages : 375
Age : 35
Date d'inscription : 14/10/2011

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

le Ven 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:

Tuto : Comment faire un zoli post Rp Screen10

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:
Tuto : Comment faire un zoli post Rp Screen11
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


L'Érudition, c'est la mémoire et la mémoire, c'est l'imagination.
Préférences RP:

RP entre Manipulateurs de la Force
RP d'infiltration
RP Bataille spatiale de petite et moyenne envergure)

Darth Oxious / Frankie Werkx / Érudition


H.
Contenu sponsorisé

Tuto : Comment faire un zoli post Rp Empty Re: Tuto : Comment faire un zoli post Rp

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum