Voici un tutoriel très simple pour créer une bouton web 2.0, vous aurez bien compris (en visitant ce site) qu’il existe des centaines de méthodes pour créer ce genre de bouton, et que ce style lui-même recouvre pas mal de tendances.

Voici donc l’une de ces méthodes que je classerais dans la tendance glossy écolo

Allez, vous pouvez vous lancer, ce tutoriel se classe en partie débutant, en effet chaque étape est claire, facile et bien expliquée

Mais attention, chacun d’entre vous devrez poster son petit bouton dans la galerie de l’article

Allez c’est partit :

ETAPE 1

J’ouvre Photoshop et je crée un nouveau document de 400 sur 200 pixels, je remplis avec l’outil dégradé (disponible dans la barre d’outil à gauche de votre écran ou en appuyant sur G) pour créer un background. Ensuite j’utilise l’outil des formes personnalisées pour créer un rectangle arrondi (avec un faible radius, voir les options dans le bloc en haut de page). J’utilise n’importe quelle couleur celle-ci n’a pas du tout d’importance.

ETAPE 2

Je vais appliquer à mon rectangle un style de calque, pour cela je vais dans le menu calque > style de calque > incrustation de dégradé puis lueur externe. Je télécharge le fichier psd ci-dessous pour récupérer les styles et les configurations de styles.

Fichier source Photoshop

Clic pour télécharger le fichier source photoshop utilisé dans ce turoriel

ETAPE 3

Je clique droit sur le calque rectangle (dans la fenêtre des calques) puis je sélectionne dupliquer ce calque. Sous cette copie je crée un nouveau calque vide.

Je vais maintenant désactiver la lueur externe sur la copie du rectangle ; pour ce faire j’appuie sur le petit œil à gauche de lueur externe.

Avec la souris je sélectionne les calques rectangles copie plus le calque vide, je clique droit avec la souris puis je sélectionne fusionner ces calques.

Cette manipulation a pour effet d’annuler les styles présents sur le calque se trouvant au dessus.

Sur ce nouveau calque je vais faire : édition > transformation > symétrie verticale, puis avec l’outil déplacement je le décale en bas en prenant soin de le séparer de 4 px de mon rectangle principal.

Pour finir cette étape je crée un masque de fusion (calque > ajouter un masque de fusion > tout faire apparaître) et avec le dégradé je camoufle toute la partie basse de mon rectangle copie.

ETAPE 4

Je vais créer maintenant un reflet par-dessus mon rectangle vert. Pour cela je crée un calque vide par-dessus tous les autres, je récupère la sélection de mon rectangle vert (ctrl + clic sur le calque) et je remplis de blanc la sélection avec le pot de peinture.

Avec l’outil sélection je prends la partie basse de mon rectangle blanc et avec l’outil déplacement je décale vers le haut. Je vais ainsi obtenir un rectangle arrondi à 50 % moins haut que mon rectangle vert.

J’utilise un masque de fusion pour cacher la partie basse de mon reflet blanc.

ETAPE 5

Maintenant ne il me reste plus qu’à utiliser l’outil texte pour ajouter l’intitulé de mon bouton. Dans mon exemple j’utilise la police de caractères Verdana en 12 px blanc.

ETAPE 6

Dans le cas d’une utilisation web il est toujours intéressant de prévoir une version hover. Pour cela il me suffit de modifier le style de calque présent sur mon rectangle vert.

Et voila mes boutons sont terminés ! Alors super sexy non ? Allez ; qui m’adapte la méthode et me présente un menu horizontale en full CSS ?

Bonne chance à tous !