Share
Dans ce didacticiel, vous apprendrez à créer un bouton en verre à l'aide de formes simples, de zones de parcours, de masques de découpage et d'opacité et de modes de fusion. Vous apprendrez également à optimiser votre travail vectoriel sous forme de graphique Web et à remplacer rapidement les couleurs des éléments requis..
Prenez l'outil Rectangle (M) et créez un carré avec un remplissage bleu (C = 25, M = 2, Y = 0 et K = 0).
Prenez l'outil Ellipse (L) et créez un cercle. Sélectionnez le carré et le cercle, alignez-les vers le centre et les lignes horizontales, à l'aide de la palette Aligner..
Maintenant, coupez le cercle en forme de carré. Copiez le carré et collez-le devant, sélectionnez le cercle et le carré supérieur et cliquez sur le bouton Intersection de la palette Pathfinder..
Remplissez la forme obtenue avec un dégradé linéaire allant du bleu (C = 100, M = 65, Y = 0 et K = 0) au bleu clair (C = 53, M = 0, Y = 0 et K = 0), et définir le mode de fusion sur Multiplier dans la palette Transparence.
Créez deux autres cercles. Le rayon de ces cercles est égal à la valeur du côté du carré et leurs centres sont situés dans les coins inférieur gauche et supérieur droit du carré..
En appliquant la technique décrite à l'étape 2, découpez ces cercles à la forme carrée..
Sélectionnez les deux formes obtenues et cliquez sur le bouton Diviser de la palette Pathfinder. Dissocier les objets résultants. En conséquence, vous devriez avoir trois formes.
Remplissez-les avec des gradients différents et définissez le Mode de fusion - Multiplier pour chacun d'eux. Remplissez la première forme avec un dégradé radial composé de trois couleurs: 1 (C = 17, M = 0, Y = 0 et K = 0); 2 (C = 25, M = 2, Y = 0 et K = 0); 3 (C = 62, M = 9, Y = 0 et K = 0).
Remplissez la deuxième forme avec un dégradé linéaire constitué de deux couleurs 1 (C = 100, M = 33, Y = 0 et K = 0); 2 (C = 17, M = 0, Y = 0 et K = 0).
Remplissez la troisième forme avec un dégradé linéaire constitué de trois couleurs: 1 (C = 38, M = 4, Y = 0 et K = 0); 2 (C = 100, M = 65, Y = 0 et K = 0) et 3 (C = 34, M = 0, Y = 0 et K = 0).
Copiez la forme au milieu et collez-la devant, remplacez les couleurs de son dégradé par: 1 (C = 100, M = 72, Y = 0 et K = 0) et 2 (C = 33, M = 0, Y = 0 et K = 0).
Créez deux autres formes à l'aide du cercle et de la palette Pathfinder, en appliquant les techniques mentionnées ci-dessus..
Remplissez la première forme avec un dégradé linéaire de blanc en blanc avec une opacité de 0% et définissez le Mode de fusion sur Écran dans la palette Transparence..
Remplissez la deuxième forme avec un dégradé linéaire de blanc à blanc avec une opacité de 0% et définissez le Mode de fusion - Superposition dans la palette Transparence..
Copiez la première forme et collez-la au-dessus de tous les objets, en la déplaçant dans la palette Calques. Modifiez le dégradé de cette forme en déplaçant le curseur de gauche légèrement vers la droite.
Mettez le bouton dans une forme carrée avec des coins arrondis. Copiez la case du bas et collez-la devant tous les objets. Conservez le carré sélectionné, allez à Effet> Convertir en forme> Rectangle arrondi et définissez les valeurs indiquées dans la figure ci-dessous. Le rayon de courbure dépend de la taille de votre bouton, je vous laisse donc faire votre choix.
Copiez cette forme et collez-la devant, nous en aurons besoin pour continuer à la construire. Verrouillez la sous-couche avec cette forme dans la palette Calques et rendez-la invisible. Sélectionnez tous les objets (commande + A) et allez à Objet> Masque d'écrêtage> Faire.
Déverrouiller la sous-couche avec la forme d'un carré arrondi et le rendre visible. Copiez cette forme et collez-la devant. Maintenant, réduisez un peu la taille de cette forme en utilisant l'outil de sélection (V) et en maintenant les touches Alt et Maj enfoncées..
Sélectionnez les deux carrés arrondis et appuyez sur le bouton Moins avant de la palette Pathfinder..
Remplir la forme obtenue avec un dégradé linéaire de bleu (C = 100, M = 0, Y = 0 et K = 0) avec une opacité de 50% jusqu'à une couleur blanche avec une opacité de 0%.
Créez un autre rectangle arrondi à l'aide de l'outil Rectangle arrondi d'une taille légèrement supérieure à celle du bouton. Placez la figure créée sous toutes les sous-couches et remplissez-la d'un dégradé linéaire composé de trois couleurs: 1 (C = 100, M = 100, Y = 0 et K = 77); 2 (C = 100, M = 16, Y = 0 et K = 0); 3 (C = 100, M = 66, Y = 0 et K = 0).
Créez maintenant la partie métallique du bouton. Il se composera de deux carrés arrondis. Le premier est rempli de dégradé linéaire composé de trois nuances de gris: 1 (K = 71), 2 (K = 14) et 3 (K = 26).
Le second est légèrement plus petit que le premier et est rempli d'un dégradé linéaire composé de trois nuances de gris: 1 (K = 45), 2 (K = 0) et 3 (K = 14). Une fois votre bouton prêt, regroupez tous ses éléments.
Crée un reflet du bouton. Copiez le bouton et collez-le devant. Déplacez le bouton verticalement vers le bas, en maintenant la touche Maj enfoncée. Cela deviendra le reflet du bouton.
Sélectionnez le reflet et allez à Objet> Transformer> Refléter et définissez les paramètres dans la boîte de dialogue illustrée dans la figure ci-dessous..
Maintenant, prenez l’outil Rectangle (M) et créez un rectangle avec un remplissage en dégradé noir et blanc. La taille du rectangle doit être telle qu'elle puisse masquer complètement le reflet du bouton.
Sélectionnez le reflet du bouton et du rectangle supérieur, choisissez Créer un masque d'opacité dans le menu de la palette Transparence..
Le bouton avec reflet est prêt.
Souvent, vous devez avoir plusieurs éléments identiques dans des couleurs différentes. Voyons comment faire vite c'est de remplacer la couleur d'un bouton.
Sélectionnez tous les éléments dont vous souhaitez remplacer la couleur, sélectionnez Edition> Modifier les couleurs> Recolorer l'illustration, puis cliquez sur l'onglet Modifier dans la boîte de dialogue ouverte. Enfin, cliquez sur le bouton Link harmon colors.
Vous pouvez maintenant créer toutes les rotations de couleur disponibles dans la section de couleur requise tout en observant les modifications de couleur de nos illustrations..
Lorsque vous créez des images pour le Web et les périphériques, l’image vectorielle n’est pas le produit final, vous devez utiliser des images raster. Par conséquent, vous devrez voir le vecteur sous forme de raster. Pour ce faire, accédez à Affichage> Aperçu des pixels. Comme vous pouvez le constater, de nombreux problèmes surviennent lorsque vous effectuez un zoom avant. Ils apparaissent car l'image ne s'affiche pas dans la grille de pixels. C'est pourquoi les lignes sont floues lorsqu'il s'agit d'un raster..
Adobe Illustrator CS5 nous permet de rendre l’image plus nette. Sélectionnez le graphique de votre bouton et ouvrez la palette Transformer (Fenêtre> Transformer), puis cliquez sur Aligner sur la grille de pixels dans cette palette..
Votre image est maintenant prête à être enregistrée sous un type de raster tel que PNG ou JPG (Fichier> Enregistrer pour le Web et les périphériques)..
Une fois que vous possédez ces connaissances et le logiciel nécessaire, vous serez en mesure de créer facilement des éléments d’interface Web non seulement beaux mais aussi parfaitement rendus..
Accentsconagua