azurency

Vous êtes dans l’étape 2 du tutoriel : Réalisation d’un thème wordpress si vous accédé directement à ce tutoriel, il est recommandé de cliquer sur le lien

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

• 
• 
• 
•