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 gimp afin de nous servir des images pour embellir le contenu de notre blog.
Je vous rappelle que cet article est rédigé dans le cadre d’un tutoriel consacré à la création de son propre thème wordpress tant au niveau de son contenu (fichiers php templates) que du visuel ou design (style.css et dossier images). Aujourd’hui, nous commençons avec l’arrière-plan, la page et l’entête de notre blog.Nous partons de ce modèle papier pour réaliser notre thème Wp. Allez, tout d’abord, ouvrez Gimp. Dans votre menu, Fichier->Nouveau et créer une image de 1200 px de largeur et de 1000 px de largeur avec une couleur d’arrière plan de #e4d9c1 comme ci-dessous :
Ici, nous sommes déjà en train de créer notre Body. On va en profiter pour faire un dégradé de notre fond de page avec les couleurs #e4d9c1 et #ffffff. Je ne vous explique pas la procédure pour le dégradé car vous pouvez la retrouver sur un de mes billets.
Pour positionner nos différents éléments (entête, contenu, sidebar, pied de page), nous allons utiliser des guides. On va commencer par positionner notre page qui reprend tous les éléments cités plus haut. Ce positionnement nous sera utile pour transposer notre maquette dans notre feuille de style. Généralement, la taille de ma page ne dépasse pas les 960 px de largeur afin que le thème de mon blog wordpress s’adapte à toutes les résolutions d’écran. Je veux donc une page de 960px de largeur et centrée sur mon body (arrière-plan). Je vais placer deux guides à 120px et à 1080px sur la largeur de mon arrière plan. En effet, mon fichier image a une taille de 1200px de largeur. Je fais l’opération suivante : 1200px-960px(page)=240px. Pour centrer le tout, j’aurais donc 120px de chaque côté de ma page.
Pour utiliser les guides, cliquer sur l’outil de déplacement puis dirigez votre curseur tout à gauche sur la règle, cliquer et tout en laissant appuyer, déplacer votre pointeur vers la droite. Vous voyez apparaître un guide. Voilà vous avez positionné votre page. Nous allons maintenant donné un fond blanc à notre page. Pour cela, créer un calque transparent et nommez le « page ». Pour appeller nos calques, faîtes CTRL + L. Voici ci-dessous la procédure :
Une fois votre calque crée, sélectionnez le puis dirigez vous vers votre boîte à outils et cliquez sur l’outil de sélection rectangulaire. En vous servant des guides, créer un cadre sur toute la longueur de l’image :
Si tout s’est bien passé, votre sélection rectangulaire colle aux guides et a une taille de 960*1000. Cliquez ensuite sur l’outil de remplissage (pot de peinture) et cliquez dans la sélection :
Entre parenthèse, on transposera ce fond blanc dans notre feuille de style par un background: #ffffff. Pour finir ce tutoriel, passons à l’entête. Notre ‘header’ aura la même largeur que notre page (960px) et une hauteur de 170px. On va le positionner à 30 px. Indiquer un guide à 30px et à 200px, créer un nouveau calque et nommez le ‘header’.
Utilisez l’outil de selection rectangulaire et collez le aux guides. Ensuite, nous allons utiliser l’outil brosse (brushes) et avec la couleur du haut #e4d9c1 comme ceci :
Enregistrer le tout sous theme.xcf. Ce format permet de récupérer tous les calques. Voilà, c’est tout pour le moment, je préfère y aller tranquillement car j’imagine que certains ne sont pas habitués à utiliser Gimp. S’il y a des choses qui vous a échappé, n’hésitez pas à laisser vos commentaires. A bientôt, David
10 comments
David says:
mar 5, 2009
Surpris de ne voir aucun commentaire ?
Lunack says:
mar 5, 2009
les commentaires, faut pas les attendre ! se plaindre de pas avoir de commentaires, ca le fait pas
David says:
mar 5, 2009
Je ne me plains pas, je suis surpris que personne ne pose de question, apparemment, pas mal de personnes étaient intéressé sur ce sujet. Donc je me disais, tiens tout le monde a compris?
Lunack says:
mar 5, 2009
ok sinon intéressant !
je te dirais quand j’essaierai de mettre en pratique ! mais la c’est juste la colonne centrale ?
bruno says:
mai 23, 2009
voila je souhaiterais créer
une page header
une page image
une page squeeze
je n’y comprend pas grand chose dans vos explication !
désolé !
David says:
juil 10, 2009
Salut Bruno,
Je t’invite alors à regarder cet article :
http://blogityourself.net/tuto-gimp-video-creer-maquette-transposer-html-et-css/
Hakos says:
juil 15, 2009
Je viens de découvrir votre blong
Très intéressant merci bcp
David says:
juil 16, 2009
Merci Hakos
seb says:
fév 24, 2010
Domage les images n’y sont plus
Audrey says:
fév 25, 2010
Oui dommage que les images soient indisponibles