Voici une méthode pour créer un menu pour un site internet. Celui-ci reprend franchement le style très glossy web2.0 de la version windows Vista !

La réalisation n’est pas franchement compliqué, mais elle demande une certaine rigueur, de plus le tutorial est un peu long. Alors munissez-vous d’une bonne dose de patience

Fichier PSD : tutorial 211

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

ETAPE 1

Je crée un nouveau document sur fond noir. Puis j’utilise l’outil sélection pour créer un rectangle au milieu de mon image. Je crée un nouveau calque (menu calque > nouveau calque) et je remplie à l’aide de l’outil pot de peinture ma sélection en blanc. Je nomme ce calque (en double cliquant dessus dans la bibliothèque des calques) en fond.

ETAPE 2

J’applique maintenant sur mon calque fond deux styles de calque. Calque > style de calque > contour puis incrustation de dégradé.

Astuce : Le fichier source photoshop est disponible en haut de cette page. Je télécharge celui et je récupère le style de calque que je dois utiliser dans cette étape. Pour ce faire il faut faire un clic droit sur le calque puis copier le style, je reviens ensuite dans mon image je clic droit sur le calque fond puis coller le style de calque.

ETAPE 3

Cette étape est facultative : elle consiste à : sur un nouveau calque je récupère la sélection de mon fond que je remplie avec un motif, puis je diminue fortement son opacité avec un masque de fusion.

Pour information cette étape n’est franchement pas très utile :/

ETAPE 4

Je crée un nouveau calque que je vais appeler reflet principal. Je récupère la sélection de mon calque fond puis je remplie cette sélection avec cette couleur : #525870. Je coupe cette sélection en deux dans le sens horizontale (j’utilise l’outil de sélection et la touche suppr). J’utilise ensuite un masque de fusion pour camoufler légèrement le bas de ce reflet.

ETAPE 5

J’utilise l’outil des formes personnalisées pour créer un rectangle arrondies sur mon document, voir ci-dessous pour le placement du rectangle.

ETAPE 6

Je lui applique plusieurs styles de calque : comme pour l’étape 2 je me rends dans le fichier source photoshop fournis en haut de page pour récupérer le style de calque (voir le calque appelé Forme 1).

ETAPE 7

Je crée un nouveau calque et je le nomme Reflet 2. Je récupère la sélection de mon rectangle arrondie et je remplie cette sélection avec cette couleur #525870. Je coupe cette sélection en deux dans le sens horizontale (j’utilise l’outil de sélection et la touche suppr).

ETAPE 8

Je crée encore un nouveau calque et je le nomme séparation. Je vais créer les barres de séparations qui serviront à différencier les liens présents dans notre menu.

Je crée une barre de 2 pixels de large qui commence en haut et qui finie en bas de mon rectangle arrondies. Je duplique cette barre autant de fois que je veux de séparation.

Puis je supprime 4 pixels en haut et 4 pixels en bas. Et pour finir le lui applique une incrustation de dégradé (je rappelle que vous trouverez le style de calque dans le fichier psd disponible en haut de page).

ETAPE 9

J’ajoute maintenant mon texte qui correspond a mes futurs liens, sur ceux-ci j’ajoute simplement une incrustation de couleur grise.

ETAPE 10

Dans cette étape il y a deux choses à faire : premièrement je récupère la sélection de mon calque fond, et en bas je crée un dégradé de noir 100% vers noir 0% d’opacité.

Ensuite avec l’aide de la plume je crée à droite de mon menu une forme comme ci-dessous.

ETAPE 11

J’y ajoute une incrustation de dégradé ainsi qu’un contour (je rappelle que vous trouverez le style de calque dans le fichier psd disponible en haut de page).

ETAPE 12

Je vais créer une bordure biseautée sur ma forme. Pour cela je crée un nouveau calque et je récupère la sélection de ma forme, ensuite je déplace la sélection de 2 pixels à droite et à gauche et je supprime.

J’utilise maintenant un masque de fusion (calque > masque de fusion > tout faire apparaitre) pour camoufler le haut et le bas de ma bordure.

ETAPE 13

Je rajoute mon nom en bas à gauche et voila le menu terminé.

Pas mal non ?