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.

Fichier source Photoshop

clic pour télécharger le fichier source photoshop utilisé dans ce tutorial

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)).

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é).

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.

ETAPE 4

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

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

ETAPE 6

Le bouton est terminé en étape 5, voici une petite sélection de ce même bouton dans des situations différentes ! Pratique pour la création de rollhover.

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

Bonne chance à tous !