Comment dessiner un bouton 3D dans Photoshop. Dessiner un bouton dans l'éditeur graphique Inkscape

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 parler d'une petite chose aussi importante qu'un bouton, ou plutôt de la façon dont un bouton est créé dans Photoshop.

Un bouton peut avoir différents objectifs et applications, par exemple pour un site Web ou une interface logicielle. Un bouton pour un site Web ou une interface, si vous suivez toutes les règles, devrait avoir 3 à 4 états. Pourquoi en demander trois ou quatre dépend de la correspondance de certains états de boutons et de la nécessité d'un quatrième état.

Aujourd'hui, tous les états des boutons ne sont pas utilisés partout, mais ce n'est pas tout à fait correct. Tous les états sont conçus pour permettre à l'utilisateur de naviguer facilement dans l'interface. En termes simples, un bouton lors de toute action de l'utilisateur montre ce qui se passe et indique l'action correspondante.
Il n’est pas difficile de développer un bouton dans Photoshop, définissons quand même ce qu’est un bouton.

Bouton est un élément de contrôle qui réagit à une action particulière de l'utilisateur.

Regardons ces quatre états :

1. État statique est l'état du bouton dans lequel l'utilisateur n'effectue aucune action avec celui-ci.
2. Conseils est l'état du bouton lorsque l'utilisateur a passé le curseur de la souris dessus.
3. Pressage est l'état du bouton lorsque l'utilisateur a cliqué dessus.
4. Actif– c'est l'état du bouton dans lequel il est mis en surbrillance et montre à l'utilisateur où il se trouve (généralement ceci est utilisé pour que l'utilisateur comprenne son emplacement, par exemple, sur quelle page du site il se trouve).

Nous avons compris ce qu'est un bouton et quels sont ses états. Commençons par créer un bouton dans Photoshop, ou plutôt un bouton et ses quatre états.

Nous ouvrons Photoshop, créons un nouveau document avec les dimensions dont nous avons besoin, il est conseillé de remplir l'arrière-plan avec la couleur de notre interface pour laquelle nous le créons, ceci est fait afin de voir clairement à quoi il ressemblera au travail. Et nous commençons à créer un bouton dans Photoshop. Prenons l'outil rectangle aux bords arrondis et créons la forme de notre futur bouton.

Avec l'aide style de calque remplissez la forme du bouton avec un dégradé linéaire, pour cela nous allons Calques > Style de calque > Superposition de dégradé ou double-cliquez sur le calque avec la forme du bouton.

Créons du volume et de l'ombre pour notre bouton en copiant notre calque. Pour cela faites glisser notre calque avec le bouton sur le pictogramme (icône) créer un nouveau calque, ou rendez notre calque avec le bouton actif puis allez dans calque > dupliquer le calque. Faisons cette action deux fois. Ensuite, nommons le bouton des calques, le volume, l'ombre. Ensuite, faites un clic droit sur le calque d'ombre et effacez le style de calque, puis faites de même avec le calque de volume. Changez ensuite la couleur du calque de volume. Et déplacez les calques vers le bas à l'aide de l'outil se déplacer (V).

Pour rendre le bouton plus volumineux, créons une petite lueur et un contour, nous le ferons via une lueur intérieure dans un style de calque. Définissons la couleur de la lueur.

Finalisons maintenant le calque d'ombre. Allons-y calque > pixelliser. Réduisez l'opacité à 13%. Ensuite, appliquez le filtre de flou gaussien, avec les paramètres indiqués dans la capture d'écran ci-dessous.

Le bouton dans Photoshop est presque prêt, il ne reste plus qu'à ajouter une légende au bouton, en savoir plus sur l'utilisation du texte dans l'article ; Pour ce faire, prenons un outil texte horizontal Choisissons la police souhaitée et écrivons l'inscription dont nous avons besoin.

Nous allons maintenant rendre le texte déprimé, et également créer un surlignage et un contour sur les bords de l'inscription, nous ferons tout cela à travers des styles de calque.

Le bouton est dessiné dans Photoshop. Le résultat final peut être vu ci-dessus, nous allons maintenant créer les états restants pour notre bouton.

Tout d'abord, enfermons le bouton créé dans un groupe de calques et appelons l'état statique du groupe. Pour ce faire, appuyez sur le bouton Changement et sélectionnez tous les calques sauf l'arrière-plan, puis cliquez sur Ctrl+G et renommez le groupe. Dupliquons les groupes pour les états restants du bouton, pour cela nous allons calques > dupliquer le groupe et donnez le nom de l’état du bouton. Organisons les groupes ci-dessous dans l'ordre : pour ce faire, sélectionnez l'outil. se déplacer (V) sélectionnez le groupe et appuyez sur la flèche vers le bas du clavier.

