Comment créer de beaux boutons dans Photoshop. Dessiner un bouton « Photoshop World »
La leçon suivante concerne la création boutons pour le site en graphique éditeurboiteux . La leçon ci-dessous vous montrera à quel point il est facile de dessiner de vos propres mains un bouton de haute qualité pour votre site Web à l'aide d'outils simples.
Dans les leçons suivantes, nous apprendrons comment dessiner des boutons plus intéressants, et commençons maintenant :
Étape 1.Créez une nouvelle image d'une largeur de 250 px et d'une hauteur de 100 px
Étape 2.Sélectionnez l'image « Sélectionner - Tout (Ctrl+A) »
Étape 3.Arrondir les bords de la sélection « Sélection - Rectangle rond » (paramètres par défaut)
Étape 4.
Étape 5.Puisque notre sélection est active, remplissez-la de couleur (choisissez selon votre goût). J'ai choisi le vert (#009100 ). Faites simplement glisser la couleur de la palette sur la zone de travail (sur la sélection) sans relâcher le bouton gauche de la souris. Nous avons maintenant un rectangle vert aux bords arrondis sur fond blanc. Continuons :
Étape 6.Nous continuons à travailler avec la sélection active. Réduisons-le de deux pixels (2 px). Pour ce faire, cliquez sur le menu supérieur "Sélectionner - Zoom arrière" et entrez le paramètre souhaité - c'est 2px. Et cliquez sur « OK »
Étape 7Créez un nouveau calque transparent « Calque-Créer un calque » (Maj+Ctrl+N)
Étape 8Remplissez la sélection active avec un remplissage dégradé. La couleur du premier plan est un peu plus claire que notre couleur de base. Pour moi, il s'est avéré être vert clair avec le paramètre#43c343.Sélectionnez l'outil Dégradé avec l'option De base à transparent et appliquez l'outil du haut de notre image vers le bas.
Cela devrait ressembler à l'image :
Étape 9Nous continuons à travailler avec la sélection active. Créons une nouvelle sélection rectangulaire en mode soustraction
Étape 10Créez un nouveau calque transparent « Calque-Créer un calque » (Maj+Ctrl+N)
Étape 11Nous continuons à travailler avec la sélection active. Remplissez la sélection active avec un remplissage dégradé. La couleur de premier plan est le blanc. Outil Dégradé avec l'option De base à Transparent. Appliquez l'outil du haut de notre sélection vers le bas. Cela devrait ressembler à ceci si vous faites tout correctement :
Étape 12Sélection - Supprimer (Maj+Ctrl+A)
Étape 13Ajoutons une inscription à notre bouton à l'aide de l'outil "Texte" et écrivons le mot dont nous avons besoin. Dans mon cas c'est "Télécharger"
C'est tout pour la leçon sur dessiner un bouton pour un site Web dans Gimpfini. Voici mon résultat final. Ici, je viens d'ajouter un fond pour l'inscription :
En suivant les étapes de ce didacticiel, vous apprendrez à créer un bouton d'alimentation vectoriel dans Adobe Illustrator. Vous apprendrez d’abord à personnaliser la grille, en créant un simple rectangle qui servira d’arrière-plan. Ensuite, en utilisant des techniques de base de forme vectorielle, créez le cercle et le contour qui constitueront le bouton lui-même. Enfin, en tirant pleinement parti du panneau Apparence, vous ajouterez de la couleur, des ombres et des reflets, ajoutant ainsi de la profondeur à vos objets.
Étape 1.
Cliquez Ctrl+N pour créer un nouveau document. Sélectionner Pixels dans le menu déroulant Unités (Unités), ensemble la largeur (largeur) et la hauteur (hauteur) du document sont de 600 pixels, puis cliquez sur le bouton De plus (avancé), sélectionner Mode couleur : RVB, Effets raster : Écran (72ppi), assurez-vous que la case n'est pas cochée Aligner de nouveaux objets sur la grille de pixels, presse D'ACCORD.
Configurons la grille : sélectionnez dans le menu Affichage > Afficher la grille (Affichage > Afficher la grille (Ctrl + ") et encore Affichage > Aligner sur la grille (Affichage > Aligner sur la grille (Maj + Ctrl + "). Vous aurez besoin d'une grille avec une cellule de 5 pixels, vous pouvez la configurer en allant dans le menu Édition > Préférences > Guides et grille (Édition > Préférences > Guides > Grille). Entrez la valeur 5 dans la case Quadrillage tous les et mets-en 1 dans la boîte Division interne en (Subdivisions). Ne soyez pas intimidé par ces préparations de grille - cela facilitera votre travail et vous pourrez toujours désactiver la visibilité de la grille en cliquant sur (Ctrl+"). Vous pouvez également sélectionner dans le menu Fenêtre > Informations (Fenêtre > Infos (Ctrl + F8), pour afficher des informations sur les unités de mesure du document. Assurez-vous que les pixels sont là. Sinon, vous pouvez les installer via Menu > Paramètres > Unités > Général (Édition > Préférences > Unités > Général). Cela simplifiera grandement la suite des travaux.
Étape 2.
Prendre Outil Rectangle (M). Panneau latéral Barre d'outils supprimez la couleur du trait et sélectionnez une couleur de remplissage R=50 V=50 B=50. Maintenant, faites un clic gauche une fois sur le canevas pour ouvrir la fenêtre des paramètres. Entrez la valeur 610 dans les champs Largeur et Hauteur et appuyez sur D'ACCORD. Au final tu devrais obtenir un carré 610 x 610 pixels. Ensuite, ouvrez le panneau Aligner - Fenêtre > Aligner (Maj + F7). Dans la fenêtre déroulante du panneau, sélectionnez Aligner sur le plan de travail. (Aligner sur le plan de travail), puis cliquez sur les icônes Centre d'alignement horizontal et centre d'alignement vertical. En conséquence, votre forme sombre devrait couvrir l’intégralité du plan de travail, comme indiqué dans l’image.
Étape 3.
Sur le panneau Barre d'outils sélectionner la couleur de remplissage R=70 V=175 B=15 et passer à Outil Ellipse (L). Créer un cercle d'un diamètre 110 pixels et centrez-le de la même manière que nous l'avons fait avec le carré.
Étape 4.
Avec le cercle vert en surbrillance, allez dans le menu Objet > Chemin > Créer un chemin de décalage (Objet > Chemin > Chemin de décalage). Dans la fenêtre qui apparaît, saisissez -40px et cliquez sur OK. Sélectionnez le contour obtenu et accédez au panneau Apparence - Fenêtre > Apparence. Supprimez la couleur de remplissage, définissez la couleur du trait sur blanc et augmentez l'épaisseur du trait. (Poids de course) jusqu'à 6 points.
Étape 5.
Sélectionnez le contour blanc et allez dans le menu Objet > Chemin > Ajouter des points d'ancrage (Objet > Chemin > Ajouter des points d'ancrage). Alors prends Outil de sélection directe (A), sélectionnez les points supérieurs (marqués sur la deuxième image) et appuyez simplement sur la touche Supprimer sur le clavier. Sélectionnez le chemin restant, ouvrez le panneau Trait – Fenêtre > Trait et cliquez sur l'icône. En conséquence, tout devrait ressembler à la troisième image.
Prise suivante Outil Plume (P) et créez un contour vertical d'une hauteur de 15 pixels, puis placez-le comme indiqué sur la quatrième image. Définissez la couleur du trait sur blanc pour ce chemin, épaisseur (Poids) 6 points, cliquez sur l'icône Extrémités arrondies (Round Cap).
Étape 6.
Sélectionnez les deux contours blancs et allez dans le menu Objet> Chemin> Convertir le trait en courbes (Objet> Chemin> Contour du contour). Sélectionnez les deux formes créées et appuyez sur le raccourci clavier Ctrl + 8 (ou via le menu Objet > Chemin composé > Créer - Objet > Chemin composé > Créer).
Étape 7
Sélectionnez le cercle vert, allez dans le panneau Apparence et cliquez sur l'icône Ajouter un nouveau remplissage en bas du panneau. Sélectionnez ce nouveau remplissage, ouvrez le panneau Dégradé - Fenêtre > Dégradé) et cliquez sur la vignette du dégradé pour ajouter un dégradé linéaire par défaut du noir au blanc. Sur le panneau Réglez le dégradé sur Angle : 90 degrés. Sélectionnez ensuite le curseur de couleur dégradé droit et définissez la couleur sur R=0 V=95 B=0, Définir la couleur du curseur gauche R=130 V=225 B=75. Ensuite, avec le deuxième remplissage sélectionné, allez dans le menu Objet > Chemin > Créer un chemin parallèle (Objet > Chemin > Chemin décalé), entrez dans la fenêtre qui apparaît Décalez -8 pixels et cliquez sur OK.
Étape 8
Encore une fois, avec le cercle vert sélectionné, sur le panneau Apparence ajoutez un troisième remplissage en cliquant sur l'icône Ajoutez un nouveau remplissage (Ajouter un nouveau remplissage). Sélectionnez également un dégradé par défaut pour ce remplissage, puis définissez Angle : 90 degrés, Voir l'image pour les couleurs dégradées. Cliquez ensuite sur la flèche à gauche de l'onglet avec un nouveau remplissage, puis cliquez sur l'inscription Opacité et dans la fenêtre qui apparaît, définissez le mode de fusion Superposer (Superposition) et réduire l'opacité (Opacité) à 60%. Puis dans le menu, sélectionnez Objet> Chemin> Créer un chemin parallèle (Objet> Chemin> Chemin de décalage), définissez le décalage sur -4 pixels et cliquez sur OK.
Étape 9
Sélectionnez le cercle vert et ajoutez un quatrième remplissage. Sélectionnez-le et appliquez Dégradé - Outil Dégradé (G) : Type : Radial ; Voir l'image pour les couleurs dégradées. Ensuite, dans le menu, sélectionnez Objet > Chemin > Créer un chemin parallèle (Objet > Chemin > Chemin de décalage), Décalage (Décalage) -10 pixels. Ajouter ensuite depuis le menu Effet > Styliser > Éclat intérieur avec ces paramètres :
Mode de fusion : Chevauchement (superposition);
couleur R=0 V=0 B=0
Opacité : 30 % ;
Flou : 10 pixels
sélectionnez Bord
Étape 10
Maintenant, avec le cercle vert sélectionné, sur le panneau Apparence Sélectionnez le trait actuel et définissez sa couleur sur noir. Aller au panneau Stroke, réglez le poids sur 1 point, puis cliquez sur l'icône Aligner le trait à l'intérieur. Suivant sur le panneau Apparence : réduisez l'opacité du trait noir à 15 % et changez le mode de fusion en Lumière douce. Ensuite, allez dans le menu Objet > Chemin > Créer un chemin parallèle (Objet > Chemin > Décalage du chemin), Décalage (Offset) -10 pixels et cliquez sur OK.
Étape 11
Avec le cercle vert sélectionné, sur le panneau Apparence sélectionnez le trait actuel et dupliquez-le en cliquant sur l'icône Dupliquer la sélection objet (élément sélectionné en double)(marqué d'une flèche bleue sur l'image ci-dessous). Sélectionnez maintenant le trait que vous venez de créer, augmentez l'épaisseur (Poids) à 3 points et réduire l'Opacité (Opacité) à 10 %. Dupliquez ce trait de 3 points, puis augmentez le poids (Poids) du trait dupliqué à 5 points et définissez l'opacité (Opacité) à 5%.
Étape 12
Sélectionnez à nouveau le cercle vert. Ajouter un nouveau remplissage au panneau Apparence, puis réduisez son opacité à 50 % et changez le mode de fusion en Superposition. Ensuite, allez dans le menu Effet > Distorsion & Transformation > Transformation (Effet > Distorsion & Transformation > Transform) et définissez les paramètres suivants : Mise à l'échelle : - Horizontal (Scale - Horizontal) 30% ; Horizontal (Échelle - Verticale) 5 %
Déplacer : - Horizontal (Déplacement-Horizontal) 0 pixels ; Vertical (Déplacement-Vertical) 30 pixels.
Décochez les cases Réfléchissez X et Réfléchissez Y, aléatoire.
Ensuite, sélectionnez dans le menu Effet > Warp > Arch (Effets > Warp > Arch) et appliquez les paramètres suivants :
- sélectionnez Horizontale
- Courbure : -40%
Distorsion des sections
-Horizontale : 0%
- Verticale : 0%
Cliquez sur OK.
Étape 13
Sélectionnez le cercle vert, ajoutez un nouveau remplissage et définissez sa couleur R=30 V=30 B=30. Faites glisser ce remplissage tout en bas du panneau Apparence avec le remplissage sélectionné, allez dans le menu Objet > Chemin > Créer un chemin de décalage (Objet > Chemin > Chemin de décalage), ensemble Décalez 4 pixels, cliquez sur OK. Postuler ensuite Effet> Styliser> Ombre portée avec les paramètres suivants :
Mode de fusion : Lumière douce;
Opacité : 80 % ;
Décalage le long de l'axe X (X Offset) : 0 pixel ;
Décalage le long de l’axe Y (Y Offset) : 1 pixel ;
Flou : 0 pixel ;
Couleur : blanc.
Étape 14
Ensuite, avec le cercle vert sélectionné, ajoutez à nouveau un nouveau remplissage, faites-le glisser vers le bas dans le panneau. Apparence, ajoutez un dégradé linéaire, Angle : 90 degrés, Voir l'image pour les couleurs. Puis dans le menu, sélectionnez Objet > Chemin > Créer un chemin parallèle (Objet > Chemin > Décalage du chemin), Décalage (Décalage) 15 pixels, cliquez sur OK.
Ajouter via le menu Effet Flou Flou gaussien (Effet > Flou > Flou gaussien), Rayon (Radius) 10 pixels. Cliquez sur OK.
Étape 15
Encore une fois, avec le cercle vert sélectionné sur le panneau Apparence sélectionnez le remplissage inférieur et dupliquez-le en cliquant sur l'icône Créer une copie de l'objet sélectionné (Élément sélectionné en double). Ouvrir un effet existant pour ce remplissage Chemin parallèle (Offset Path) et réduisez le décalage (Offset) à 10 pixels, puis ouvrez l'effet de ce remplissage Flou gaussien et réduisez le rayon à 3 pixels. Cliquez sur OK.
Étape 16
Sélectionnez le cercle vert dans le panneau Apparence sélectionnez le vert et remplissez-le de couleur (R=70 V=175 B=15) et allez au menu Effet > Styliser > Éclat intérieur et définissez les paramètres suivants :
Mode de fusion : Chevauchement (superposition);
couleur noir
Flou : 5 pixels
sélectionnez Bord.
Cliquez sur OK.
Ajoutez un autre effet : Effet> Styliser> Lueur extérieure
Mode de fusion : Normal ;
couleur R=10 V=125 B=0
Opacité : 100 % ;
Flou : 2 pixels
Étape 17
Sélectionnez le chemin composé blanc et remplacez le remplissage actuel par Dégradé - Outil Dégradé (G) : Type : Radial du blanc au gris R=211 G=211 B=211, Angle : 0 degrés
Étape 18
Avec le chemin composé sélectionné, ajoutez un deuxième remplissage et définissez sa couleur R=100 V=205 B=45. Changez le mode de fusion en Multiplication, puis sélectionnez dans le menu Objet > Chemin > Créer un chemin parallèle (Objet > Chemin > Décalage du chemin), Décalage (Décalage) -2,5 pixels. Cliquez sur OK.
Étape 19
Ensuite, sélectionnez le chemin composé (s'il n'est pas sélectionné), dans le panneau Apparence sélectionnez le trait actuel, changez sa couleur en noir, réduisez-le Opacité à 15 % et cliquez sur l'icône Aligner le trait sur l'intérieur.. Retour au panneau Apparence et ajoutez un autre trait en cliquant sur l'icône Ajouter un nouveau trait (Ajouter un nouveau trait)(indiqué par une flèche bleue sur la figure). Sélectionnez ce nouveau trait et réduisez-le Opacité jusqu'à 25%, cliquez sur l'icône Alignez le trait vers l'extérieur.
Étape 20.
Sélectionnez le cercle avec le chemin composé et dupliquez-les en cliquant sur Ctrl + C > Ctrl + F. Sélectionnez maintenant ces copies et faites-les glisser de quelques pixels vers le bas, comme indiqué dans la deuxième image.
Étape 21
Sélectionnez le cercle du bouton copié et dans le panneau Apparence Sélectionnez le cinquième remplissage (en partant du bas) et remplacez les couleurs du dégradé par celles indiquées dans l'image (jaune et orange). Remplacez ensuite la couleur de remplissage verte par de l'orange (R=227 V=128 B=10). Sélectionnez ce remplissage orange et ouvrez son effet Lueur extérieure et modifiez les paramètres en : Mode de fusion : Normal ;
couleur R=239 G=65 B=54
Opacité : 100 % ;
Flou : 2 pixels.
Étape 22
Étape 23
J'espère que vous avez apprécié la leçon et que vous appliquerez ce que vous avez appris à vos futurs projets.
Niveau de difficulté : Moyen.
Durée : 1 heure.
Dans cette leçon, je vais vous apprendre à dessiner des boutons pour un joueur. Cette fois-ci - violet et rose, car le gris et le noir semblent parfois un peu ennuyeux. Les boutons ne sont pas difficiles à dessiner. Dans notre travail, nous utiliserons des effets tels que la lueur externe et le flou gaussien, ainsi que les outils Transformation et Transformation.
Étape 1
Ouvrez un nouveau document Web. Le cercle extérieur des boutons est translucide, le fond est donc important pour nous cette fois. Sélectionnez l'outil Rectangle (M), dessinez une forme de 720 x 170 px et remplissez-la de violet. Accédez à la palette Apparence et sélectionnez Ajouter un nouveau remplissage dans le menu secondaire. Pour ce nouveau remplissage, choisissez une couleur gris foncé (85% de noir). Ensuite, allez dans Effet> Simuler et appliquez l'effet Film Grain. Réglez l'opacité sur 70 % et l'arrière-plan est prêt.
Étape 2
Sélectionnez l'outil Ellipse (L) et dessinez un cercle de 83 x 83 px. Remplissez-le d'un dégradé linéaire et réglez l'angle sur 90 degrés. Ensuite, allez dans Effet> Flou> Flou gaussien et appliquez un rayon de 1,5 px. Pour rendre le cercle semi-transparent, définissez l'opacité sur 50 %.
Étape 3
Copiez le cercle, collez la copie devant et supprimez tout le motif. Copiez et collez le nouveau cercle (vert) pour en créer un autre (rouge). Avant de continuer, allez dans Édition> Préférences> Général et définissez l'incrément du clavier sur 0,5 px. Sélectionnez maintenant le cercle rouge et déplacez-le en appuyant deux fois sur la touche fléchée vers le bas. Sélectionnez les deux cercles et dans la palette Pathfinder, cliquez sur le bouton Supprimer d'un objet composite (Soustraire de la zone de forme)> Transformer (Agrandir).
Déplacez la forme obtenue en arrière et remplissez-la avec un dégradé radial du blanc au noir. Ensuite, allez dans Effet> Flou> Flou gaussien et appliquez un rayon de 1 px. Réglez le mode de fusion sur Écran (le noir deviendra transparent) et Opacité sur 60 %.
Étape 4
Avec le premier cercle sélectionné, accédez à Objet> Chemin> Décalage du chemin et définissez et appliquez un décalage de -8 px pour créer un cercle plus petit. Retirez toute la décoration et remplissez-la de violet. Allez dans Effet> Styliser et appliquez l'effet Outer Glow (les paramètres sont indiqués dans la figure). Une ombre apparaîtra autour du deuxième cercle.
Étape 5
Copiez et collez le deuxième cercle devant, laissez la couleur de remplissage et supprimez l'effet Outer Glow (dans la palette Apparence). Avec le nouveau cercle sélectionné, accédez à Objet> Chemin> Décalage du chemin. Définissez et appliquez un décalage de -7 px pour obtenir un cercle plus petit. Changez la couleur de remplissage en violet. Sélectionnez les deux cercles créés à cette étape, accédez à Objet> Fusion> Options de fusion, choisissez Définir les étapes sur 20. Puis revenez à Objet> Fusion et choisissez Créer.
Étape 6
Ensuite, ouvrez la palette Calques, sélectionnez le plus petit cercle violet dans le groupe Mélange. Copiez-le et collez-le devant, mais retirez-le du groupe car il n'y est pas nécessaire. Remplissez le nouveau cercle (rouge) avec un dégradé linéaire du blanc au noir et réglez l'angle sur 90 degrés. Réglez le mode de fusion sur Écran (le noir deviendra transparent) et l'opacité sur 40 %.
Étape 7
Copiez et collez le dernier cercle devant et donnez-lui un trait bleu. Copiez et collez ensuite le cercle bleu devant pour créer un cercle rouge et déplacez-le en appuyant cinq fois sur la touche fléchée vers le bas. Avec les deux cercles sélectionnés, dans la palette Pathfinder, cliquez sur le bouton Soustraire de la zone de forme > Développer. Remplissez la forme obtenue avec un dégradé radial du noir au gris. Ensuite, allez dans Effet> Flou> Flou gaussien et appliquez un rayon de 1,7 px. Réglez le mode de fusion sur Multiplier. Et appuyez deux ou trois fois sur la touche fléchée vers le bas pour déplacer un peu la forme.
Étape 8
Examinons ensuite les icônes sur les boutons. Pour créer une icône pour le bouton Lecture, activez l'outil Polygone, cliquez sur le document et entrez les valeurs comme indiqué pour créer un triangle. Faites-le pivoter de -90 degrés, accédez à Effet> Styliser> Coins arrondis et appliquez un rayon de 5 pixels. Pour créer une icône pour le bouton Arrêter, utilisez l'outil Rectangle (M) pour dessiner un carré de 20 x 20 px et appliquez à nouveau l'effet Coins arrondis. L'icône du bouton Pause est créée à partir de deux rectangles fins (4x22 pixels). Seulement cette fois, en appliquant l'effet Coins arrondis, choisissez un Rayon de 2 px.
Sélectionnez ensuite les trois icônes, sélectionnez Transformer l'apparence dans le menu Objet, puis Dissocier. Redimensionnez l'icône du bouton Lecture, effectuez plusieurs copies et combinez-la avec l'icône du bouton Pause pour créer des icônes pour les boutons Lire plus rapidement et Lire suivant (voir l'image ci-dessous). Une fois terminé, regroupez les formes qui les composent. Ensuite, allez dans Objet > Transformation > Miroir, sélectionnez Vertical et cliquez sur Copier. Et vous aurez des icônes prêtes à l'emploi pour les boutons Jouer plus lentement et Jouer précédent.
Étape 9
Remplissez l'icône du bouton Lecture avec du violet. Accédez à la palette Apparence et sélectionnez Ajouter un nouveau remplissage dans le menu secondaire. Pour le deuxième remplissage, sélectionnez la couleur comme sur l'image, puis ouvrez le menu Effet > Distorsion et Transformation > Transformer et dans le bloc Déplacer, définissez la valeur verticale sur 1,5 pixels. Faites de même avec le reste des icônes.
Étape 10
Revenons au bouton de l'étape 7. Regroupez toutes les formes qui le composent. Ensuite, allez dans Objet> Transformer> Déplacer. Définissez le champ Horizontal sur 100 pixels et cliquez sur Copier. Répétez cette action cinq fois (Ctrl + D). Il ne reste plus qu’à placer les icônes sur les boutons et le tour est joué.
Étape 11
Le fond des boutons roses est le même que celui des boutons violets. Vous pouvez simplement le copier et changer la couleur de remplissage (voir image ci-dessous).
Pour créer des boutons roses, remplacez simplement les nuances violettes par des roses. L'image ci-dessous montre les étapes de base et les couleurs nécessaires. Si la couleur ou le dégradé n’est pas spécifié, rien ne doit être modifié.
Modifiez également la couleur de remplissage des icônes (voir image ci-dessous). Répétez l'étape 10 et les icônes roses sont prêtes.
Étape 12
Si vous n'aimez pas les couleurs féminines, vous pouvez créer des boutons noirs. Commencez par l'arrière-plan et changez la couleur de remplissage...
Remplacez ensuite les nuances violettes des boutons par des nuances grises (voir image ci-dessous).
Changez ensuite la couleur des icônes, placez-les sur les boutons et le tour est joué.
Voilà le dessin terminé. Vous pouvez créer des boutons d'une couleur différente si vous le souhaitez. Il suffit de faire correspondre la couleur des boutons à la couleur du fond, puisque le grand cercle est translucide. Et si vous souhaitez modifier la taille des boutons, convertissez d'abord tous les effets.
Avez-vous des questions ou quelque chose à ajouter sur le sujet de l'article ?
Aujourd'hui, nous allons essayer d'apprendre à dessiner un bouton brillant comme celui-ci dans Inkscape. Alors que j'apprenais tout juste l'éditeur graphique Inkscape, c'était mon premier beau dessin que j'y dessinais. J'ai choisi le vert pour le bouton, mais vous pouvez choisir la couleur que vous préférez. Eh bien, dessinons un bouton ?
Dessiner un bouton dans Inkscape
Tout d'abord, dessinons un cercle qui servira de base au bouton. Je dessine un cercle avec les dimensions largeur et hauteur 900 x 900 pixels. Il est important que le cercle soit pair. Remplissez-le avec un dégradé radial, en positionnant le dégradé comme sur l'image. Le point central du dégradé sera à 10 % de gris et les deux points latéraux seront à 70 % de gris.
La deuxième étape à suivre est de dupliquer ( Ctrl+D) cercle déjà complété. Diminuer avec la touche ( < ) cercle intérieur aux valeurs de largeur et de hauteur 720 x 720 pixels et affichez-le verticalement. Si nécessaire, les cercles doivent être alignés horizontalement et verticalement.
Suivant dessiner un bouton et effectuez la même opération en dupliquant le cercle. Dupliquez le cercle intérieur et réduisez-le à sa taille 670 x 670 pixels. A l'aide d'un dégradé radial, je lui donne une couleur verte, allant du clair au plus foncé. Le point central du dégradé est la couleur #aaffaa, la couleur des points latéraux est #00aa00.
Vous devez maintenant ajouter du volume au bouton. Dupliquez-le à nouveau, mais cette fois le cercle vert intérieur et donnez la couleur 90% de gris. Nous aurons besoin de points d'ancrage pour le dégradé radial. Cliquez sur « Modifier » et dans la fenêtre cliquez une fois sur « Ajouter un point d'ancrage ».
Chaque point doit avoir sa propre couleur et sa propre transparence. Ainsi, le point central sera 100 % transparent, donnera aux points d'ancrage une couleur de 40 % de gris et définira également une transparence absolue, et les points latéraux n'auront aucune transparence et la couleur sera de 90 % de gris. On déplace les points d'ancrage, comme sur la figure, simplement en les faisant glisser avec la souris.
Dans la leçon « Dessiner un bouton dans Inkscape », il ne reste plus qu'à ajouter des surbrillances. Pour ce faire, vous devez dessiner un ovale, à peu près de la même forme que sur la photo. je l'ai en taille 380x190 pixels. Assurez-vous de l'aligner verticalement avec le cercle vert.
Lorsque l'ovale est prêt, vous devez le remplir de blanc à l'aide d'un dégradé linéaire. Le point inférieur est complètement transparent et le point supérieur a une valeur de transparence de 70 %.
Dessinons le deuxième point culminant, mais d'une manière légèrement différente. Créez un ovale ou dupliquez le précédent, abaissez-le, comme sur l'image. Ma taille 240x90 pixels. Il est conseillé d'aligner verticalement les deux ovales (points saillants) l'un avec l'autre.
Nous le peignons en blanc en utilisant un dégradé radial - le point central a une valeur de transparence de 40 % et les points latéraux sont complètement transparents.
Ça y est, le bouton brillant est prêt ! Désormais, dessiner un bouton aussi brillant ne me prend que quelques minutes, alors qu'avant cela prenait beaucoup plus de temps. J'espère que vous maîtriserez rapidement ces designs et pourrez expérimenter les couleurs et les formes des boutons. La leçon « Dessiner un bouton dans Inkscape » est terminée, et rendez-vous dans les leçons « » et « ».
Salut tout le monde. Tout d'abord, je veux vous raconter l'histoire de la création de ce bouton, puis le processus de création du bouton dans Photoshop.
D’où est venue l’idée ?
D'où vient-elle ? Il existe donc un si bon site appelé Yandex, je suis sûr que tout le monde le sait, ce site a une section Yandex.disk et un jour, quand je suis allé dans cette section, j'ai vu des boutons dans les tons jaune-orange, je dirai honnêtement que Je suis tombé amoureux de ces boutons et je les ai ici. L'idée de créer un tel bouton dans Photoshop m'est venue à l'esprit !
Ma surprise.
Il s'avère que ce bouton est fait uniquement sur CSS3 Je pensais que c'était juste une photo, mais c'est ça, je ne sais pas, ça peut paraître étrange à quelqu'un que j'aie été surpris, mais pour être honnête, je ne comprends pas CSS3à ce niveau c'est tellement basique. Nous avons donc écouté la nouvelle, passons maintenant à la leçon elle-même !
Étape 1. Créez un document.
Tout d’abord, créez un document. Choisissez les tailles selon votre goût J'ai réalisé 400x400 afin que la taille des images ne soit pas trop grande.
Étape 2 : Créer une forme de bouton
Pour ce faire, sélectionnez l'outil dans la barre d'outils rectangle avec arrondi coins.
Et définissez les paramètres suivants :
Ensuite, nous créons cette forme pour notre bouton :
Lueur intérieure :
Étape 3. Partie légère
Pour ce faire, nous prenons un outil rectangle arrondi avec ces paramètres :
Et on crée cette figure :
Maintenant, coupons l'excédent, pour ce faire, sélectionnez notre calque avec un fond blanc, faites un clic droit et sélectionnez rastériser le calque.
Après cela, rester sur notre calque et maintenir la touche enfoncée CTRL Cliquez sur le calque avec le fond de notre bouton :
Nous obtenons le bouton sélectionné, appuyez maintenant sur la combinaison de touches CTRL+MAJ+I(on obtient l'inversion de la sélection) puis la clé SUPPRIMER. Nous découpons tout correctement.
Alors maintenant faites une sélection sur notre forme blanche en maintenant CTRL + clic sur notre couche.
Ensuite, dans la barre d'outils, sélectionnez la couleur principale et attribuez-la comme ceci couleur : #fbdf76.
Maintenant, appuyez sur la combinaison ALT+Retour arrière et remplissez notre figure.
Et j'ai presque oublié que l'effet serait meilleur que celui de notre figurine nouvellement remplie en utilisant transformation gratuite réduire sur les côtés de 1 px. Et réduisez la transparence à 70% .
Résultat:
Étape 4. Effectuez les reflets et l'assombrissement.
1. Éclairage du bouton inférieur.
Prenez l'outil brosse.
Nous définissons les paramètres suivants :
Créez un nouveau calque et dessinez un pinceau en bas du bouton :
Nous avons coupé l'excédent comme nous l'avons fait ci-dessus, c'est-à-dire sélectionner le calque du bouton, l'inverser et le supprimer.
Rendre transparent 40%
.
2. Éclairage du bouton supérieur.
Faites la même chose, seule la couleur du pinceau sera comme ceci : #fdefaa. Mon résultat :
3. Assombrir le milieu.
Encore une fois, nous faisons la même chose, seulement nous devons le faire au milieu de la partie claire du bouton et maintenant nous n'avons plus besoin d'inverser ou de sélectionner quoi que ce soit, il suffit de ne pas dépasser les limites du bouton. Couleur du pinceau : #f9d659. Transparence 90%
.
On obtient :
Le bouton est prêt, mais sans ombres, il n'a pas l'air très joli, alors maintenant nous allons créer cette ombre !
Étape 5 : Création d'ombres.
Créer des ombres est un processus long et très laborieux, je vais donc essayer de l'expliquer plus clairement.
1. Ombre arrière
Et donc commençons. Créez un nouveau calque. Réinitialiser les couleurs d'une simple pression sur une touche D. Cliquez X si la couleur principale n'est pas le noir. Prenez l'outil Zone ovale.
Créez une forme comme celle-ci :
Remplissez-le avec une combinaison de touches ALT+Espace de cuisson.
Supprimer la sélection CTRL+D.
Appliquer un filtre Flou gaussien.
Ensuite on transforme notre ombre avec la combinaison CTRL+T.
Et puis à l'aide d'une zone rectangulaire, retirez la partie inférieure :
Comme vous l'avez remarqué, le bas de l'ombre s'est avéré, pour le moins, foutu. Pour ce faire, nous prenons un outil se brouiller et brouiller les coins.
2. Ombre inférieure.
Nous dupliquons notre bouton, c'est-à-dire sans ombres brillantes, etc., mais juste le bouton lui-même. Styles de compensation. Et déplacez le calque sous le calque de notre bouton lui-même.
Alors maintenant, changez la couleur en noir et pixellisez le calque. Déplacez ensuite la forme ci-dessous vers 1 pixel
Et flou par Gaussien.