Le blog d'Eenov, solutions eenovantes !

TUTO : créer un bouton web 2.0 sous Photoshop

Ce tutoriel a pour but de vous apprendre à créer très simplement un bouton style web 2.0 sur Photoshop, dans un style épuré et moderne.

Img 17 - Créer un bouton web 2.0 avec Photoshop

Création du fichier

Pour commencer, créez un nouveau fichier (500x500px).

Img 01 - Créer un bouton web 2.0 avec Photoshop

Ajoutez ensuite des repères pour aider à tracer le bouton (Affichage > Nouveau repère). Ici, j’ai placé 2 repères horizontaux à 100px et 135px et 2 repères verticaux à 100px et 275px. Le tout pour avoir un bouton de 175x35px (adaptez bien évidemment cela pour faire un bouton à la taille qui vous convient).

Img 02 - Créer un bouton web 2.0 avec Photoshop

Création du bouton

Vous allez maintenant tracer un rectangle arrondi en suivant ces repères. Pour cela, sélectionnez l’outil Rectangle arrondi, et indiquez 3px pour le rayon. Tracez votre forme en collant sur les repères (grâce au magnétisme, la forme va suivre parfaitement les repères créés et ainsi correspondre à la taille de bouton souhaitée).

Img 03 - Créer un bouton web 2.0 avec Photoshop

Si vous le souhaitez, vous pouvez cacher les repères qui ne nous serviront plus à présent en faisant Ctrl+H.

Ajout des styles

Cliquez ensuite sur le bouton fx pour ajouter un style de calque à notre forme, et sélectionnez Incrustation en dégradé (ou allez dans Calque > Style de calque > Incrustation en dégradé).

Img 04 - Créer un bouton web 2.0 avec Photoshop

Laissez en mode de fusion : normal, style : linéaire, et angle : 90°. Pour le dégradé, j’ai décidé de créer un bouton grisé donc j’ai choisi un dégradé partant de #b0b0b0 à #e5e5e5 (de bas en haut : du plus foncé au plus clair).

Img 05 - Créer un bouton web 2.0 avec Photoshop

Nous allons ensuite rajouter un contour. Taille : 1px, position : intérieur, angle : 90° et je choisis le type de remplissage en dégradé. Là, nous allons définir des couleurs légèrement plus foncées que le dégradé du bouton, afin de le faire ressortir. Je pars donc du #9a9a9a au #d7d7d7.

Img 06 - Créer un bouton web 2.0 avec Photoshop

(Bien évidemment ces couleurs sont à titres d’exemple, vous pouvez adapter ces couleurs à vos besoins tant que vous respecter les indications.)

Nous allons ensuite mettre une petite lueur interne pour rajouter du relief. Choisissez le mode de fusion : superposition, opacité : 100%, taille : 3px, couleur : #f9f9f9 (choisissez une couleur plus claire que votre bouton).

Img 07 - Créer un bouton web 2.0 avec Photoshop

Petit effet 2.0

Une petite étape que vous pouvez sauter si l’effet ne vous convient pas. C’est une astuce pour rajouter une petite touche de lumière au bouton.

Sélectionnez l’outil de forme personnalisée, et choisissez le losange comme forme. Tracez un gros losange par dessus le bouton, et placez le de telle sorte que la diagonale partage à peu près le bouton en deux parts égales.

Img 08 - Créer un bouton web 2.0 avec Photoshop

Vous allez ensuite sélectionner le bouton (pour pouvoir appliquer notre losange uniquement sur notre bouton). Pour ce faire, cliquez sur le masque vectoriel du bouton en maintenant Ctrl (voir sur image). Votre bouton est ainsi sélectionné.

Tout en faisant bien attention que ce soit le calque du losange qui est sélectionné, cliquez sur le bouton d’ajout de masque de fusion ( ou Calque > Masque de fusion > Faire apparaître la sélection).