Modifions maintenant chaque groupe dans l'état dont nous avons besoin. La première chose que nous allons changer est le groupe d'orientation. Pour ce faire, dans le groupe de calques nommé survol, sélectionnez le calque du bouton et modifiez le style du calque. Dans celui-ci, nous modifierons uniquement la superposition de dégradé et la rendrons plus claire.

Ensuite, modifions l'état du bouton lorsqu'il est enfoncé. Pour ce bouton, nous modifierons la superposition de dégradé comme dans l'état précédent, nous devons également cocher la case d'inversion, et nous réduirons le volume grâce à quoi nous aurons l'impression que lorsque vous appuyez sur le bouton, vous appuyez dessus. Pour réduire le volume, nous devrons sélectionner les calques de volume et d'ombre, car notre ombre deviendra également plus petite, et en utilisant l'outil se déplacer (V) utilisez la flèche du clavier pour les déplacer vers le haut.

Et enfin, rendons le bouton actif. Pour ce faire, vous devez changer la couleur de la superposition de dégradé comme le bouton de survol, et également supprimer l'ombre et le volume comme le bouton de clic. Nous savons déjà comment faire cela, je dirai simplement qu'il faut donner au bouton actif un dégradé d'une couleur différente pour qu'il soit visible sur le fond des autres boutons. Vous pouvez bien sûr aussi changer la couleur de notre inscription, mais je ne le ferai pas.

Ça y est, notre bouton a été créé dans Photoshop, je pense que la leçon est assez claire, si vous avez des questions, écrivez dans les commentaires, j'essaierai d'y répondre si possible. N'oubliez pas de vous inscrire à la newsletter pour être les premiers informés des nouveaux articles. Vous pouvez également lire une leçon sur la création de réseaux sociaux.

Commençons. Vous devez d’abord dessiner ce bouton. Et pas seulement celle-ci, mais aussi toutes les options qui seront utilisées sur le site. À savoir, la vue du bouton dans son état normal, la vue lors du survol de la souris et la vue lors du clic sur le bouton avec le bouton gauche de la souris.

Créez un nouveau document. La taille n'est pas si importante ici, l'essentiel est qu'elle convienne à trois options pour notre bouton.

Créez maintenant un groupe de calques en cliquant sur l'icône du dossier dans la palette des calques et nommez-le bouton(comme un bouton).

Nous travaillerons dans ce groupe, parce que... structurer correctement vos calques est toujours utile. Sélectionnez maintenant un outil Outil Rectangle Arrondi et définissez le rayon du coin sur 5px dans les paramètres et la taille fixe du formulaire sur 200x45px.

Cliquez n'importe où dans le document pour créer la base du bouton.

Ensuite, double-cliquez sur le calque de forme et accédez à la fenêtre d'édition de style. Ou vas-y simplement Calque> Style de calque> Options de fusion . Ajoutez les styles suivants :

Voici ce que vous auriez dû recevoir :

Ajoutez maintenant du texte. Ce tutoriel utilise le fameux Calibres 16pts blanc. Et appliquez le style Ombre portéeà cette couche.

La première option est prête. Créons maintenant une variante de bouton qui apparaîtra lorsque nous passerons la souris dessus. Vous vous souvenez de la façon dont nous avons créé un groupe de calques au début de la leçon ? Faites-le glisser vers l'icône du nouveau calque et un groupe en double apparaîtra. Renommez-le en flotter(comme pointer la souris).

Travaillons avec ce groupe de calques. Ouvrez-le et double-cliquez sur le calque avec la base du bouton. La fenêtre d'édition du style de calque s'ouvrira. Ajouter du style Superposition de couleurs.

Cliquez sur le groupe de calques flotter, sélectionnez l'outil Déplacement et, sans utiliser la souris, utilisez les touches de déplacement (ou simplement les touches fléchées) pour déplacer le groupe vers le bas, comme sur la figure. L'essentiel est que les images soient adjacentes les unes aux autres.

Prêt. Comme à l'étape précédente, créez un groupe de calques en double flotter et appelle-la actif(aimez, cliquez). Cliquez sur le calque de base du bouton et supprimez le style Superposition de couleurs et changer de style Superposition de dégradé comme sur la photo :

Déplacez également l'image de ce groupe de calques vers le bas, mais en dessous de l'image du groupe flotter.

