Créer un bouton gélatine type Web 2.0

jeudi 29 novembre 2007
Article écrit par : Wonka
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
WonkaStudio

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.

Photoshop - 169.9 ko
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 ;)

La galerie des membres

Ajouter votre image dans la galerie
Si vous avez réussis ce tutorial vous avez la possibilité de poster votre dessin dans la galerie, vous pourrez ensuite le publier dans les commentaires (que vous trouverez en bas de page).
Attention votre fichier devra être en format JPG, et son poid inférieur a 200ko !

Vos commentaires ( 2 messages dans le forum)
Ajouter un commentaire à cet page

modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Ajouter un commentaire

Continuer la lecture sur wks.fr

Copyright

Les articles et images d'illustrations sont propriété de l'auteur et du réseau Grafik Network & Wks.fr.

Toute copie, reproduction ou diffusion sans autorisation sont interdites. Les images ainsi que les textes sont protégés par le droit français d'auteur ainsi que par un Copyright.