Le graphisme et le codage

Sigrid Rae Thu Nov 17, 2011 9:37 pm

Hello, cher visiteur !

Tu viens de pénétrer dans mon antre, dans mon repaire ! Pour cela, tu seras récompensé (à ma façon, bien sur...) ! Very Happy

Meuh non, j'rigole ! What a Face

Au fait, si j'ai créée cette partie, c'est parce que je fais du graphisme, et que je sais faire du codage. Mais... Qu'est-ce que c'est ? Bonne question. Je vais d'abord commencer par le plus simple, le graphisme.

Le graphisme sert à créer des avatars, des montages, des bannières... Aha ! Et... L'avatar, n'est-ce pas ce dont vous avez besoin pour votre fiche ? Bien sur que oui ! Mais... Je sens que tout cela est encore un peu flou... Voici quelques exemples de mes créations :

"Clique ici":

Est-ce que cela vous parait-il plus clair, maintenant ? Je sais, c'est bluffant. On peut encore faire une multitude de choses avec le graphisme. Cependant, malgré les images que j'ai donnés, je préfère vous expliquer tout cela cas par cas.

- L'avatar est une image (forcément), qui est très souvent utilisé dans les sites (forums, etc...) mise en-dessous du pseudo des membres. Elle sert à illustrer, et, pourquoi pas, faire passer un message (mais pas violent, ni porno, etc...), ou encore exprimer vos sentiments de la journée... Cependant, dans notre cas, cela devra être l'image d'une personne (mangas, etc...), avec, si vous voulez, le nom et le prénom de votre personnage dessus. Un avatar est la création la plus connue, mais aussi la plus facile à réaliser.

Si vous voulez aller plus loin, voici des explications plus poussées :

- Les bannières sont des images rectangulaires. Pourquoi ? Car elles sont faites pour être placées dans la signature. Mais... C'est quoi la signature, d'abord ? La signature est généralement placée en-dessous de votre message. Elle ne doit pas très haute, mais peut comporter des phrases, des proverbes... Bref, votre signature. Comme la signature ne doit pas être très haute, et qu'on avait envie de mettre des images dedans, on a inventé les bannières. Elles ne sont généralement pas hautes (du fait du format de la page), ni trop larges, mais peuvent être assez longues. C'est un petit plus, quoi ! ^^

- Le kit. Ah, ça commence à devenir intéressant. Le kit est un ensemble d'images, de cadres, etc... rassemblées. Parfois, cela comporte une seule image (voir plus haut), mais c'est rare. Les kits peuvent être utilisés comme signature, mais elles sont plus fastidieuses et compliquées à réaliser. En effet, les kits offrent un champ beaucoup plus large que les bannières. Ce n'est pas pour autant que cela signifie que les bannières sont inutiles. Loin de là. Les kits servent uniquement si vous voulez un assemblage de plusieurs images, de motifs, de phrases... C'est comme un puzzle ! Wink

"Clique ici":

- Et enfin, les montages. Les montages sont comme les kits, à l'exception que celles-ci sont composées d'une seule image, mais avec beaucoup de décorations autour. Par exemple, dans le montage où j'ai écrit "joyeux noël", j'ai pris l'image de la maison, et ai rajouté de la brume, plusieurs encadrements... Parfois, les montages peuvent amener à un résultat vraiment remarquable, il suffit d'être inspirée et d'avoir du goût ! Wink

"Clique ici":

Maintenant que vous savez tout ce que l'on peut faire avec le graphisme, j'ai décidée de vous offrir mes services. Si vous voulez un avatar, une image à mettre dans votre signature, n'hésitez pas à poster dans un nouveau sujet (ou topic). Je suis très ouverte, je fais donc des créations pour tout les goûts ! Smile

Pour faire une commande, il suffit de cliquer sur "new" pour créer un nouveau sujet. Dans le titre du sujet, mettez s'il vous plait le type de créations que vous voulez que je fasse pour vous. Ensuite, dans le contenu de votre message, il vous faudra remplir uniquement cette liste :

