Photoshop - Menu boutons
Un petit menu composé de boutons bleus comme ci-dessous ?

Photoshop est votre ami, ne l’oubliez pas ! Et cliquez sur “Lire la suite” (en bas à gauche) pour voir le tutoriel.
Si vous êtes trop pressé, cliquez-ici pour télécharger le fichier Photoshop (.psd) du menu.
Tout d’abord, créez un nouveau document (Ctrl+N) de 168 pixels sur 140 avec Transparent comme contenu de l’arrière plan.
Prenez l’outil rectangle de sélection (M) puis en partant du haut gauche du document sélectionnez un rectangle de 168 pixels sur 28. Remplissez la sélection avec le pot de peinture (G) et la couleur suivante : #3399FF. Vous devriez avoir ça sous les yeux :

Double-cliquez sur la vignette du calque dans la palette des calques (F7 pour afficher la palette) pour ouvrir le panneau style de calque. Cochez la case Incrustation en dégradé puis réglez selon les paramètre suivant, et validez en cliquant sur OK :

Voilà ou nous en sommes :

Reprenez l’outil rectangle de sélection (M) pour créer un rectangle de 166 pixels sur 26. Placez-le au milieu du rectangle précédent, soit un pixel de chaque côté. Si je m’exprime mal, ceci va peut-être vous aider :

Créer un nouveau calque (Shift+Ctrl+N), et comme précédemment, remplissez la sélection grâce au pot de peinture avec la même couleur (#3399FF). Voici ce que vous obtenez :

Comme pour le premier rectangle, double-cliquez sur la vignette pour ouvrir le panneau style de calque. Cochez la case Incrustation en dégradé puis réglez selon les paramètre suivant, et validez en cliquant sur OK :

Toujours sur ce nouveau calque, changez son mode de fusion pour Produit dans la palette des calques comme indiqué ci-dessous :

Voilà, le premier bouton est terminé !

Il suffit maintenant de reproduire 4 fois le bouton. Pour gagner du temps, créez un groupe de calque dans la palette des calques puis mettez-y les 2 calques que vous venez de créer. Il ne reste plus qu’à dupliquer le groupe (clic droit, Dupliquez le groupe de calque…). Placez correctement votre nouveau groupe, ainsi de suite jusqu’à ceci :

Un peu de texte ? Pour ma part, j’ai pris la police 04b08 taille 8pt, disponible sur dafont. Voici le résultat final :

J’ai rajouté un léger effet pour le rollover sur le bouton ou passe le curseur sur mon exemple (dispo dans le fichier psd)
> Cliquez-ici pour télécharger le fichier Photoshop (.psd) du menu.



1 commentaire tout seul :(
Slt c’est spacegram cool tutoriel, mais j’aimerais savoir s;il y a des effet javascrip la dessus
Laissez un commentaire :