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 :
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 :
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 :
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 :
-
background: url('images/fond.jpg') repeat-x; (fond dégradé)
-
background-color: #3c638c; (couleur de fond du blog)
-
}
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
6 comments
Grrr says:
jan 9, 2009
C’est vraiment bien gimp
Pourquoi ne pas faire carrément une image de 1 pixel de large au fait ?
David says:
jan 9, 2009
Ouai Grrr, en fait en cherchant bien et en essayant de calquer sur photoshop, on y arrive bien
1px de largeur ? pourquoi pas, faudrait essayer mais je crais que l’effet de dégradé désiré soit un peu moins bon, mais à essayer
David says:
jan 9, 2009
Ah tiens, en regardant ton email, je viens de m’apercevoir qu’on se connaissait ^^ répét à libourne …
Grrr says:
jan 9, 2009
Oh je pense pas que ça change grand chose que ce soit 50px ou 3px en fait, de mémoire j’ai déjà fait un fond de quelques pixels et ça marchait impec’. Bon ceci dit pas très important non plus, l’idée reste la même.
Bah oui en fait j’étais tombé sur ce blog sur le forum de lucanes hé hé…
Felie says:
mai 14, 2009
Bonjour, pour les nombreux utilisateurs de GIMP, je vous envoie des liens avec des tutos gratuits :
Pour créer une ombre portée : http://www.video2brain.com/fr/videos-7196.htm
Pour retoucher un visage : http://www.video2brain.com/fr/videos-7202.htm
etc.
taTaye says:
sept 7, 2009
Bonjour,
De nombreux tutoriels Gimp sur ce blog : http://gimptutoriel.blogspot.com/