La première étape est donc terminée. Nous avons créé trois options de boutons et sommes prêts à passer à une sauvegarde appropriée.

Enregistrer une image

Rendez le calque d'arrière-plan invisible en cliquant sur l'icône en forme d'œil à côté du calque. Sur un groupe de calques actif dans la palette des calques, cliquez sur Ctrl+Maj+Alt+E pour créer un nouveau calque qui inclura toutes les parties visibles de l'image (dans notre cas, ce sont les boutons). Accédez ensuite à cette couche. Après cela, à l'aide de n'importe quel outil de sélection, créez une zone de sélection autour de l'image, comme dans l'image :

Cliquez Ctrl+C pour copier l'image et créer un nouveau document :

Veuillez noter que le document est créé avec des dimensions qui incluent toutes les parties visibles de l'image copiée. Après avoir créé l'image, cliquez sur Ctrl+V pour insérer nos boutons. Rendre le calque d'arrière-plan invisible et c'est parti Enregistrer pour le Web. Enregistrez le fichier sous le nom boutons.png.

Nous avons donc sauvegardé nos boutons. En conséquence, nous avons obtenu ce qu'on appelle un "sprite". Qu'est-ce qu'un sprite ? Il s'agit d'une grande image qui comprend toutes les petites images utilisées dans la mise en page. Cette image est utilisée comme arrière-plan d'un bloc spécifique avec des dimensions spécifiées. La seule différence avec les images ordinaires utilisées comme arrière-plan est que le sprite a un positionnement clair par rapport aux coordonnées XY. Plus de détails dans la prochaine partie de la leçon.

Disposition d'un bouton à l'aide de styles CSS

Ouvrez votre HTML-déposer. Tout d'abord, créons un lien :

Appuyez-moi !

Voici ce qui se passe :

A ( display: block; /*Dire au navigateur d'afficher le lien sous forme d'élément de bloc*/ width:202px; /*Définir la largeur du bloc*/ height:47px; /*Définir la hauteur du bloc*/ text -indent: -9999px; /*Retrait de la première ligne*/ background-position: left top /*Aligner l'arrière-plan sur le coin supérieur gauche (X) (Y)*/ background-repeat: no-repeat; Ne « multipliez » pas l’image*/ background-image : url(buttons.png); /*Sprite*/ )

Faites attention à la valeur du paramètre retrait de texte. Une si grande indentation a été faite pour que le texte lui-même ne soit pas visible, mais le lien était là. Le texte est laissé aux robots de recherche, pour ainsi dire, pour obtenir un effet SEO)). Voici ce que nous obtenons :

Nous devons maintenant indiquer à notre lien comment se comporter lorsqu'il est survolé et cliqué. Des pseudo-classes sont utilisées pour cela :flotter Et :actif. Pour cette étape vous devrez vous équiper d’une calculatrice. Je vais vous expliquer pourquoi : puisque nous avons une image, pour en substituer une certaine partie comme arrière-plan d'un bloc avec un lien, nous devons indiquer le nombre exact de pixels dont nous allons décaler l'image. Regardez la photo :

Nous avons créé un bouton d'une hauteur de 45px. Après avoir appliqué le style Accident vasculaire cérébral, selon les paramètres, nous avons ajouté 1px de chaque côté du bouton. Au total, il s’avère que la hauteur du bouton est devenue 47px. Si nous tenons compte du fait que le décalage initial de l'arrière-plan est de 0, alors lorsque nous passons la souris sur le bouton, nous devons déplacer l'arrière-plan de 47 pixels vers le haut, c'est-à-dire substituer en valeur Oui, qui est responsable du déplacement vertical du paramètre position d'arrière-plan-47px. La même chose s'applique au clic sur un bouton, sauf que nous le déplaçons non pas de 47px, mais de 47px+47px=94px.

A: survol (position d'arrière-plan : gauche -47px ; ) a: actif (position d'arrière-plan : gauche -94px ; )

C'est ça! L’avantage de l’utilisation de sprites est que la taille (poids) d’un sprite est généralement bien plus petite que la taille (poids) totale des images individuelles. Mais il y a aussi un point négatif : la préparation d'un sprite prend plus de temps. C'est à vous de décider.

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 « ».

Salutations, amis ! Aujourd'hui, nous ferons beau bouton pour un site Web dans Photoshop. La leçon est assez complexe, mais elle aborde en même temps de nombreux aspects du travail d'un concepteur de sites Web, ce qui signifie que vous pouvez créer des boutons et des icônes de haute qualité pour vos sites sans trop de difficultés. Permettez-moi de vous rappeler qu'il y a déjà eu des leçons similaires, et maintenant nous abordons ce sujet et envisageons d'autres méthodes.

