Aide-mémoire Adobe Illustrator CC pour LuckyTemplates

Aide-mémoire Adobe Illustrator CC pour LuckyTemplates

Bon nombre des changements les plus spectaculaires dans la façon dont Illustrator est utilisé se produisent dans le domaine de la traduction d'images vectorielles sur le Web, et le format SVG sous-estimé est le lien clé dans ce processus. Les fichiers SVG conservent les précieuses fonctionnalités d'évolutivité des illustrations vectorielles et sont pris en charge presque universellement dans les sites Web et les environnements de développement Web. Lorsque vous préparez des illustrations vectorielles pour le Web, il est important d'éviter les effets standard d'Illustrator et, à la place, d'utiliser des filtres SVG.

Illustrator est livré avec un ensemble de filtres SVG décent mais minimaliste, mais voici quelques conseils sur la façon de trouver et d'ajouter des filtres SVG ainsi que des ressources pour créer vos propres filtres SVG. Pour ceux qui travaillent avec des développeurs Web et d'applications, rendez leur vie plus facile et plus productive en consultant l'aide-mémoire pour transmettre le code SVG.

Comment appliquer des filtres SVG dans Illustrator

Lorsque vous créez des fichiers SVG pour des écrans dans Illustrator et que vous souhaitez appliquer des effets (comme des ombres portées), vous devez les appliquer en tant que filtres SVG. De cette façon, vos fichiers SVG conservent une évolutivité infinie sans distorsion.

Les étapes suivantes vous guident tout au long de l'application d'un filtre SVG aux graphiques dans Illustrator :

Sélectionnez le ou les objets auxquels vous appliquez le filtre.

Choisissez Effet → Filtres SVG.

Sélectionnez un filtre dans la liste qui apparaît.
La plupart des filtres ont des noms descriptifs. Par exemple, celles avec une ombre dans le nom sont des ombres portées, celles avec une gaussienne dans le nom sont des flous gaussiens. Le flux de travail est un peu étrange et détourné, mais vous devez d'abord sélectionner un filtre pour accéder à toutes les options disponibles pour en appliquer un.

Pour modifier le filtre sélectionné :

  • Conservez l'objet auquel le filtre a été appliqué sélectionné et ouvrez le panneau Apparence en choisissant Fenêtre → Apparence.
  • Dans le panneau Apparence, cliquez sur le filtre SVG qui apparaît dans la section Remplissage du panneau. Le panneau Appliquer le filtre SVG s'ouvre.
  • Dans le panneau Appliquer le filtre SVG, modifiez le filtre appliqué.
  • Pour voir à quoi ressemblera le filtre, cochez la case Aperçu, comme indiqué sur la figure.
    Aide-mémoire Adobe Illustrator CC pour LuckyTemplates

Après avoir choisi un filtre, cliquez sur OK dans le panneau Appliquer le filtre SVG.

Comment ajouter des filtres SVG à Illustrator

L'ensemble de filtres SVG d'Illustrator est minimaliste, mais vous pouvez l'améliorer en concevant vos propres filtres ou en téléchargeant des ensembles préemballés de filtres SVG à partir de sources en ligne. La conception de filtres implique du codage, mais c'est faisable si vous êtes à l'aise avec HTML. Je recommande le tutoriel de w3Schools pour créer des filtres SVG. Ou vous pouvez acheter des ensembles de filtres en ligne, et même trouver de beaux ensembles de filtres SVG gratuits sur Creationo .

Après avoir acheté ou créé vos propres filtres SVG, voici comment les installer dans Illustrator :

Choisissez Effet → Filtres SVG → Importer un filtre SVG.

Dans la boîte de dialogue qui s'ouvre, recherchez et double-cliquez sur le fichier de filtres SVG que vous avez créé ou téléchargé gratuitement.
Le fichier que vous recherchez doit être un fichier SVG (plusieurs filtres sont regroupés dans un seul fichier SVG).
Vos nouveaux filtres sont désormais disponibles dans le sous-menu Filtres SVG.

Choisissez Effet → Filtres SVG pour appliquer vos nouveaux filtres aux objets sélectionnés.

Comment transmettre le code SVG d'Illustrator à un développeur

Souvent, les graphiques SVG que vous créez dans Illustrator sont transmis aux concepteurs de jeux, aux animateurs, aux infographies ou à d'autres sorties, où les développeurs travailleront avec le code derrière le graphique SVG. En tant qu'illustrateur, vous n'avez pas besoin de savoir comment créer ce code, mais vous devrez peut-être savoir comment l'obtenir et le confier à un développeur. Voici comment.

La voie d'exportation de vos graphiques SVG en tant que code passe par les fonctions d'enregistrement d'Illustrator. Le menu Enregistrer contient des options (pas faciles à trouver) qui exportent votre fichier sous forme de code SVG. Vous souhaiterez probablement être en communication en temps réel avec votre développeur d'écran lorsque vous générez ce code, car plusieurs options sont déterminées par la façon dont ce code sera utilisé :

Choisissez Fichier → Enregistrer (ou Enregistrer sous si vous réenregistrez un fichier).

Dans la boîte de dialogue qui s'ouvre, sélectionnez SVG dans le menu Format.
Ignorez l'option de fichier SVGZ, qui correspond à un fichier compressé qui ne s'affiche pas dans les navigateurs.

Cliquez sur Enregistrer pour ouvrir la boîte de dialogue Options SVG.

Choisissez toujours SVG 1.1 dans la liste déroulante Profils SVG. Les autres versions sont obsolètes.

