Créer un menu style windows vista pour son site

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 ;)

Photoshop - 461.4 ko
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.

JPG - 28.6 ko

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.

JPG - 37.5 ko

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 :/

JPG - 73.1 ko

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.

JPG - 71.7 ko

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.

JPG - 61.6 ko

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).

JPG - 60.5 ko

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).

JPG - 63.6 ko

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).

JPG - 64.3 ko

ETAPE 9

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

JPG - 67.6 ko

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.

JPG - 62.8 ko

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).

JPG - 62.7 ko

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.

JPG - 63 ko

ETAPE 13

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

Pas mal non ?

JPG - 65.3 ko

Article publié par Wonka

Vous aimez cet article? Partagez le !

Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

La galerie des membres

Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !

Questions et commentaires, Il y a 28 messages de forum.

Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.

  • 1er octobre 2007 18:24, par Valck

    Beau tuto très bien expliqué mais le rendu final n’est pas non plus formidable. Je m’explique : l’espace où il y a les textes séparés par des séparations (et oui ^^) de 2 px, et bien le fond je n’aime pas du tout ... tu aurais pu faire un effet plus joli, le reflet est bien pensé mais pas beau à mon goût en comparant au reflet du fond qui est je trouve d’un meilleur effet. Tu devrais baisser l’opacité du reflet je pense ... bref c’est un détail ! Merci en tout cas et bonne continuation ;)

    Répondre

    • 2 octobre 2007 09:18, par Wonka

      Le texte séparé par des séparations ... Oui je sais c’est spécialement naze, je m’en suis rendus compte en le tapant mais après plus moyen de trouver autre chose ! Du coup j’ai laissé tel quel !

      Pour le rendus du reflet, oui j’avoue il n’est pas fameux, mais j’ai voulus le garder tel quel, car le style vista est ainsi, bien sur j’aurais ajouté un petit masque de fusion pour le rendre plus attractif mais voila ...

      Allez c’est pas si moche quand même, si ?

      Répondre

      • 2 octobre 2007 21:58, par Valck

        Bon aller je vais être sympa ^^ Il est trop beau au final :D Vala, est-tu content ? :P Nan sérieusement je te charies il est bien, c’est juste que je voulais te trouver un pitit défault ... y’en a tellement jamais dans tes créas ^^

        Répondre

        • 3 octobre 2007 09:22, par Wonka

          Oui je préfére quand même quand tu me dit cela :) Et oui je suis content ;)

          Répondre

  • 1er octobre 2007 23:00, par Erico

    C’est génial Bravo ! Ca rendra heureux tout les amants de Vista et du Web 2.0 :P Mes Felicitations Wonka

    Répondre

  • 2 octobre 2007 17:55

    Salut wonka,

    J’aime bien tes tuto ils sont tous plus ou moins bien ecrit.

    Mais une petite question me turlupine. Par exemple dans certain de tes kit cetain head me plaisait bien mais pas le reste donc si je les recopie est ce que c’est du plagia ?

    Quelques images made by m

    http://yilo.dommel.be/yilow/yilo+cod4.jpg http://yilo.dommel.be/yilow/yiloW-blog.jpg http://yilo.dommel.be/yilow/yilow.jpg

    Si tu pouvais me donner une petite appréciation sa sera sympas..

    Yilo

    Répondre

    • 3 octobre 2007 09:20, par Wonka

      alors oui c’est du plagiat, on ne copie pas mes chartes graphiques. par contre s’il s’agit de tutorial, tout ce que tu auras crée grâce à eux seront à toi

      Pour tes images la première et la troisième sont assez sympa. Avec une préférence pour la troisième !

      N’hésite pas à poster d’autres images, j’aime bien apprécier le travail des autres :)

      Répondre

      • 3 octobre 2007 14:36, par Yilo

        Merci de m’avoir donner ton appréciation ca fait plaisir.

        Et pour se qui est du plagiat c’est dommage j’aimais bien certaines images de tes kits... Mais bon un jour l’inspartion viendra....

        Répondre

        • 5 octobre 2007 09:07, par Wonka

          Merci et c’est quand tu veux ;)

          Et pour l’inspiration parfois il y en as, d’autres fois pas du tout, c’est variable ... mais sans plagier n’hésite à en t’en inspirer, ca tu as le droit ;)

          Bonne chance !

          Répondre

          • 7 mars 2008 11:32, par XanderSX

            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’ai pas compris ce qu’on supprimait ici... 1. Quand je récupère la sélection de ma forme, ça me la rend pas exactement à la taille de ma forme. 2. A quoi sert le nouveau calque ? On ne met rien dessus à part une zone de sélection vide, qui ne sert d’ailleurs à rien puisque quand tu demandes la suppression, y’a rien à supprimer donc ça ne modifie rien.

            Je souhaite quelques explications car je trouve ce passage de ton tutoriel bizarre...

            Répondre

  • 13 janvier 2008 15:17, par TaL

    Bonjours Wonka. Je laisse un commentaire trois mois apres les autres, c est pas bien grave :p. Tout d’abbord merci pour ce tuto, et les autres d’ailleurs, il me font pas mal progresser, et j’ en suis ravi =D. J’aimerais bien que tu commente ce que j’ ai fais, sachant que j’ ai eu un probleme avec l’effet biseauté que tu as mis sur la forme a droite, la pas moyen, donc j ai mit un petit ombre interne :p voir image

    Répondre

    • 14 janvier 2008 09:38, par Wonka

      Le but n’étant pas de suivre à la lettre le tutorial, je peux donc dire bravo, joli réussite ;)

      Répondre

      • 14 janvier 2008 21:03, par TaL

        Merci beaucoup :p, c’ est tres encourangeant ^^, j essai de faire un site avec un ami, je m occupe du design, donc ca me fait bien plaisir :)

        Répondre

        • 19 janvier 2008 15:49, par paco

          que dire a par bravo super rendu le seul hic c’est que je sais pas coder jen est plein de design^^encore bravo +

          Voir en ligne : http://fra5913.free.fr

          Répondre

  • 15 février 2008 14:43, par urliss

    Salut wonka, et bein moi je suis un petit nouveau, et j’avoue que j’ai vraiment apprecié ton tuto : simple mais efficace, cela fait peut de temps que je suis sous photoshop environ 7 mois, et c’est en partie grace à des gens comme toi, que je peut évoluer un peut plus rapidement. je te post mon résultat.ps : allez y molo je commence,les proportion ne sont pas les mêmes mais je les fait en peut de temps.

    sur ce, bonne continuation.

    signé URLISS

    Répondre

  • 29 février 2008 02:10, par kizito

    Plop, sympa ce petit tuto. Quelques petite modif sur des trucs qui me plaisait pas trop, notemment les separation etnre les liens. Pi voila j’ai commencé un news diz du coup avec cette base =)

    Répondre

  • 7 mars 2008 19:20, par jane marie

    très belle interface et toutes mes félicitations pour ce travail !

    Répondre

  • 17 avril 2008 18:52, par lesloups

    re,encore moi wonka

    après reflechissement et inspiration demandant conseil a l’iun de mes membres le 2eme theme sera vista

    et oui c’est ça l’inspi donc ton tutoriel va me servir

    Répondre

  • 19 avril 2008 19:31, par Kraosor

    Bonsoir, ce turoriel est super bravo mais petit renseignement, tu utilise quelle police de caractère pour les menus stp ?

    Répondre

  • 16 mai 2008 19:43, par danjuro971

    Etant un ptit nouveau sur photoshop, je n’arrive vraiment pas à me dépatouiller avec les masques de fusions que t’utilise aux étapes 3 et 4... Est ce que tu pourrais ajouter quelques explications si ce n’est pas trop demander ? Au cas où, voici mon adresse mail : talk2you@hotmail.fr

    Répondre

    • 27 mai 2008 08:55

      Très bon tuto (comme toujours) mais.. étape 13 : « Je rajoute mon nom en bas à gauche », personnellement je le vois en bas à droite ^^

      Continue ces excellents tutos, et merci

      Répondre

  • 23 janvier 2009 00:23, par moimeme

    c est un peu l embrouille ton tutoriel lol mais c est sympa quand meme

    Répondre

  • 11 avril 2009 19:28, par SilverHaze

    voici ce que j ai fait avec ce tuto plus tout a fait gloss mais j aime bien comme ca :)

    Répondre

  • 31 mai 2009 14:54, par abdelali

    STP quelle font de texte ta utiliser c’est quoi sont nom STP . Car je veus le télécharger de Dafont mais je sais pas son nom .

    Quelqu’un peu m’aider ?

    Répondre

  • 29 août 2009 21:57, par Votre pseudonyme

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

    Heu... A droite tu veux dire ? ^^

    Répondre

    • 29 août 2009 23:37, par Wonka

      LOL oui c’est ça :)

      Répondre

Laissez un commentaire

Remplissez correctement le formulaire puis appuyez sur Validez.