32
Créer un menu black gloss + découpe + code
Voici un tutorial pour créer de A à Z un menu glossy black aqua. S’en suivra une explication pour le découper et le coder en CSS / html.
- Tutorial 193 - Fichier source Photoshop
- clic pour télécharger le fichier source photoshop utilisé dans ce tutorial
ETAPE 1
Je crée un nouveau document, et je remplis le fond avec cette couleur : #272727. Puis avec l’outil des formes personnalisées je crée un rectangle arrondi noir au milieu de mon image (peu importe le radius, dans mon exemple il est de 10 pixels).
ETAPE 2
J’applique deux styles sur mon calque : un contour gris très foncé, ainsi qu’un dégradé. Vous pouvez vous rendre compte des styles en téléchargeant le fichier source Photoshop en haut de cette page.
ETAPE 3
Je crée un nouveau document, et je récupère la sélection de mon rectangle (clic + ctrl sur le calque). Je remplis de blanc cette sélection, puis je la coupe en deux. Et enfin je diminue son opacité à 20%.
ETAPE 4 – Facultatif
Je peux ajouter un motif à mon menu, pour cela je récupère la sélection de mon rectangle, je crée un nouveau calque et je le remplis du motif de mon choix.
ETAPE 5
J’applique un masque de fusion pour camoufler mon motif et le rendre non visible.
ETAPE 6
Sur un nouveau calque je crée une sélection de 1 pixel de largeur du haut du menu vers le bas, puis je remplis de blanc ces sélections, il s’agit là de séparations pour les boutons de notre menu. Avec un masque de fusion je camoufle le haut de ces barres.
ETAPE 7
De chaque coté, je crée des barres de séparations orangées.
ETAPE 8
Je remplis chaque extrémité d’une couleur au choix. Pour cela je récupère la sélection de mon rectangle et sur un nouveau calque je la remplis de bleu. Ensuite je supprime les pixels au centre de mon menu.
ETAPE 9
Sur mon premier calque j’ajoute une lueur externe, gris clair.
ETAPE 10
Voici un second menu avec un style différent, je le préfère au premier et je vais l’utiliser pour la suite, à vous de voir celui qui est le mieux. Pour information, pour arriver au résultat du second menu, il suffit de supprimer les dégradés du menu (barre orangée, coté bleu, et intérieur du menu).
ETAPE 11
J’ajoute mon texte, avec une lueur externe blanche sur chaque titre.
ETAPE 12
Je place tous mes calques dans un dossier et je duplique ce dossier. Je place ainsi mes deux menus.
ETAPE 13
Je modifie la couleur de mon menu, ce deuxième menu sera utilisé pour créer l’effet de Rollover au passage de la souris.
ETAPE 14
Je vais maintenant découper mon menu, pour cela j’utilise la sélection. L’astuce évidemment c’est de créer et de découper à l’identique en haut et en bas.
ETAPE 15
Une fois que l’étape 14 est terminée je dois pouvoir créer une sorte de mosaïque de mon menu, voici ce que j’obtiens : les extrémités simples, et les boutons noir et orange.
ETAPE 16
Dans un fichier html je vais mettre le menu en place, je vais utiliser la technique du tableau pour la mise en page et du javascript pour le Rollover. Remarque : tout ceci peut être fait en CSS mais ce n’est pas le but de ce tutroial 
Voici le code pour créer le menu :
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="48" height="70" background="tuto_wks_d28_14a.jpg"></td>
<td><a href=""><img src="tuto_wks_d28_14b1.jpg" width="97" height="70" border="0" onMouseOver="this.src='tuto_wks_d28_14b2.jpg'" onMouseOut="this.src='tuto_wks_d28_14b1.jpg'"></a></td>
<td><a href=""><img src="tuto_wks_d28_14c1.jpg" width="100" height="70" border="0" onMouseOver="this.src='tuto_wks_d28_14c2.jpg'" onMouseOut="this.src='tuto_wks_d28_14c1.jpg'"></a></td>
<td><a href=""><img src="tuto_wks_d28_14d1.jpg" width="100" height="70" border="0" onMouseOver="this.src='tuto_wks_d28_14d2.jpg'" onMouseOut="this.src='tuto_wks_d28_14d1.jpg'"></a></td>
<td><a href=""><img src="tuto_wks_d28_14e1.jpg" width="100" height="70" border="0" onMouseOver="this.src='tuto_wks_d28_14e2.jpg'" onMouseOut="this.src='tuto_wks_d28_14e1.jpg'"></a></td>
<td width="28" height="70" background="tuto_wks_d28_14f.jpg"></td>
</tr>
</table> Voir le menu en action : http://www.wks.fr/tutorial_help/tutorial_193/index.html
J’espère que vous aurez maintenant compris un peu plus la technique du Rollover, quand à la création du menu en lui-même, ce doit être du gâteau pour vous non ?
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 38 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.
-
17 août 2007 17:25, par azerty7301
sympa. dit donc ca chaume pas chez wks ces derniers temps
Répondre
bon boulot continu-
17 août 2007 20:00, par Wonka
Et oui ca taff dur :p c’est pour la rentrée ! Merci pour ton message !
Répondre
-
-
19 août 2007 11:33, par Mr Le Cube
Il est vrai que ça prend plus de temps à encoder mais, une page CSS avec la technique de la porte coulissante, pour gérer le glissement d’une seule image, comme l’image de l’étape 13, image qui serait recadrée dans une BOX du menu (Box = boite qui découperait le menu). Une page web allégée en code JS et la mise en mémoire tampon d’une seule image pour un menu, accélérer l’affichage de cette page et empêche les décalages entre les affichages des Roll-Overs. ... Le plus simple c’est d’allez voir l’explication sur le site de http://www.developpement-web.net mais bon il faut connaître l’encodage CSS.
Répondre-
19 août 2007 12:03, par Wonka
Bah je connais un minimum CSS mais c’est vrai que c’est pas forcemment le but de ce site. Dans tous les cas je vais étudier le lien que tu ma donné et la prochaine je le fais en CSS
Répondre Merci à toi pour ces conseils.
-
-
4 septembre 2007 10:49
Je comprend pas comment faire pour les dernieres etapes je connais pas grand choses en HTML et encore moin en javascript alors pouvez vous m’expliquer ?
Répondre-
4 septembre 2007 14:09, par Wonka
Avec le bloc note tu crées un fichier .html. Dedans tu y passes le code publié dans la dernière étape. Normalement c’est prêt à fonctionner
Pour voir le resultat tu doit ouvrir ton fichier .html dans un naviguateur web comme mozilla ou internet explorer.
Bonne chance !
Répondre
-
-
17 décembre 2007 15:08, par KroKz
Salut,
Excellent tuto, mais quand on va sur la page de démo, il y a un certain temps, bien que petit, avant que le rollover ne fonctionne. Pour éviter cela, il faut mettre en cache les images oranges au démarrage de la page, cela se fait en JavaScript, mais je ne sais plus comment faire.
A ci : rendez-vous ici, mais il faut connaitre le JavaScript pour comprendre le code : http://www.siteduzero.com/tuto-3-12955-1-les-images.html#ss_part_2
Répondre -
18 décembre 2007 20:43, par Furious
Il est vrai que ce site est surtout pour le webdesign et j’admire profondément vos réalisations et tutoriels. Cependant JavaScript est un langage qui s’exécute sur la machine Client et donc si ton visiteur a désactivé JS il ne verra pas l’effet onMouseOver et onMouseOut et donc c’est pour cela que je vous recommande de faire en javascript avec la commande A:HOVER
Répondre-
19 décembre 2007 14:17, par Wonka
Je devrais poster très bientôt une autre technique, en CSS cette fois pour créer un effet de Rollover, mais tu as tout à fait raison sur le fait que JS peut être desactivé sur la machine de l’utilisateur !
Répondre
-
-
19 mars 2008 23:43
slt a tous tres bien ce tuto mais jai un petit probleme !!!
en fait mon menu marche tres bien en fichier .html mais il ne fonctionne pas sur mon site ( le l’ai mis dans un block html au centre en dessous du header)
voici l’adresse de mon site ;
http://mangacustom.free.fr/nk/index.php ?file=News
comme vous voyez le menu s’affiche mais les liens ne fonctionne pas. pourtant je pense avoir bien fait le texte.
voici le texte mis en html sur mon site ;
« ““« « « “““« «
» »””” » » »”” »
est ce ke quelqu’un aurait une solution d’avance merci
Répondre
-
20 mars 2008 09:55, par Wonka
Ton adresse de test est vraiment etrange et ne fonctionne pas !
Le code que tu nous as laissé en preuve est lui aussi très étrange !
Je ne peux vraisemblablement pas t’aider dans ces conditions !
Répondre-
20 mars 2008 21:27
oui desolé jai fait un peu n’importe koi encore desolé
voici le site : (le menu est au centre)
et pour le code html ca n’a pas marcher kan je lai poster je vais donc le mettre en image :
http://i271.photobucket.com/albums/jj122/Psyko1986/codehtmlmenu.jpg
le menu marche tres bien en fichier .html mais un fois sur le site ca ne fonctionne plus ??
voila merci pour ton aide
Répondre-
21 mars 2008 09:38, par Wonka
Oui mais quel est ton problème, le menu ne marche pas oui mais pourquoi ? Ou plutôt qu’est ce qui te fais dire qu’il ne fonctionne pas ?€
Répondre-
21 mars 2008 12:22
je te remercie pout ton aide mais j’ai trouvé la solution sur un autre forum
en fait j’avais renommé mes image en .GIF au lieu de .gif .
tout ca pour une histoire de majuscule mdr
encore une fois tres bon tuto merci a l’auteur...
Répondre
-
-
-
-
-
22 mars 2008 12:45, par MØG
Chouette Tutorial
Juste une question, Pour l’étape 14, personne n’a une astuce pour découper le menu à l’identique en haut et en bas sans risque d’erreur.
Répondre -
22 mars 2008 21:11, par renlo_27
Bonjour,
J’aimerai également avoir des informations supplémentaires pour la découpe car c’est la partie qui me pose le plus problème. Merci d’avance.
Répondre -
6 avril 2008 10:27
Bon tuto, j’adore mais j’ai un problème :
Où mettre le code HTML ? Je ne connais pas vraiment ce dommaine. Ce serais possible que tu m’aides ?
Merci d’avance ^^
Répondre -
24 avril 2008 16:01, par paixdron
Slt WonkaStudio, En fait je n suis k’1 débutant sur Ps CS3 et ça fait environ une semaine k je consulte vos tutos k je trouve sans abuser meilleurs k ts ce j’ai pu voir jusque là. Je m suis lancé à appliker de A à Z le tuto mè j vous avous k je suis encore à l’étape 3 dépuis 2h et j n’ariv pa à bouger car aprè k j’è réussi à récupérer la selection de mon tracé (rectangle arrondi), je n puis comprendre comment couper en 2 cette selection. J swi ds la m***d ; et svp dites-moi comment fèr pour pouvoir bouger dlà.
Ps : il fo k vous aillez souvent l’habitude de spécifier 1 tt pti peu ce k vous utilisez ds les ménus ; car kan vous dites « je supprime les pixels au centre de mon ménu » pour moi c + k de la noyade parc k’il m fodrè encore 2h d + pour trouver comment supprimer ces modits pixels, vous voyez ?
Mè tt d mm je vous félicite car « Avec Wonka Studio, le web design devient 1 jeu d’enfant ». Merci @ +
Répondre-
24 avril 2008 19:42, par Wonka
Il faut utiliser l’outil sélection pour pouvoir couper en deux ta forme !
Répondre
-
-
4 juin 2008 23:20
Oui mais comment fait on ... on ne connait pas le nom des images ... le code ne fonctionne pas avec nos propres images ^^ ... si tu pouvais faire un gros plan sur les noms des images sa m’avancerai pas mal en tout cas !!
Répondre -
11 juin 2008 07:39
salut, j’ai enfin réussi j’ai reocmmence 3 fois lol avec un peut de patience et de perseverence j’ai essaye de faire un peu comme toi mais bon je suis pas aussi doué :s clique sur l’image =>
Répondre
-
12 juillet 2008 19:50, par rick
Bravo pour le tutorial c se que je recherche pour mon site
Répondre je n’arrive pas a trouver la police VisitorTT2BRK ? merci
-
-
23 octobre 2008 21:09
Salu Je ne trouve pas l’outil de sélection a part selection rapide ... Je sais que je suis un noob mais si on pouvai maider PS : Mon photoshop est en Anglais .
Répondre -
19 juin 2009 14:23, par Votre pseudonyme
j’ai un problème : le roll over ne fonctionne pas chez moi ! mon code ne s’affiche pas ici !
et j’ai vérifié tous les noms mais ca ne marche pas help
Répondre-
19 juin 2009 15:44, par Votre pseudonyme
erreur de ma part : j’ai écrit onmouseover=« nom de l’image.png’ »
au lieu de
onmouseover=« this.src=’nom de l’image.png’ »
Répondre
-
-
10 janvier 2010 20:31, par Freaks
Bonjour, j’ai vraiment rien compris à l’étape 3. Quelqu’un pourrait m’expliquer avec plus de précision ? En tout cas le résultat est très beau
Répondre. -
18 janvier 2010 19:50, par Mister Parapluie
Bonsoir ! Tout d’abord je tiens à féliciter wonka et tous les posteurs de tutos car ils sont d’une qualité et d’une simplicité incroyable. Voilà ma question, j’ai créé un menu avec photoshop (en m’inspirant largement de ce tuto), puis j’ai utilisé flash mx pour le mettre sur mon myspace (encore avec le tuto). Le fichier .swf est hébergé sur « harchive-host » qui me fournit différents codes (code HTML pour fichier flash) pour l’insérer. Le menu réagit bien au passage de la souris mais est inactif lorsque l’on clic sur les boutons qui sont censé rediriger vers différentes pages du myspace. Auriez-vous une solution ? Merci !
Répondre-
19 janvier 2010 19:07, par Wonka
Plusieurs raisons peuvent empêcher des liens de marcher sur une animation lorsque vous tester l’animation en local est ce que les liens fonctionnent ?
Répondre-
29 janvier 2010 23:48, par Mister Parapluie
Bonjour, je suis désolé de répondre si tard mais j’ai passé beaucoup de temps à chercher une solution et j’en ai finis par oublier de venir vérifier ici. En « local » (le .html publié avec le .fla ?) les liens fonctionnent. Comme aucune des différentes animations testées ne fonctionnaient sur myspace, j’ai créer un myspacemusic où il est plus facile d’introduire du flash du css et du html. Mais rien ne marchait non plus... j’ai trouvé une solution : séparer mon menu en 3 et créer 3 bannières séparées chacune renvoyant vers le lien souhaité. On ne peut pas introduire de liens externes à partir du flash sur myspace (à moins d’être balèze ^^) à bientôt !
Voir en ligne : le résultat sur myspace
Répondre
-
-
-
26 avril 2010 13:36, par k.5idi
c’est vrai qu’il est pratique ce tuto mais pour un gar comme moi qui ne maitrise pas trop photoshop.... ce serait si il y avait des captures d’images comme pour les autres tutos merci
Répondre -
27 avril 2010 11:15, par ncarter02
brj,
je commence à faire ce Tutorial mais j’arrête à l’étape 14, pour cela si il existe sous format de vidéo ça sera superbe merci.
Répondre -
7 août 2010 02:44, par Sheldon-chan
Salut tous le monde, alors vous moquez pas de moi mais moi j’ai un souci dès l’étape 3 quand tu dis wonka de remplir la sélection de blanc et ensuite de la couper en 2. Alors comment on coupe en 2 exactement s’il te plait, je sais sa doit être tous bête mais bon...si tu pouvais m’aider ou quelqu’un d’autre !? merci
Répondre -
11 novembre 2010 19:50, par Nosferatu_ave
Bonsoir, je sais que nous sommes en 2010, mais je viens seulement de découvrir ce site qui je trouve très bien fait pour les tutos photoshop même si parfois pour certains ce n’est pas évident ^^. Maintenant, je voudrais savoir une petite chose pour la dernière étape « le découpage », y a t il une manière pour que le découpage soit identique pour les deux barres ? Merci pour votre réponse et continuez comme ça
Répondre. -
25 février 2011 07:30, par paulbaumann
Désolé mais cette fois je n’ai pas réussi à aller jusqu’au bout du tutoriel. L’étape des barres blanches (très peu expliquée) ne se passe pas comme prévu, impossible de remplir ma sélection de blanc puis de dégrader les lignes pour les fondre dans le reste...
Répondre -
14 avril 2011 12:09, par axel
Pas mal le tuto mais pourquoi découper les images !?? ça en fait autant à charger ! Autant garder une seule image en background CSS et l’ajuster en fonction du lien du menu ou du :hover non ? NB : je découvre le site
Répondre. La validation du commentaire propose « Commentaire écris par », un T à écrit serait mieux.
