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.
  

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.