AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Créer et installer une bannière-fond

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 12 Avr 2010 - 17:15

    Rappel du premier message :


    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 Very Happy 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 Razz
    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 Wink






    Dernière édition par Sparrow-style le Dim 11 Mar 2012 - 12:27, édité 4 fois



    avatar
    Shiro Yuki
    MasculinAge : 22Messages : 15

    le Lun 26 Juil 2010 - 1:28

    Merci beaucoup pour ce tuto Captaine' ! Sa va m'être très utile :)!
    avatar
    Soul
    MasculinAge : 21Messages : 1723

    le Dim 30 Sep 2012 - 9:19

    Hello!

    Donc voilà ce que j'en ai tirer après 1 petite heure de boulot, très beau tuto qui servira merci Captain Very Happy

    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Dim 30 Sep 2012 - 10:58

    Avec plaisir, beau résultat ^^



    avatar
    sangoku46
    MasculinAge : 24Messages : 26

    le Mar 19 Mar 2013 - 16:45

    Merci
    avatar
    Invité

    le Mar 26 Mar 2013 - 17:28

    Merci pour le tuto :)

    Voici mon essai :

    avatar
    Asriel
    FémininAge : 21Messages : 112

    le Mer 3 Avr 2013 - 21:36

    Super sympa la technique merci beaucoup =)



    avatar
    Katsura
    MasculinAge : 32Messages : 190

    le Jeu 13 Fév 2014 - 3:25

    Merci pour le tuto ^^
    avatar
    lutecia
    FémininAge : 22Messages : 6

    le Ven 14 Mar 2014 - 11:39

    Merci à toi =D ! C'est un chouette tuto !
    avatar
    Apokalip'z
    MasculinAge : 23Messages : 290

    le Lun 5 Mai 2014 - 19:26

    Merci Captain Wink



    avatar
    sica3
    MasculinAge : 43Messages : 135

    le Ven 28 Nov 2014 - 9:42

    thank's
    avatar
    Arabesque Jo
    FémininAge : 68Messages : 697

    le Sam 31 Jan 2015 - 10:56

    Bonjour et merci .
    Voici mon rendu , mais je me demande si j'ai fait le dégradé correctement ?
    avatar
    Pixel-Gameur
    MasculinAge : 30Messages : 236

    le Dim 3 Mai 2015 - 15:22

    oh je viens de tomber dessus ça pourrait être un bon tuto pour une couverture facebook,

    le tuto à l'air simple , je le testerai prochainement

    avatar
    Hizo
    MasculinAge : 24Messages : 26

    le Lun 11 Avr 2016 - 14:46

    J'ai quasiment tout réussi sauf le CCS je copie colle mais mon fond reste en plusieurs fois dans le background
    avatar
    -Larme-
    FémininAge : 16Messages : 62

    le Dim 11 Déc 2016 - 15:29

    Ca fait longtemps que je voulais faire ça, merci beaucoup pour le tuto *^*



    Contenu sponsorisé


      La date/heure actuelle est Dim 30 Avr 2017 - 12:58