Astuce Donnez du relief à vos menus web - Création de Sites

Catégorie : Création de Sites

Vous avez créé un site avec un menu. Vous êtes content du contenu, mais vous voudriez donner un peu de relief à vos items.
Nous allons voir aujourd'hui voir comment créer facilement des menus en relief avec Photoshop™.
Lors d'une prochaine astuce, nous verrons comment faire apparaître le relief sur l'image quand la souris passe dessus.

1. Créez votre item de base

Nous allons juste créer ici un bouton du menu, dans sa version de base, tant que la souris n'est pas dessus...

Dans Photoshop, créez une nouvelle image de 200 x 50 pixels.
Par l'intermédiaire de l'outil TEXTE, , inscrivez le nom de votre bouton, par exemple Contact.

2. Ajoutez le relief

Une fois le texte placé correctement où vous le voulez, choisissez le menu Calque, Style de calque, Biseautage et estampage.
Choisissez un style "Biseau externe", une profondeur de 200 %, et une longueur de 7 px... et validez
Votre nouveau style est appliqué...
Vous devez maintenant séparer le style du texte, en choisissant dans le menu Calque l'option Style de calque... Créer des calques.
Vos calques sont dissociés:

3. Enregistrez les copies

Enregistrez l'image complète en .psd (pour conserver les informations de calque) par l'intermédiaire du menu Fichier, Enregistrer Sous...
Puis enregistrez votre image au format gif web par le menu Fichier, Enregistrer pour le web...
Une page de programme s'ouvre, cliquez sur OK et nommez votre fichier, par exemple cont_rel.gif. Ce nom peut paraître bizarre, mais vous allez comprendre...
De retour dans photoshop, décochez les yeux des calques de biseau de votre image, en cliquant dessus.
Votre effet disparaît ! En fait, il est toujours présent dans les calques, mais ceux-ci ne sont plus affichés.
Enregistrez votre "nouvelle" image au format gif web par le menu Fichier, Enregistrer pour le web...
Cette fois, nommez-la cont_pla.gif pour ne pas la confondre avec l'autre.

Vous pouvez procéder de même pour tous les items de votre menu.

Vous avez maintenant deux images, de même taille, avec le texte au même endroit mais avec des effets différents. Vous avez donc de quoi créer un menu dynamique, en faisant apparaître, par exemple, l'image avec relief à la place de l'image "plate" quand on passe la souris dessus. Si vous ne savez pas comment faire, un peu de patience, une prochaine astuce vous indiquera la marche à suivre.

Micro Application