Si vous avez des images intégrées ou liées dans votre fichier SVG, choisissez Intégrer dans la liste déroulante Emplacements des images. Cependant, consultez d'abord votre développeur Web à propos de ce choix.

Sélectionnez Conserver les capacités d'édition d'Illustrator pour rendre le fichier modifiable dans Illustrator.
Ce choix augmente la taille du fichier mais vous permet de travailler avec un seul fichier SVG que vous pouvez modifier, mettre à jour et partager avec les développeurs Web.

Si le bouton Plus d'options s'affiche, cliquez dessus pour accéder aux options avancées. et faites vos sélections.
Essentiellement, les différentes options génèrent du CSS avec votre fichier qui définit les propriétés des manières suivantes. Consultez votre coéquipier développeur Web pour savoir comment définir ces propriétés CSS :

  • Les attributs de présentation intègrent le style dans le code SVG. Cette option est la plus simple et la valeur par défaut. Utilisez-le si vous ne collaborez pas avec un développeur Web ou d'applications.
  • Les deux options d' attributs de style reposent sur CSS pour gérer le style dans la mesure du possible.
  • Style Elements génère des sélecteurs de style de classe pour le style.
  • L' option Inclure les styles inutilisés génère du code qui augmente probablement la taille du fichier SVG sans ajouter de valeur fonctionnelle.

Décochez les cinq cases au bas de la boîte de dialogue Options SVG, à moins que votre partenaire développeur ne vous demande de les sélectionner.
Ces options sont destinées à des applications hautement spécialisées.

Pour générer du code SVG en fonction des sélections que vous effectuez dans la boîte de dialogue Option SVG, cliquez sur le bouton Code SVG .
Le code SVG généré est affiché dans l'éditeur de texte de votre système d'exploitation. Vous pouvez enregistrer ce code sous forme de fichier texte à l'aide de l'éditeur de texte de votre système d'exploitation et transmettre le fichier à un développeur.

Après avoir généré le code, cliquez sur OK pour enregistrer votre fichier.
Vous pouvez rouvrir et modifier ce fichier dans Illustrator.


Surligner, souligner et barrer le texte dans les documents PDF

Surligner, souligner et barrer le texte dans les documents PDF

Apprenez à surligner, souligner et barrer le texte dans les documents PDF à l

Comment insérer une image darrière-plan dans Dreamweaver

Comment insérer une image darrière-plan dans Dreamweaver

Apprenez à insérer efficacement une image d

Comment traiter des actions par lots dans Photoshop CS6

Comment traiter des actions par lots dans Photoshop CS6

La fonction Lot de Photoshop CS6 vous permet d

Comment habiller des objets dans les documents Adobe InDesign CS6

Comment habiller des objets dans les documents Adobe InDesign CS6

Découvrez comment habiller des objets dans Adobe InDesign CS6 pour optimiser vos mises en page. L

Comment enregistrer des couleurs dans Illustrator CC

Comment enregistrer des couleurs dans Illustrator CC

Apprenez à enregistrer vos couleurs dans Illustrator CC pour maintenir la cohérence et faciliter les modifications futures. Suivez notre guide étape par étape sur l

Menus de filtres et deffets dans Adobe CS5 Illustrator

Menus de filtres et deffets dans Adobe CS5 Illustrator

Découvrez comment utiliser le menu Filtre et les effets dans Adobe CS5 Illustrator pour améliorer vos illustrations. Apprenez les techniques essentielles pour des modifications non destructives.

Capture décran dune section dun fichier PDF

Capture décran dune section dun fichier PDF

Vous pouvez utiliser l'outil Instantané d'Adobe Acrobat CS5 pour sélectionner à la fois du texte et des images et créer une image d'une certaine zone dans un fichier PDF. Le résultat est communément appelé une capture d'écran d'une section dans un fichier PDF. Le résultat est une image, et votre texte n'est pas […]

Mesurer, compter et analyser les pixels dans Photoshop CC

Mesurer, compter et analyser les pixels dans Photoshop CC

Conçues pour les chercheurs et les scientifiques, les capacités de mesure de Photoshop CC sont assez puissantes. Vous pouvez mesurer à peu près n'importe quoi et compter le nombre de n'importe quoi dans une image technique, peut-être à partir d'un microscope ou d'un télescope. Si vous connaissez la taille exacte de n'importe quel élément d'une image, vous pouvez alors découvrir à peu près n'importe quoi […]

Les outils de fluidification dans Adobe CS5 Illustrator

Les outils de fluidification dans Adobe CS5 Illustrator

Lorsque vous utilisez les outils Fluidité d'Adobe Creative Suite 5 (Adobe CS5) Illustrator, vous pouvez plier des objets (les rendre ondulés, gluants ou hérissés) en créant des distorsions simples à complexes. Les outils Liquify peuvent accomplir toutes sortes de distorsions créatives ou farfelues (selon la façon dont vous les regardez) sur vos objets. Tu […]

Comment ajuster les propriétés du texte dans Adobe XD

Comment ajuster les propriétés du texte dans Adobe XD

Lorsque vous avez du texte dans votre projet Adobe XD, vous pouvez commencer à modifier les propriétés du texte. Ces propriétés incluent la famille de polices, la taille de la police, l'épaisseur de la police, l'alignement, l'espacement des caractères (crénage et suivi), l'espacement des lignes (interlignage), le remplissage, la bordure (trait), l'ombre (ombre portée) et le flou d'arrière-plan. Voyons donc comment ces propriétés sont appliquées. À propos de la lisibilité et de la police […]