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/05 08:20] – d52fr | issue109:inkscape [2016/06/06 10:21] (Version actuelle) – auntiee | ||
---|---|---|---|
Ligne 5: | Ligne 5: | ||
La dernière fois, j'ai présenté la boîte de dialogue Éditeur de filtres et j'ai montré comment créer une chaîne simple de filtres, avec une ombre portée comme résultat. La chaîne était constituée de trois primitives de filtrage : un flou gaussien, un décalage et une fusion. J'ai aussi utilisé les entrées Opacité de la source et Source image. Pour rappel, chaque primitive de la chaîne a une ou plusieurs entrées, indiquées par des triangles, et une seule sortie représentée par le bas de la primitive. La sortie globale de la chaîne est toujours la sortie de la dernière primitive. Ainsi donc, dans l' | La dernière fois, j'ai présenté la boîte de dialogue Éditeur de filtres et j'ai montré comment créer une chaîne simple de filtres, avec une ombre portée comme résultat. La chaîne était constituée de trois primitives de filtrage : un flou gaussien, un décalage et une fusion. J'ai aussi utilisé les entrées Opacité de la source et Source image. Pour rappel, chaque primitive de la chaîne a une ou plusieurs entrées, indiquées par des triangles, et une seule sortie représentée par le bas de la primitive. La sortie globale de la chaîne est toujours la sortie de la dernière primitive. Ainsi donc, dans l' | ||
- | Avec une chaîne simple, c'est assez compréhensible , mais, avec au fur et à mesure que la complexité de filtrage grandit, une simple liste mono-dimensionnelle devient un outil peu maniable pour visualiser l' | + | Avec une chaîne simple, c'est assez compréhensible , mais, au fur et à mesure que la complexité de filtrage grandit, une simple liste mono-dimensionnelle devient un outil peu maniable pour visualiser l' |
**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 bleues pour les primitives, vertes pour les source | + | Ici, j'ai utilisé des boîtes bleues pour les primitives, vertes pour les sources |
Un problème de notre ombre portée est qu' | Un problème de notre ombre portée est qu' | ||
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 35: | Ligne 35: | ||
Souvenez-vous que les filtres sont une façon de manipuler la version bitmap de votre image vectorielle, | 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' | + | 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' |
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) | ||
Ligne 45: | Ligne 45: | ||
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' | 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' | + | 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 53: | Ligne 53: | ||
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' | + | Et pour changer la couleur de l' |
BOUT = (RIN × 0,00) + (GIN × 0,00) + (BIN × 1,00) + (AIN × 0,00) + (255 × 0,80) | 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), nous 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' | + | 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 65: | Ligne 65: | ||
• 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é | + | 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 la faire : | + | 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' | + | • 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. Quelque | + | • 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 76: | Ligne 76: | ||
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 une ombre portée noire, à nouveau | + | J'ai pris la deuxième approche, pour avoir à nouveau |
Bien sûr, c'est une solution particulièrement inefficace pour créer une silhouette, en comparaison d'un simple lien à l' | 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 obtenu | + | 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 |
**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. | ||
Ligne 86: | Ligne 86: | ||
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' | + | Notez que ceci nous éloigne d'une simple couleur fixe pour l' |
- | Bien que je n'ai 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' | + | 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 95: | 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' | + | 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' | + | • 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. | • 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' | • 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' | + | Notez l' |
issue109/inkscape.1465107603.txt.gz · Dernière modification : 2016/06/05 08:20 de d52fr