| Les deux révisions précédentesRévision précédente | |
| issue110:inkscape [2016/07/08 14:06] – auntiee | issue110:inkscape [2016/07/09 14:51] (Version actuelle) – andre_domenech |
|---|
| 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'abord, milles 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 porter ce problème à mon attention. Bon, poursuivons… | 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. | 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. |
| 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:** | 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 permettrait d'obtenir le même résultat mais avec un seul objet parent à modifier pour propager vos modifications sur toute la pile. | 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. | 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. |
| 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) : | 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) : |
| |
| De façon à obtenir une sortie blanche avec la matrice de couleurs, chaque ligne R, G et B doit valoir au moins 1,0 (ce qui équivaut à 255 en RGB). 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 : | 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 connaissez comment créer les éléments constituants de notre filtre, nous avons 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 : | 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: | **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.** | 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 : | 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 une graphe linéaire séparé se connectant sur une Fusion commune, l'interface d'Inkscape devient vite rempli d'un meli-melo 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. | 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. | **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.** | 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 parait 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'un ombre noire disjointe, mais dès que nous la mettons sur un fond différent, la couche blanche se détache. | 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. | 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. |
| |
| 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 : | 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 specification 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 ça que vous voulez. | 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é. | 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. | 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. |
| 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:** | 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%. Note 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. | 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 : | 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 : | 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 : |
