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 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 !!

• 
• 
• 
•