This page has been robot translated, sorry for typos if any. Original content here.

Créer un bouton dans le style du Web 2.0 dans Photoshop

Dans ce didacticiel, je vais vous montrer comment créer un bouton de téléchargement simple, mais magnifique, dans le style moderne et très apprécié du Web 2.0. Télécharger - à titre d'exemple, vous pouvez utiliser cette méthode pour tout, même pour le menu sur le site. Donc, au point.

1. Créez un nouveau document ou ouvrez une mise en page pour une page Web si vous souhaitez créer un menu contenant ces boutons. J'ai créé un document 400x110px , juste pour le bouton.

2. Ensuite, utilisez l'outil Rectangle arrondi (U) pour créer une forme pour le bouton.

Créer un bouton dans le style du Web 2.0 dans Photoshop

Dans les paramètres, nous définirons le rayon de lissage des angles de 10 à 15 pixels , vous pouvez choisir d'autres valeurs, en fonction de la taille du bouton.

Créer un bouton dans le style du Web 2.0 dans Photoshop

Créez maintenant un formulaire sur la toile, la couleur du formulaire n’a plus d’importance.

Créer un bouton dans le style du Web 2.0 dans Photoshop

3. Nous allons maintenant définir les styles de calque pour notre forme. Accédez aux propriétés des options de fusion (double-cliquez sur le calque en regard du nom dans la palette des calques ou dans le menu Calque> Style de calque ..> Options de fusion ) et définissez les valeurs comme indiqué dans les captures d'écran:

Ombre intérieure:
Créer un bouton dans le style du Web 2.0 dans Photoshop

Superposition de dégradé:
Créer un bouton dans le style du Web 2.0 dans Photoshop

Vous pouvez utiliser n'importe quelle couleur, mais le bouton devrait ressembler à un volume, comme ceci:

Créer un bouton dans le style du Web 2.0 dans Photoshop

4. Il est maintenant temps d'ajouter un bel effet brillant à notre futur bouton. Créez une sélection sous la forme de notre bouton. Pour ce faire, maintenez la touche Ctrl enfoncée en cliquant sur l'icône de la couche dans la palette des couches. Ensuite, réduisez-le d'environ 5 pixels de tous les côtés. Pour ce faire, sélectionnez Sélection> Modifier> Contrat et entrez la valeur 5 dans la fenêtre qui s’ouvre. Voici à quoi cela devrait ressembler:

Créer un bouton dans le style du Web 2.0 dans Photoshop

Créez maintenant un nouveau calque et remplissez notre sélection de dégradés allant du blanc au transparent du haut en bas. La voici:

Créer un bouton dans le style du Web 2.0 dans Photoshop

Ensuite, nous devons créer une courbe à l'aide de l'outil Plume, tracer une courbe directement au-dessus de la sélection, y placer le bas du dégradé blanc du bouton et la supprimer. C'est ce qui s'est passé avec moi:

Créer un bouton dans le style du Web 2.0 dans Photoshop

J'ai également utilisé une grosse brosse douce pour enlever une partie des bords (adoucir), ils ont donc l'air beaucoup mieux.

5. Ajoutez maintenant du texte à notre bouton. Prenez l' outil de type horizontal (T) et écrivez le texte souhaité.

Créer un bouton dans le style du Web 2.0 dans Photoshop

Pour le texte supérieur, j'ai utilisé la police Black Italic, 24 points, Sharp, #fff , pour le texte inférieur - Semibold Italic, 12 points, Sharp, #fff et j'ai ajouté une ombre dans les propriétés Options de fusion :

Ombre portée:
Créer un bouton dans le style du Web 2.0 dans Photoshop

Voici à quoi ça ressemble:

Créer un bouton dans le style du Web 2.0 dans Photoshop

En conclusion, j'ai ajouté une réflexion et un engrenage pour la beauté. Si vous voulez, vous pouvez le télécharger ici.

Créer un bouton dans le style du Web 2.0 dans Photoshop

Et la version rouge :)

Créer un bouton dans le style du Web 2.0 dans Photoshop