Un bouton style Web 2.0 avec Photoshop

Par EricFreelance - Le
Adobe Photoshop
Un bouton style Web 2.0 avec Photoshop

Ce tutorial Photoshop vous montre comment créer un simplement un bouton style Web 2.0 avec un état de rollover.

Le bouton de ce tutoriel a été inspiré de la campagne "Monitor interface web". En suivant ce tutoriel, vous allez apprendre à créer un bouton très similaires.

Voici une capture du résultat final que vous devriez obtenir à la fin de ce tutoriel.

Mise en place du document

Nous allons commencer par créer le document. Pour cela, créer un nouveau document de 250px de large et 100px de hauteur. Cela nous permettra de réaliser à la fois l'état de repos et l'état de survol.

Mise en place du document

Placez un repère horizontal à 50px pour délimiter la motié du document. Assurez-vous que les repères soient affichés (Ctrl + R). Puis cliquez sur la règle horizontal et faites glisser (en maintenant le bouton de la souris appuyé) et relachez lorsque vous avez atteint la position.

Placez un repère horizontal à 50px

Création de la forme

Activez l'outil Rectangle arrondi et réglez le rayon à 3px.

Création de la forme

Outil rectangle arrondi

Dessinez la forme sur la motié supérieure du document. La couleur n'a pas d'importance pour le moment. Les dimensions doivent être de 250 x 50 px. Afficher les Informations (F8) pour vérifier pendant le traçage de la forme.

Dessinez la forme

Double-cliquez sur le calque (à droite du nom) pour afficher les Options de fusion.

Options de fusion

Ajoutez une incrustation en dégradé. Cliquez sur Inscrustation en dégradé. Cliquez sur le bande de dégradé pour modifier les couleurs.

Incrustation en dégradé

Cliquez sur l'Etape de dégradé de gauche puis sur Changer la couleur de l'étape de dégradé.

Editeur de dégradé

Et saisissez le code couleur hexadécimal : #618926.

Etape de dégradé

La seconde étape.

Editeur de dégradé

Saisissez la valeur #98ba40

Etape de dégradé

Déplacez le curseur Milieu de couleur sur 35%. Si il n'apparaît pas, cliquez sur l'une des étapes

Editeur de dégradé

Ajoutez une Ombre interne d'une valeur hexadécimal #c6d684. Réglez l'Opacité à 100%, la Distance et la Taille à 2px.

Etape de dégradé

Ajoutez un Contour d'une Epaisseur de 1px, position Intérieur et valeur hexadécimal #618926 pour la couleur.

Etape de dégradé

Voici ce que vous devriez obtenir.

Etape de dégradé

Ajout d'un dégradé radial

Créez un nouveau calque au dessus de la forme puis mettez la couleur de premier plan à la valeur hexadécimale #b8cf69. Effectuez une sélection correspondant à notre forme Ctrl + clic sur le calque de forme.

Etape de dégradé

Activez l'outil Dégradé (G) avec l'option Dégradé radial. Comme nous avons déjà appliqué une couleur de premier plan, cliquez dans la Barre d'option pour afficher la liste des dégradés et choisissez Premier plan - Transparent

Editeru de dégradé.

Assurez-vous que vous êtes toujours sur votre calque et que votre sélection est bien active. Cliquez et glissez comme sur la figure ci-dessous.

Appliquez le dégradé

Ajustez l'Opacité du calque avec le dégradé à 80%

Etape de dégradé

Créez un Groupe et faites glisser les deux calques dans le groupe.

Etape de dégradé

Dupliquez le groupe pour créer le bouton au survol.

Etape de dégradé

Puis avec l'outil Déplacement (V) déplacez les éléments sur la partie basse du document.

Etape de dégradé

Double cliquez sur le style de calque pour modifier les couleurs pour le survol du bouton.

  • Ombre interne : #839dbf
  • Incrustation en dégradé : #245293 à #0f2557
  • Contour : #5c737c

Pour modifier la couleur du dégradé, appliquez simplement un Style de calque Incrustation de couleur #5c737c


Etape de dégradé

Ajout du texte

Pour cela, nous allons utiliser une famille de polices simple : Arial en style Gras. N'hésitez pas à utiliser ce que vous voulez, mais pour les techniques suivantes, une police grasse est préférable

Activez l'outil Texte (T), choissisez la Famille de la police Arial, Style de police en Gras, Taille de la police 1px, Anti-aliasing Léger, et la Couleur au blanc (#FFFFFF). Tapez le texte que vous souhaitez avoir sur le bouton.

Etape de dégradé

Etape de dégradé

Double-cliquez sur le calque de texte que vous venez de créer pour ouvrir la boîte de dialogue Styles de calques. Réglez le Mode de fusion à la Normal, la Couleur à vert foncé (#618926), Opacité à 100%, décochez la case Utiliser l'éclairage global, Angle à -60%, et enfin la Taille et la Dimension à 1px.

Etape de dégradé

Effectuez un Ctrl + clic sur le calque de forme du bouton du haut pour faire une sélection. Assurez-vous que le calque de texte est le calque actif. Choisissez Calque > Aligner les calques sur la sélection > Centres dans le sens horizontal puis Centres dans le sens vertical.

Etape de dégradé

Dupliquer le calque de texte pour le second état du bouton

Avec le calque de texte encore actif, cliquez-droit dessus et sélectionnez Dupliquer le calque... (ou Alt + flèche bas si vous avez l'outil Déplacement actif).

Effectuez un Ctrl + clic sur le calque de forme du bouton du bas pour faire une sélection. Assurez-vous que le calque de texte du bas est le calque actif. Choisissez Calque > Aligner les calques sur la sélection > Centres dans le sens horizontal puis Centres dans le sens vertical.

Changer le style de calque

Double-cliquez sur le calque de texte que vous venez de créer pour ouvrir la boîte de dialogue Styles de calques. Définir la couleur à bleu foncé (# 0f2557) pour l'Ombre portée.

Etape de dégradé

Sauvegardez maintenant votre document Fichier > Enregistrer pour le web et les périphériques... en format PNG sous le nom cliquez-sur-le-bouton.png.

Intégration dans une page HTML

Ouvrez votre édituer HTML/CSS favori. Insérer simplement un paragraphe avec un lein tel que dans l'exemple ci-dessous :

<p class="button"><a href="#">Cliquez sur le bouton</a></p>

et pour la partie Css :

 .button { display:block; width: 250px; height: 50px; text-indent: -9999px; } 

Source : How to Create a Slick and Clean Button in Photoshop