Accueil > Tutoriels pour les webdesigners > Photoshop > En faisant du webdesign > Créer des boutons avec du relief sous Photoshop

Créer des boutons avec du relief sous Photoshop

jeudi 1er septembre 2011, par Wonka

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.

Tutorial Photoshop : Créer des boutons avec du relief sous Photoshop

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.

Tutorial Photoshop : Créer des boutons avec du relief sous Photoshop

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.

Tutorial Photoshop : Créer des boutons avec du relief sous Photoshop

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.

Tutorial Photoshop : Créer des boutons avec du relief sous Photoshop

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.

Tutorial Photoshop : Créer des boutons avec du relief sous Photoshop

Cet article a été transféré vers notre site cousin grafpedia.fr, cliquez ici pour lire l’article complet.

Messages

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexions’inscriremot de passe oublié ?