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.
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é :
Après avoir choisi un filtre, cliquez sur OK dans le panneau Appliquer le filtre SVG.
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.
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 :
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.
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 […]
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 […]
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 […]
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 […]
Vous pouvez utiliser InDesign pour créer et modifier des graphiques de code QR. Les codes QR sont une forme de code-barres qui peut stocker des informations telles que des mots, des nombres, des URL ou d'autres formes de données. L'utilisateur scanne le code QR à l'aide de son appareil photo et d'un logiciel sur un appareil, tel qu'un smartphone, et le logiciel utilise […]
Tout comme dans Adobe Illustrator, les plans de travail Photoshop offrent la possibilité de créer des pages ou des écrans séparés dans un même document. Cela peut être particulièrement utile si vous créez des écrans pour une application mobile ou une petite brochure. Vous pouvez considérer un plan de travail comme un type spécial de groupe de calques créé à l'aide du panneau Calques. Son […]
Emballer du texte dans Adobe Illustrator CC n'est pas tout à fait la même chose qu'emballer un cadeau, c'est plus facile ! Un habillage de texte force le texte à s'enrouler autour d'un graphique, comme illustré dans cette figure. Cette fonctionnalité peut ajouter un peu de créativité à n'importe quelle pièce. Le graphique force le texte à s'enrouler autour de lui. Tout d'abord, créez […]
Lors de la conception dans Adobe Illustrator CC, vous avez souvent besoin d'une forme d'une taille exacte (par exemple, 2 x 3 pouces). Après avoir créé une forme, la meilleure façon de la redimensionner à des mesures exactes est d'utiliser le panneau Transformer, illustré dans cette figure. Faites sélectionner l'objet, puis choisissez Fenêtre → Transformer en […]
Apprenez à appliquer la transparence aux graphiques SVG dans Illustrator. Découvrez comment sortir des SVG avec des arrière-plans transparents et appliquer des effets de transparence.
Après avoir importé vos images dans Adobe XD, vous n'avez pas beaucoup de contrôle sur l'édition, mais vous pouvez redimensionner et faire pivoter les images comme vous le feriez pour n'importe quelle autre forme. Vous pouvez également facilement arrondir les coins d'une image importée à l'aide des widgets de coin. Masquage de vos images En définissant une forme fermée […]
