32
Créer un bouton Web 2.0, autre méthode
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 !
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 16 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.
-
5 mai 2008 22:29, par razhen
pas mal dutout ! j’aime bien le design j’ai hate de les essayer sur mon site x)
Répondre-
-
6 mai 2008 20:23, par razhen
il est encore offline j’attend qui soit tout beau tout propre pour l’up sur le web :D
Répondre
-
-
-
6 mai 2008 12:40, par Nicolas Soret
Toujours pas de noir sur tes boutons ?
Répondre
! Ça ressortirait beaucoup mieux pourtant.-
6 mai 2008 14:15, par Wonka
Encore toi :D je m’en doutais que tu allais poster un commentaire dans le genre ! Et je préfère le blanc :p
Répondre-
6 mai 2008 17:26, par Nicolas Soret
Bon ok je vais poster mes idées dans la galerie :p ! (Sinon, et j’ai oublié de le mentionner au dessus : Nickels les boutons !)
Répondre
-
-
-
20 juillet 2008 07:33
Bonjour, à l’étape 4 je fait ce que c’est écrit à l’étape 2 ... Mais comment ont fait pour obtenir le dégradé ?? Je ne comprend vraiment pas !
Répondre -
15 novembre 2008 14:20, par Otaku-mad
Un style très design, très pro et comme dit dans le tutoriel, très sympa pour un rollover :)
Bravo
Répondre -
9 décembre 2008 08:30, par Zen
Tutoriel pas suffisamment développé (comme beaucoup des tiens il me semble), et c’est bien dommage ! En tous cas le résultat est beau.
Répondre-
9 décembre 2008 14:03, par Wonka
Et moi il me semble que ce tutorial represente la base de la base, cependant il nécessite un minimum de bonne volonté et d’effort de la part du graphiste. Sinon ca ne pourras effectivement pas fonctionner !
Répondre-
22 août 2011 14:10, par Garwan50
L’obtention du dégradé est difficile a obtenir sans chercher. Pour les débutants comme moi et d’autres c’est pas évident.
Répondre
-
-
-
17 septembre 2009 18:02, par Tenerezza
C’est vrai le tuto est mal développé c’est vraiment le minimum je ne peux pas utiliser ce tuto pourtant le résultat final est magnifique et c’est ce que vraiment je cherche depuis longtemps ! C’est bien dommage !
Répondre -
31 décembre 2010 09:53, par Silver
Bonjour ! Merci beaucoup pour ce tutoriel très sympa qui m’a permis de faire mes débuts dans le rollover ^^
Voici le lien où ces boutons ont été utilisés :D
http://phoenixcoalition.forumgratuit.fr/forum
Bonne continuation et merci pour ces tutoriels géniaux !
Répondre
