32
Créer des boutons avec du relief sous Photoshop
Avec ce tutorial Photoshop vous apprendrez une nouvelle technique de webdesign. Créer des boutons en reliefs avec plusieurs états. A intégrer à votre site Internet !
Si vous observez attentivement les communautés de graphistes comme Dribbble ou encore Deviantart, vous aurez très certainement remarqué les dernières tendances du webdesign. Les boutons en relief font partie de ces nouveaux styles faisant fureur ces derniers temps (ou alors que j’aime beaucoup : ) C’est tout naturellement que j’ai décidé d’en décortiquer la création et d’en faire un tutoriel Photoshop pour wks.fr.
Voici le preview de ce que vous pourrez créer une fois le tutoriel Photoshop terminé. Chaque bouton représente un état : inactif, normal, hover, actif ; puis la série en trois couleurs : bleu, orange et vert.
Je vous propose également d’essayer ce genre de bouton créé entiérement en CSS3 / HTML. Merci à François Dusautoir pour avoir relevé le défis 
Cliquez ici.
Fiche technique du tuto webdesign :
- Logiciel : Photoshop CS3 / CS5
- Temps : Environ 20 minutes
- Niveau : Faux débutant
Si vous appréciez les tutoriels webdesign sous Photoshop, je vous invite tout simplement à visiteur la rubrique de tuto webdesign de wks. Vous y trouverez des dizaines de tutoriels pour Photoshop afin de vous aider à créer votre site Internet.
Terminé de discuter maintenant, place au tuto Photoshop.
ETAPE 1 Créer une nouvelle image
Ouvrez le logiciel Photoshop puis allez dans le menu Fichier> Nouveau. Une nouvelle fenêtre s’ouvre. Entrez le nom de votre fichier, puis la largeur et la hauteur (600px pour les deux). Cliquez sur le bouton Valider.
Votre nouvelle image s’ouvre.
ETAPE 2 Ajouter des repères
Afin de créer la base du bouton plus facilement, placez quelques repères sur votre document. Pour commencer, appuyez simultanément sur les touches Ctrl/Cmd + R afin d’afficher les règles puis allez dans le menu : Affichage> Nouveau repère.
Dans la fenêtre, sélectionnez « horizontale » puis entrez la valeur de 100px. Appuyez sur le bouton Ok afin de créer le nouveau repère. Normalement, vous devriez le voir apparaître en haut de votre document.
Si ce n’est pas le cas, allez dans le menu Affichage> Afficher> Repères (ou appuyez sur les touches Ctrl/Cmd + : ).
Créez un autre repère horizontal à 137px, puis de nouveaux verticaux, cette fois à 100px puis 235px.
ETAPE 3 Créer la base du bouton
Zoomez sur la zone (croisée des repères) puis sélectionnez l’outil Rectangle arrondi (U). Dans la barre des options, modifiez le rayon à 4 pixels et vérifiez que l’icône Calque de forme soit bien sélectionné.
Enfin, dessinez un rectangle en suivant les repères.
Cet article a été transféré vers notre site cousin grafpedia.fr, cliquez ici pour lire l’article complet.
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 3 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.
-
3 septembre 2011 18:00, par Narthex
Super tuto, le résultat est à la fois très sympathique et customisable facilement !
J’ai essayé de relever le défi ; le rendu n’est pas parfaitement identique, mais il se rapproche fortement de la version Photoshop
Voir ici :
Répondre
