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

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

• 
• 
• 
•