Share
Dans cette astuce, nous allons créer un ensemble de boutons Web à l'aide des effets 3D dans Adobe Illustrator. Pourquoi? Parce que de cette manière, nous pouvons oublier d’utiliser différents pinceaux et effets pour ajouter des rehauts et des ombres et nous pouvons y parvenir en une seule étape, en tirant parti des réglages de lumière et des formes de biseau disponibles. Commençons!
Commençons par la forme de base de ce bouton Web. Utilisez l’outil Rectangle arrondi, puis cliquez n’importe où sur votre planche d’art pour ouvrir la fenêtre Rectangle arrondi. Là, entrez les chiffres et vous obtiendrez la forme dont nous avons besoin. Sélectionnez gris clair comme couleur de remplissage.
Une fois ce rectangle sélectionné, accédez au menu Effet> 3D> Extruder et biseauter. Dans le côté droit de l'image ci-dessous, vous pouvez voir les paramètres par défaut, seules les coordonnées de rotation sont modifiées. J'aimerais utiliser les formes Bevel plus souvent, mais parfois, elles ne génèrent tout simplement pas les résultats souhaités. Dans ce cas, si vous choisissez Tall-Round comme forme de biseau, le changement est plus qu'évident. Vous obtiendrez le bord arrondi et vous n'aurez pas à vous soucier des reflets et des ombres plus tard.
Si vous augmentez la valeur de la hauteur, le bord arrondi devient plus épais.
Dans la fenêtre Options d'extrusion et de biseautage, appuyez sur le bouton Plus d'options pour ouvrir toute la boîte de dialogue et vous concentrer sur la partie inférieure. Si vous souhaitez surligner le coin supérieur gauche, déplacez la lumière vers la gauche, comme indiqué ci-dessous ou vers le bas si vous souhaitez surligner le coin inférieur droit..
Enfin, voici les paramètres que j'ai utilisés. Changez les coordonnées, choisissez Tall-Round comme forme de biseau, augmentez la hauteur de 4 à 6 pt et déplacez légèrement la lumière vers la gauche..
Lorsque le bouton 3D est sélectionné, allez au menu Objet et choisissez Développer l’apparence. Utilisez maintenant l'outil de sélection directe (A) pour sélectionner le rectangle arrondi intérieur et le remplir avec le dégradé linéaire indiqué. Définissez l'angle sur 90 degrés. Avec ce rectangle sélectionné, double-cliquez sur Contenu (car cette forme est dans un groupe) dans le panneau Apparence et ainsi vous pourrez voir les attributs existants. Ensuite, allez dans le menu Effets> Styliser et appliquez l’effet Inner Glow à l’aide des paramètres indiqués..
Après avoir sélectionné le remplissage existant dans le panneau d'apparence, cliquez sur l'icône Dupliquer l'élément sélectionné en bas et vous obtiendrez un second remplissage. Changez le dégradé en blanc et noir et indiquez un angle de 50 degrés. Changez le mode de fusion à l’écran (le noir devient transparent) et réduisez l’opacité à 75%.
Dupliquez ce second remplissage comme vous l'avez fait précédemment et conservez le même dégradé. Réglez l'angle sur 140 degrés et augmentez la valeur d'opacité de 75% à 90%..
Maintenant, sélectionnez l’outil de sélection directe (A) le rectangle intérieur et, dans le menu Objet, choisissez Copier et coller avant. Dans le panneau Calques, faites glisser le nouveau rectangle en dehors du groupe de boutons, car nous ne le voulons pas. Supprimez les attributs existants et donnez-lui un trait noir. Lorsque ce rectangle est sélectionné, accédez à Objet> Chemin> Ajouter des points d'ancrage deux fois pour ajouter des points supplémentaires. Ensuite, prenez l'outil Ciseaux (C) et cliquez sur les deux points indiqués pour couper la forme puis supprimez le chemin à partir du bas..
Maintenant, vous avez besoin d'un pinceau d'art. J'ai expliqué comment procéder dans cette astuce à l'étape 9. La seule différence est que, cette fois-ci, je suis parti d'une ellipse de 100 x 3 px au lieu de 200 x 5 px. Après l'avoir fait glisser dans le panneau Formes pour l'enregistrer en tant que nouvelle forme, utilisez-le pour tracer le chemin du haut. Réglez le poids sur 2 pt.
Copiez et collez à nouveau devant le rectangle intérieur et faites-le glisser en dehors du groupe de boutons, devant lui. Supprimez les apparences existantes et collez-les en noir (1). Maintenant, copiez et collez devant le rectangle noir et modifiez la couleur de remplissage afin de les différencier. Déplacez un peu le rectangle rouge en appuyant deux fois sur la touche de navigation vers le haut de votre clavier (2). L’incrément de clavier doit être réglé sur 1 px (menu Edition> Préférences> Général).
Sélectionnez les deux formes et choisissez Soustraire de la zone de forme> Développer dans le panneau Pathfinder. La forme mince résultante doit avoir un remplissage noir (3). Réglez le mode de fusion sur Multiplier et réduisez l'opacité à 20% (4)..
Ensuite, à l'aide de l'outil Plume (P), tracez un chemin sur le bouton, comme dans l'image ci-dessous. Copiez et collez de nouveau le rectangle intérieur devant vous, supprimez les apparences existantes et donnez-lui un trait noir. Sélectionnez ce rectangle ainsi que le tracé bleu et cliquez sur Diviser dans le panneau Pathfinder. Dans le menu Objet, choisissez Dissocier, puis supprimez la forme du bas..
Remplissez la forme obtenue avec un dégradé linéaire du blanc au noir et réglez l’angle sur moins 90 degrés. Changez le mode de fusion en écran (le noir devient transparent) et réduisez l'opacité à 30%.
Continuons avec le texte. Avec le Type Tool (T), tapez "ESSAYEZ MAINTENANT" en utilisant une police appelée Anja Eliane, taille 35 points. Vous pouvez trouver la police ici. Dans le menu Objet, choisissez Développer, puis remplissez le texte avec le dégradé linéaire indiqué. Réglez l'angle sur moins 45 degrés. Ensuite, allez dans le menu Effets> Styliser et appliquez l’effet Ombre portée en utilisant les paramètres ci-dessous..
Maintenant, tapez "ESSAI DE 30 JOURS" avec Arial Bold, taille 15 pt, puis sélectionnez Développer dans le menu Objet. Remplissez le texte de blanc puis appliquez à nouveau l'effet Ombre portée en utilisant les paramètres indiqués.
Dans le panneau Symboles (menu Fenêtre> Symboles), ouvrez le menu Bibliothèques de symboles et dans la catégorie Flèches, recherchez la flèche 24. Faites-la glisser dans votre zone de travail et appuyez sur l'icône Rompre le lien en symbole situé au bas du panneau. Dissociez-le deux fois, puis allez dans le menu Effets> Styliser> Coins arrondis et appliquez un rayon de 3 px (1). Remplissez la flèche avec le dégradé linéaire indiqué puis donnez-lui un trait de 0,5 pt en utilisant la couleur indiquée (2).
Déplacez la flèche sur le bouton puis allez dans le menu Effets> Styliser et appliquez l'effet Ombre portée.
Lorsque cette flèche est sélectionnée, choisissez Développer l’apparence dans le menu Objet afin de développer les deux effets appliqués, puis accédez au menu Objet> Transformation> Échelle, choisissez 80%, puis cliquez sur Copier. Vous obtiendrez la plus petite flèche. Disposez-les comme dans l'image et assurez-vous qu'ils sont alignés horizontalement. Sélectionnez les deux puis allez dans le menu Objet> Transformer> Refléter. Choisissez Vertical puis appuyez sur Copier. Disposez les deux nouvelles flèches sur le côté droit et le bouton est prêt.
Il ne manque qu'une ombre sous le bouton. Prenez l’outil Ellipse (L) et tracez une ellipse plate en bas, puis sélectionnez le noir comme couleur de remplissage (1). Envoyez cette ellipse derrière le bouton, puis sélectionnez Objet> Chemin> Décalage et appliquez un décalage de moins de 7 px. Vous obtiendrez une ellipse plus petite au milieu (2). Définissez l'opacité de la plus grande ellipse sur 0%, sélectionnez-les tous les deux et accédez au menu Objet> Fusion> Options de fusion. Là, sélectionnez 25 étapes spécifiées et retournez au menu Objet> Mélange> Créer (3). Réduisez l'opacité du groupe de fondu résultant à 75% et, si vous placez le bouton sur un arrière-plan particulier, changez également le mode de fusion en mode Multiplier..
Voici le dernier bouton web:
À partir de ce bouton, vous pouvez obtenir de nombreuses autres variations de couleur. Tout ce que vous avez à faire est de faire une copie du bouton et de changer quelques petites choses. Dans les images ci-dessous, vous pouvez voir trois exemples: bleu, vert et violet. Toutes les formes visibles dans l'image ci-dessous n'ont pas été modifiées. Gardez-les comme ils sont. Ceux qui sont cachés signifient qu'ils seront modifiés et nous prendrons chacun individuellement.
Commençons par le rectangle arrondi. Sélectionnez-le avec l'outil de sélection directe (A) et jetez un coup d'œil au panneau d'apparence. Modifiez le premier dégradé avec le nouveau dégradé affiché et conservez tous les autres attributs tels quels. Faites la même chose pour les boutons Web verts et violets.
Pour le texte, changez simplement la butée centrale du dégradé de orange clair à bleu clair, respectivement vert clair et violet clair. "30 JOURS TRIAL" reste le même.
Maintenant, sélectionnez la flèche et modifiez le fond en dégradé puis la couleur du trait comme indiqué. Les effets restent les mêmes.
Enfin, comme à l’étape 10, sélectionnez Développer l’apparence, puis redimensionnez la flèche pour obtenir la plus petite. Refléter les deux et vous avez terminé.
Voici l’image finale et voici les quatre boutons Web prêts à être utilisés. Si vous voulez les sauvegarder pour le Web, consultez un autre tutoriel où j'explique comment faire cela en détail..
Accentsconagua