Img 09 - Créer un bouton web 2.0 avec Photoshop

Le losange n’est ainsi visible que sur le bouton. Nous allons changer les paramètres du calque afin d’avoir l’effet souhaité. Passer le calque en mode : Incrustation et baissez l’opacité à 25%. Passez la couleur du losange en une couleur assez claire (#ececec). Nous avons maintenant notre petit effet de reflet sur le bouton.

Img 10 - Créer un bouton web 2.0 avec Photoshop

Ajouter un texte

Avec l’outil texte, écrivez « Se connecter ». Choisissez votre police et la couleur #2c2c2c (ne pas prendre un noir, vous allez comprendre pourquoi en lisant la suite).

Nous allons ensuite centrer notre texte par rapport au bouton. Pour cela, cliquez sur les 2 calques (le texte et le bouton) en maintenant Ctrl. Vérifiez que vous avez sélectionné l’outil de déplacement, puis cliquez sur « Aligner les centres dans le sens vertical » et « Aligner les centres dans le sens horizontal ». Notre texte est maintenant centré verticalement et horizontalement par rapport au bouton.

Img 11 - Créer un bouton web 2.0 avec PhotoshopCe qui nous donne :

Img 12 - Créer un bouton web 2.0 avec Photoshop

Sélectionnez ensuite le calque de texte pour lui appliquer à lui aussi un style (bouton fx en bas de la fenêtre calque).

Nous allons ajouter une ombre portée en mode de fusion : Incrustation, couleur : #ffffff, opacité : 75%, angle : 90°, distance : 1px; taille : 0px.

Img 13 - Créer un bouton web 2.0 avec Photoshop

Puis nous rajoutons une ombre interne en mode : normal, couleur : #000000, opacité : 100%, angle : 120°, distance : 1px, taille: 0px. (Attention : si vous avez personnalisé vos couleurs jusqu’ici il vous faudra certainement baisser l’opacité et mettre le mode de fusion en incrustation. N’hésitez pas à jouer avec lez effets afin de trouver celui qui vous convient le mieux.).

Img 14 - Créer un bouton web 2.0 avec Photoshop

Déplacez le calque de texte entre le losange et le bouton afin que le reflet s’applique aussi sur le texte. Et voilà ! Nous avons notre petit effet de texte incrusté.

Img 15 - Créer un bouton web 2.0 avec Photoshop

Le petit plus

Si vous avez un fond plus foncé que le bouton, vous pouvez ajouter un autre effet de style sur le calque du bouton comme suit : lueur externe en mode de fusion : normal (ou produit), opacité : 60%, couleur : #000000, taille : 5px.

Img 16 - Créer un bouton web 2.0 avec Photoshop

Img 17 - Créer un bouton web 2.0 avec Photoshop

Vous pouvez aussi donner un petit effet de brillance sur le bouton. Pour ce faire, rajoutez aussi une lueur externe mais avec ces réglages : mode de fusion : Incrustation, opacité : 75%, couleur : #ffffff, taille : 5px. Modifiez en passant les réglages du contour pour le foncer encore plus de telle sorte que la lueur blanche ne le « mange » pas.

Img 18 - Créer un bouton web 2.0 avec Photoshop

Img 19 - Créer un bouton web 2.0 avec Photoshop

Img 20 - Créer un bouton web 2.0 avec PhotoshopEt une petite variante de couleur :

Img 21 - Créer un bouton web 2.0 avec Photoshop

Si vous avez trouver cet article utile, n’hésitez pas à le partager sur Facebook !

Posté par : Marion le 28/05/2012
Design, Tutos
Tags : , ,

2 commentaires

  • Lemaire dit :

    Super tutoriel. Je voulais un petit tuto sur comment faire un bouton photoshop et je tombe sur ce site, bonne pioche.

  • Poster un commentaire

    Vous voulez donner votre avis ?
    Laissez un commentaire !

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *