Share
Dans cette astuce, vous apprendrez à créer un bouton Web évolutif à l'aide du panneau Apparence et de la mise à l'échelle à 9 découpes d'Adobe Illustrator. Cette technique est particulièrement utile pour les concepteurs Web qui doivent utiliser le même bouton de style avec différentes longueurs de texte. Commençons!
Ce tutoriel vous montrera comment créer un bouton vectoriel évolutif à l'aide de la mise à l'échelle à 9 découpes dans Adobe Illustrator CS5. Dans l'exemple ci-dessous, vous verrez comment le bouton est mis à l'échelle avec et sans mise à l'échelle à 9 découpes. Vous remarquerez que la mise à l'échelle normale déplace tout le contenu de l'image du bouton. Avec 9-Slice, vous pouvez spécifier la manière dont l'image est mise à l'échelle pour créer des éléments Web réutilisables..
Créez un nouveau document RVB de n’importe quelle taille. Option + Cliquez sur la planche avec l'outil Rectangle (M) et entrez les dimensions du bouton. Étant donné que le bouton sera évolutif horizontalement, la largeur n'est pas importante. J'ai réglé mon rectangle à 200px par 60px.
Ouvrez le panneau d'apparence et sélectionnez FX> Styliser> Coins arrondis, définissez le rayon de l'angle sur 8 px, puis cliquez sur OK..
Ajoutez un remplissage en dégradé au bouton avec les couleurs suivantes. Si vous voulez choisir les vôtres, suivez le guide ci-dessous pour connaître la position et la nuance des couleurs. Vous remarquerez que les couleurs 2 et 3 sont très proches, ce qui est essentiel à l'aspect super brillant du dégradé.
Si votre bouton a une ligne, supprimez-la. Ajoutez un autre remplissage dans le panneau Apparence et placez-le sous le calque du dégradé. Avec les paramètres d’apparence, sélectionnez Fx> Chemin> Chemin de décalage, puis réglez le décalage sur 1 px..
Remplissez le deuxième calque de remplissage avec un dégradé dans les couleurs suivantes. Encore une fois, vous pouvez faire les couleurs de votre choix, mais n'oubliez pas de garder les nuances claires près du haut et les couleurs foncées en bas.
Ajoutez une ombre portée sous les deux surfaces du panneau d'apparence en accédant à Fx> Styliser> Ombre portée et en définissant l'opacité sur 60%, le décalage X sur 0px et le décalage Y sur 2px. Rendre le flou 3px
Zoomez sur le bouton pour voir les lignes que vous devez tracer au cours de cette étape. Une partie du chemin dans le côté droit du bouton, tracez deux lignes 1px l'une à côté de l'autre. Faites en sorte que le premier ait la même couleur que le haut du contour du dégradé et que la deuxième ligne ait la même couleur que le bas du dégradé. J'ai écrit les numéros de couleur dans l'image suivante pour référence.
Cette partie est destinée à Adobe Illustrator CS5 - Sélectionnez le bouton et les lignes et faites-le glisser dans la palette des symboles. Cliquez sur Activer la mise à l'échelle en 9 découpes (pour activer la mise à l'échelle horizontale) et sur Aligner sur la grille de pixels (pour que le bouton ne soit pas flou sur les sites Web). Ces deux paramètres vont rendre le bouton parfait pour une utilisation Web.
Lorsque vous créez le symbole, un écran similaire à l’image ci-dessous apparaît. Déplacez les lignes en pointillé pour délimiter les zones qui ne doivent pas être mises à l'échelle. J'ai placé les lignes en pointillé sur le côté de la zone sur laquelle je veux placer un symbole. Cela garantira que cela ne changera pas si je modifie la longueur du bouton. Double-cliquez sur la zone de travail pour revenir à l'image principale..
Mettez à l'échelle les boutons pour tester les zones que vous avez délimitées. Si vous devez apporter des modifications, double-cliquez sur le symbole pour revenir aux paramètres..
Ajoutez du texte et des symboles aux boutons et choisissez-en un auquel appliquer l'apparence. Vous pouvez ensuite appliquer l'apparence au reste des éléments lorsque vous avez terminé les réglages. Commencez avec un remplissage en dégradé. Celui-ci est un simple dégradé de sombre à clair. J'ai écrit les couleurs que j'ai utilisées dans l'image ci-dessous.
Ajoutez un remplissage blanc sous le calque dégradé dans le panneau Apparence et configurez-le pour qu'il se déplace 2px verticalement. Cliquez sur OK.
Ajoutez une lueur extérieure en accédant à l'option Fx> Stylize> Outer Glow. Réglez-le sur une tonalité claire des couleurs du bouton et sur le flou sur 1 pixel. Cela ajoutera une brume subtile à l'effet de calque et donnera au bouton un aspect légèrement brillant..
Ajoutez un trait en haut des paramètres d'apparence dans une tonalité foncée et non saturée de la couleur du bouton. Définir le trait à 0.5px.
Testez le style sur une variété de symboles et de boutons et enregistrez les deux styles dans la palette Styles graphiques. en sélectionnant l'objet avec le style et en cliquant sur le bouton Ajouter un style au bas des styles graphiques.
Voilà. Un bouton Web évolutif facile à utiliser et à réutiliser. Si vous souhaitez modifier les coins arrondis, vous pouvez revenir en arrière dans le symbole et changer l’apparence en basculant les coins arrondis sur invisible. Si vous souhaitez créer un nouveau bouton, faites glisser le symbole du bouton de la palette des symboles. sur la planche graphique et sur Contrôle Cliquez pour accéder aux options permettant de rompre le lien avec le symbole. A partir de là, le bouton ne changera pas les autres symboles et vous pourrez le modifier pour qu'il soit un nouveau style. J'espère que vous avez apprécié cette tut.
Accentsconagua