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

Créer un bouton de style Web 2.0 dans Photoshop

Dans cette leçon, je vais vous montrer comment créer un bouton de téléchargement simple, mais magnifique, dans un style Web 2.0 moderne et apprécié. Télécharger - à titre d'exemple, vous pouvez utiliser cette méthode pour n'importe quoi, même pour un menu sur un 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 d'une taille de 400x110px , uniquement pour un bouton.

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

Créer un bouton de style Web 2.0 dans Photoshop

Définissez le rayon dans les paramètres de lissage des angles 10-15px . Vous pouvez choisir d'autres valeurs, en fonction de la taille du bouton.

Créer un bouton de style 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 de style Web 2.0 dans Photoshop

3. Définissez maintenant 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 de style Web 2.0 dans Photoshop

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

Vous pouvez utiliser la couleur de votre choix, mais le bouton doit être volumineux.

Créer un bouton de style Web 2.0 dans Photoshop

4. Il est maintenant temps d'ajouter un bel effet brillant à notre futur bouton. Créons une sélection sous la forme de notre bouton. Pour ce faire, maintenez la touche Ctrl enfoncée et cliquez sur l'icône du calque dans la palette des calques. 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 de style 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. Comme ceci:

Créer un bouton de style Web 2.0 dans Photoshop

Ensuite, nous devons créer une courbe à l'aide de l'outil Plume, créer une courbe directement au-dessus de la sélection, y placer le bas du dégradé blanc du bouton et la supprimer. Voici ce que j'ai eu:

Créer un bouton de style 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 le texte à notre bouton. Prenez l' outil de type horizontal (T) et écrivez le texte que vous voulez.

Créer un bouton de style Web 2.0 dans Photoshop

Pour le texte du haut, j'ai utilisé la police Black Italic, 24 points, Sharp, #fff , pour le bas - Semibold Italic, 12 points, Sharp, #fff et j'ai ajouté une ombre dans les propriétés des options de fusion :

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

Voici à quoi ça ressemble:

Créer un bouton de style Web 2.0 dans Photoshop

En conclusion, j'ai ajouté de la réflexion et de l'équipement pour la beauté. Si vous le souhaitez, vous pouvez le télécharger ici.

Créer un bouton de style Web 2.0 dans Photoshop

Et la version rouge :)

Créer un bouton de style Web 2.0 dans Photoshop