| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue74:inkscape [2013/11/24 16:07] – auntiee | issue74:inkscape [2013/11/24 18:02] (Version actuelle) – andre_domenech |
|---|
| The solution to this problem is masking. This is a technique that uses a grayscale image as a means of specifying the opacity of another object or group. Any white sections in the image cause that part of the masked object to appear opaque. Black sections cause that part to appear transparent. And grays in-between result in varying levels of opacity.** | The solution to this problem is masking. This is a technique that uses a grayscale image as a means of specifying the opacity of another object or group. Any white sections in the image cause that part of the masked object to appear opaque. Black sections cause that part to appear transparent. And grays in-between result in varying levels of opacity.** |
| |
| La transparence - ou son contraire, l'opacité - est un concept si fondamental dans Inkscape qu'il a été l'un des premiers sujets abordés dans cette série. Dans la 3ème partie, la boîte d'incrément de l'opacité sur la barre d'état, qui vous donne la possibilité de définir un niveau de transparence unique pour un objet entier, ou même un groupe d'objets, vous a été présentée. | La transparence - ou son contraire, l'opacité - est un concept si fondamental dans Inkscape qu'il a été l'un des premiers sujets abordés dans cette série. Dans la troisième partie, la boîte d'incrément de l'opacité sur la barre d'état, qui vous donne la possibilité de définir un niveau de transparence unique pour un objet entier, ou même un groupe d'objets, vous a été présentée. |
| |
| Si vous voulez qu'un seul objet ait une opacité variable - telle que complètement transparent à une extrémité, et opaque à l'autre - vous pouvez utiliser un dégradé pour le remplissage et le contour. Mais en est-il de même pour un groupe d'objets ? Vous pouvez définir des gradients appropriés sur chaque élément dans le groupe séparément pour obtenir l'effet désiré, mais, si votre groupe contient beaucoup d'objets, alors l'approche devient pénible très rapidement. | Si vous voulez qu'un seul objet ait une opacité variable - telle que complètement transparent à une extrémité, et opaque à l'autre - vous pouvez utiliser un dégradé pour le remplissage et le contour. Mais en est-il de même pour un groupe d'objets ? Vous pouvez définir des gradients appropriés sur chaque élément dans le groupe séparément pour obtenir l'effet désiré, mais, si votre groupe contient beaucoup d'objets, alors l'approche devient pénible très rapidement. |
| |
| La solution à ce problème est : le masquage. Il s'agit d'une technique qui utilise une image en niveaux de gris comme un moyen de spécifier l'opacité d'un autre objet ou groupe. Toutes les parties blanches de l'image rendent la même partie de l'objet masqué opaque. Les sections noir rendent les parties masquées transparentes. Et les gris entre les deux donnent différents niveaux d'opacité. | La solution à ce problème est : le masquage. Il s'agit d'une technique qui utilise une image en niveaux de gris comme un moyen de spécifier l'opacité d'un autre objet ou groupe. Toutes les parties blanches de l'image rendent la même partie de l'objet masqué opaque. Les sections noires rendent les parties masquées transparentes. Et les gris entre les deux donnent différents niveaux d'opacité. |
| |
| **Let's look at an example. In this image (below) I've placed a solid red circle on top of a solid green background. The green is there mainly to show the effect more clearly. On top of the circle is a rectangle with a white-black-white gradient. Using this rectangle as a mask for the circle gives the result of a clipped circle that fades from opaque to transparent and back to opaque. | **Let's look at an example. In this image (below) I've placed a solid red circle on top of a solid green background. The green is there mainly to show the effect more clearly. On top of the circle is a rectangle with a white-black-white gradient. Using this rectangle as a mask for the circle gives the result of a clipped circle that fades from opaque to transparent and back to opaque. |
| Did I say pixel? In a vector format? In practice, there are few cases where an SVG file is actually used as a purely vector format. If you want to display an SVG file on a computer screen, or print it to an inkjet or laser printer, it is ultimately converted to pixels. Masking takes place during this final output step, so although the mask may be made up of vector objects, and the item being masked is also a vector, the final result is really generated only at the point that those vectors are converted to individual pixels for display or printing.** | Did I say pixel? In a vector format? In practice, there are few cases where an SVG file is actually used as a purely vector format. If you want to display an SVG file on a computer screen, or print it to an inkjet or laser printer, it is ultimately converted to pixels. Masking takes place during this final output step, so although the mask may be made up of vector objects, and the item being masked is also a vector, the final result is really generated only at the point that those vectors are converted to individual pixels for display or printing.** |
| |
| Vous vous rappelez sans doute que le remplissage et le contour d'un chemin de découpe ne contribuent pas à l'effet final sur l'objet tronqué. Avec les masques, CEPENDANT, le contraire est vrai - la couleur de chaque pixel individuel est pris en compte dans le calcul de son effet sur l'objet masqué et les remplissages et les contours ont donc une signification. | Vous vous rappelez sans doute que le remplissage et le contour d'un chemin de découpe ne contribuent pas à l'effet final sur l'objet tronqué. Avec les masques, CEPENDANT, le contraire est vrai, la couleur de chaque pixel individuel est pris en compte dans le calcul de son effet sur l'objet masqué et les remplissages et les contours ont donc une signification. |
| |
| Ai-je dit pixel ? Dans un format vectoriel ? Dans la pratique, rares sont les cas où un fichier SVG est effectivement utilisé comme un format purement vectoriel. Si vous souhaitez afficher un fichier SVG sur un écran d'ordinateur, ou l'imprimer sur une imprimante à jet d'encre ou laser, il est converti à terme en pixels. Le masquage a lieu pendant cette étape de sortie finale ; ainsi, bien que le masque puisse être constitué d'objets vectoriels, et que l'objet masqué soit vectoriel aussi, le résultat final n'est vraiment généré qu'au moment où ces vecteurs sont convertis en pixels individuels pour l'affichage ou l'impression. | Ai-je dit pixel ? Dans un format vectoriel ? Dans la pratique, rares sont les cas où un fichier SVG est effectivement utilisé comme un format purement vectoriel. Si vous souhaitez afficher un fichier SVG sur un écran d'ordinateur, ou l'imprimer sur une imprimante à jet d'encre ou laser, il est converti à terme en pixels. Le masquage a lieu pendant cette étape de sortie finale ; ainsi, bien que le masque puisse être constitué d'objets vectoriels, et que l'objet masqué soit vectoriel aussi, le résultat final n'est vraiment généré qu'au moment où ces vecteurs sont convertis en pixels individuels pour l'affichage ou l'impression. |
| Avec l'utilisation d'un rectangle à contour épais et uniquement des pixels noirs ou blancs, il est facile de voir la différence entre un chemin de découpe et l'utilisation d'un masque pour simuler la découpe. Dans la première paire d'images ci-dessous, j'ai utilisé le rectangle comme un chemin de découpe et vous pouvez voir que le résultat est aligné sur le milieu du contour. Les deuxième et troisième paires d'images montrent le rectangle utilisé comme un masque, avec uniquement la conservation des parties blanches, alors que les parties noires restantes deviennent transparentes. C'est particulièrement évident dans la dernière paire que le contour a un effet. | Avec l'utilisation d'un rectangle à contour épais et uniquement des pixels noirs ou blancs, il est facile de voir la différence entre un chemin de découpe et l'utilisation d'un masque pour simuler la découpe. Dans la première paire d'images ci-dessous, j'ai utilisé le rectangle comme un chemin de découpe et vous pouvez voir que le résultat est aligné sur le milieu du contour. Les deuxième et troisième paires d'images montrent le rectangle utilisé comme un masque, avec uniquement la conservation des parties blanches, alors que les parties noires restantes deviennent transparentes. C'est particulièrement évident dans la dernière paire que le contour a un effet. |
| |
| Il devrait maintenant être clair que le découpage et le masquage sont des opérations similaires ; il n'est donc pas vraiment surprenant que Inkscape les propose avec la même interface utilisateur. Tout comme avec la découpe, l'objet de masquage doit au-dessus de l'objet à masquer, en termes de z-index. Vous sélectionnez ensuite les deux éléments et choisissez Définir un masque dans le menu contextuel, ou Objet > Masque > Définir dans le menu principal. La libération d'un objet masqué est aussi simple que de le sélectionner (il sera décrit comme « masqué » dans la barre d'état), puis de choisir Retirer le masque dans le menu contextuel, ou Objet > Masque > Retirer dans le menu principal. Tout comme avec les chemins de découpe, il est possible d'éditer des masques en utilisant l'outil de nœud sans les libérer au préalable, mais, en général, il y a peu d'avantages à le faire, étant donné que vous pouvez modifier uniquement la forme du contour du chemin, pas sa couleur. | Il devrait maintenant être clair que le découpage et le masquage sont des opérations similaires ; il n'est donc pas vraiment surprenant qu'Inkscape les propose avec la même interface utilisateur. Tout comme avec la découpe, l'objet de masquage doit être au-dessus de l'objet à masquer, en termes de z-index. Vous sélectionnez ensuite les deux éléments et choisissez Définir un masque dans le menu contextuel, ou Objet > Masque > Définir dans le menu principal. La libération d'un objet masqué est aussi simple que de le sélectionner (il sera décrit comme « masqué » dans la barre d'état), puis de choisir Retirer le masque dans le menu contextuel, ou Objet > Masque > Retirer dans le menu principal. Tout comme avec les chemins de découpe, il est possible d'éditer des masques en utilisant l'outil de nœud sans les libérer au préalable, mais, en général, il y a peu d'avantages à le faire, étant donné que vous pouvez modifier uniquement la forme du contour du chemin, pas sa couleur. |
| |
| **As you've seen, using a grayscale gradient as a mask gives you some control over the opacity of the masked object. You may also recall that Inkscape offers a selection of black and white patterns in its Fill & Stroke dialog, plus a few grayscale bitmap fill patterns. These may previously have seemed rather limiting, but their monochrome nature makes them perfect for use as a mask. | **As you've seen, using a grayscale gradient as a mask gives you some control over the opacity of the masked object. You may also recall that Inkscape offers a selection of black and white patterns in its Fill & Stroke dialog, plus a few grayscale bitmap fill patterns. These may previously have seemed rather limiting, but their monochrome nature makes them perfect for use as a mask. |
| The checkerboard pattern is a good example of a situation where it's easier to use a mask than a clip path. This same effect could be achieved by clipping with a complex path, but it's probably not worth the extra effort. Looking closely at the checkerboard, you'll notice that the fill isn't made up of black and white squares, but rather white and transparent. Using white and transparent can sometimes make it easier to see what parts of an object you are masking: white areas will remain visible, and transparent areas will be clipped. A translucent white area will have the same effect as a shade of gray. It may seem counter-intuitive to cover the parts of the object that you want to keep, and expose the parts that will be hidden, but that's the way that masking has been defined in the SVG specification, so that's the way it works in Inkscape.** | The checkerboard pattern is a good example of a situation where it's easier to use a mask than a clip path. This same effect could be achieved by clipping with a complex path, but it's probably not worth the extra effort. Looking closely at the checkerboard, you'll notice that the fill isn't made up of black and white squares, but rather white and transparent. Using white and transparent can sometimes make it easier to see what parts of an object you are masking: white areas will remain visible, and transparent areas will be clipped. A translucent white area will have the same effect as a shade of gray. It may seem counter-intuitive to cover the parts of the object that you want to keep, and expose the parts that will be hidden, but that's the way that masking has been defined in the SVG specification, so that's the way it works in Inkscape.** |
| |
| Comme vous l'avez vu, utiliser un gradient de niveaux de gris comme un masque vous donne un certain contrôle sur l'opacité de l'objet masqué. Vous vous rappelez également sans doute que Inkscape propose une sélection de modèles noirs et blancs dans son dialogue Remplissage et contour, plus quelques motifs de remplissage en bitmap niveaux de gris. Vous auriez pu les trouver plutôt restrictifs, mais leur nature monochrome les rend parfaits pour une utilisation en tant que masque. | Comme vous l'avez vu, utiliser un gradient de niveaux de gris comme un masque vous donne un certain contrôle sur l'opacité de l'objet masqué. Vous vous rappelez également sans doute qu'Inkscape propose une sélection de modèles noirs et blancs dans son dialogue Remplissage et contour, plus quelques motifs de remplissage en bitmap niveaux de gris. Vous auriez pu les trouver plutôt restrictifs, mais leur nature monochrome les rend parfaits pour une utilisation en tant que masques. |
| Le motif en damier est un bon exemple d'une situation où il est plus facile d'utiliser un masque qu'un chemin de découpe. Ce même effet peut être obtenu en découpant avec un chemin complexe, mais cela ne vaut probablement pas l'effort supplémentaire. En regardant le damier de près, vous remarquerez que le remplissage n'est pas constitué de carrés noirs et blancs, mais plutôt de carrés blancs et transparents. L'utilisation de blanc et de transparent peut parfois faciliter la perception des parties d'un objet que vous masquez : les zones blanches restent visibles et les zones transparentes seront découpés. Une zone blanche translucide aura le même effet qu'une nuance de gris. Il peut sembler contre-intuitif de couvrir les parties de l'objet que vous souhaitez conserver et d'exposer les parties qui seront cachées, mais c'est la façon dont masquage a été défini dans la spécification SVG et c'est donc comme cela dans Inkscape. | Le motif en damier est un bon exemple d'une situation où il est plus facile d'utiliser un masque qu'un chemin de découpe. Ce même effet peut être obtenu en découpant avec un chemin complexe, mais cela ne vaut probablement pas l'effort supplémentaire. En regardant le damier de près, vous remarquerez que le remplissage n'est pas constitué de carrés noirs et blancs, mais plutôt de carrés blancs et transparents. L'utilisation de blanc et de transparent peut parfois faciliter la perception des parties d'un objet que vous masquez : les zones blanches restent visibles et les zones transparentes seront découpées. Une zone blanche translucide aura le même effet qu'une nuance de gris. Il peut sembler contre-intuitif de couvrir les parties de l'objet que vous souhaitez conserver et d'exposer les parties qui seront cachées, mais c'est la façon dont le masquage a été défini dans la spécification SVG et c'est donc comme cela dans Inkscape. |
| |
| **Because clip paths are defined by a boundary and a concept of what's inside and outside that boundary, it's possible to use only a single path or object to define a clipping shape. Masks, on the other hand, are concerned with only the color of pixels, so it doesn't really matter whether your mask is made up of a single object or a whole load of objects inside a group. This allows you to create complex arrangements of colors and patterns which would be impossible to reproduce using a single path. | **Because clip paths are defined by a boundary and a concept of what's inside and outside that boundary, it's possible to use only a single path or object to define a clipping shape. Masks, on the other hand, are concerned with only the color of pixels, so it doesn't really matter whether your mask is made up of a single object or a whole load of objects inside a group. This allows you to create complex arrangements of colors and patterns which would be impossible to reproduce using a single path. |
| Bien que vous puissiez utiliser des masques pour créer des arrangements complexes de découpage et de transparence, leur utilisation la plus courante consiste probablement à tout simplement adoucir les bords d'un groupe pour qu'il s'estompe petit à petit. Dans ce cas, tout ce dont vous avez besoin pour votre masque est une ellipse blanche fortement floutée, comme le montre cette carte de vœux on ne peut plus hors saison. | Bien que vous puissiez utiliser des masques pour créer des arrangements complexes de découpage et de transparence, leur utilisation la plus courante consiste probablement à tout simplement adoucir les bords d'un groupe pour qu'il s'estompe petit à petit. Dans ce cas, tout ce dont vous avez besoin pour votre masque est une ellipse blanche fortement floutée, comme le montre cette carte de vœux on ne peut plus hors saison. |
| |
| Tout au long de cet article, j'ai parlé des masques comme étant des images en niveaux de gris. Ce n'est pas tout à fait vrai - un masque peut être n'importe quelle combinaison de couleurs que vous souhaitez. Cependant, n'important quelle couleur autre que blanc, noir ou gris sera converti en image à niveaux de gris avant son utilisation comme masque. Cela peut rendre difficile la prédiction de l'effet exact d'une couleur sur l'opacité qui en résulte ; ainsi, dans presque tous les cas, je recommande d'utiliser des niveaux de gris purs lors de l'élaboration de vos masques. | Tout au long de cet article, j'ai parlé des masques comme étant des images en niveaux de gris. Ce n'est pas tout à fait vrai - un masque peut être n'importe quelle combinaison de couleurs que vous souhaitez. Cependant, n'importe quelle couleur autre que blanc, noir ou gris sera convertie en image à niveaux de gris avant son utilisation comme masque. Cela peut rendre difficile la prédiction de l'effet exact d'une couleur sur l'opacité qui en résulte ; ainsi, dans presque tous les cas, je recommande d'utiliser des niveaux de gris purs lors de l'élaboration de vos masques. |
