32
Créer un bouton web 2.0 autre méthode
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 !
Article publié par Wonka
Vous aimez cet article? Partagez le !
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 !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 22 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
29 avril 2008 20:52, par IT1
Très bon tuto, comme d’habitude
Répondre. Mais attention : dans l’image de la dernière étape, le reflet du bouton gris ... est vert !-
-
30 avril 2008 09:44, par Wonka
Je viens de faire la modification
Répondre les reflets sont donc ok ! Merci pour cette bonne remarque IT1.
-
-
-
30 avril 2008 13:38, par Nicolas Soret
Très très beau boutons, mais je me demande si l’écriture blanche sur le reflet blanc de chaque bouton est bien ? Je sais pas mais il est quand même un peu difficile de lire non ?
Répondre-
-
30 avril 2008 23:49, par Nicolas Soret
Aurais-je fauté ? Je ne sais pas, je remplis toutes les cases du formulaire moi
.Voir en ligne : CsThéorie.Agency
Répondre-
1er mai 2008 21:45, par wonka
Non y’a pas de mal
Répondre
Et moi je trouve qu’avec le blanc ça le fais ! Quelle couleur aurait tu vu sur le texte ?-
1er mai 2008 22:05, par Nicolas Soret
J’aurais vue du noir avec juste une ombre blanche. Comment expliquer. Ho je sais, si tu va sur www.cstheorie.com et que sur la dernière news tu clic sur « recrutement », un formulaire se lance. j’ai utilisé ton bouton pour le « valider », et bien je trouve qu’il ressort beaucoup mieux non ?
Répondre-
-
-
2 mai 2008 15:02, par Wonka
Oué pas mal en noir aussi
Répondre en fait ton formulaire est tout simplement magnifique, le coup des petits tirets (input) est fantastique , le lightbox bien intégré, nan bravo !
-
-
-
-
-
-
-
-
8 juin 2008 14:27, par Wyatt
Merci pour ce tuto. Le premier que j’ai fait. Bravo bien expliqué.
Répondre
-
18 septembre 2008 20:31
excellent tuto. j’avais trouvé un tuto pour faire la meme chose mais il était très compliqué et demandais bcp de temps.
Répondre
-
15 février 2009 00:12
Un peu compliqué ce tuto mais merci ! Néanmoins, étant une quiche dans le maniement du logiciel photoshop eh bien je ne suis pas du tout arrivée au même resultat que toi ^^" Pourrais tu plus presciser certains passage comme, si jamais le calque dois etre en produit ou normal et d’autres trucs.
Répondre -
3 juin 2010 00:37, par Darkplayer
Je trouve ce bouton super jolie, ainsi que toutes tes réalisations/créations. Je n’ai qu’une chose à te dire : Bonne continuation.
’Dark.
Répondre -
27 novembre 2010 07:23, par Ishimaru Chiaki
Bonjour,
Je suis graphiste dans mes temps libres et j’écris des tutoriaux Gimp depuis quelques années déjà. Après avoir vu un utilisateur novice de Gimp demander comment faire un bouton dans le même style que celui-ci, j’ai découvert votre tuto depuis le lien qu’il a posté. Puisque j’utilise Gimp depuis 4 ans et demi, je connais assez le logiciel pour savoir facilement comment reproduire plusieurs éléments graphiques montrés dans des tutoriels Photoshop.
Or, ne voyant de mentions de licence Creative Commons nulle part sur ce site, je viens donc demander votre autorisation pour adapter ce tuto pour Gimp. Si je l’adapte et le publie sur mon site (visible en bas de ce commentaire), je mettrai le lien vers votre tuto afin de respecter la paternité.
Merci d’avance pour votre réponse.
Ishimaru
Répondre-
29 novembre 2010 10:49, par Wonka
C’est ok pour ce tutorial, merci cependant de placer un lien vers wks.fr
Répondre
-
-
29 novembre 2010 17:02, par Ishimaru Chiaki
Ok merci, je vais d’abord me concentrer à expliquer au membre de Gimp-Attitude et je ferai l’adaptation ensuite.
Répondre -
2 décembre 2010 05:39, par Ishimaru Chiaki
Voilà, je viens de finir la rédaction de l’adaptation ! Voici le lien : http://ishimaru-design.servhome.org/forum/forum-t720.html
Répondre
