issue109: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 | ||
issue109:inkscape [2016/06/02 09:22] – d52fr | issue109:inkscape [2016/06/06 10:21] (Version actuelle) – auntiee | ||
---|---|---|---|
Ligne 3: | Ligne 3: | ||
With a simple chain this is fairly understandable but, as the complexity of your filters grows, a simple one-dimensional list becomes an unwieldy tool for looking at the complex arrangement of primitives that evolves. Mathematically speaking, filters are a “directed graph”, consisting of a series of nodes (the primitives) and uni-directional lines connecting them. Such graphs are usually drawn in two dimensions, and you may find it easier to try to imagine your chains in that form. For example, our simple drop shadow could be represented like that shown below right.** | With a simple chain this is fairly understandable but, as the complexity of your filters grows, a simple one-dimensional list becomes an unwieldy tool for looking at the complex arrangement of primitives that evolves. Mathematically speaking, filters are a “directed graph”, consisting of a series of nodes (the primitives) and uni-directional lines connecting them. Such graphs are usually drawn in two dimensions, and you may find it easier to try to imagine your chains in that form. For example, our simple drop shadow could be represented like that shown below right.** | ||
- | La dernière fois, j'ai présenté la boîte de dialogue Éditeur de filtres et j'ai montré comment | + | La dernière fois, j'ai présenté la boîte de dialogue Éditeur de filtres et j'ai montré comment |
- | Avec une chaîne simple, c' | + | Avec une chaîne simple, c' |
**Here I've used blue boxes for the primitives, green for the image sources, and teal for the final output. The gray box just shows the intermediate result that you would see if you could peek into the filter chain at that point. Hopefully you can see how this layout relates to the Inkscape UI, and I'll use this approach again to describe more complex filters as the series goes on. | **Here I've used blue boxes for the primitives, green for the image sources, and teal for the final output. The gray box just shows the intermediate result that you would see if you could peek into the filter chain at that point. Hopefully you can see how this layout relates to the Inkscape UI, and I'll use this approach again to describe more complex filters as the series goes on. | ||
Ligne 11: | Ligne 11: | ||
One problem with our drop shadow is that it's based on the Source Alpha of the original object, which is essentially a black silhouette. But what if you want your shadow to be more translucent – gray rather than black – or you want it to have a different color entirely? There is a filter primitive that lets us manipulate the color of the image in the chain, but unfortunately it's another case of a confusing UI that could have been made a lot more obvious.** | One problem with our drop shadow is that it's based on the Source Alpha of the original object, which is essentially a black silhouette. But what if you want your shadow to be more translucent – gray rather than black – or you want it to have a different color entirely? There is a filter primitive that lets us manipulate the color of the image in the chain, but unfortunately it's another case of a confusing UI that could have been made a lot more obvious.** | ||
- | Ici, j'ai utilisé des boîtes | + | Ici, j'ai utilisé des boîtes |
- | Un problème de ombre portée est qu' | + | Un problème de notre ombre portée est qu' |
**Start by adding the Color Matrix primitive to your filter. It will appear at the bottom of the chain, but you can drag it to another location. We'll start by changing the opacity of the shadow, so it either needs to go after the Gaussian Blur step (to change the opacity of the already blurred image), or right at the top of the chain (to change the opacity before the blur is applied). Either approach will give roughly the same result, so I've chosen to put it at the top of the list. You then need to modify the connections so that the Color Matrix gets its input from the Source Alpha column, and the Gaussian Blur gets its input from the Color Matrix primitive. | **Start by adding the Color Matrix primitive to your filter. It will appear at the bottom of the chain, but you can drag it to another location. We'll start by changing the opacity of the shadow, so it either needs to go after the Gaussian Blur step (to change the opacity of the already blurred image), or right at the top of the chain (to change the opacity before the blur is applied). Either approach will give roughly the same result, so I've chosen to put it at the top of the list. You then need to modify the connections so that the Color Matrix gets its input from the Source Alpha column, and the Gaussian Blur gets its input from the Color Matrix primitive. | ||
Ligne 19: | Ligne 19: | ||
With the Color Matrix primitive selected, take a look at the parameters at the bottom of the dialog. First there is a Type pop-up which lets you select between four different varieties of color manipulation. Three of them have simple, easy-to-use interfaces… so of course we need the other one! Select the Matrix option (this is also the default when you first add the primitive), and you'll be presented with a grid of numbers with little extra explanation (there is a lengthy tooltip, but I'm not sure it helps very much).** | With the Color Matrix primitive selected, take a look at the parameters at the bottom of the dialog. First there is a Type pop-up which lets you select between four different varieties of color manipulation. Three of them have simple, easy-to-use interfaces… so of course we need the other one! Select the Matrix option (this is also the default when you first add the primitive), and you'll be presented with a grid of numbers with little extra explanation (there is a lengthy tooltip, but I'm not sure it helps very much).** | ||
- | Commencez par ajouter la primitive Matrice de couleurs à votre filtre. Elle apparaîtra en bas de la chaîne, mais vous pouvez la tirer à un autre endroit. Nous commencerons par modifier l' | + | Commencez par ajouter la primitive Matrice de couleurs à votre filtre. Elle apparaîtra en bas de la chaîne, mais vous pouvez la tirer à un autre endroit. Nous commencerons par modifier l' |
- | Ayant sélectionné la primitive Matrice des couleurs, regardez les paramètres en bas du dialogue. D' | + | Ayant sélectionné la primitive Matrice des couleurs, regardez les paramètres en bas du dialogue. D' |
**Above is that same matrix, presented with some headings to help clarify things: | **Above is that same matrix, presented with some headings to help clarify things: | ||
Ligne 30: | Ligne 30: | ||
ROUT = (RIN × 1.00) + (GIN × 0.00) + (BIN × 0.00) + (AIN × 0.00) + (255 × 0.00)** | ROUT = (RIN × 1.00) + (GIN × 0.00) + (BIN × 0.00) + (AIN × 0.00) + (255 × 0.00)** | ||
+ | |||
+ | Au-dessus, voici la même matrice, présentée avec quelques en-têtes pour aider à clarifier les choses : | ||
+ | |||
+ | Souvenez-vous que les filtres sont une façon de manipuler la version bitmap de votre image vectorielle, | ||
+ | |||
+ | Prenons la rangée du haut comme exemple. Supposez que le premier pixel de votre image ait la valeur RGB (150, 128, 255) et qu'il soit complètement opaque (valeur Alpha de 255). Pour calculer la couleur du pixel de sortie, nous devons calculer séparément les valeurs R, G, B et A (rouge, vert, bleu, alpha) - la rangée du haut n'est en lien qu' | ||
+ | |||
+ | ROUT = (RIN × 1,00) + (GIN × 0,00) + (BIN × 0,00) + (AIN × 0,00) + (255 × 0,00) | ||
**The bold numbers in the formula are taken from the first row of figures in the matrix. Clearly only the first value has an effect in this case, as all the others are zero, so ROUT is simply the same as RIN × 1.00. In other words, with these figures the red component is passed through untouched, with a value of 150. If you repeat the process for each of the remaining three lines, you'll see that the default color matrix simply passes the input color through to the output without modifying it. It's an “identity” matrix, in mathematical terms. Because the same matrix is used for every pixel in the input image, the result is that this filter primitive will just copy the input image directly to the output without changing it at all. | **The bold numbers in the formula are taken from the first row of figures in the matrix. Clearly only the first value has an effect in this case, as all the others are zero, so ROUT is simply the same as RIN × 1.00. In other words, with these figures the red component is passed through untouched, with a value of 150. If you repeat the process for each of the remaining three lines, you'll see that the default color matrix simply passes the input color through to the output without modifying it. It's an “identity” matrix, in mathematical terms. Because the same matrix is used for every pixel in the input image, the result is that this filter primitive will just copy the input image directly to the output without changing it at all. | ||
To make the drop-shadow more translucent, | To make the drop-shadow more translucent, | ||
+ | |||
+ | Dans la formule, les nombres en gras sont pris dans la première ligne de la matrice. Il est évident que seule la première valeur a un effet dans ce cas, car toutes les autres sont à zéro ; ainsi, ROUT est simplement égal à RIN x 1,00. Dit autrement, avec ces valeurs, la composante rouge est transmise intacte, avec une valeur de 150. Si vous répétez ce processus pour chacune des trois lignes restantes, vous verrez que la matrice de couleur par défaut transmet la couleur d' | ||
+ | |||
+ | Pour rendre l' | ||
**What about changing the color of the shadow? There are a few ways to go about this, but we'll start by using the fourth column in the Color Matrix – the one labelled as “Fixed Offset” in my diagram. Consider that the black pixels in the Source Alpha image have an RGBA value of (0, 0, 0, 1) – with all those zeros it's clear that no amount of multiplication will change the output of the red, green and blue components. But the fourth column lets us add (or subtract) a fixed value. If you change the fourth column on the third row to 0.80, the formula for the blue component of the output pixels becomes: | **What about changing the color of the shadow? There are a few ways to go about this, but we'll start by using the fourth column in the Color Matrix – the one labelled as “Fixed Offset” in my diagram. Consider that the black pixels in the Source Alpha image have an RGBA value of (0, 0, 0, 1) – with all those zeros it's clear that no amount of multiplication will change the output of the red, green and blue components. But the fourth column lets us add (or subtract) a fixed value. If you change the fourth column on the third row to 0.80, the formula for the blue component of the output pixels becomes: | ||
Ligne 40: | Ligne 52: | ||
The multiplied R, G and B values all come to 0, but then we add 255 × 0.8 onto the result, giving us a final blue component of 204. Our RGBA output value therefore becomes (0, 0, 204, 1), giving us a blue drop shadow. Try changing the values of the fixed offset for R and G as well and you'll quickly see that we can use this technique to produce any color of shadow we want, all from our black silhouette.** | The multiplied R, G and B values all come to 0, but then we add 255 × 0.8 onto the result, giving us a final blue component of 204. Our RGBA output value therefore becomes (0, 0, 204, 1), giving us a blue drop shadow. Try changing the values of the fixed offset for R and G as well and you'll quickly see that we can use this technique to produce any color of shadow we want, all from our black silhouette.** | ||
+ | |||
+ | Et pour changer la couleur de l' | ||
+ | |||
+ | BOUT = (RIN × 0,00) + (GIN × 0,00) + (BIN × 1,00) + (AIN × 0,00) + (255 × 0,80) | ||
+ | |||
+ | Les valeurs R, G et B de la multiplication tombent toutes à zéro, mais comme nous ajoutons 255 x 0.80 au résultat, nous obtenons une composante bleue de 204 comme résultat. Notre valeur de sortie RGBA devient (0, 0, 204, 1), donnant une ombre portée bleue. Essayez aussi de changer les valeurs des décalages fixes pour R et G, et vous verrez rapidement que vous pouvez utiliser cette technique pour réaliser n' | ||
**How about using the Color Matrix filter to go in the opposite direction – to generate a black shadow from a colored one? No problem, but first you'll need a colored image to work with. The easiest option is to move the input connection from Source Alpha to Source Graphic. You should also change your Color Matrix values back to the identity matrix to give you a known state to start from. With that done, your drop shadow should now be the same color as your original object (red, in my case). | **How about using the Color Matrix filter to go in the opposite direction – to generate a black shadow from a colored one? No problem, but first you'll need a colored image to work with. The easiest option is to move the input connection from Source Alpha to Source Graphic. You should also change your Color Matrix values back to the identity matrix to give you a known state to start from. With that done, your drop shadow should now be the same color as your original object (red, in my case). | ||
Ligne 46: | Ligne 64: | ||
• Put -1.00 into the Fixed Offset field for the R, G and B output values. No matter what the input values are, this has the effect of subtracting 255 from the output. This has the effect of setting each output to zero, because it's not possible for a color component to go any lower than that. | • Put -1.00 into the Fixed Offset field for the R, G and B output values. No matter what the input values are, this has the effect of subtracting 255 from the output. This has the effect of setting each output to zero, because it's not possible for a color component to go any lower than that. | ||
• Change the 1.00 values in the first three rows to 0.00 instead. Regardless of the input value, multiplying it by zero will give a zero output.** | • Change the 1.00 values in the first three rows to 0.00 instead. Regardless of the input value, multiplying it by zero will give a zero output.** | ||
+ | |||
+ | Comment utiliser le filtre Matrice de couleurs pour aller en sens opposé, pour générer une ombre noire à partir d'une colorée ? Pas de problème, mais d' | ||
+ | |||
+ | Pour convertir notre couleur en noir, nous devons régler chaque composante à zéro. Il y a deux façons de le faire : | ||
+ | • Mettre -1,00 dans le champ Décalage fixe pour les valeurs de sortie R, G et B. Les valeurs d' | ||
+ | • Changer les valeurs 1,00 des trois premières colonnes en 0,00. Quelle que soit la valeur d' | ||
**I took the second approach, to give me a black drop shadow once more: | **I took the second approach, to give me a black drop shadow once more: | ||
Ligne 51: | Ligne 75: | ||
It's similar to the identity matrix, except that the R, G and B columns are shifted by one place. The result is that the red component of the output pixel is taken from the value of the green component of the input, whilst the green output comes from the blue input and the blue output is taken from the red input. Let's see the result on a multi-colored source image:** | It's similar to the identity matrix, except that the R, G and B columns are shifted by one place. The result is that the red component of the output pixel is taken from the value of the green component of the input, whilst the green output comes from the blue input and the blue output is taken from the red input. Let's see the result on a multi-colored source image:** | ||
+ | |||
+ | J'ai pris la deuxième approche, pour avoir à nouveau une ombre portée noire : | ||
+ | |||
+ | Bien sûr, c'est une solution particulièrement inefficace pour créer une silhouette, en comparaison d'un simple lien à l' | ||
+ | |||
+ | Elle est similaire à une matrice identité, sauf que les colonnes R, G et B ont changé de place. Le résultat, c'est que la composante rouge du pixel de sortie est obtenue à partir de la valeur de la composante verte de l' | ||
**Notice that this moves away from having a simple fixed color for the shadow, and instead produces different colors based on the corresponding pixel in the input image. If you include the output Alpha channel, things can get even weirder. Here's our multi-colored text with the RGB values zeroed to give us a black drop shadow again, except that the fourth row has been changed so that the Alpha channel is taken from the Red input component. Notice that colors with a high red value have dense, solid shadows, whilst those with no red in them (such as the green S and blue O in “Shadow”) have no shadows at all. | **Notice that this moves away from having a simple fixed color for the shadow, and instead produces different colors based on the corresponding pixel in the input image. If you include the output Alpha channel, things can get even weirder. Here's our multi-colored text with the RGB values zeroed to give us a black drop shadow again, except that the fourth row has been changed so that the Alpha channel is taken from the Red input component. Notice that colors with a high red value have dense, solid shadows, whilst those with no red in them (such as the green S and blue O in “Shadow”) have no shadows at all. | ||
Although I've shown only relatively simple examples here, it's possible to create complex mappings between color channels. If you really want your red output to consist of 90% of the red input, less 10% of the green, less 35% of the blue, plus a fixed offset of 64, you just have to put values of 0.9, -0.1, -0.35 and 0.25 into the top row. Of course, predicting the output from complex combinations like this becomes rather difficult, so for normal use I recommend sticking with simpler, easy to understand mappings.** | Although I've shown only relatively simple examples here, it's possible to create complex mappings between color channels. If you really want your red output to consist of 90% of the red input, less 10% of the green, less 35% of the blue, plus a fixed offset of 64, you just have to put values of 0.9, -0.1, -0.35 and 0.25 into the top row. Of course, predicting the output from complex combinations like this becomes rather difficult, so for normal use I recommend sticking with simpler, easy to understand mappings.** | ||
+ | |||
+ | Notez que ceci nous éloigne d'une simple couleur fixe pour l' | ||
+ | |||
+ | Bien que je n'aie montré que des exemples relativement simples ici, il est possible de créer des réseaux complexes entre les canaux de couleurs. Si vous voulez réellement que votre sortie rouge soit faite de 90 % d' | ||
**This ability to flexibly map color components to each other, or to and from the Alpha value, can be useful on some complex and esoteric filters. Most of the time, however, you don't need that degree of flexibility, | **This ability to flexibly map color components to each other, or to and from the Alpha value, can be useful on some complex and esoteric filters. Most of the time, however, you don't need that degree of flexibility, | ||
Ligne 61: | Ligne 95: | ||
• Luminance to Alpha: Set the output alpha based on the RGB input values. In theory this makes dark areas more transparent and light areas more opaque, but RGB doesn' | • Luminance to Alpha: Set the output alpha based on the RGB input values. In theory this makes dark areas more transparent and light areas more opaque, but RGB doesn' | ||
- | Notable by its absence is a shorthand option for adjusting the opacity – where we came in at the start of this article. Unfortunately, | + | Notable by its absence is a shorthand option for adjusting the opacity – where we came in at the start of this article. Unfortunately, |
+ | |||
+ | Cette capacité à relier avec flexibilité les composantes de couleur de l'une à l' | ||
+ | • Saturation : fournit une réglette pour vous permettre de modifier la saturation de votre image. En d' | ||
+ | • Décalage de teinte : Décale la couleur de votre objet d'une valeur fixe. | ||
+ | • Luminance vers opacité : règle la sortie Alpha sur la base des valeurs des entrées RGB. En théorie, ceci rend les zones sombres plus transparentes et les zones claires plus opaques, mais le RGB ne correspond pas franchement à la perception humaine de la luminosité ; aussi, ceci ne fonctionne bien que sur les images d' | ||
+ | |||
+ | Notez l' | ||
+ |
issue109/inkscape.1464852143.txt.gz · Dernière modification : 2016/06/02 09:22 de d52fr