Créer un menu horizontal graphique pour son site Internet

Voici une méthode pour créer un menu graphique horizontal ! Il s’adapte très bien aux interfaces graphiques Sombres et Darks. Le style est frais et glossy tout à fait dans la tendance actuelle du Web 2.0 ! Normalement j’ai prévu de rédiger deux articles à la suite en supplément :

• Un pour intégrer des icônes supplémentaires sur chaque onglet
• Un pour le couper et le coder en css html.

Information importante : vous pouvez télécharger le fichier psd pour récupérer les styles de calques car je ne m’attarderai pas à développer chaque style de calque ou chaque reflet, car ce n’est pas le sujet de ce tutorial !

Fichier Source Photoshop .psd

clic pour télécharger le fichier source photoshop utilisé dans ce tutorial

ETAPE 1

Je crée donc un nouveau document que je remplis de gris foncé : #363636 puis je crée un nouveau calque et avec l’outil rectangle de sélection, la base du menu que je remplis de noir. J’applique sur ce calque un style de calque : calque > style de calque > incrustation de dégradé.

ETAPE 2

Je crée un nouveau calque, je récupère la sélection de mon rectangle et je remplis avec le pot de peinture, de blanc. Je coupe ce rectangle blanc en deux (dans le sens de la largeur) puis je camoufle le bas grâce à un masque de fusion : calque > masque de fusion > tout faire apparaitre.

ETAPE 3

En dessous mes deux calques je vais créer une ligne gris-claire.

ETAPE 4

Puis une noire puis une gris-claire.

ETAPE 5

J’ajoute maintenant un dégradé noir 100% vers noir 0% d’opacité en dessous de ma base pour créer une sorte d’ombre portée.

ETAPE 6

J’ajoute deux calques et je crée des lignes blanches de séparation. Attention ! : sur le premier calque je dessine des lignes blanches sur la partie basse puis sur le second la même chose pour la partie haute !

ETAPE 7

J’ajoute un masque de fusion sur ces deux calques et je camoufle le centre comme ci-dessous.

ETAPE 8

Je crée un nouveau calque et à côté de chaque ligne blanche, je crée une ligne noire. Je place ensuite ce calque en mode de fusion lumière tamisée.

ETAPE 9

Je duplique la base de mon menu (le rectangle avec le dégradé) et je change ce dégradé par un dégradé de couleurs : dans mon exemple, orange foncé vers orange clair (cet onglet servira à créer l’état hover de mon futur menu).

ETAPE 10

Je crée un dossier par-dessus les autres calques et je crée mes titres avec l’outil texte. Pour créer le reflet, je duplique mon dossier, je pixellise tous les calques et je les fusionne, j’applique une transformation > symétrie verticale, je déplace mon texte vers le bas et j’y ajoute un masque de fusion.

Voila mon menu terminé ! N’est-il pas joli comme tout ? Comme je l’ai dit plus haut je vais sûrement créer une suite mais je ne sais pas quand Bonne chance à tous pour la réalisation de ce tutorial.