Outils pour utilisateurs

Outils du site


issue110:inkscape

First, an apology. Last month I suggested you could get color from a black shadow by using the Fixed Offset column of the Color Matrix filter, and demonstrated using the Source Alpha input. Unfortunately a change was introduced into Inkscape 0.91 which prevents fixed offsets of the color components working on a Source Alpha input (https://bugs.launchpad.net/inkscape/+bug/897236). It does work in version 0.48, as well as in Firefox and other SVG renderers. Apologies to anyone who wasted their time trying to follow my instructions on 0.91, and thanks to Moini in the Inkscape Forum for bringing this issue to my attention. Now, on with the show… Another type of drop shadow effect that you'll see from time to time is the “stacked shadow”. This is created by stacking several hard-edged copies of your original object on top of each other, with each of them having a different fill color. The easy way to create this effect is just to duplicate your original objects, move them a little, change their fill color, and re-stack them into the correct order. With three objects, the middle one having a white fill and no stroke, it was a matter of moments to produce this:

D'abord, mille excuses. Le mois dernier, j'ai suggéré que vous pourriez colorer une ombre noire en utilisant la colonne Décalage fixe du filtre Matrice de couleurs, et je l'ai démontré en utilisant l'entrée Opacité de la source. Malheureusement, une modification a été introduite dans la version 0.91 d'Inkscape qui empêche les décalages fixes des composantes de couleur à partir de l'opacité de la source (https://bugs.launchpad.net/inkscape/+bug/897236). Ça marche dans la version 0.48, comme dans Firefox et les autres moteurs de rendu SVG. Mes excuses à tous ceux qui ont perdu leur temps en essayant de suivre mes instructions avec la 0.91, et merci à Moini sur le forum Inkscape d'avoir porté ce problème à mon attention. Bon, poursuivons…

Un autre type d'effet d'ombre portée que vous verrez de temps en temps est « l'ombre empilée ». Elle est créée en empilant l'une sur l'autre plusieurs copies à bords nets de votre objet original, chacune d'une couleur de remplissage différente.

La manière facile de créer cet effet est de simplement dupliquer vos objets originaux, de les déplacer un petit peu, de changer leur couleur de remplissage et de les rempiler dans le bon ordre. Avec trois objets, celui du milieu n'ayant ni remplissage, ni trait, il suffit de quelques instants pour produire ceci :

Not a bad start, but what happens when you need to change the text? You would have to alter it for all three objects which triples your chances of making a mistake. Better to use unset fills with clones (see part 30), which can get you to the same result but with only the parent object to edit in order for your changes to propagate through the whole stack. Even with clones, however, you're still working with three objects. Grouping them lets you move or transform them all as one, but you then have the extra burden of having to enter the group and track down the original object in order to change the text. As you might imagine, filters offer a solution to all these problems. With the few filter primitives you've learnt in the previous two instalments, you already know enough to create a stacked shadow effect using the fill color at the top, a white copy of the source image below that, and a black copy right at the bottom. It's really just the same as a simple hard-edged drop shadow (from part 48) with a re-colored drop shadow (part 49) sandwiched in the middle. Let's look at it in graph form first, starting with a basic hard-edged black drop shadow:

Ce n'est pas un mauvais début, mais que se passe-t-il si vous avez besoin de modifier le texte ? Vous devrez le modifier dans les trois objets, ce qui triple vos chances de faire une erreur. Il vaudrait mieux utiliser des remplissages indéfinis avec des clones (voir partie 30), qui vous permettraient d'obtenir le même résultat, mais avec un seul objet parent à modifier pour propager vos modifications sur toute la pile.

Cependant, même avec les clones, vous travaillez toujours avec trois objets. Un regroupement vous permet de les bouger ou de les transformer d'un seul coup, mais, alors, vous avez le travail supplémentaire d'entrer dans le groupe et d'isoler l'objet original pour modifier le texte. Comme vous pourrez l'imaginer, les filtres offrent une solution à tous ces problèmes.

Avec les quelques primitives de filtrage que nous avons apprises dans les deux articles précédents, vous en savez déjà assez pour créer un effet d'ombre empilée en utilisant une couleur de remplissage au sommet, avec une copie blanche de l'image source en-dessous d'elle et une copie noire tout en bas. C'est vraiment identique à une simple ombre portée à bords nets (voir partie 48) avec une ombre portée recolorée (partie 49) en sandwich. Regardons-la d'abord sous forme de graphe, en commençant par une ombre portée de base noire avec des bords nets :

Pretty simple, right? Now let's look at our hard-edged white drop shadow. You'll notice it's essentially the same graph, but with the addition of a Color Matrix primitive to convert the black shadow to a white one (I've used a black background for the final output box, so that the white shadow is visible): In order to get a white output from the color matrix, each R, G and B row must evaluate to at least 1.0 (which is mapped to 255 in RGB). Our input values are all zero, so no amount of multiplication will get the result we want. Instead we have to put a value of 1.0, or greater, into the fixed offset column for the first three rows: Now that we know how to create the constituent parts of our filter, we just need to combine them into one. In this case, it's a simple matter of merging them in the right order – black shadow first, then white, then the source graphic. The final graph looks like this:

Tout simple, non ? Maintenant, regardons notre ombre portée blanche à bords nets. Vous remarquerez que c'est pratiquement le même graphe, mais avec l'ajout d'une primitive Matrice de couleurs pour convertir en blanc l'ombre noire (j'utiliserai un fond noir pour la boîte de sortie finale, pour que l'ombre blanche soit visible) :

Chaque ligne R, G et B doit valoir au moins 1,0 (ce qui équivaut à 255 en RGB), de façon à obtenir une sortie blanche avec la matrice de couleurs. Nos valeurs d'entrée sont toutes à zéro, de sorte qu'aucune multiplication ne donnera le résultat que nous voulons. À la place, nous devons mettre une valeur de 1,0, ou plus, dans la colonne de décalage fixe des trois premières lignes :

Maintenant que vous savez comment créer les éléments constituants de notre filtre, nous devons juste les combiner. Dans le cas présent, ce n'est qu'une question de fusion dans le bon ordre : l'ombre noire d'abord, puis la blanche et enfin la source image. Le graphe final ressemble à ceci :

As you can see, our final filter requires four filter primitives – two Offsets, one Color Matrix and a Merge. It also has two connections to the Source Alpha input, and one to the Source Graphic input. Let's take a look at the final filter design in Inkscape: If you follow each line in the image you'll see that it's the same connected set of objects as in the graph view. Unfortunately, Inkscape's UI manages to make it seem more complex, largely due to the need for lines to cross in order for each “branch” of the filter to come together at the Merge primitive. Now imagine the same filter design, but with even more shadows being stacked: despite each shadow being a separate linear graph feeding into a common Merge, Inkscape's UI quickly becomes filled with a confusing spaghetti of crossing lines. Whenever you're faced with such a complex mess, try sketching out the filter primitives and their connections in graph form to see if it becomes more understandable.

Comme vous pouvez le voir, notre filtre final a besoin de quatre primitives : deux Décalages, Une Matrice de couleurs et une Fusion. Il a aussi deux connexions à l'entrée Opacité de la source et une à l'entrée Source image. Regardons la conception finale du filtre dans Inkscape :

Si vous suivez chaque ligne de l'image, vous verrez que c'est le même ensemble d'objets connectés que dans le graphe. Malheureusement, l'interface d'Inkscape rend son aspect plus complexe, principalement du fait que les lignes se croisent pour que toutes les branches du filtre arrivent sur la primitive Fusion. Maintenant, imaginez le même dessin de filtre, mais en empilant plus d'ombres : bien que chaque ombre soit un graphe linéaire séparé se connectant sur une Fusion commune, l'interface d'Inkscape devient vite remplie d'un méli-mélo de lignes croisées. Si vous vous trouvez confronté à un tel bazar, essayez de dessiner les primitives de filtrage et leurs connexions sous forme de graphe pour voir si ça devient plus compréhensible.

There's a bit of a problem with our stacked shadows filter: it looks distinctly different when placed on a white background compared with a colored background. In the former case, the white shadow vanishes into the background, giving the appearance of a disconnected black shadow, but as soon as you put it on any other background, the white layer stands out. In some cases you may want the white layer to be visible, but for others you would want that part of the output to be transparent. If you were building the stacked shadows from normal SVG objects, you could use a clipping path to achieve this effect (see part 13), but clipping paths aren't available as filter primitives. Instead there is a primitive called “Composite” which allows you to combine two inputs in myriad ways, including a couple that have a similar effect to a clipping path.

Il y a un petit problème avec notre filtre d'ombres empilées : le résultat paraît différent suivant qu'il est placé sur un fond blanc ou coloré. Dans le premier cas, l'ombre blanche se dissout dans le fond, donnant l'impression d'une ombre noire disjointe, mais dès que nous la mettons sur un fond différent, la couche blanche se détache.

Dans certains cas, nous pouvons souhaiter que la couche blanche soit visible, mais, dans d'autres, nous pourrions préférer que cette partie de la sortie soit transparente. Si vous aviez construit les ombres empilées à partir d'objets SVG standard, vous pourriez utiliser un chemin de découpe pour réaliser cet effet (voir partie 13), mais les chemins de découpe ne sont pas disponibles comme primitives de filtrage. À la place, il y a une primitive appelée « Composite » qui vous permet de combiner deux entrées de différentes façons, y compris deux ou trois ayant le même effet qu'un chemin de découpe.

The Composite primitive uses the alpha values of the pixels in the input images to determine what the output pixel should be, using the methods described by Thomas Porter and Tom Duff back in the 1980s, collectively referred to as the Porter-Duff blending modes. These blending modes are selected from the Operator pop-up in the filter editor: Default – This omits the operator from the filter primitive in the underlying XML file. Per the SVG Filter Effects spec, this causes Inkscape to behave as though a value of “over” had been supplied. For the sake of clarity, I recommend never using this option, and always explicitly selecting the “Over” option, if that's what you want. Over – The two images are laid on top of each other, with the top input appearing above the lower input. This is exactly the same as using the Merge primitive with two inputs, except that the order of the inputs is reversed. In – Only those parts of the top image that are “inside” the lower image will appear in the output. This has a similar effect to a clipping path. Out – Only those parts of the top image that are “outside” the lower image will appear in the output. This has a similar effect to an “inverse” clipping path. Atop – The output consists of the lower input image, plus all the parts of the upper input image that are inside the lower image. XOR – Performs an eXclusive OR operation between the RGB values of each of the pixels in the two input images. The effect is for the output image to include any non-overlapping parts of the input images. Arithmetic – This is not one of the Porter-Duff blending modes, but rather is an additional mode that is present in the SVG spec. It will be described in a little more detail later.

La primitive Composite utilise les valeurs d'opacité des pixels des images d'entrée pour déterminer ce que sera le pixel de sortie, utilisant les méthodes décrites par Thomas Porter et Tom Duff dans les années 80, connues sous le nom de modes fondus Porter-Duff. Ces modes fondus sont sélectionnés depuis la liste déroulante Opérateur de l'éditeur de filtres : Défaut – Ceci supprime l'opérateur de la primitive de filtrage dans le fichier XML sous-jacent. D'après la spécification des effets de filtrage SVG, Inkscape est ainsi amené à se comporter comme si une valeur de « Over » avait été fournie. Pour plus de clarté, je vous recommande de ne jamais utiliser cette option, et de toujours choisir l'option « Over » si c'est ce que vous voulez. Over – Les deux images sont l'une sur l'autre, avec l'entrée du haut apparaissant au-dessus de celle du bas. C'est exactement la même chose qu'en utilisant la primitive Fusion avec deux entrées, sauf que l'ordre des deux entrées est inversé. In – Seules les parties de l'image du haut qui sont à l'intérieur de l'image du bas apparaîtront à la sortie. L'effet est le même qu'avec un chemin de découpe. Out – Seules les parties de l'image du haut qui sont à l'extérieur de l'image du bas apparaîtront à la sortie. L'effet est le même qu'avec un chemin de découpe « inversé ». Atop – La sortie se compose de l'image d'entrée du dessous, plus toutes les parties de l'image du haut qui sont à l'intérieur de l'image du bas. XOR – Réalise une opération OU eXclusif sur les valeurs RGB de chacun des pixels des images d'entrée. L'effet est l'inclusion dans l'image de sortie de toutes les parties des images d'entrée qui ne se recouvrent pas. Arithmetic – Ce n'est pas un des modes fondus Porter-Duff, mais plutôt l'ajout d'un mode présent dans la spécification SVG. Je le décrirai prochainement un peu plus en détail.

Note that the filter UI provides four sliders, but even though these are only used for the Arithmetic operator, they nevertheless remain visible, though disabled, when any of the other operators is used. The descriptions above are broadly correct, but some subtleties slip in when the input images contain alpha values other than 0 and 255. If you want to use this primitive for clipping, it's therefore advisable to ensure that your input images don't contain intermediate values. The best way to do this is with the Component Transfer primitive, which gained a UI in Inkscape 0.91 and will be described in a future article. Sticking with the filters I've already covered, you can also use the Color Matrix primitive to stretch and offset the range of possible values to achieve a similar result. For example, this matrix will clamp alpha values such that those below 128 are converted to 0, and those above or equal are converted to 255.

Notez que l'interface utilisateur du filtre fournit 4 réglettes, mais, même si elles ne servent que pour l'opérateur Arithmetic, elles restent néanmoins visibles, bien que désactivées, lorsqu'un autre de ces opérateurs est utilisé.

Les descriptions ci-dessus sont en gros correctes, mais certaines subtilités apparaissent quand les images d'entrée contiennent des valeurs d'opacité autres que 0 et 255. Si vous voulez utiliser cette primitive pour une découpe, il est donc préférable de vérifier que les images d'entrée ne contiennent pas de valeurs intermédiaires. La meilleure façon de le faire est avec la primitive Transfert de composantes, qui a acquis une interface utilisateur dans la version 0.91 et sera décrite dans un futur article. En se limitant aux filtres que j'ai déjà décrits, vous pouvez aussi utiliser la primitive Matrice de couleurs pour élargir et décaler la plage des valeurs possibles afin d'obtenir le même résultat. Par exemple, cette matrice resserrera les valeurs d'opacité, de sorte que celles qui sont inférieures à 128 seront converties en 0, et celles égales ou supérieures seront remplacées par 255.

As with so many things in SVG, that's a lot of words to describe something that's better shown as an image. Here are the 5 Porter-Duff blending modes when applied to a couple of squares, first with no transparency, then with the opacity reduced to 75%. Note that the black outlines have been added afterwards to clarify which parts of the images remain – they're not present in the pure filtered output. Let's get back to our stacked shadow and take a look at how this filter can help to cut away the white layer. Consider just a small part of the output – a single letter. I've removed the Source Graphic so we're just seeing the two offset shadows: We need to keep the black part that's visible, but remove all the white content, leaving it transparent. In other words, we want to keep the part of the black layer that is outside the white layer. Clearly this is a job for the Composite primitive's “Out” blending mode. Because the Composite filter cares about only the opacity of the input sources, not their color, we can omit the Color Matrix primitive, giving us this filter chain and result:

Comme tant de choses dans SVG, il y a un tas de mots pour décrire ce qui est plus compréhensible avec une image. Voici les 5 modes fondus Porter-Duff quand ils sont appliqués à une paire de carrés, d'abord sans transparence, puis avec une opacité réduite à 75%. Notez que les lignes noires d'entourage ont été ajoutées après coup pour souligner les parties restantes des images - elles ne sont pas présentes dans la vraie sortie de filtrage.

Revenons à notre ombre empilée et regardons comment ce filtre peut nous aider à éliminer la couche blanche. Considérez simplement une petite partie de la sortie : une lettre unique. J'ai retiré l'image source si bien que nous ne voyons que les deux ombres décalées :

Nous devons garder la partie noire qui est visible, mais enlever tout le contenu blanc, le laissant transparent. En d'autres termes, nous voulons garder la partie de la couche noire qui est extérieure à la couche blanche. C'est évidemment un travail pour le mode fondu « Out » de la primitive Composite. Comme le filtre Composite ne s'intéresse qu'à l'opacité des sources d'entrée, pas à leur couleur, nous pouvons nous passer de la primitive Matrice de couleurs, ce qui nous donne comme résultat cette chaîne de filtrage :

All we need to do now is to add a final block to the chain to merge this output with our original source graphic once more, giving us the final result we were looking for – a stacked shadow with a transparent intermediate layer that works on any background (see top middle). There's one last thing to describe before concluding this month's article: that “Arithmetic” mode of the Composite filter, and its four sliders (K1 to K4). With this mode, each channel (R, G, B, A) of each pixel of the output image is calculated from the corresponding pixel channel of the input images (i1 and i2), weighted by the K1 to K4 values using the following formula: result = (K1×i1×i2) + (K2×i1) + (K3×i2) + K4

Tout ce dont nous avons besoin est d'ajouter à la fin de la chaîne un bloc pour fusionner encore une fois cette sortie avec l'image source originale, nous donnant le résultat final que nous cherchions - une ombre empilée avec une couche intermédiaire transparente qui fonctionne sur n'importe quel fond (voir en haut, au milieu).

Il y a une dernière chose à décrire avant de conclure l'article de ce mois : le mode « Arithmetic » de ce filtre Composite et ses quatre réglettes (K1 à K4). Avec ce mode, les quatre canaux (R, G, B, A) de chaque pixel de l'image de sortie sont calculés à partir du canal du pixel correspondant des images d'entrée (i1 et i2), pondérés par les valeurs K1 à K4 en utilisant la formule suivante :

résultat = (K1×i1×i2) + (K2×i1) + (K3×i2) + K4

Breaking this down, you can see that K4 isn't multiplied by anything, so it just represents a fixed offset. K2 and K3 are multiplied by i1 and i2 respectively, so they adjust the amount of each input that goes into the output. K1 is multiplied by both i1 and i2, so acts to stretch the range of the output values. This mode can be used to combine the output from two other filter primitives, allowing you to control the proportions of each input. The SVG spec suggests it might be useful for overlaying the output from some lighting effect primitives (not yet covered in this series) with texture data from another primitive or image source, but it can be useful whenever you want to mix two images together with some control over the strength of each one.

En décomposant ceci, vous pouvez voir que K4 est multiplié par rien ; il représente donc un décalage fixe. K2 et K3 sont respectivement multipliés par i1 et i2 ; ainsi, ils ajustent la quantité de chaque entrée qui compose la sortie. K1 est multiplié par i1 et i2 à la fois, si bien qu'il élargit la plage des valeurs de sortie.

Ce mode peut être utilisé pour combiner la sortie de deux autres primitives de filtrage, vous permettant de contrôler les proportions de chaque entrée. La spécification SVG suggère qu'il pourrait être utile pour superposer la sortie de certaines des primitives des effets d'éclairage (non encore décrites dans cette série) avec les données de texture d'une autre primitive ou d'une image source, mais il peut être utile si vous voulez mélanger deux images tout en contrôlant la force apportée par chacune.

ENCADRÉ Inkscape Forum The Inkscape Board is forming a committee to organise the creation of an official Inkscape forum. The main existing community forum (inkscapeforum.com) has become a target for spammers, and the owner of the domain has not been responsive to any emails or messages. The chair of the committee will be Brynn, a long standing contributor to the old site, who maintains a separate forum at www.inkscapecommunity.com. The major contributors to the forum are moving to her site, at least as an interim measure. Until a final decision is made about a new forum, it is strongly recommended that support posts or requests are made at Brynn's site, rather than at the old forum.

Forum d'Inkscape

Le conseil d'administration d'Inkscape forme un comité en vue d'organiser la création d'un forum officiel sur Inkscape. Le principal forum existant dans la communauté (inkscapeforum.com) est devenu une cible pour les spammeurs et le propriétaire du domaine ne répond plus aux mails et aux messages. Le président de ce comité sera Brynn, un contributeur de longue date sur l'ancien site, qui entretient un autre forum sur www.inkscapecommunity.com. Les principaux contributeurs du forum passent sur son site, au moins à titre provisoire. Jusqu'à ce qu'une décision finale soit prise à propos du nouveau forum, il est fortement recommandé que les messages de soutien et les demandes soient postés sur le site de Brynn, plutôt que sur l'ancien forum.

issue110/inkscape.txt · Dernière modification : 2016/07/09 14:51 de andre_domenech