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 cette leçon, je vais vous montrer comment vous pouvez faire un simple, mais en même temps beau, Download-button dans le style Web 2.0 moderne et tout aimé. Télécharger - à titre d'exemple, vous pouvez utiliser cette méthode pour n'importe quoi, même pour le menu sur le site. Donc, au point.

1. Créez un nouveau document ou ouvrez un modèle de disposition pour la page Web, si vous souhaitez créer un menu de ces boutons. J'ai créé un document d'une taille de 400x110px , uniquement pour le bouton.

2. Ensuite, prenez l' outil Rectangle arrondi (U) pour créer la forme du bouton.

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

Dans les paramètres, définissez le rayon pour lisser les coins de 10-15px , 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

Maintenant, créez un formulaire sur la toile, la couleur de la forme n'a plus d'importance.

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

3. Maintenant, définissez les styles de calque pour notre forme. Accédez aux propriétés des options de fusion (double-cliquez sur le calque à côté du nom dans la palette des calques ou via 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 à une 3D, comme ceci:

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

4. Maintenant, il est temps d'ajouter un bel effet brillant à notre futur bouton. Créez une sélection sous la forme de notre bouton, vous pouvez le faire en maintenant la touche Ctrl enfoncée en cliquant 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, allez dans Sélectionner> Modifier> Contrat et entrez 5 dans la fenêtre qui apparaît. Voici comment 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 du blanc au transparent du haut en bas. Voici donc:

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

Ensuite, nous devons faire une courbe en utilisant l'outil Plume, faire une courbe directement sur la sélection en insérant le bas du dégradé blanc du bouton et l'effacer. Voici ce que j'ai:

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

J'ai également utilisé une grande brosse douce pour enlever certains des bords (ramollissement), de sorte qu'ils ont l'air beaucoup mieux.

5. Maintenant, ajoutez le texte à notre bouton. Nous prenons l' outil de type horizontal (T) et écrivons le texte désiré.

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

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

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

Voici à quoi cela ressemble:

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

En conclusion, j'ai ajouté une réflexion et un équipement 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