Le voici, le même bouton brillant que nous obtiendrons au final :

Maintenant, ouvrez Photoshop et préparez-vous à partir !

Beau bouton pour le site

Créez un nouveau document de taille 800x500px.

Vous devez d’abord définir la forme du futur bouton. C'est ce que nous ferons. Je dirai tout de suite que dans cette leçon je parlerai d'une manière assez complexe de créer des formulaires. Si vous ne souhaitez pas travailler avec l'outil Plume, ou si c'est toujours difficile pour vous, passez directement au chapitre 2, un moyen plus simple y sera présenté.

Eh bien, le chapitre 1 est destiné à ceux qui veulent apprendre quelque chose de nouveau.

Chapitre 1. Créer une forme de bouton à l'aide de l'outil Plume

Pour l’avenir, discutons des avantages de la méthode utilisant l’outil Plume. Tout d’abord, la flexibilité dans la création du formulaire. Vous pouvez « sculpter » n’importe quoi. Naturellement, des outils comme l'outil Rectangle (rectangle) ne vous permettent pas de faire cela, vous obtiendrez donc des boutons très standards.

1. Alors, assez de bavardages. Commençons. Prenez l'outil Plume et créez une forme comme celle-ci :

2. La forme de notre bouton s'est avérée très tordue et approximative. Nous allons maintenant aborder un sujet très important : travailler avec des guides. Les guides aident grandement dans le travail du concepteur. Ils sont pratiques pour mesurer des distances. Maintenant, vous comprendrez tout vous-même. Pour commencer, il est préférable de remplir le fond avec une couleur autre que le blanc. Que ce soit gris (#d9d9d9). Prenez l'outil Pot de peinture et accédez au calque d'arrière-plan, puis remplissez-le avec la couleur sélectionnée :

3. Très bien, définissons maintenant les guides, puis alignons la forme du bouton avec eux. Pour définir un guide, accédez au menu Affichage -> Nouveau guide. Cochez la case Vertical et saisissez une valeur de 200px :

Comme vous pouvez le voir, le guide est apparu à une position à 200 pixels du bord gauche du canevas. Si vous appuyez maintenant sur la combinaison de touches Ctrl+H, le guide disparaîtra. En appuyant à nouveau sur cette combinaison, le guide reviendra.

5. Définissez un autre guide sur Vertical 600px :

6. Vous aurez besoin de 4 guides supplémentaires dans les positions Vertical 160 et 640px, ainsi que Horizontal 150 et 350px. Cela devrait ressembler à ceci :

7. Il est temps de niveler la forme. Pour ce faire, utilisez l'outil de sélection directe :

Et puis, à partir de la grille, travaillez avec le formulaire. S'il n'y a pas assez de guides, n'hésitez pas à les ajouter. Des guides peuvent également être ajoutés à partir de la règle (appelée avec Ctrl+R). Pour ce faire, appuyez sur la ligne de la règle et, pour ainsi dire, « en retirez » les guides. Pendant que vous travaillez, pour plus de commodité, utilisez la mise à l'échelle et zoomez sur le canevas (Ctrl + molette de la souris).

Donc, vous devriez obtenir quelque chose comme ceci pour un futur beau bouton :

Comme vous pouvez le constater, j'ai dû ajouter quelques guides supplémentaires. Le formulaire est prêt, vous pouvez continuer.

Chapitre 2. Façonner un bouton avec des moyens simples.

8. Comme promis, je vais maintenant vous expliquer comment créer une forme de bouton en seulement 20 secondes. Sélectionnez l'outil Rectangle arrondi :

Définissez le rayon de biseau sur 90 px :

Ça y est, le formulaire est prêt :)

Chapitre 3. Bouton brillant

9. Passons maintenant à la création des effets pour le bouton. Peu importe la manière dont vous avez créé la base du bouton (formulaire), le principe est le même. Commençons par ajouter du texte au bouton. Créez un nouveau calque (Maj+Ctrl+N) et écrivez n'importe quel texte :

Donnez au texte une couleur plus foncée que le bouton lui-même. D'ailleurs, pour la forme j'ai utilisé la couleur #3e7bab, pour le bouton #183e5b.

10. Faites une copie du calque de forme (Ctrl+J). Changez la couleur en blanc, appuyez sur Ctrl+T (Free Warp) et réduisez la forme comme ceci :

11. Réduisez l'opacité du calque à 35 % :

