Tutoriel photoshop : Création d'un bouton Tutoriaux photoshop > Webdesign > Tutoriel photoshop : Création d'un bouton

1) Créer un nouveau document de la taille que vous souhaitez
2) Utiliser l'outil rectangle arrondi (ou tout autre forme que vous souhaitez)
3) Dessiner la forme de votre bouton
4) Nommer ce calque "fond"


5) Créer un nouveau calque que vous nommerez "ombre"(CTRL+MAJ+N)
6) Cocher la case "créer un masque d'écrêtage d'après le calque précédent" (cette option vous permettra de créer un calque qui dépendra uniquement de ce que représente le calque précédent)
7) Appuyer sur la touche D (D vous permet d'initialiser les couleurs : noir en avant blanc en arrière plan)
8) Tout en maintenant la touche CTRL cliquer le calque "fond" présent dans la fenêtre des calques (cela vous permettra de sélectionner le contour du calque cliqué)
9) Prendre l'outil dégradé
10) S'assurer d'être bien présent sur le calque "ombre" et appliquer un dégradé du bas vers le haut (noir vers transparent)


11) Réduire l'opacité du calque à 30%


12) Créer un nouveau calque que vous nommerez "reflet"(CTRL+MAJ+N)
13) Cocher la case "créer un masque d'écrêtage d'après le calque précédent" ou "associer au calque précédent"(cette option vous permettra de créer un calque qui dépendra uniquement de ce que représente le calque précédent)
14) Appuyer sur la touche D puis X pour obtenir la couleur blanche en avant plan (D vous permet d'initialiser les couleurs : noir en avant blanc en arrière plan, X inverse les couleurs)
15) Tout en maintenant la touche CTRL cliquer le calque "fond" présent dans la fenêtre des calques (cela vous permettra de sélectionner le contour du calque cliqué)
16) Prendre l'outil dégradé
17) S'assurer d'être bien présent sur le calque "reflet", appliquer un dégradé du haut vers le bas (blanc vers transparent)


18) Aller dans le menu édition -> Transformation -> Homotétie (CTRL+T), puis tout en maintenant les touches ALT et MAJ réduire de quelques pixels le dégradé vers le bas.
(Le fait de transformer une forme en appuyant sur la touche ALT, transformera de façon symétrique le calque sélectionné en fonction du point de référence.
La touche MAJ permet d'avoir un guide pour garder les mêmes proportions du calque sélectionné)


19) Prendre l'outil rectangle de sélection et sélectionner la partie inférieur de votre dégradé
20) Effacer


21) Libre à vous d'écrire ou non un texte à l'intérieur en utilisant l'outil texte.
- Avantages : utiliser une police de caractère sympa, orienter le texte comme vous le souhaitez...
- Inconvénients : création de nombreuses images différentes avec pourtant le même fond, lors de modifications "rerentrer" dans photoshop pour modifier le texte etc etc...


Ensuite n'hésitez pas à laisser place à votre imagination pour créer un bouton personnalisé en y intégrant des images ou autres contour, ombre...

Autres tutoriaux photoshop : Webdesign

Faire une barre de navigation d'un site internet Flux RSS glossy Faire une barre de navigation, scroll barre Créer une icone glossy pour une interface web Créer une icone de média sociaux (facebook, twitter...)