Les graphiques SVG d' Adobe Illustrator CC sont rarement transmis aux concepteurs numériques avec des arrière-plans. Normalement, les graphiques flottent au-dessus de l'arrière-plan du site Web, de l'application, de l'animation ou du contexte interactif.
Avant de discuter de ce qu'implique la suppression de l'arrière-plan derrière les illustrations SVG, concentrez-vous sur l'application de la transparence aux graphiques SVG. Vous devez définir l'opacité de l'illustration à l'aide du panneau Transparence. Par exemple, une transparence de 50 % a été appliquée à la forme jaune de la figure et vous pouvez voir la transparence en vigueur. Et oui, cette image est un fichier SVG, avec toutes les fonctionnalités légères, à chargement rapide et infiniment évolutives intégrées à SVG.
Une forme SVG semi-opaque sur un fond coloré.
Les concepteurs ont l'habitude de penser en termes d'arrière-plans qui sont soit rendus transparents, soit restent visibles. On pense à assommer un arrière-plan. Les images PNG et GIF fonctionnent comme ça : soit vous créez avec un arrière-plan, soit vous choisissez un arrière-plan transparent dans un programme tel qu'Illustrator ou Photoshop pour supprimer cet arrière-plan.
Avec les GIF et les PNG, vous pouvez avoir une couleur transparente qui permet aux couleurs d'arrière-plan ou aux images d'apparaître dans les pages Web. Mais la logique de suppression de l'arrière-plan est différente dans un fichier SVG qu'avec les PNG et les GIF. Essentiellement, il n'existe pas de graphique SVG qui a un arrière-plan non transparent car il n'y a pas d'arrière-plan. En d'autres termes : par défaut, les graphiques SVG sont enregistrés et exportés sans arrière-plan.
Donc quel est le problème? Eh bien, il est facile de se retrouver accidentellement avec un arrière-plan transparent lors de l'enregistrement ou de l'exportation de fichiers SVG ! La figure suivante peut avoir un arrière-plan blanc ou un arrière-plan transparent. Vous ne pouvez pas le dire simplement en regardant l'écran Illustrator ; vous devez choisir Affichage → Afficher la grille de transparence.
Ce graphique peut avoir un arrière-plan blanc ou n'avoir aucun arrière-plan.
Avec la grille de transparence activée, comme indiqué, vous pouvez voir que l'oiseau a un rectangle blanc derrière lui, et que l'arrière-plan blanc « ira avec » le graphique si vous enregistrez le fichier au format SVG ou que vous l'exportez au format SVG.
L'affichage de la grille de transparence révèle un rectangle blanc derrière le graphique.
Permettez-moi de souligner et d'éclairer cela sous un autre angle. Lorsque je vais exporter cette image au format SVG, la boîte de dialogue Exporter pour les écrans, affichée, n'a pas d'option pour sélectionner une couleur de transparence.
Vous ne pouvez pas choisir une couleur de transparence en SVG car il n'y a pas de couleur d'arrière-plan.
Je rencontre souvent des concepteurs qui insistent pour placer un rectangle d'arrière-plan derrière leur illustration destinée au SVG afin qu'ils puissent voir à quoi ressemblera le graphique lorsqu'il sera entouré d'une couleur dans le support cible (comme une page Web ou une application). Ce n'est pas grave, je les mets en garde, tant que vous vous souvenez de supprimer ce rectangle d'arrière-plan lorsque vous enregistrez ou exportez le SVG. Et dans le monde d'aujourd'hui à haute pression, à haute productivité et à rotation rapide, qui a besoin d'une chose de plus à retenir ?
Une meilleure solution consiste à définir une « grille » de transparence avec une seule couleur qui correspond à l'environnement dans lequel le graphique sera placé. Pourquoi est-ce que je mets la grille entre guillemets ? Parce que cette technique triche : avec elle, vous définissez les deux couleurs de grille comme la même couleur, simulant efficacement une page Web ou une couleur d'arrière-plan d'application.
Pour utiliser cette technique pour créer un arrière-plan personnalisé pendant que vous développez des illustrations SVG, procédez comme suit :
Choisissez Fichier → Configuration du document.
Dans l'onglet Général, recherchez la section Options de transparence et de surimpression.
Les modifications souhaitées sont contrôlées dans cette section de la boîte de dialogue.
Ne vous souciez pas de définir la taille de la grille, car vous vous en passez effectivement.
Dans la section Grille de transparence de la boîte de dialogue, cliquez sur le premier des deux panneaux de couleur de grille et choisissez une couleur d'arrière-plan en utilisant l'une des différentes palettes de couleurs dans la fenêtre contextuelle Couleurs illustrée dans la figure suivante.
Soit dit en passant, aucune de ces palettes de couleurs n'est particulièrement adaptée au numérique. Il n'y a pas de palette pour RGBA, hexadécimal ou d'autres formats de couleurs Web standard, mais la pipette du sélecteur de couleurs peut vous aider à obtenir la couleur d'arrière-plan que vous souhaitez faire correspondre.
Définir une couleur de fond d'aperçu avec une grille de transparence.
Sélectionnez le deuxième des deux panneaux de couleur de grille et attribuez-lui la même couleur.
N'oubliez pas que vous pouvez utiliser la pipette du sélecteur de couleurs pour saisir cette couleur.
Cliquez sur OK dans la boîte de dialogue Configuration du document.
Tout ce que j'ai fait dans l'ensemble d'étapes précédent a été de définir comment la grille de transparence s'affiche lorsqu'elle est activée . Donc, si votre grille de transparence n'est pas activée, choisissez Affichage → Grille de transparence.
Dans cette figure, j'ai sélectionné le plan de travail avec le graphique et je prévisualise le projet sur une couleur d'arrière-plan simulée.
Aperçu de la couleur d'arrière-plan de sortie avec une grille de transparence personnalisée.
Lorsque la transparence (telle qu'une opacité de 50 pour cent) ou des effets de transparence tels que la gravure de couleur, l'assombrissement ou la multiplication sont appliqués aux graphiques SVG, ces effets conservent l'évolutivité de SVG.
Cette figure montre le même graphique (trois rectangles orange semi-transparents) exporté en tant que fichier PNG (en haut) et SVG. Vous pouvez voir comment le fichier PNG se dégrade en qualité lorsque je zoome dessus dans un navigateur. Ce que vous ne pouvez pas voir, c'est que le fichier PNG est presque deux fois plus volumineux que le SVG.
Comparaison de la sortie PNG (en haut) avec SVG lorsque la transparence est appliquée
Voici un résumé des avantages de l'utilisation de SVG pour les effets de transparence :
Soit dit en passant, si vous êtes curieux de savoir à quoi ressemble le code SVG généré pour cet ensemble de rectangles et à quel point il est facile pour un développeur Web ou un développeur d'applications de travailler avec, voici le code de la première des trois boîtes SVG , avec une opacité de 60 % appliquée :
<="" code="">
Enfin, si vous souhaitez que l'arrière-plan de votre SVG ait un remplissage de couleur, cela peut également être réalisé via les Propriétés du document menu. Cliquez simplement sur la bande blanche située à côté de l'endroit où il est écrit Couleur d'arrière-plan. Un sélecteur de couleur apparaîtra sur votre écran.
Il est important de noter que votre arrière-plan SVG continuera à être transparent malgré le remplissage de couleur tant que la Colonne A (qui représente la transparence de la couleur) reste à 0. Si vous souhaitez que le document ait réellement cette couleur d'arrière-plan (même lors des exportations), vous pouvez faire passer cette colonne de 0 à 100.
Et cela devrait suffire pour travailler avec des arrière-plans dans Inkscape. Si vous avez des questions qui n’ont pas été abordées dans cet article, laissez simplement un commentaire ci-dessous et je vous répondrai si je peux vous aider.
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 […]