Comme vous l'avez probablement deviné, nous venons de créer un point fort pour notre magnifique bouton.

12. Créez un masque de calque pour la surbrillance :

13. Prenez maintenant un pinceau noir doux de 400 px :

Utilisez ce pinceau pour parcourir le bas du point culminant. Cela devrait ressembler à ceci :

14. Créez une copie de la surbrillance et sur le masque de calque, « essuyez » avec un pinceau noir tout l'espace à l'intérieur de la surbrillance, ne laissant que la partie supérieure. Mode de fusion Lumière douce (Lumière douce) et réglez l'opacité à 100 % :

15. Créez un nouveau calque, prenez un pinceau blanc doux d'un diamètre de 8 pixels et dessinez une bande au-dessus du point culminant (pour rendre la bande parfaitement droite, maintenez la touche Maj enfoncée) :

16. Créez un masque pour ce calque et effacez les bords de la bande :

17. Dupliquez le calque avec la bande et appliquez Filtre (Filtre) -> Flou (Flou) -> Flou gaussien (Gaussien), rayon 4,6 px :

18. Appuyez sur Ctrl+clic sur la vignette du calque avec le premier surbrillance, une sélection apparaîtra. Sur le calque avec la bande, appuyez sur Supprimer, puis accédez au calque avec le flou qui vient d'être appliqué et appuyez également sur Supprimer :

Le but de cette opération est de se débarrasser des parties inutiles de la bande qui grimpent sur d'autres éléments (d'ailleurs, vous pouvez simplement effacer les parties inutiles avec une gomme, mais l'utilisation de la sélection est plus précise).

19. Nous faisons la même chose pour le contour de la forme. Ctrl+clic sur le contour principal du bouton, puis Ctrl+Maj+I pour inverser la sélection, et appuyez sur Supprimer sur les deux calques avec la bande. Maintenant, le bouton devrait ressembler à ceci :

20. Les calques avec des lignes peuvent maintenant être combinés (Ctrl+E) et régler l'opacité à 80 % pour donner un reflet naturel.

21. Nous continuons à travailler avec l'éblouissement et la lumière. Créez un nouveau calque et utilisez un pinceau blanc doux pour peindre un endroit comme celui-ci :

22. L'opération désormais familière consistant à sélectionner le contour du bouton (Ctrl + clic sur la forme du bouton dans le panneau des calques), puis à inverser Shift+Ctrl+I et Suppr. Mode de fusion Lumière douce, opacité 70 % :

23. Copiez le calque de texte, placez-le sous le calque principal, définissez la couleur un peu plus claire que le bouton (j'ai # 79afdb) et déplacez ce calque de 1 px vers le bas. On obtient l'effet de gaufrage :

24. À l'aide de l'outil Plume, créez des reflets des deux côtés du bouton et réduisez leur opacité à 10-20 % :

25. Ce bouton m'a semblé trop haut, j'ai donc sélectionné tous les calques sauf le texte, appuyé sur Ctrl+T et réduit la hauteur du bouton :

26. Vous pouvez ajouter un autre petit surlignage en bas. Vous savez déjà comment procéder. Maintenant, le bouton ressemble à ceci :

27. Nous avons presque terminé. Reste à ajouter quelques effets. Faisons une réflexion. Copiez tous les calques (sélectionnez-les et appuyez sur Ctrl+J). Cliquez avec le bouton droit sur l'un des calques copiés et sélectionnez Convertir en objet intelligent. Après cela, allez dans Édition -> Transformation -> Retourner verticalement. Réduisez l'opacité à 52 % :

Utilisez maintenant un masque de calque pour effacer la partie inférieure du reflet :

28. Bon, le bouton est maintenant vraiment beau :) Il ne reste plus qu'à faire l'ombre. Créez un calque au-dessus de l'arrière-plan et en dessous de tous les autres, et avec un pinceau dur, peignez une ligne noire :

29. Appliquez un flou gaussien d'un rayon de 8 px, opacité du calque 46 px. Modifiez l'ombre jusqu'à ce que vous en soyez satisfait :

30. En fait, c'est tout, le bouton brillant professionnel est prêt. Vous pouvez maintenant supprimer l'arrière-plan, modifier la taille selon les besoins du site (Image -> Taille de l'image) et l'utiliser pour votre plus grand plaisir et celui de vos utilisateurs.

La leçon s'est avérée très longue, mais j'espère que vous avez appris beaucoup de nouvelles choses, et si vous avez suivi toutes les étapes vous-même, vous pouvez désormais facilement créer n'importe quel beau bouton pour votre site Web.