création bouton

Créer un bouton Web 2.0 avec Photoshop

Apprenez dans ce tutoriel Photoshop comment créer des bouton de navigation web 2.0.

Petit à petit vous allez devenir le maître du style Web 2.0, en tout cas avec la foule d’articles que je publie sur ce sujet nous aurons bientôt fait le tour :p Voici donc une énième méthode pour créer un bouton de navigation pour un site internet axé Web 2.0.

La méthode est suffisamment simple pour entrer dans la catégorie débutant, n’hésitez pas à télécharger le fichier source Photoshop disponible juste en dessous pour récupérer les styles de calques utilisés lors des différentes étapes.

Pour ce genre de bouton le top est de créer un état de hover, vous trouverez donc un psd avec le même bouton mais décliné en plusieurs couleurs.

ETAPE 1

Je crée un nouveau document sur fond blanc puis je crée un nouveau calque. Avec l’outil sélection (touche M) je crée un rectangle que je remplis de noir (avec le pot de peinture (touche G)).

bouton 1

ETAPE 2

Je vais lui appliquer deux styles de calques

Une incrustation de couleur : blanc

Une légère lueur externe

Et un contour interne de 1 px gris

Je rappelle que pour trouver les styles de calques, je double clique sur mon calque dans la fenêtre des calques ou je me rends dans le menu calque > style de calque > contour … (pour changer ou appliquer un contour au calque sélectionné).

bouton 2

ETAPE 3

Je crée un nouveau calque et comme dans l’étape 1 je crée avec l’outil sélection un rectangle noir.

bouton 3

ETAPE 4

Comme à l’étape 2 je lui applique deux styles de calques (la lueur externe en moins).

bouton 4

ETAPE 5

Avec l’outil des formes personnalisées (touche U) je crée deux flèches blanches sur la droite de mon bouton. Et j’ajoute le titre de mon bouton avec l’outil texte (touche T). Remarque : pour une utilisation Web je ne devrais pas ajouter le texte à l’image, pensez donc à retirer ce texte pour pouvoir l’intégrer ensuite en CSS

Voila, alors n’est ce pas facile comme tout ? En espérant vous voir triompher

Bonne chance à tous !