Ceci est une ancienne révision du document !
Last time, I introduced the Filter Editor dialog and demonstrated how to create a simple filter chain, resulting in a drop shadow effect. The chain consisted of three filter primitives: Gaussian Blur, Offset and Merge. I also used the Source Alpha and Source Graphic inputs. Recall that each primitive in the chain has one or more inputs, denoted by triangles, and a single output represented by the bottom of the primitive. The output from the chain as a whole is always the output from the last primitive. Therefore, in the Inkscape UI, our drop shadow chain looks like that shown below left 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 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'interface utilisateur d'Inkscape, notre chaîne d'ombre portée ressemble à ce qui est montré en bas à gauche.
Avec une chaîne simple, c'est plutôt compréhensible , mais, avec au fur à à mesure que la complexité de filtrage grandit, une simple liste mono-dimensionnelle devient un outil peu maniable pour visualiser l'arrangement complexe des primitives qui s'élabore. Mathématiquement parlant, les filtres sont un « graphe orienté », consistant en une série de nœuds (les primitives) et des lignes orientées les reliant. De tels graphes sont habituellement dessinés en deux dimensions, et vous pouvez trouver plus facile d'essayer d'imaginer vos chaînes de cette manière. Par exemple, notre ombre portée simple pourrait être représentée comme montré en bas à droite.
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. 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 bleus pour les primitives, verts pour les source d'image et bleu sarcele pour la sortie finale. La boîte grise montre simplement le résultat intermédiaire que vous pourriez voir si vous pouviez avoir un aperçu à cet endroit. Heureusement, vous pouvez voir comment cette disposition correspond à l'interface d'Inkscape, et j'utiliserai cette approche pour décrire des filtres plus complexes dans la suite de cette série.
Un problème de ombre portée est qu'elle est basée sur l'opacité de la source de l'objet original, qui est est en fait une silhouette noire. Mais que ce passe-t-il si vous voulez que votre ombre soit plus translucide - grise au lieu de noire - ou si vous voulez qu'elle soit d'une couleur complètement différente ? Il y a une primitive de filtrage qui vous permet de manipuler la couleur de l'image dans la chaîne, mais, malheureusement, c'est un nouveau cas d'une interface confuse qui aurait pu être réalisée d'une manière beaucoup plus évidente.
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. 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'opacité de l'ombre ; aussi, soit nous devons aller après l'étape du flou gaussien (pour changer l'opacité de l'image déjà floutée), soit directement en haut de la chaîne (pour changer l'opacité avant l'application du flou). Les deux approches vont donné à peu près le même résultat ; aussi, j'ai choisi de le mettre en haut de la liste. Ensuite, vous devez modifier les connexions de sorte que la matrice de couleurs prenne sont entrée dans la colonne Opacité de la source et que la flou gaussien prenne la sienne à la sortie de la primitive Matrice des couleurs.
Ayant sélectionné la primitive Matrice des couleurs, regardez les paramètres en bas du dialogue. D'abord, il y a une liste déroulante Type qui vous permet une sélection entre quatre variétés différentes de manipulation des couleurs. Trois d'entre elles ont des interfaces simples et faciles d'utilisation… mais nous avons bien sûr besoin de l'autre ! Sélectionnez l'option Matrice (qui est l'option par défaut quand vous ajoutez la primitive en premier) et vous allez voir une grille de nombre avec peu d'explication complémentaire (il y a une longue info-bulle, mais je ne suis pas sûr que ça aide beaucoup).
Above is that same matrix, presented with some headings to help clarify things: Remember that filters are a way to manipulate the bitmap version of your vector image, just at the point it's converted to pixels. This matrix essentially holds some rules about how each individual pixel in your input image should be modified in order to produce the corresponding pixel in your output image. Let's take the top row as an example. Suppose the first pixel in our image has an RGB value of (150, 128, 255) and it's completely opaque (an Alpha value of 255). To calculate the color of the output pixel we have to calculate its R, G, B and A values separately – the top row, therefore, is only concerned with the Red component of the pixel. The formula for calculating the Red output pixel value is: 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é 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, juste au moment où elle est convertie en pixels. Cette matrice contient principalement quelques règles définissant comment chaque pixel individuel de votre image d'entrée devra être converti pour produire le pixel correspondant de l'image de sortie.
Prenons la rangée du haut comme exemple. Supposez que le premier pixel de votre image est la valeur RGB (150, 128, 255) et qu'il est 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 séparément - la rangée du haut n'est en lien qu'avec la composante Rouge du pixel. La formule pour calculer la sortie Rouge du pixel est :
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. To make the drop-shadow more translucent, we need to modify the output Alpha value. On the bottom row of the matrix, click on the 1.00 field and change it to 0.50 then press the Return or Enter key. Immediately you'll see the drop shadow change. You can choose any value you wish (between 0.00 and 1.00) in order to create a lighter or darker shadow.
Dans la formule, les nombres en gras sont pris dans la première ligne de la matrice. Il est évident que seul 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'entrée à la sortie ans la modifier. C'est une matrice « identité », en termes mathématiques. Parce que la même matrice est utilisée pour tous les pixels de l'image d'entrée, il en résulte que la primitive de filtrage copiera simplement l'image d'entrée directement à la sortie sans aucune modification.
Pour rendre l'ombre portée plus translucide, nous devons modifier la valeur Alpha de sortie. Sur la ligne du bas de la matrice, cliquez sur le champ 1.00 et modifiez-le en 0.50 puis appuyez sur Retour ou sur la touche Entrée. Vous allez voir immédiatement l'ombre portée changer. Vous pouvez choisir n'importe quelle valeur que vous souhaitez (entre 0.00 et 1.00) de façon à créer une ombre plus claire ou plus sombre.
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: BOUT = (RIN × 0.00) + (GIN × 0.00) + (BIN × 1.00) + (AIN × 0.00) + (255 × 0.80) 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'ombre ? Il y a plusieurs façons de la faire, mais nous commencerons en utilisant la quatrième colonne de la matrice - celle nommée « Fixed Offset » (décalage fixe) dans mon diagramme. Considérez que les pixels noirs de l'image de l'Opacité de la source ont une valeur RGB de (0,0,0,1) - avec tous ces zéros, il est clair que ça ne va pas changer le résultat de la multiplication pour les composantes rouge, verte et bleue. Mais la quatrième colonne nous permet d'ajouter (ou de soustraire) un valeur fixe. Si vous modifiez la quatrième colonne de la troisième ligne en 0.80, la formule pour la composante bleue des pixels de sortie devient :
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 le R et le G, et vous verrez rapidement que vous pouvez utiliser cette technique pour réaliser n'importe quelle couleur d'ombre, toutes à partir de notre silhouette noire.
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). To convert our color to black, we have to set each component to zero. There are a couple of ways to do this: • 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.
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'abord nous avons besoin d'une image coloré à retravailler. L'option la plus facile est de déplacer la connexion d'entrée d'Opacité de la source à Source image. Vous devriez ramener aussi les valeurs de la matrice des couleurs à la matrice identité pour repartir d'un état connu. Une fois fait, votre ombre portée devrait avoir la même couleur que votre objet original (rouge, dans mon cas).
Pour convertir notre couleur en noir, nous devons régler chaque composante à zéro. Il y a deux façons de la faire : • Mettre -1,00 dans le champ Décalage fixe pour les valeurs de sortie R, G et B. Les valeurs d'entrée n'ont aucune importance, car l'effet est de soustraire 255 de la sortie. Ceci positionne chaque sortie à zéro, parce qu'il n'est possible pour une composante couleur de descendre plus bas. • Changer les valeurs 1,00 des trois premières colonnes en 0,00. Quelque soit la valeur d'entrée, la multiplication par zéro donnera zéro en sortie.
I took the second approach, to give me a black drop shadow once more: Of course this is a terribly inefficient way to create a silhouette compared with just linking to the Background Alpha source, but it helps to demonstrate how output values are calculated from input values. So far, however, we've just looked at simple mappings, where red remains red and blue remains blue, but this filter primitive also allows you to map one input component to a completely different output. Consider a matrix like this: 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 :
Bien sûr, c'est une solution particulièrement inefficace pour créer une silhouette , en comparaison d'un simple lien à l'Opacité de la source, mais elle aide à montrer comment sont calculées les valeurs de sortie à partir des valeurs d'entrée. Jusqu'ici, cependant, nous n'avons regardé que des réseaux simples, où le rouge reste rouge, le bleu bleu ; mais cette primitive de filtrage permet aussi de relier une composante d'entrée sur une toute autre sortie. Considérez une matrice comme celle-ci :
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 à partir de la valeur de la composante verte de l'entrée, alors que la sortie verte vient de l'entrée bleue et la sortie bleue résulte de l'entrée rouge. Regardons le résultat sur une image source multicolore :
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.
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, so the Type pop-up provides three other options to avoid you having to wrestle with the full matrix: • Saturate: Provides a slider to let you change the saturation of your image. In other words, remove color from it, ultimately producing a grayscale result at the most extreme. • Hue Rotate: Shift the color of your object by a fixed amount. • 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't map neatly to the human perception of brightness, so this really works effectively only on grayscale input images. This can be used to punch holes in your filter output, based on the images produced in other parts of the chain. Notable by its absence is a shorthand option for adjusting the opacity – where we came in at the start of this article. Unfortunately, if you want to make your drop shadow a little more transparent, you have no choice but to deal with the full matrix approach, even if you are only changing a single value in the bottom row.