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.

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.

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

Il y a aucune image pour le moment, soyez le premier à ajouter une image à ce tuto Photoshop.

Vous avez terminé ce tuto ? Partager votre création graphique.

Il y a 5 commentaires publiés sur cet article
  • François

    Défi relevé :)

    http://francoisdusautoir.fr/bouton.html

    Répondre
  • 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
  • Votre pseudonymetrawlin

    superbe,rien à dire

    Répondre
  • Dabo

    Bonjour, je voulais utiliser ce tuto mais ... Il n’est plus accessible malheureusement :(

    Répondre
    • Wonka

      Je vais essayer de le retrouver ! Le site n’est plus accessible pour une raison inconnu, je cherche la raison.

      Répondre
Ajouter un nouveau commentaire

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 60

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 72

Fatal error: Call to undefined function: spip_unlink() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 96