issue110:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
issue110:inkscape [2016/07/04 07:18] – d52fr | issue110:inkscape [2016/07/09 14:51] (Version actuelle) – andre_domenech | ||
---|---|---|---|
Ligne 4: | Ligne 4: | ||
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:** | 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' | ||
+ | |||
+ | Un autre type d' | ||
+ | |||
+ | 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' | ||
**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. | **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. | ||
Ligne 10: | Ligne 16: | ||
With the few filter primitives you've learnt in the previous two instalments, | With the few filter primitives you've learnt in the previous two instalments, | ||
+ | |||
+ | 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' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Avec les quelques primitives de filtrage que nous avons apprises dans les deux articles précédents, | ||
**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): | **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: | 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:** | 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' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | 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' | ||
**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: | **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, | 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, | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Si vous suivez chaque ligne de l' | ||
**There' | **There' | ||
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.** | 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' | ||
+ | |||
+ | Dans certains cas, nous pouvons souhaiter que la couche blanche soit visible, mais, dans d' | ||
**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: | **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. | 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.** | + | 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. | + | 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. | 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. | 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. | 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.** | 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' | ||
+ | Défaut – Ceci supprime l' | ||
+ | Over – Les deux images sont l'une sur l' | ||
+ | In – Seules les parties de l' | ||
+ | Out – Seules les parties de l' | ||
+ | Atop – La sortie se compose de l' | ||
+ | XOR – Réalise une opération OU eXclusif sur les valeurs RGB de chacun des pixels des images d' | ||
+ | Arithmetic – Ce n'est pas un des modes fondus Porter-Duff, | ||
**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. | **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.** | 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' | ||
+ | |||
+ | Les descriptions ci-dessus sont en gros correctes, mais certaines subtilités apparaissent quand les images d' | ||
**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, | **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, | ||
Ligne 42: | Ligne 82: | ||
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' | 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' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | 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' | ||
+ | |||
+ | Nous devons garder la partie noire qui est visible, mais enlever tout le contenu blanc, le laissant transparent. En d' | ||
**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). | **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). | ||
Ligne 47: | Ligne 93: | ||
There' | There' | ||
- | result = (K1×i1×i2) + (K2×i1) + (K3×i2) + K4 | + | result = (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, | + | Tout ce dont nous avons besoin est d' |
- | **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.** | + | Il y a une dernière chose à décrire avant de conclure l' |
+ | |||
+ | 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, | ||
+ | |||
+ | 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' | ||
Ligne 60: | Ligne 116: | ||
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' | 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' | ||
+ | |||
+ | Forum d' | ||
+ | |||
+ | Le conseil d' |
issue110/inkscape.1467609484.txt.gz · Dernière modification : 2016/07/04 07:18 de d52fr