Je ne sais pas si vous l’avez remarqué, mais de plus en plus de blogs ont des fonds dégradés. Dans ce billet, nous allons voir comment créer l’image de fond avec Gimp et nous allons ensuite l’incorporer dans la feuille de style (style.css) de notre thème WordPress.

MAJ du 2/11/2009 : Vu que j’ai perdu toutes mes images, j’ai réalisé ce tuto en vidéo, cliquez ici pour voir le tuto

Prenons comme exemple le récent blog de Fran6art, blogalwarming.com :

blogalwarming

Le dégradé est formé par les deux couleurs : #0a243d pour la plus foncée et #3c638c pour la plus claire. Nous n’allons pas réalisé une image de fond dont la taille serait égale à notre fond d’écran car 1/ l’image serait lourde à charger et 2/ tout le monde n’a pas la même résolution d’écran. L’alternative est de créer une image dégradée avec comme taille 50px en largeur et 900px en hauteur. Dans notre feuille de style, on va la faire répéter à l’infini sur la largeur uniquement. Le reste du background sera complété par une couleur de fond correspondant à la couleur la plus claire de notre image pour faire effectuer la continuité de notre background (fond).

Commençons par ouvrir Gimp : (bien sûr on peut réaliser cette image avec Photoshop, mais j’ai décidé d’utiliser Gimp pour tous mes prochains tutoriaux et en plus c’est un logiciel libre). Allez dans le menu et fichier nouveau. Nous allons créer une image de 80 px de largeur et 900px de longueur et en options avancées indiquer remplir avec transparence comme ci-dessous :

gimp-fichier-nouveau

Ensuite, indiquer dans votre boîte à outils les couleurs de premier (#0a243d)  et d’arrière (#3c638c) plan. Cliquer sur l’outil de dégradé que l’on peut obtenir en cliquant sur la touche L de votre clavier. Utilisez un dégradé de PP vers AP avec une forme linéaire comme ci-dessous :

gimp-outil-degrade

Pointez votre outil en haut de l’image transparente et tout en laissant appuyer descendez en bas de l’image. Et voilà, vous avez créer votre image dégradée! Pour la visualiser, cliquez ici et on nomme notre image : fond.jpg. Ensuite, vous n’avez plus qu’à la uploader dans votre thème via votre ftp.

Dirigeons nous maintenant dans notre feuille de style. Allez sur votre tableau de bord wordpress, puis cliquez sur Thème->Editeur->feuille de style.
Repérez votre balise ‘body’ et insérer dans body les 2 lignes :

body {
  1. background: url('images/fond.jpg') repeat-x; (fond dégradé)
  2. background-color: #3c638c; (couleur de fond du blog)
  3. }

Sauvegarder votre feuille de style et allez voir le résultat ;) Petite explication quand même : dans la première ligne, ‘repeat-x’ fait répéter votre image sur toute la largeur mais l’empêche de continuer vers le bas. Ce qui nous permet de faire apparaître la couleur claire de notre fond. Pourquoi fait-on cela ? Tout simplement, cela nous sert quand nous avons un article long ou quand l’article a de nombreux commentaires ayant pour conséquence une longueur supérieur à 900px (longueur de notre image de fond dégradée).

Voilà c’est tout pour aujourd’hui. Je vais continuer ces tutoriaux ‘webdesign Gimp’ pendant un certain temps. Si vous avez des questions ou si vous désirez une utilisation précise de Gimp pour votre webdesign, n’hésitez pas à laisser vos commentaires.

A+ David

David LOUIS

Directeur chez Webset, Organisme de formation professionnelle pour les métiers de la culture, du spectacle vivant, Consultant web 2.0, adepte du DIY et du Coworking

More Posts - Website - Twitter - Facebook

Articles similaires

  • Gimp Wordpress, créer la maquette de votre thème : body, page et header4 mars 2009 -- Gimp Wordpress, créer la maquette de votre thème : body, page et header (10)
    Lors d'un précédent billet, nous avons vu que la création d'un thème Wordpress commence par un croquis sur une feuille de papier. En effet, nous allons nous servir de ce dessin pour le transposer sur ...
  • C'est le bronx dans mon thème wordpress15 janvier 2009 -- C'est le bronx dans mon thème wordpress (0)
    Comme d'habitude, j'arrive ce soir du boulot, j'allume ma bécane, et je pars direct sur mon blog. Et que vois-je, mon thème est à la ramasse au niveau de la sidebar de droite,  la bannière de mon head...
  • Gimp ou Photoshop ?4 janvier 2009 -- Gimp ou Photoshop ? (19)
    Depuis quelques temps, vous le savez, j'accorde beaucoup d'importance au webdesign d'un blog ou d'un site. Fervent défenseur des logiciels libres, je me suis naturellement dirigé vers The Gimp qui me ...