Gimp WordPress, créer la maquette de votre thème : body, page et header

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

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

• 8 janvier 2009 -- Réaliser un fond dégradé pour votre blog avec Gimp (6)
  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'incorpor...
• 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 ...
• 17 décembre 2008 -- Gimp pour le webdesign de votre blog WordPress (4)
  Le thème de votre blog est bien agencé, vous avez bien structuré vos fichiers templates, vous avez optimisé votre blog pour le référencement. Bref, tout roule et votre webdesign prend forme. Je vous...