Share
Suivez ce didacticiel pour apprendre à créer un ensemble d’étiquettes brillantes et un état de substitution. Nous utiliserons plusieurs apparences et des formes d'art personnalisées pour obtenir un aspect brillant. Une fois terminé, nous analyserons les options Enregistrer pour le Web. Nous parlerons des paramètres et comparerons différents formats de fichiers pour obtenir la meilleure image possible pour votre page Web. De nombreuses variations de couleurs vous attendent alors commençons!
Commencez par ouvrir un nouveau document Web. Prenez l’outil Rectangle (M), cliquez n’importe où sur votre planche d’art pour ouvrir la fenêtre Rectangle et entrez les dimensions indiquées. Avec ce rectangle sélectionné, allez au menu Objet> Chemin> Ajouter des points d’ancrage. En conséquence, vous obtiendrez un point supplémentaire au milieu de chaque côté. Maintenant, sélectionnez en utilisant l'outil de sélection directe (A) uniquement le point bas, allez dans le menu Objet> Transformer> Déplacer, sous Type vertical moins 55 px et cliquez sur OK..
Également à l'aide de l'outil de sélection directe (A) et en maintenant la touche Maj enfoncée, sélectionnez les deux points indiqués, puis accédez au menu Fichier> Scripts> Arrondir tous les coins. Exécutez le script et sélectionnez un rayon de 10. Si vous n'avez pas encore installé ce script, allez ici et récupérez-le.
Maintenant, sélectionnez le point dans l'info-bulle et réexécutez le script. Cette fois sélectionnez un rayon de 15.
Remplissez la forme de l'étiquette avec le dégradé linéaire indiqué et modifiez l'angle à moins 90 degrés. Lorsque cet attribut de remplissage est sélectionné dans le panneau Apparence, appuyez sur l’icône Dupliquer l’élément sélectionné en bas et vous obtiendrez un second remplissage. Remplacez le dégradé bleu par un motif appelé Point Mezzotint que vous pouvez trouver dans le menu Bibliothèques de nuanciers sous Motifs> Graphiques de base> Textures graphiques de base. Définissez le motif sur Screen et réduisez l'opacité à 70%.
Ensuite, sélectionnez un trait bleu, puis accédez au menu Effet> Chemin> Décalage du chemin et appliquez un décalage de moins de 7 px. Dans le Panneau de trait, cochez l’option Ligne en pointillé et sélectionnez un tiret de 5 points..
Ajoutez un autre trait en appuyant sur l'icône Dupliquer l'élément sélectionné en bas du panneau d'apparence et changez la couleur du bleu au blanc. Le tiret et les valeurs de décalage restent les mêmes. Allez dans le menu Effets> Déformer et transformer> Transformer et dans la section Déplacer sous Horizontal, sélectionnez moins 1 px. Changez le mode de fusion en Lumière douce, mais uniquement pour ce trait blanc..
Créons maintenant un nouveau pinceau Art. Prenez l’outil Ellipse (L), cliquez n’importe où sur votre planche d’art pour ouvrir la fenêtre Ellipse et entrez les dimensions indiquées. Utilisez l'outil de sélection directe (A) pour sélectionner uniquement les points situés à gauche et à droite de cette ellipse, puis cliquez sur l'option Convertir les points d'ancrage sélectionnés en angle. Sélectionnez la forme obtenue, puis sélectionnez Menu> Chemin> Décalage et appliquez un décalage de moins de 0,7 px pour obtenir une forme plus petite au milieu..
Les deux formes sont remplies de blanc. Réduisez l'opacité de la forme la plus grande à 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 appuyez sur OK, puis revenez au menu Objet> Mélange> Créer. Faites glisser le groupe de fondus résultant dans le panneau Formes et choisissez Nouveau pinceau.
Copiez et collez devant la forme de l'étiquette, supprimez le remplissage en dégradé et donnez-lui un trait. Nous devons couper cette forme donc prenez l'outil Ciseaux (C) et cliquez sur les points indiqués. Ne conservez que les trois chemins (noir, rouge et violet) et supprimez les autres segments. Contournez ces chemins avec le pinceau Art enregistré à l'étape précédente, puis définissez les poids de trait comme indiqué. Changez le mode de fusion en superposition pour les trois.
Ajoutons maintenant l'ombre. Dupliquez le remplissage en dégradé puis changez la couleur en noir. Avec cet attribut sélectionné, accédez au menu Effet> Déformation et appliquez l’effet Gonfler pour élargir le haut (image 1). Ensuite, accédez au menu Effets> Flou> Flou gaussien et appliquez un rayon de 6 px (image 2), puis sélectionnez Menu Effets> Déformer et transformer> Transformer. Choisissez de déplacer ce remplissage noir de moins de 5 px verticalement, puis appuyez sur OK (3) et réglez le mode Fusion sur Lumière douce (4)..
Voici les paramètres pour les effets Inflate et Transform:
À cette étape, nous masquerons le haut de l'étiquette. Prenez l'outil Rectangle (M) et tracez un rectangle sur l'étiquette comme dans l'image. Maintenant, sélectionnez les deux formes (rectangle + étiquette) et allez dans le menu Objet> Masque d'écrêtage> Créer.
Ensuite, prenez l’outil Ellipse (L) et tracez deux ellipses ayant les dimensions indiquées. Assurez-vous qu'ils sont centrés, puis placez-les en haut de l'étiquette. Les points d'ancrage gauche et droit des ellipses doivent être alignés sur le rectangle que vous avez précédemment masqué. Les deux ellipses sont remplies de noir, mais l'opacité la plus grande est définie sur 0%. Sélectionnez-les, puis allez dans le menu Objet> Fusion> Options de fusion et sélectionnez 30 étapes spécifiées. Ensuite, retournez dans le menu Objet> Mélanger et choisissez Créer. Le groupe de mélange résultant doit être derrière l'étiquette.
Nous devons faire un autre masque. Dessinez avec l’outil Rectangle (M) un rectangle en noir par le bas et envoyez-le derrière l’étiquette mais devant le groupe Fusion. Avant de continuer, alignez-le en haut sur l'autre rectangle utilisé précédemment. Maintenant, sélectionnez le groupe de fusion et ce rectangle et allez dans le menu Objet> Masque d'écrêtage> Créer.
Prenez l'outil Crayon (P) ou l'outil Segment de ligne (\) et tracez un tracé rectiligne exactement sur le bord supérieur de l'étiquette, comme indiqué ci-dessous. Appliquez le pinceau artistique enregistré à l’étape 5 et réglez le poids sur 0,25 point. Réduire l'opacité à 80%.
Tracez un autre chemin droit sur l'étiquette et tracez-le avec un pinceau Art appelé Dry Brush 5 que vous pouvez trouver dans le menu Bibliothèques de pinceaux sous Artistique> Artistique_Paintbrush. Définissez l’épaisseur du trait sur 1,5 pt, puis sélectionnez Développer l’apparence et dissocier dans le menu Objet. Remplissez la forme obtenue avec le dégradé linéaire indiqué et réglez l’angle à 90 degrés.
Copiez et collez devant la forme d'étiquette et avant de continuer, supprimez toutes les apparences existantes. Sélectionnez la forme obtenue à l'étape précédente ainsi que la copie de l'étiquette qui doit être devant et allez dans le menu Objet> Masque d'écrêtage> Créer (image 1). Pour obtenir un aspect brillant, changez le mode de fusion en mode d'écran et réduisez l'opacité à 70% pour la forme obtenue à l'étape précédente (image 2). Si vous pensez que les bords sont trop nets, vous pouvez appliquer un Flou gaussien de 1 px (image 3)..
Dessinez un petit triangle puis allez dans le menu Fichier> Scripts> Arrondir n’importe quel coin. Exécutez le script et sélectionnez un rayon de 5.
Placez le triangle au bas de l'étiquette et sélectionnez bleu comme couleur de remplissage (image 1). Allez dans le menu Effets> Styliser et appliquez l'effet Inner Glow (2), puis appliquez l'effet Ombre portée (3) en utilisant les paramètres indiqués..
La dernière chose à faire est le texte. Prenez l'outil Texte (T), écrivez du texte et utilisez une police appelée Devinne Swash que vous pouvez trouver ici. Sélectionnez Développer dans le menu Objet pour transformer le texte en formes et conserver le fond noir. Allez dans le menu Effets> Styliser et appliquez l’effet Ombre portée en utilisant les paramètres indiqués. Changer le mode de fusion en superposition.
À ce stade, l'étiquette est prête et nous poursuivrons avec l'état de substitution..
Faites une copie de l'étiquette et nous ne changerons que quelques petites choses. Certaines des formes sont cachées dans les images suivantes et nous en parlerons au bon moment. Concentrons-nous sur la forme de l'étiquette et modifions d'abord le remplissage en dégradé. Changez également la nuance de bleu utilisée pour le premier trait..
Nous allons maintenant modifier l'ombre. Double-cliquez sur Flou gaussien dans le panneau Apparence pour ouvrir la fenêtre Flou gaussien et réduire le rayon de 6 à 4 px. Ensuite, double-cliquez sur l'effet Inflate appliqué pour ouvrir la fenêtre Warp Options et modifiez la valeur Bend de 5 à moins 5%..
Sélectionnez le dégradé dans le panneau d'apparence et appuyez sur l'icône Dupliquer l'élément sélectionné en bas. En conséquence, vous obtiendrez un autre remplissage ci-dessus. Conservez le même dégradé et accédez au menu Effets> Chemin> Décalage du chemin et appliquez un décalage de moins de 6,5 px. Ensuite, allez dans le menu Effets> Styliser et appliquez l’effet Inner Glow à l’aide des paramètres indiqués..
Créons un nouveau pinceau similaire à celui enregistré à l'étape 5. Utilisez l'outil Ellipse (L) pour tracer une ellipse à plat 100 x 3 px, puis transformez les points gauche et droit de points lisses en angles à l'aide du bouton Convertir les points d'ancrage sélectionnés en option de coin. Allez dans le menu Objet> Chemin> Chemin décalé et appliquez un décalage de moins de 1,2 px pour obtenir la forme plus petite au centre. Réduisez l'opacité de la plus grande ellipse à 0%, sélectionnez-les tous les deux et accédez au menu Objet> Fusion> Options de fusion. Choisissez 25 étapes spécifiées, puis revenez au menu Objet> Mélange> Créer. Faites glisser le groupe de fondus résultant dans le panneau Formes et sélectionnez Nouveau pinceau.
Maintenant, tracez les trois chemins avec le nouveau pinceau Art. Réglez le poids sur 0,25 point et le mode de fusion sur Lumière douce pour les trois.
Dans ce cas, nous voulons que la forme brillante soit moins visible, donc nous allons réduire l'opacité de 70 à 25%..
Modifiez la nuance de bleu utilisée pour remplir le triangle, puis double-cliquez sur l'effet Ombre portée appliqué dans le panneau Apparence. Dans la fenêtre, réduisez l'opacité de 80 à 50%. L'effet Inner Glow reste le même.
Pour le texte, remplacez le fond noir par du bleu puis changez le mode de fusion de Overlay à Normal et réduisez l'opacité à 80%..
Voici l'état final du basculement de l'étiquette:
Maintenant que tout est prêt, nous allons les sauvegarder pour le Web. Prenez l'outil Rectangle (M) et tracez un rectangle autour de l'étiquette, puis allez dans le menu Objet> Zone de recadrage> Créer. Vous obtiendrez le même résultat si vous utilisez l'outil Zone de recadrage ou l'outil Plancher (Maj + O).
Allez dans le menu Fichier> Enregistrer pour le Web et les périphériques. Cette fenêtre propose quatre manières de comparer l’étiquette originale à celle que nous allons optimiser: Original, Optimisée, 2 en 1 et 4 en 1. Je pense que le mieux est la vue 4 en 1 parce que vous pouvez jouer avec différents paramètres, tester quatre versions de l'étiquette, puis choisir la meilleure en fonction de la taille du fichier et du temps de téléchargement. Dans la partie supérieure gauche se trouvent les outils. Dans le coin supérieur droit, vous pouvez sélectionner une autre vitesse de téléchargement. Dans le coin inférieur droit, vous avez la possibilité de prévisualiser l’image dans le navigateur par défaut..
Modifions maintenant quelques paramètres et comparons. Parmi les sept formats de fichier disponibles pour l'enregistrement, nous allons essayer uniquement les formats JPEG, PNG-8 et PNG-24. Le format GIF est plus approprié pour les images avec des zones de couleur plates, plutôt que pour celles avec des remplissages en dégradé et des détails tels que ces étiquettes. J'ai essayé et ils n'étaient pas très beaux.
Le premier format est JPEG. Même si la qualité est mauvaise, la taille du fichier est réduite, il n'est pas nécessaire de réduire trop la qualité. Pour une qualité de 60%, la taille du fichier est de 7,77 Ko, mais l'étiquette commence à ne plus être aussi belle. Pour un maximum de qualité (qualité à 100%), la taille du fichier est de 26,11 Ko (!!). 70%, c'est bien. Si vous cochez l'option Optimisé, la réduction de la taille du fichier est très légère, nous l'ignorerons cette fois. Cochez Progressif si vous voulez que l’image se charge en passes..
Si vous savez exactement quelle sera la couleur d'arrière-plan, vous pouvez choisir une couleur mate. L'arrière-plan sera rempli avec la couleur sélectionnée, dans ce cas rose et l'image agira comme un GIF transparent, mais en utilisant toujours les millions de couleurs que les JPEG peuvent afficher à notre avantage. La taille du fichier sera un peu plus grande si.
Juste par curiosité, j'ai essayé le format PNG-8 et vous pouvez voir ci-dessous les différents réglages. Si vous choisissez Sélectif, Illustrator sélectionne les couleurs que l'œil peut voir, mais comprend davantage de nuances sans danger pour les couleurs. Les alternatives sont: Perceptuel (les couleurs que les yeux voient le mieux) et Adaptatif (les couleurs qui sont réellement dans l'image). Parlons de Dither. Cela permet de répartir les pixels de couleurs différentes les uns à côté des autres pour faire croire à l'œil qu'il voit plus de couleurs que l'image ne contient en réalité. L'inconvénient est que cela augmente la taille du fichier, comme vous pouvez le voir ci-dessous, dither 0% contre 100%. Interlaced est l'équivalent de Progressif du format JPEG. Cependant, aucune des images ne semble bonne, nous allons donc passer au format suivant..
Vous obtiendrez une meilleure image si vous sélectionnez une couleur mate, au cas où vous sauriez exactement quelle sera la couleur d'arrière-plan de la page Web. Sélectionnez également No Transparency Dither.
De loin, le meilleur résultat sera obtenu avec le format PNG-24 bien que la taille du fichier soit assez grande. En raison de l'ombre autour de l'étiquette, vous devez cocher l'option Transparence..
À ce stade, vous pouvez afficher un aperçu de l'étiquette dans un navigateur en appuyant sur l'icône indiquée à l'étape 24. Vous obtiendrez également un code HTML que vous pourrez ajouter à votre page Web..
Si vous avez choisi un format particulier, appuyez sur le bouton Enregistrer, sélectionnez Images uniquement et un dossier de destination, puis appuyez à nouveau sur Enregistrer..
Répétez cette procédure pour l'état de basculement de l'étiquette. Dans l'image ci-dessous, vous pouvez voir les trois versions que j'ai choisies.
C'est le dossier avec les images sauvegardées et vous pouvez les utiliser comme vous le souhaitez.
En bonus, il existe plusieurs variations de couleur de l'étiquette. Tout ce que vous avez à faire est de modifier quelques éléments tels que: le remplissage en dégradé pour la forme de l'étiquette, la couleur de trait pointillé, le dégradé pour la forme brillante et la couleur de remplissage pour le triangle. C'est tout!
C'est l'étiquette verte:
Voici l'étiquette violette:
la version orange…
rouge…
et jaune:
Accentsconagua