Une interface conviviale, des graphismes bien dessinés, la bonne disposition des éléments sur la page - la moitié du succès du site auprès du visiteur. Dessiner des boutons pour un site Web est une partie petite mais importante du travail sur un projet en ligne.
Instructions
Étape 1
Essayez de dessiner un bouton rond. La méthode donnée ci-dessous est également universelle pour créer des logos et des avatars. Le dessiner n'est pas difficile, malgré le nombre d'actions que vous devez effectuer.
Étape 2
Ouvrez Adobe Photoshop. Créez un nouveau document en appuyant sur la combinaison "Ctrl + N". Paramètres d'image 300 * 300, résolution 72 ppp. L'arrière-plan et le mode de couleur par défaut sont respectivement le blanc et le RVB.
Étape 3
Il est préférable de dessiner avec des vecteurs, afin que lorsque le bouton est réduit, sa qualité ne se détériore pas. Sélectionnez l'outil Ovale, maintenez la touche Maj enfoncée et tracez un cercle à partir du centre.
Étape 4
Appliquez maintenant quelques effets au cercle résultant. Allez dans le menu "Calques" - "Style de calque" - "Options de fusion". Ici, vous devrez appliquer un dégradé.
Étape 5
Ensuite, ici, cochez la case à côté de "Embossing" pour donner au bouton le renflement nécessaire et définissez les paramètres suivants: style - gaufrage du contour, méthode - coupe douce, profondeur - 220%, taille - 1 pixel, adoucissement - 5 pixels, angle - 135® sans illumination globale, hauteur - 32, mode de surbrillance - normal avec 30% d'opacité, mode d'ombre - multiplié avec 25% d'opacité
Étape 6
Pour donner encore plus de volume, ici dans les paramètres de fusion, cochez la case "Ombre" et définissez les paramètres suivants: mode de fusion - multiplication, transparence - 40%, angle - 125o en utilisant l'illumination globale, décalage - 5 pixels, taille - 20 pixels.
Étape 7
Le résultat des actions effectuées sera une image telle qu'illustrée sur la figure.
Étape 8
Créez maintenant un nouveau calque, sélectionnez à nouveau "Ovale" et dessinez un cercle avec un rayon plus petit que la première forme. Ouvrez les "Options de fusion", cochez la case "Ombre intérieure" et définissez les paramètres: Mode de fusion - Lumière douce, Angle - 125o, Décalage - 0px, Rétrécissement - 45%, Taille - 21px.
Étape 9
Ensuite, ici dans les options de fusion, cochez "Superposition de dégradé" et créez un dégradé avec les paramètres comme sur l'image. Cliquez sur OK
Étape 10
Ensuite, définissez le style de fusion sur Radial, Échelle à 124%
Étape 11
Cochez maintenant la case "Trait" et définissez les paramètres suivants: taille - 5 pixels, position - extérieur, mode de fusion - normal, opacité - 100 %, type de trait - dégradé.
Étape 12
À la suite de ces actions, vous devriez obtenir quelque chose qui ressemble plus à un bouton. Vous pouvez rouvrir les options de fusion et les expérimenter.
Étape 13
Maintenant, nous devons ajouter les boutons de surbrillance pour que le bouton prenne une texture de verre. Pour ce faire, créez à nouveau un nouveau calque, sélectionnez l'outil Sélection ovale, créez un ovale au-dessus du bouton et remplissez-le de blanc à l'aide de l'outil Remplir. Maintenez la touche Ctrl enfoncée, cliquez sur le calque avec le cercle coloré, inversez la sélection ("Sélection" - "Inversion"). Appuyez maintenant sur Supprimer. L'ovale doit être coupé autour du périmètre du cercle.
Étape 14
Dans le panneau Calques, modifiez l'option Normal en Lumière douce, puis cliquez sur l'icône du masque vectoriel et sélectionnez l'outil Remplissage - Dégradé. Remplissez la surbrillance de bas en haut. Le bouton est presque prêt.
Étape 15
Vous pouvez ajouter une inscription au bouton. Vous pouvez également lui appliquer des effets de fusion, tels que l'éclat intérieur, extérieur, dégradé, etc. N'ayez pas peur d'expérimenter, plus vous utilisez d'imagination dans votre travail, plus vite vous maîtriserez à la fois l'éditeur lui-même et la conception Web.
