32
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.
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 !
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 22 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.
-
-
11 mars 2008 12:09, par Darkness’ Orpheo
Je trouve que la police tranche un peu trop avec le style de la barre. Et le orange pas assez flashy, sinon c’est magnifique, comme d’habitude =)
Répondre-
11 mars 2008 12:30, par Wonka
Je trouve aussi
Seulement je n’ai pas réussis à trouver une police de caractère vraiment sympa !Par contre si tu as le temps je veux bien que tu fasses un essai avec une autre police et une autre couleur pour l’onglet hover !
Le psd est en haut de page
Ca serait marrant que tu te retrouves avec un rendus meilleur que le tuto lui même :pMerci en tout cas pour vos messages !
Répondre-
11 mars 2008 16:05, par mirti
joli tuto.mais j’arrive pas a réaliser l’etape 5 aide moi wks svp.c tres important.
Répondre-
11 mars 2008 16:36, par Wonka
Elle est pas si importante cette etape tu peux la passer ! Si vraiment tu y tiens tu peux poser ta question sur le point que tu n’arrives pas à comprendre !
Répondre
-
-
-
-
-
11 mars 2008 17:24, par Darkness’ Orpheo
Hey je suis déjà bloqué à l’étape deux x)
Alors je récupère la sélection de mon rectangle précédent, je le remplis de blanc et je supprime la moitié inférieure, ensuite j’applique le masque de fusion « tout apparâitre » mais je vois toujours le rectangle blanc par dessus la barre noire en dégradé, c’est pas du tout comme l’image >.<
Quelqu’un pour m’aider svp ?
Merci d’avance
Répondre-
13 mars 2008 19:29, par Wonka
Apprendre à utiliser un masque de fusion avant de vouloir faire un reflet
Répondre plusieurs tutoriels traite de l’utilisation des masques de fusion ici même sur wks.fr
-
-
13 mars 2008 18:54
Je trouve que le gros probleme des tutoriaux sur wonka est qu’ils ne sont vraiment pas du tout assez précis pour des débutants. notament vous n’y montrez jamais la zone de calque chose qui pour certaines manipulation est très importante. vous nen montrez que les résultats à chaque étape et c’est vraiment dommage car le design de votre site web est bien, les stickers et icones sont soignés mais pour un site de tutorial le défaut que je cite ci-dessus est une lacune qu’il faudrait combler. bonne continuation
Hervé-Graphiste PAO
Répondre-
13 mars 2008 19:32, par Wonka
Pour un Graphiste PAO je pense que ce tutorial ne t’auras donné aucune mal
Maintenant il est vrai que pour un débutant nos tutoriels sont assez et c’est pour cela que cet article se trouve dans la rubrique initié
Pratiquement tous nos articles commence à ce niveau, et c’est un choix de la maison.Si toutefois tu rencontres un problème précis tu peux poser tes questions ici même dans ce forum
Répondre-
16 mars 2008 18:49, par Darkness-Orpheo
ça y est j’ai réussi =) bon c’est pas exactement comme le tuto, je me suis plutôt inspiré, au lieu de suivre à la lettre
Répondre ( ma créa c’est celle avec les menus en vert fluo et le fond en tapisserie )
-
-
-
28 mars 2008 12:44
Je bloque aussi à l’étape 2 et ce n’est pas faute de ne pas savoir utiliser toshop.
J’ai regardé le fichier sourse mais je ne vois pas comment passer d’un rectangle blanc à un dégradé avec des zone légérement arondie.
Comme dit plus bas le fait d’avoir que les résultats est un anticap je trouve aussi et un ami à qui j’ai passé le site est du même avis.
Mais beau travail comme dab j’ajouterais ma créa dans la galerie.
Répondre-
17 mai 2008 15:23, par emix
c’est simple. tu selectionne le calque du rectangle arrondi et tu va dans les styles de calque ! ^^
Répondre
-
-
19 juin 2008 07:48
Bonjour , j’ai modifié quelques trucs du . psd et ça donne ça : http://elendil.olympe-network.com/TUTOWONKA.png
qu’en pensez vous ?
Répondre-
-
-
23 décembre 2008 10:20, par jamessako
bon resultat mais moi je bloque a plusieurs etapes. franchement si vous pouvez etre un peu plus explicite ça aiderais les gens avec ki vous voulez partager vos tuto. à l’étape 8 lorsque je trace un trait il disparait au traçage du second et il ya des nouvo calques qui apparaissent chak fois que je trace un trait. je comprend pas. help me
Répondre-
23 décembre 2008 10:22, par jamessako
bon resultat mais moi je bloque a plusieurs etapes. franchement si vous pouvez etre un peu plus explicite ça aiderais les gens avec ki vous voulez partager vos tuto. à l’étape 6 lorsque je trace un trait il disparait au traçage du second et il ya des nouvo calques qui apparaissent chak fois que je trace un trait. je comprend pas. help me
Répondre
-
-
-
-
-
14 mai 2009 23:19, par Votre pseudonyme
"Un pour intégrer des icônes supplémentaires sur chaque onglet Un pour le couper et le coder en css html."
en effet ce serait extrémement intéressant !
merci
Répondre
-
21 juillet 2009 19:08, par HHHH
Bonjour, j’aimerai savoir s’il vous serez possible de me fournir un tuto’ m’expliquant comment creer un menu comme sur http://www.floralisa.fr/ celui de gauche où il y’a L’art Floral, LA BOUTIQUE, etc... étapes par étapes si possible, j’aurai besoin de ce tutoriel très rapidement si cela est possible.Remerciements anticipés.
Répondre -
11 novembre 2009 10:04, par Cyrril
Bonjour, Ou sont les 2 liens pour couper en CSS s’il vous plaît ?
Répondre -
27 mai 2011 15:56, par the devil
salu, merci pour le tutorial
mais regarder sur site:http://www.japprend.com/creer-un-menu-horizontal-graphique-pour-son-site-internet-photoshop
on vous as copier le tuto
Répondre
