Si vous prenez le train en route, je ne pourrais que vous conseiller d’aller voir le premier tutorial de la série en suivant ce lien.

Nous avons déjà appris à créer un background et un effet de spots en haut du document, nous allons maintenant dessiner le header. Le header est le bandeau de votre site web. C’est dans cette partie que l’on retrouvera le nom de votre site avec éventuellement une petite description et quelques images représentant les thèmes que vous abordez dans vos articles. Sachez aussi que le lecteur doit pouvoir dire de quoi parle votre site/blog rien qu’en regardant le header. C’est donc une partie très importante de la page.

Allez, assez parlé! On se remet aux TP?

3. La création du header

Sur presque toute la largeur de votre document, faites une sélection d’une hauteur qui dépendra de ce que vous voulez afficher dans le header. Dans mon cas, ma sélection fait à peu près 200px de hauteur sur 950px de largeur. Remplissez-la dans un nouveau calque d’une couleur quelconque,nous allons vite la remplacer en utilisant les options de fusion.

Pour utiliser ces options, faites un double clic sur le calque que vous venez de créer. Une fenêtre s’ouvrira alors. Elle est très importante car c’est là que se retrouve les outils de style les plus fréquemment utilisés. Pour le moment, nous aurons uniquement besoin de l’outil ‘Ombre portée’ et ‘Incrustation en dégradé’. Remplissez ces deux options comme suit.

Comme vous le voyez, nous pouvons régler la taille de l’ombre portée, la distance par rapport au background, l’intensité, la direction,… Quant au dégradé, nous pouvons modifier la couleur de départ (#5fa503), d’arrivée (#368204), mais aussi toutes les couleurs intermédiaires. De plus, tout ce que vous faites se voit directement sur votre document même si vous n’avez pas encore appliqué les changements. Quand vous avez fini, appuyez sur OK pour effectuer définitivement ces réglages.

Nous allons maintenant écrire le nom de notre site grâce à l’outil texte (le T dans les outils de gauche). Il vous suffit de cliquer à l’endroit où vous voulez que votre texte apparaisse et écrire ‘Piesto’ par exemple.

Comme vous le voyez, c’est plutôt triste. Nous allons donc utiliser à nouveau les options de fusion mais cette fois çi, ce sont les outils ‘Lueur externe’ et ‘Incrustation couleur’ qui nous intéresseront.

C’est déjà beaucoup mieux, vous ne trouvez pas?

Mais le côté droit fait un peu vide. Comme je l’ai dit plus haut, il faut que le lecteur sache de quoi vous parlez rien qu’en regardant le header. Nous allons donc remplir ce vide avec des images représentant les sujets abordés. Je dois vous avouer que je ne me suis pas foulé pour les images, j’en ai pris quelques unes qui m’intéressaient mais je n’ai pas pris le temps d’en faire une œuvre d’art. Je sais, c’est mal… C’est surtout une réflexion personnelle qui doit être menée ici. Chacun mettra des éléments qui lui correspondent.

C’est déjà fini pour ce tutorial. Rendez-vous très vite pour la création du menu et du moteur de recherche.