Créer un bouton gélatine type Web 2.0
Il m’arrive de passer sur certains sites et de me dire : waou !! carrément la classe ce bouton, ou vraiment bien joué cette bannière, ou quel joli travail sur cette illustration.
Et hop, un screen et hop hop un tutorial pour expliquer la méthode histoire d’en faire autant ![]()
Aujourd’hui j’ai carrément craqué pour un bouton gélatine, aperçu sur je ne sais plus quel site.
De plus vous n’avez aucune raison de vous priver, cette technique est ultra simple.

- Tutorial 220 - 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, je prends l’outil - formes personnalisées - et je crée un rectangle arrondi (radius 0.2 pixels).

ETAPE 2
Presque tout l’effet passe par le style que je vais maintenant appliquer à ce calque : une ombre portée, un contour, une incrustation de dégradé. Pour récupérer le style, téléchargez le fichier PSD disponible en haut de cette page.

ETAPE 3
Toujours avec l’outil - formes personnalisées - je crée un rectangle arrondi blanc en haut de mon rectangle. Puis calque > masque de fusion > tout faire apparaitre. J’utilise ensuite le dégradé noir blanc sur mon masque de fusion pour camoufler mon reflet.

ETAPE 4
J’ajoute mon texte : dans mon exemple j’utilise un verdana 12 sans lissage.
Alors alors, pas mal non ?
A utiliser sans modération sur tous vos sites ![]()

INSCRIVEZ VOUS AU FLUX RSS WONKASTUDIO
|


