Créer et installer


une bannière-fond

Le titre peut sembler déroutant ou abstrait, mais il traite quelque chose qui est aujourd'hui de plus en plus présent sur les forums que l'on voit partout : une bannière "réelle" absente, et un fond de forum qui sert d'en-tête. Vous voyez de quoi je veux parler ? Cela peut paraitre complexe au premier abord alors qu'il n'en est rien, et justement cela fait économiser du temps puisqu'en un coup vous faites la bannière et le fond de votre forum ou votre commande.
Le tutoriel est présenté sous cette forme de texte afin que je puisse inclure les codes qu'il faut ajouter. Rien de compliqué là non plus !

I/ Première étape : faire la bannière

Quelle taille ?
C'est une question délicate, plus qu'il n'y parait... En effet, mon écran est de 1440x900 actuellement, mais le votre est peut-être de résolution différente, et celui des visiteurs de votre forum le sera également... Difficile donc de choisir une taille de fond/bannière fixe en se disant que tout le monde verra la même chose. Si vous prenez trop petit, les utilisateurs ayant un grand écran verront votre jolie bannière coupée, ce qui serait dommage.
Alors vous me direz, on n'a qu'à faire au plus grand ! Oui mais... les écrans sont de plus en plus grand et si l'on veut prendre le maximum du maximum on va aussi se retrouver avec une image tellement longue à charger que les visiteurs du forum auront le temps de le parcourir entièrement avant qu'elle ne s'affiche... ou pire ils attendront quelques secondes (une dizaine s'ils sont patients) et finiront par partir... Or l'objectif est quand même de contribuer à les faire rester !
=> La solution donc sera (une fois de plus) la triche Et oui ! Il ne faut pas croire, le graphisme et la mise en page c'est beaucoup de petites astuces de "triche" dans ce genre
Comment tricher ? En masquant les bords de notre fond avec une couleur, en l'atténuant donc sur les bords de sorte qu'on ait l'impression qu'elle se fond dans la couleur de fond (y'a deux fois "fond"... je sais ^^).

► Ouvrez donc votre logiciel et créez un nouveau document de la taille (environ) de 1400x500. Inutile de faire trop grand non plus, privilégiez une certaine légèreté et ergonomie.

Nous allons faire une bannière simple avec des fondus de personnage "en vrac". Prenez donc des images, sans même vous embêter à découper quoi que ce soit, et placez-les en gommant juste ce qui est de trop (surtout les angles des images !) avec une gomme ronde à bord flou.

Afin de ne pas voir la transparence de l'image, créer tout en dessous un calque d'une couleur correspondant à l'ambiance générale de votre forum : noir si vous voulez quelque chose de sombre, blanc pour quelque chose de clair...

Faites en sorte dans votre gommage que les images se chevauchent un peu, n'hésitez pas à mettre des objets en valeur, ou des décors, cela n'en sera que plus beau ^^ Veillez cependant à un point important : laissez une "marge" à droite à gauche et en bas de votre création ! En effet, n'oubliez pas notre petit dégradé de "triche" pour inclure la création dans la couleur unie de fond. Une partie de votre création sera donc cachée, il ne faut rien mettre d'important à ces endroits (pas de personnage donc, plutôt des décors).

Voici un exemple pour une bannière dont le thème est Final Fantasy X :

J'ai commencé par poser mes images en les organisant un minimum.



J'ai ensuite gomme mes bords d'images (et légèrement réorganisé en mettant un paysage supplémentaire dans une zone où il y avait un vide).



C'est déjà pas mal non ? Alors évidemment, les images étant différentes elles ont des tons différents, il faut harmoniser le tout ! Pour cela, appliquez simplement des courbes de transfert de dégradés, tout comme vous le feriez avec une signature par exemple.
Personnellement, je commence presque toujours pas un dégradé "noir/blanc" que je passe en mode couleur et à 50% d'opacité, afin de ne pas avoir de couleur trop "flash" au final.
Voici mon rendu après trois courbes et un renforcement du contraste :



A présent, pour donner plus de "cachet" au tout, nous allons ajouter un bruit et un éclairage. Commencez par aller dans "Filtres > Bruit > Réduction du bruit" et entrez les valeurs suivantes :



Adaptez bien entendu les valeurs selon votre image ou le rendu que vous souhaitez...
Ensuite, nous allons mettre une zone d'éclairage sur la création, pour cela allez dans "Filtre > Rendu > Eclairage". Il s'agit de faire partir cette lumière d'une source, cela met en valeur un élément de la création. Pour ma part, j'ai choisi de mettre en valeur Yuna (la fille tout en haut qui a la tête en bas) et j'ai donc fait "tomber" la lumière sur elle. Voici mes valeurs :




► Nous allons maintenant appliquer les dégradés sur les bords afin que la bannière semble n'être jamais coupée brutalement. Pour cela, choisissez la couleur qui sera celle de votre fond. Attention pour cela : ne prenez pas de couleur vive !! Au contraire même, il faut un ton neutre, pâle, discret, afin que l'attention soit plus sur le centre du forum que sur le fond... Dans mon cas, je suis resté basique et j'ai pris noir.

Tracez alors un rectangle avec l'outil "rectangle de sélection sur votre premier bord (à gauche ci-dessous) :



Munissez-vous ensuite de l'outil dégradé (disponible en faisant un clic droit sur l'outil pot de peinture), et prenez en couleur principale la couleur choisie. Pensez à vérifier que c'est bien l'option "dégradé linéaire" qui est cochée. Choisissez le premier dégradé disponible afin d'avoir d'un côté votre couleur, de l'autre le transparent. Appliquez votre dégradé sans aller jusqu'au bord intérieur de votre cadre (sinon il y aura une coupure entre la couleur et l'image).



Et voici le résultat après ajout d'un titre :




II/ Deuxième étape : installer la bannière

► Puisque notre bannière est censée être à la fois l'en-tête et le fond du forum il faut qu'elle soit mise en temps que fond. Pour cela, allez simplement dans le Panneau d'Administration de votre forum, dans l'onglet "Affichage" > "Images". Mettez l'adresse de votre image en guise de fond. Laissez du coup l'espace de bannière "normale" vide. Validez.

=> Vous constatez que certes votre fond est là mais qu'il est mal placé et surtout que le haut de votre forum la cache... Pour palier à ce problème nous allons tout d'abord caler correctement le fond avec un peu de CSS.
Allez dans "Affichage > Couleurs > Feuille CSS" et collez le code suivant :

Code:

body
{
background-repeat: no-repeat;
background-position: top center;
}

Votre fond doit être calé au centre de la page et ne pas se répéter^^ Maintenant pour décoller le haut du forum du haut de page, nous allons simplement mettre une bannière... vide : autrement dit une image transparente, tout simplement ! Cela aura également l'effet de rendre cliquable le haut de votre forum en lien d'accueil, comme une bannière normale.

Vous avez le choix de laisser le fond fixe ou non, pour cela cochez (ou pas) la case présente sous l'adresse de votre fond dans le panneau d'administration.

► Ouvrez un nouveau document de 700 px de large environ et d'une hauteur égale à votre fond image (ici 500). Après, dites vous que cela dépend du résultat voulu, si vous souhaitez que le haut du forum légèrement sur le bas de votre bannière prenez une taille plus petite.
Pensez à bien sélectionner le fond de votre document en "transparent".
Enregistrez votre image vide puis mettez son adresse dans l'espace normal de bannière dans votre panneau d'administration.

Et voilà ! Vous avez votre bannière en fond de forum