Maintenant que nous avons mit en place le header, le footer, le fond… il nous manque le contenu et la sidebar. Nous allons nous occuper du fond du contenu et de la sidebar seulement aujourd’hui ! Ouvez votre fichier photoshop et c’est parti !

Etape 1: Le contenu

Créez un nouveau calque dans le dossier contenu que vous appellerez : « Fond » prenez l’outil rectangle arrondi (U) avec un Rayon de 10px :

Tracez alors votre rectangle mais celui-ci ne doit pas faire tout le largeur car il y a la sidebar à mettre !!

Nous allons maintenant appliquer un style de calque sur « Fond » :

Voilà pour notre bloc de contenu.

Etape 2: La sidebar

Nous allons voir pour la sidebar maintenant, sur le brouillon elle n’avait pas de fond et tout était mit directement sur le fond du site. Nous allons donc respecter notre brouillon et mettre le contenu de la sidebar directement sur le fond du site.

Créer un nouveau calque dans sidebar, prenez l’outil texte (T) en arial bold 20pt couleur : #b1aaa5 (si vous avez pris le même fond que moi autrement prenez simplement un couleur plus claire de votre fond). Ecrivez : « Abonnez vous ! » a coté du contenu.

Créer un nouveau calque que vous appellerez : « Ligne fond » et prenez l’outil ligne (U) d’une épaisseur de 3px. Tracez un trait sous le titre en débordant environ jusqu’au coté droit de votre design. Changez la couleur du calque avec la même couleur que le texte (ici #b1aaa5). Pixéllisez le calque (Clique droit sur le calque et clique sur pixélliser le calque.

Prenez l’outil de sélection rectangulaire (M) et créer une selection grossière sur la ligne :

Assurez vous que vous êtes bien sur le calque « Ligne fond » et dupliquez la sélection (⌘j sur mac… pour pc un truc dans le genre…) ce qui a pour effet de vous créer un nouveau calque avec seulement le partie du trait sélectionné. Renommez ce calque « Ligne valeur » et appliquez un style de calque : incrustation couleur de couleur : #d1cecb (pour moi ici autrement une couleur encore plus claire que celle du trait).

On peut alors créer un texte fictif et mettre la même couleur que celle de « Ligne valeur ».

Conclusion :

Voilà a la fin de cette partie 4 notre fichier :

Dans la prochaine étape nous remplirons le vide intersidéral de ce design en autre: Le contenu, la sidebar, le footer… RDV dans la prochaine étape !!

Nous avons commencer dans l’étape 2 à développer notre thème dans photoshop ! Aujourd’hui nous allons continuer et passer par le header ! Donc ouvrez photoshop et votre fichier, on y va !

Le Titre

Nous allons tout de suite nous occuper du titre de votre blog (j’aborderai bientôt un article pour tout dire sur les logo, si vous voulez un mettre un vous pouvez !), créer un nouveau calque dans son dossier, prenez l’outil texte pour ma part j’ai pris la police arial regular taille 36pt et réduit l’espacement des caractères de -40, pour réduire l’espacement des caractères, il faut cliquer sur ce bouton : puis changer, dans la palette que s’ouvre, cette valeur : Maintenant replacez le titre vers la gauche. Le noir sur le titre c’est pas super, nous allons changer la couleur et mettre un style. ouvrez les styles du calque (double clique sur le calque) et réglez comme ceci :Vous pouvez sauvegarder ce style de calque pour pouvoir le réutiliser plus facilement !

Faites maintenant un petit dégrader radial sous le titre :

(! attention il ne doit pas déborder sur les rebord autrement lors de la découpe il y aura des problèmes … !) Vous devrez déplacez le dossier sous-header au dessus de header … Moi ça me donne :

2. la barre de recherche

maintenant que le titre est mit nous allons voir la barre de recherche. Créez un nouveau dossier « recherche » dans le dossier header et créer un nouveau calque, prenez l’outil rectangle arrondi (U) mettez une valeur de 20px pour l’arrondi et faite un rectangle, pas trop épais… Appliquez ce style de calque : mettez ok. Maintenant placez cette image de loupe : dans votre barre de recherche à gauche.

Créer un texte Helvetica bold 12pt blanc « rechercher » à coté et un autre text « ma recherche » en arial regular 11pt couleur #7f7f7f dans la barre pour symboliser la recherche.

Au final

Voilà ce que vous devez avoir à la fin de cette étape 3 :

Voilà, le header est fait, dans le prochain tutoriel pour Créer un thème wordpress, nous nous occuperons du contenu.

Rappel des liens :

• Réalisation d’un thème wordpress
• Etape 1: Concevoir la maquette du blog
• Etape 2: du brouillon à photoshop

Maintenant que notre brouillon est fait, nous pouvons ouvrir photoshop et créer un document de 1024px sur 2000px !

Mais avant, je vais vous dire quel thème nous allons développez ensemble, c’est le brouillon n°2 (Etape 1: Concevoir la maquette du blog) que j’ai sélectionné donc celui ci :

Evidement si vous le voulez je peux vous montrer comment développer l’autre !

1. Repérer les différentes « Zones »

Moi là 1ère chose que je fais c’est repérer les zones du brouillon, chaque zones correspondrons à un dossier dans photoshop, ici on peut voir 5 zones (6 si on compte le fond) les voici (de haut en bas) :

1. La navigation avec la partie recherche
2. Le header avec le titre du blog (et peut-être pour vous un logo mais nous en reparlerons dans un prochain article)
3. Le contenu
4. La sidebar
5. le footer

et bien sûr le fond en 6. Chaque zones peuvent être redécoupé en plusieurs zones ainsi nous aurions :

1. Le sur-header
   • La partie navigation
   • la partie recherche
2. Le header
3. Le contenu
   • Le post
   • les commentaires
   • … Ect

On pourrait ainsi tout redécouper mais ce n’est pas le but ! …

Maintenant que nous avons trouver les grandes zones, nous allons créer un dossier pour chacune d’elles. Donc un dossier sur-header, un dossier header, un autre contenu, un sidebar, et un footer, ce qui doit normalement donné :

2. Le fond

Nous allons commencez par créer la couleur du fond, c’est vous qui choisissez la couleur, pour ma part j’ai opter pour du marron foncé assez désaturer de code #4b433d, pour ceux qui ne savent pas comment mettre une couleur de fond, je vous conseil de vous entraîner préalablement sur des sites de tuto comme wks.fr et pour ceux qui ne savent pas où rentrer le code couleur c’est ici :

Voilà c’est tout simple !

3. le sur header

Nous allons maintenant nous occupez du sur-header, commençons par créer un nouveau calque dans son dossier que vous appellerez fond. Sélectionnez l’outil rectangle (U) tracez alors un petit rectangle sur toute la largeur de site en haut, mais attention, pas trop petit non plus sinon nous ne pourrons pas mettre les liens ! Vous pouvez changer la couleur en double cliquant sur la vignette de calque :

moi j’ai pris la couleur #252525. Sauvegardez ! on n’est jamais à l’abris d’un bug

4. Le footer

Nous allons maintenant nous occuper du footer ! créer un nouveau calque dans le dossier footer, outil rectangle, on trace un rectangle assez large (enfin la largeur dépend du type de footer que vous voulez), j’ai pris la couleur #2a2521.

voilà mon footer.

5. Quelque details

Nous allons maintenant rajouter quelque détails pour le sur-header, créer un nouveau calque nommé « ligne blanche » et utilisez l’outil ligne (U) avec une couleur blanche et une largeur 1px pour créer une ligne qui fait toute la largeur du site, déplacez la juste en dessous de sur-header, pour être bien précis vous pouvez zoomer, puis dupliquez cette ligne et nommé là ligne noir. Déplacez la ligne noire d’un pixel vers le bas et remplissez là en noir.

Jusque là c’est pas super beau, réduisez l’opacité de la ligne blanche à 20% et de la ligne noir à 30% comme ici :

Vous pouvez réalisez la même chose pour le footer et vous pouvez aussi rajouter un léger dégrader sur le haut du footer :

Conclusion

voilà, on a déjà bien entamer la conception du design, évidement vous pouvez changer les couleurs, rajouter ou enlever des effets, c’est votre thème ! Dans le prochain article nous allons voir le contenu et la sidebar !

rappel des liens :

• Réalisation d’un thème wordpress
• Etape 1: Concevoir la maquette du blog
• Etape 3: Le header

La maquette c’est aussi le moment de se poser les bonnes questions sur son blog :

• Quel taille fera ma page ? mon header ? ma sidebar ? mon contenu ?
• Combien de sidebar pour mon site ? 1 ? 2 ?
• Ou sera positionner mon titre ? à gauche ? à droite ? au milieu ?
• Où sera positionner tel ou tel élément de ma page …
• Réaliserai-je un logo pour mon blog ? si oui remplacera-t-il le titre ?
• Ma page d’accueil aura-t-elle le même design que celle de mes articles ?
• Voudrai-je mettre en avant certain article ? sur la page d’accueil ? dans la sidebar ?

Il y a énormément de questions à ce poser sur le design, le positionnement ! Il n’y a pas tout mais au moins vous voyez quelles questions vous posez ! Commencez donc à réaliser votre maquette !

Moi j’ai décidé de faire un design avec des blocs alors voici ce que cela donne sur brouillon :

1er brouillon réaliser

mais j’en ai aussi fait un autre un peut plus « classique »  :

2ème brouillon réaliser

Voilà, maintenant que vous avez un brouillon vous avez « une base départ » pour toute la conception. Bien sûr vous pouvez en réalisé plus si vous le voulez pour bien visualisé chaque pages (article, accueil, archive, page …) sa dépend de vous !

Voilà c’est là la fin de ce 1er tutoriel de la série Réaliser un thème wordpress.

Les autres liens :

Rappel des liens :

• Réalisation d’un thème wordpress
• Etape 2: du brouillon à photoshop
• Etape 3: le header

Si vous cherchez sur google, vous trouver le tutoriel de Fran6art qui ne porte que sur la partie code et qui est bien expliquer mais autrement il n’y a pas vraiment de site qui propose de créer un design pour son blog sous photoshop puis de le coder par la suite ! C’est ce que je vais vous proposer ! Grâce à une série de tutoriels qui seront référencé ici à l’aide liens, ces tutoriels vont donc vous permettre de créer le design d’un thème wordpress puis de le coder pour celui-ci, bien sûr pour ceux qui ne sont pas très fort en design je pourrai fournir le design près découpé lors de l’étape du codage !

Voici les liens on il faut aller :

Etape 1: Concevoir la maquette

Etape 2: du brouillon à photoshop

Etape 3: le header