Dans ce tutoriel, nous allons créer des Web Button. C'est très simple et très efficace tutoriel, vous n'avez besoin que Adobe Photoshop pour créer cet effet. J'espère que vous apprécierez ce didacticiel.

Comment créer bouton pour le Web dans Photoshop

Étape # 1

Ouvrir Photoshop et créer un nouveau document, le mien est 550px × 125px avec un fond blanc.

Étape # 2

Remplir la couleur dans la couche de fond, la couleur le mien est # 3A3A3A.

Étape # 3

Sélectionnez l'outil Rectangle arrondi et bouton de création, mine de Radius est 7px, width: 156px et height: 38px..

Étape # 4

Maintenant nous allons appliquer un effet

Gradient Overlay

Styling le double-cliquez sur le bouton sur la vignette du calque bouton dans le panneau Infos pratiques pour ouvrir les Styles de calques boîte de dialogue, nous allons appliquer un effet de gradient vertical de votre bouton. Puis cliquez sur le dégradé de couleurs sur la droite de l'option de dégradé pour ouvrir les couleurs Éditeur de dégradé.

Double-cliquez sur left-color-stop et entrez la valeur de la couleur # 9E4C45, puis double-cliquez sur right-color-stop et entrez la valeur de couleur EA8484 #.

Drop Shadow

Appliquez ensuite le style de calque Ombre portée. Garder l'angle à 120 °, que de changer les valeurs de l'opacité, distance et la taille. Je choisis de régler l'opacité à 23%, La distance à 1px et la taille à 9px.

Étape # 5

Sélectionnez Horizontal Type Tool et tapez du texte sur le devant.

Nous allons appliquer un effet pour le texte.

Incrustation couleur

Double-cliquez sur la vignette du calque de texte dans le panneau Infos pratiques, d'ouvrir les Styles de calques boîte de dialogue. Nous allons d'abord appliquer de superposition de couleurs, je choisis la couleur # 0D0D0E

Drop Shadow

Enfin nous allons appliquer l'ombre portée, d'abord modifier l'option de mélange à Normal. Changer la couleur de l'ombre de celle par défaut à # FFFFFF. Garder l'angle à 120 °, que de changer les valeurs de l'opacité, distance et la taille. Je choisis de régler l'opacité à 32% et à distance à 1px et la taille à 1px.

Final Preview

Faites nous savoir comment que ce tutoriel peut être plus mieux? Si vous avez trouvé un tutoriel photoshop autres que vous voulez partager avec nous, n'hésitez pas à nous le faire savoir en laissant tomber dans un commentaire.

Si vous souhaitez recevoir plus d'inspiration de nous, s'il vous plaît inscrivez-vous à notre flux par RSS ou par e-mail.

Classé dans: Freebies, Photoshop, Tutoriels par admin