- Type de commande : (Kits, avatars, etc...)
- Les couleurs principales :
- Le texte (s'il y en a un), sa position, sa couleur :
- Le nom du manga utilisé pour votre personnage :
- Image de fond (facultatif) :
- S'il y a des détails que vous voulez que je supprime, ou rajoute (facultatif) :
- Votre image (si vous souhaitez que j'utilise une image bien particulière) :
- La taille de la création : (Veuillez me donner la longueur et la hauteur en pixel, merci)

J'oubliais. Je ne prend qu'une commande à la fois par personne. Cela signifie que un tel peut me demander maximum une création, idem pour son camarade. Pourquoi ? Tout simplement pour ne pas que je sois surchargée, car j'ai quand même une vie à mener ! ><

Passons maintenant à la deuxième partie, le codage. Son vrai nom est l'HTML. Au départ, l'HTML était fait pour créer des pages webs. Cependant, le langage HTML étant trop compliquée, on inventa le BBCode, qui, comme son nom l'indique, est une code pour bébé. Ne vous inquiétez pas, cela ne veut pas dire que nous sommes des bébés, loin de là ! xD. C'est tout simplement une autre manière de coder plus facilement. Personnellement, j'utilise le BBCode pour les choses simples (la couleur, etc...), et le code HTML pour les pages CSS. Je sais que ça fait beaucoup d'un coup, alors je vais tenter de vous éclaircir.

C'est quoi une page CSS ?
Une page CSS est une "page de style". Cela veut dire qu'avec le code HTML, nous pouvons créer des bordures, des fonds, des textes brillants, des tableaux... Bien évidemment, ce code est beaucoup plus fastidieux à créer, et surtout plus long et difficile.

A quoi ça ressemble le codage, et comment on en fait ?
Le codage est fait à partir de balises. Mais c'est quoi ? Pour le BBCode, c'est des tout simplement des crochets placés aux extrémités de mots en anglais. Ex : Vous voulez que votre texte soit en rouge, vous allez donc écrire :

Code:: [color=red] Mon texte [/color]

Votre texte sera alors écrit en rouge. Au fait, le codage est un "ordre". En effet, grâce au codage, vous pouvez ordonner à l'ordinateur de faire ce vous souhaitez qu'il réalise. Malheureusement pour vous, le codage ne fonctionne qu'en anglais (une raison de plus pour apprendre la langue de Shakespeare...) ! xD Mais bien évidemment, ça c'est le BBCode. Pour le code HTML, les "ordres" sont placées entre ces signes : < >. Il est donc beaucoup plus difficile de s'y retrouver, surtout lorsqu'on a beaucoup de codes à mettre à l'intérieur. Bien évidemment, le code HTML est désactivé sur ce forum. Vous ne pourrez donc pas l'utiliser. Nous allons donc nous concentrer sur le BBCode, le plus facile.

Comment j'écris mon texte en gras ? Et en italique ?
C'est simple comme bonjour. En effet, pour changer la forme du texte, il suffit de mettre une lettre entre les balises. Voici un exemple :

Code:: [b] Le texte est écrit en gras [/b] [i] Le texte est écrit en italique [/i] [u] Le texte est souligné [/u] [strike] Le texte est barré [/strike]

Et comment je fais pour le faire changer de couleur ? Et de taille ?
La couleur est aussi simple, mais par contre est composé de deux mots. Exemple :

Code:: [color=blue] mon texte est écrit en bleu [/color] [color=green] mon texte est écrit en vert [/color]

Par contre, pour la taille, c'est plus délicat. En effet, l'ordinateur compte la taille des caractères en pixels. C'est quoi ? C'est tout simplement un tout petit carré qui compose l'écran de votre ordinateur. Il est composé de trois couleurs (le rouge, le bleu et le vert), qui, lorsqu'elles sont mélangées, peuvent créer d'innombrables d'autres couleurs. Exemple :

Code:: [size=12] le texte est petit [/size] [size=24] le texte est grand [/size]

Le chiffre/nombre que vous mettez après l'égal correspond à la taille mesurée en pixel que devra faire votre texte. Simple, non ? Bien sur, il existe d'autres manières, mais pour l'instant nous ne retenons que celle-ci.

Je n'arrive pas à changer la police ! D'ailleurs, est-ce que c'est possible ?
Oui, c'est possible !!! Il suffit d'écrire "font", et derrière le "=", il faut mettre la police que l'on veut. Exemple :

Code:: [font=comic sans ms] mon texte sera écrit avec la police "comic sans ms" [/font]

Malheureusement, il faut penser à ne pas mettre des polices que les navigateurs ne reconnaissent pas. Si par exemple vous mettez comme police "french script mt", il se peut que quelqu'un qui lit votre fiche et qui possède un navigateur diffèrent ne pourra la lire ! Dans ce cas, il sera contraint de télécharger la police ! C'est pour éviter ces problèmes que je vous ai fait une liste des polices que tout les navigateurs reconnaissent :

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Et comment je fais si je veut écrire à gauche ? Et au centre ? Et à droite ?
Pareil qu'avant. Il suffit de traduire "gauche", "droite" et "centre" pour trouver les balises correspondantes. Exemple :

Code:: [left] mon texte sera écrit vers la gauche [/left] [right] mon texte sera écrit vers la droite [/right] [center] mon texte sera écrit au centre [/center]

Pourquoi mets-tu à chaque fois une barre "/" ?
Pourquoi ? Tout simplement parce que la "barre" signifie que je ferme la balise. Si je ne le fais pas, le texte ne changera pas, vu que l'on aura pas fermé la balise. Voilà pourquoi !

C'est terminé ! Je crois que vous en savez déjà beaucoup, et puis c'est toujours plus joli quand on utilise du code, je trouve ! Wink

Après, si vous avez une question, encore une fois, n'hésitez pas à m'envoyer un M.P ! Very Happy

Merci de ta visite ! ^^