Interface graphique, finition du header et ajout du logo

Ce tutorial est l’étape 2 de celui-ci : Création d’un header complet, pixel par pixel.

Nous allons maintenant attaquer la finition du header et du menu, nous allons ensuite intégrer un logo et un sous menu.

Allez c’est parti ...

ETAPE 1

Nous allons ajoutez notre texte au menu, créez donc un dossier et créez grâce à l’outil texte votre premier lien, puis le second, le troisième et le quatrième.

Dans notre exemple nous utilisons la police de caractères Krugthep.

Une fois vos textes écris passez chaque calque en opacité 80%.

ETAPE 2

J’ai décidé de créer prochainement un rollover sur mon site, il faut donc prévoir une seconde version du menu.

Un rollover c’est le changement d’un lien lorsque l’on passe la souris par dessus.

Pour y parvenir groupez tous les calques correspondant au menu dans un dossier que vous nommerez menu 1.

Dupliquez ce calque, et changez le dégradé du calque menu.

ETAPE 3

Nous allons créer également un effet sur les textes, pour cela vous allez remonter de quelques pixels chacun des textes et ajouter en dessous une petite flèche blanche (vous trouverez une belle flèche dans les formes personnalisées de Photoshop).

Passez les calques de vos flèches en opacité 80%.

ETAPE 4

Nous allons modifier les lignes de séparation du haut et du bas pour qu’elles s’adaptent à la nouvelle couleur de notre menu. Pour cela sélectionnez chaque ligne grâce à l’outil sélection et modifiez la couleur avec le pot de peinture.

ETAPE 5

Cachez le menu bleu pour revenir à la version initiale. Nous allons maintenant appliquer un effet graphique sur le header, pour lui donner un petit effet High Tech.

Pour cela nous allons créer un motif : ouvrez un nouveau document de 3 pixels sur 3, créez un nouveau calque et supprimez l’arrière plan, grâce à la sélection faites un pixel blanc au milieu de votre image.

Dans les menus, allez dans édition > utiliser comme motif. Puis juste au dessus du header créez un nouveau calque, récupérez la sélection du haut (CTRL + clic sur le calque), enfin remplissez le tout avec votre motif et le pot de peinture.

Appelez ce calque point, changez le mode de fusion en incrustation et changez l’opacité de celui-ci à 20%.

ETAPE 6

Pour finir cette petite astuce graphique nous allons ajouter au calque point un masque de fusion, et nous allons appliquer un dégradé du haut vers le bas.

ETAPE 7

Nous pouvons maintenant insérer notre logo. Pour rappel un tutorial est disponible sur ce site pour créer un logo semblable : tutorial 76 : créer un logo pour votre site internet avec photoshop.

Vous remarquerez que nous avons utilisé deux couleurs importantes pour notre charte graphique, puisqu’il s’agit du gris de notre menu et du bleu de notre menu rollover.

ETAPE 8

Inutile de surcharger d’avantage notre interface graphique, pour la suite le mot d’ordre sera la simplicité, et nous allons appliquer cette règle dès maintenant. Nous allons créer notre sous menu, pour cela créez simplement un rectangle arrondi de 5 pixels sous le menu.

ETAPE 9

Nous allons tout de même lui appliquer un petit dégradé, histoire qu’il devienne une vrai continuité de notre premier menu, utilisez les mêmes couleurs que sur notre premier menu.

DANS LE PROCHAIN TUTORIEL

Nous nous intéresserons au footer ainsi qu’à la conception de quelques boutons : ajout en favoris, page d’accueil, contact, et page de démarrage.