issue108: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 | ||
issue108:inkscape [2016/05/03 07:52] – d52fr | issue108:inkscape [2016/05/05 14:06] (Version actuelle) – [6] auntiee | ||
---|---|---|---|
Ligne 5: | Ligne 5: | ||
In short, filters are part of the core SVG specification that offer a way to perform bitmap operations on your vector objects. Filters consist of a number of “filter primitives” that can be linked together to create a “filter chain” that produces the desired effect. They apply at the point that your elements are being rendered to a bitmap for display, export or printing, and operate at the same resolution as the output device. So, although they are pixel-based, | In short, filters are part of the core SVG specification that offer a way to perform bitmap operations on your vector objects. Filters consist of a number of “filter primitives” that can be linked together to create a “filter chain” that produces the desired effect. They apply at the point that your elements are being rendered to a bitmap for display, export or printing, and operate at the same resolution as the output device. So, although they are pixel-based, | ||
- | S'il y a un mot qui peut soulever la controverse au sein des utilisateurs expérimentés d' | + | S'il y a un mot qui peut soulever la controverse au sein des utilisateurs expérimentés d' |
- | Pour faire court, les filtres sont une partie du cœur des spécifications SVG, qui offrent une façon de réaliser des opérations bitmap sur des objets vectoriels. Les filtres consistent en un certain nombre de « primitives de filtrage » qui peuvent être liées les une aux autres pour créer une « chaîne de filtres » qui produit l' | + | Pour faire court, les filtres sont une partie du cœur des spécifications SVG, qui offrent une façon de réaliser des opérations bitmap sur des objets vectoriels. Les filtres consistent en un certain nombre de « primitives de filtrage » qui peuvent être liées les une aux autres pour créer une « chaîne de filtres » qui produit l' |
**Filters are also “live”. You can tweak and modify the parameters used in your filter throughout the life cycle of your drawing, whereas filters in a bitmap editor like The GIMP are usually fixed and permanent once they' | **Filters are also “live”. You can tweak and modify the parameters used in your filter throughout the life cycle of your drawing, whereas filters in a bitmap editor like The GIMP are usually fixed and permanent once they' | ||
Ligne 13: | Ligne 13: | ||
Finally, filters are rather unintuitive – and Inkscape' | Finally, filters are rather unintuitive – and Inkscape' | ||
- | Les filtres sont aussi « vivants ». Vous pouvez ajuster et modifier les paramètres utilisés pour votre filtre tout au long du cycle de vie de votre dessin, alors que les filtres dans un éditeur bitmap comme The GIMP sont généralement figés et permanents une fois appliqués. C'est à la fois un bien et un mal : Les filtres SVG sont incroyablement flexibles car vous pouvez les modifier tout en progressant ; à l' | + | Les filtres sont aussi « vivants ». Vous pouvez ajuster et modifier les paramètres utilisés pour votre filtre tout au long du cycle de vie de votre dessin, alors que les filtres dans un éditeur bitmap comme GIMP sont généralement figés et permanents une fois appliqués. C'est à la fois un bien et un mal : les filtres SVG sont incroyablement flexibles, car vous pouvez les modifier tout en progressant ; à l' |
- | Enfin, les filtres sont plutôt non-intuitifs | + | Enfin, les filtres sont plutôt non intuitifs |
====== 2 ====== | ====== 2 ====== | ||
Ligne 23: | Ligne 23: | ||
Now open the Filter Editor using the Filters > Filter Editor menu entry. If it opens in a pane within the main Inkscape window, I suggest dragging it out as a separate floating dialog. This will let you resize it to give you more space to work with – filter chains can quickly become long and some of the primitives have a lot of parameters to tweak.** | Now open the Filter Editor using the Filters > Filter Editor menu entry. If it opens in a pane within the main Inkscape window, I suggest dragging it out as a separate floating dialog. This will let you resize it to give you more space to work with – filter chains can quickly become long and some of the primitives have a lot of parameters to tweak.** | ||
- | Le flou gaussien (ou simplement « flou » à partir d'ici) est la primitive communément la plus utilisée | + | Le flou gaussien (ou simplement « flou » à partir d'ici) est la primitive communément la plus utilisée, principalement parce qu' |
- | Maintenant, ouvrez l' | + | Maintenant, ouvrez l' |
**The left of the editor is given over to a list of the filters in your document. Assuming you started with a blank drawing, you should see only a single entry here, given an automatically generated name along the lines of “filter1234”. That entry will have a mark in the checkbox, indicating that it’s the filter that’s in effect on the currently selected object. If you want to apply the same filter to another shape, just select that object in the canvas window, then check this box in the editor; you can use a single filter chain on multiple elements – which is useful when you want multiple text objects to share a single drop shadow, for example. Finally, in this section you can create a new filter from scratch using the “New” button at the bottom, or right-click on a filter entry to duplicate or remove it completely. You can also rename it from that context menu, but it’s usually easier to just double-click on the filter’s name and enter a new one. Giving slightly descriptive names to your filters makes it easier to keep track of the important ones as your drawing develops. For now, why not rename “filter1234” to “Blur”? | **The left of the editor is given over to a list of the filters in your document. Assuming you started with a blank drawing, you should see only a single entry here, given an automatically generated name along the lines of “filter1234”. That entry will have a mark in the checkbox, indicating that it’s the filter that’s in effect on the currently selected object. If you want to apply the same filter to another shape, just select that object in the canvas window, then check this box in the editor; you can use a single filter chain on multiple elements – which is useful when you want multiple text objects to share a single drop shadow, for example. Finally, in this section you can create a new filter from scratch using the “New” button at the bottom, or right-click on a filter entry to duplicate or remove it completely. You can also rename it from that context menu, but it’s usually easier to just double-click on the filter’s name and enter a new one. Giving slightly descriptive names to your filters makes it easier to keep track of the important ones as your drawing develops. For now, why not rename “filter1234” to “Blur”? | ||
- | A gauche de l' | + | À gauche de l' |
**With your filter selected, you should see a single entry in the list on the right of the dialog: Gaussian Blur. This is your filter primitive, and it’s this list that’s used to stack and combine primitives into chains. For now, click on the Gaussian Blur entry to select it, and then look to the bottom of the dialog where you’ll find its parameters. Gaussian Blur takes two parameters, but by default Inkscape locks them to the same value via the “Link” button to the right. By toggling that to un-link the parameters, you can provide different values for horizontal and vertical blur, providing the opportunity for “motion blur” effects that make it look like your object has moved in one direction. Note that the scales are labelled in units of “Standard Deviation”, | **With your filter selected, you should see a single entry in the list on the right of the dialog: Gaussian Blur. This is your filter primitive, and it’s this list that’s used to stack and combine primitives into chains. For now, click on the Gaussian Blur entry to select it, and then look to the bottom of the dialog where you’ll find its parameters. Gaussian Blur takes two parameters, but by default Inkscape locks them to the same value via the “Link” button to the right. By toggling that to un-link the parameters, you can provide different values for horizontal and vertical blur, providing the opportunity for “motion blur” effects that make it look like your object has moved in one direction. Note that the scales are labelled in units of “Standard Deviation”, | ||
- | Avec le filtre sélectionné, | + | Le filtre |
====== 3 ====== | ====== 3 ====== | ||
**If you're still on 0.48, and drag the sliders to the right, you may notice that the blur on the text starts to get cut off at around the 20% mark, and by the time you reach 50% it’s become a ghostly rectangle. You’ve just encountered one of the most common problems reported by users who take their first steps into filters, but don’t worry, it’s an easy one to fix. In principle, some filters – including Gaussian Blur – could continue off into infinity: mathematically speaking, a blur represents an infinite series of calculations, | **If you're still on 0.48, and drag the sliders to the right, you may notice that the blur on the text starts to get cut off at around the 20% mark, and by the time you reach 50% it’s become a ghostly rectangle. You’ve just encountered one of the most common problems reported by users who take their first steps into filters, but don’t worry, it’s an easy one to fix. In principle, some filters – including Gaussian Blur – could continue off into infinity: mathematically speaking, a blur represents an infinite series of calculations, | ||
+ | |||
+ | Si vous avez encore la 0.48, et que vous tirez les réglettes vers la droite, vous pouvez noter que le flou sur le texte commence à disparaître vers 20 % et, quand vous atteignez 50 %, il devient un rectangle fantôme. Vous avez simplement rencontré un des problèmes les plus classiques signalés par les utilisateurs qui font leurs premières armes dans les filtres ; mais, pas de panique, c'est facile à résoudre. En principe, certains filtres - dont le flou gaussien - peuvent aller jusqu' | ||
**The cutoff is adjusted via the “Filter General Settings” tab, and, as the name suggests, it affects the whole filter, not just the currently selected primitive. Within this tab you’ll find two sets of parameters, labelled “Coordinates” and “Dimensions”. The former sets the position of the top left of the filter window, relative to the width of the object. The default values of -0.10 mean that the cut-off rectangle starts 10% up and to the left of the object’s bounding box. The latter pair of values sets the width and height of the filter window, so the default value of 1.20 results in a cut-off that’s 20% larger than the bounding box. Because the Coordinates fields have offset the window by 10% to the top left, the result is a cut-off that symmetrically surrounds the original object with a 10% margin. To use a large Gaussian Blur value, you might want to increase this window to give you a 50% margin all round: that would entail setting the Coordinates to -0.50 and the Dimensions to 2.0. Most of the time you don’t need to adjust these values, but when you start to see your filtered objects being unexpectedly cut off at the edges, the Filter General Settings are almost always the cause.** | **The cutoff is adjusted via the “Filter General Settings” tab, and, as the name suggests, it affects the whole filter, not just the currently selected primitive. Within this tab you’ll find two sets of parameters, labelled “Coordinates” and “Dimensions”. The former sets the position of the top left of the filter window, relative to the width of the object. The default values of -0.10 mean that the cut-off rectangle starts 10% up and to the left of the object’s bounding box. The latter pair of values sets the width and height of the filter window, so the default value of 1.20 results in a cut-off that’s 20% larger than the bounding box. Because the Coordinates fields have offset the window by 10% to the top left, the result is a cut-off that symmetrically surrounds the original object with a 10% margin. To use a large Gaussian Blur value, you might want to increase this window to give you a 50% margin all round: that would entail setting the Coordinates to -0.50 and the Dimensions to 2.0. Most of the time you don’t need to adjust these values, but when you start to see your filtered objects being unexpectedly cut off at the edges, the Filter General Settings are almost always the cause.** | ||
+ | |||
+ | L' | ||
====== 4 ====== | ====== 4 ====== | ||
Ligne 46: | Ligne 50: | ||
Before moving on, it’s worth having a quick recap to make sure you’re clear about the dialog so far. On the left is the list of filter chains, each with a checkbox to apply it to the currently selected object. From here you can create new chains (though just adding some blur to your object has a similar effect), and manage existing ones. On the right is the list of filter primitives that constitute your filter chain – though so far we’ve only dealt with a rather short chain consisting of a single primitive. At the bottom of the dialog is a tab for the currently selected primitive’s parameters, and another for setting the filter cut-off window position and size.** | Before moving on, it’s worth having a quick recap to make sure you’re clear about the dialog so far. On the left is the list of filter chains, each with a checkbox to apply it to the currently selected object. From here you can create new chains (though just adding some blur to your object has a similar effect), and manage existing ones. On the right is the list of filter primitives that constitute your filter chain – though so far we’ve only dealt with a rather short chain consisting of a single primitive. At the bottom of the dialog is a tab for the currently selected primitive’s parameters, and another for setting the filter cut-off window position and size.** | ||
+ | |||
+ | Dans la version 0.91 sur ma machine, ce problème semble avoir été résolu en modifiant automatiquement les réglages pour inclure suffisamment le flou. Cependant, je ne trouve aucune mention de cette modification dans les notes de publication de la 0.91 et il n'est pas clair si ça s' | ||
+ | |||
+ | Avant de passer à la suite, un récapitulatif rapide sera bénéfique pour être sûr que, arrivés à ce point, vous avez les idées claires sur ce dialogue. Sur la gauche, se trouve la liste des chaînes filtres, chacune avec une case à cocher pour l' | ||
**Now, let’s move back to the list of primitives that we so quickly glossed over previously. Looking more closely at the Gaussian Blur entry you’ll notice that the “Connections” section contains a barely visible triangle, from which is emanating a line that connects to a column on the right with a “Source Graphic” label running vertically down it. The triangle represents an input into the filter primitive, and the column is one of several possible sources for that input. Unfortunately, | **Now, let’s move back to the list of primitives that we so quickly glossed over previously. Looking more closely at the Gaussian Blur entry you’ll notice that the “Connections” section contains a barely visible triangle, from which is emanating a line that connects to a column on the right with a “Source Graphic” label running vertically down it. The triangle represents an input into the filter primitive, and the column is one of several possible sources for that input. Unfortunately, | ||
+ | |||
+ | Maintenant, revenons à la liste des primitives dont nous avons fait abstraction si rapidement avant. En regardant plus en détail l' | ||
====== 5 ====== | ====== 5 ====== | ||
**As well as having the triangular input nodes, each primitive also has a single output. There’s no obvious output node, instead it’s the bottom edge of the primitive that acts as the output in the Inkscape UI. It’s possible to connect the bottom of one primitive to the input triangles of other primitives, thus building a chain, but the output from the last primitive is always used as the output from the chain as a whole. | **As well as having the triangular input nodes, each primitive also has a single output. There’s no obvious output node, instead it’s the bottom edge of the primitive that acts as the output in the Inkscape UI. It’s possible to connect the bottom of one primitive to the input triangles of other primitives, thus building a chain, but the output from the last primitive is always used as the output from the chain as a whole. | ||
+ | |||
Let’s build on our Gaussian Blur to create a simple drop shadow filter. During this process, you’ll learn how to link primitives together to form a chain, and hopefully begin to understand a little more of the power of filters. Start by renaming your existing filter to “Drop Shadow”, re-link the parameters if you need to, and set the blur to a fairly small number – enough that you can clearly see it applied to your object, but not so much that the it just turns into a fuzzy cloud. A value of 2-3 should do the trick.** | Let’s build on our Gaussian Blur to create a simple drop shadow filter. During this process, you’ll learn how to link primitives together to form a chain, and hopefully begin to understand a little more of the power of filters. Start by renaming your existing filter to “Drop Shadow”, re-link the parameters if you need to, and set the blur to a fairly small number – enough that you can clearly see it applied to your object, but not so much that the it just turns into a fuzzy cloud. A value of 2-3 should do the trick.** | ||
+ | |||
+ | De même qu'il y a des nœuds d' | ||
+ | |||
+ | À partir de notre flou gaussien, construisons une chaîne en créant un simple filtre d' | ||
**Our shadow is going to be dark, made of translucent black pixels, so the first thing to do is to generate a silhouetted version of our object to pass as an input to the Gaussian Blur primitive. But, of course, we already know of a source of silhouettes – the Source Alpha column. In a slightly back-to-front operation, we can link this source to the Blur’s input by clicking and holding on the triangle, then dragging the mouse to the Source Alpha column before releasing (yes, you drag from input to source, rather than the other way around). If all went smoothly, the line that previously ran to the Source Graphic column has been replaced by one to the Source Alpha instead. Take a look at your text object and you should find it’s turned into a blurry black version of the original. | **Our shadow is going to be dark, made of translucent black pixels, so the first thing to do is to generate a silhouetted version of our object to pass as an input to the Gaussian Blur primitive. But, of course, we already know of a source of silhouettes – the Source Alpha column. In a slightly back-to-front operation, we can link this source to the Blur’s input by clicking and holding on the triangle, then dragging the mouse to the Source Alpha column before releasing (yes, you drag from input to source, rather than the other way around). If all went smoothly, the line that previously ran to the Source Graphic column has been replaced by one to the Source Alpha instead. Take a look at your text object and you should find it’s turned into a blurry black version of the original. | ||
If we were to display the original over the top of the blurred alpha version, you would just see a halo of darkness around your text. To make it work as a drop shadow we need to offset our blurred image from its original position using the imaginatively titled “Offset” primitive. Select it from the pop-up list just below the filter chain, then click the adjacent “Add Effect” button to add it to your chain. It should automatically be connected to the output of the Blur, as indicated by a small line running from the triangular input of the Offset to the bottom of the Gaussian Blur. Adjust the new primitive’s Delta X and Delta Y parameters to shift your shadow down and to the right – a value of 6.0 in each is a good start.** | If we were to display the original over the top of the blurred alpha version, you would just see a halo of darkness around your text. To make it work as a drop shadow we need to offset our blurred image from its original position using the imaginatively titled “Offset” primitive. Select it from the pop-up list just below the filter chain, then click the adjacent “Add Effect” button to add it to your chain. It should automatically be connected to the output of the Blur, as indicated by a small line running from the triangular input of the Offset to the bottom of the Gaussian Blur. Adjust the new primitive’s Delta X and Delta Y parameters to shift your shadow down and to the right – a value of 6.0 in each is a good start.** | ||
+ | |||
+ | Notre ombre va être sombre, faite de pixels noirs translucides ; aussi, la première chose à faire est de générer une version « silhouette » de notre objet pour la passer comme entrée à notre primitive de flou gaussien. Mais, bien sûr, nous connaissions déjà une source de silhouette : la colonne Opacité de la source. Dans une opération légèrement à l' | ||
+ | |||
+ | Si vous aviez affiché l' | ||
====== 6 ====== | ====== 6 ====== | ||
Ligne 62: | Ligne 81: | ||
**The final step in creating our filter is to add the original graphic back on top of the blur using the Merge primitive. Once again you should select it from the pop-up list and add it using the Add Effect button, but this time it won’t be automatically connected to the rest of the chain. The Merge filter combines multiple input images by stacking them on top of each other, honouring any transparency they may have in the process. The first input goes at the bottom of the stack, the last input at the top, so we need to add the offset blur first and the original source graphic second. | **The final step in creating our filter is to add the original graphic back on top of the blur using the Merge primitive. Once again you should select it from the pop-up list and add it using the Add Effect button, but this time it won’t be automatically connected to the rest of the chain. The Merge filter combines multiple input images by stacking them on top of each other, honouring any transparency they may have in the process. The first input goes at the bottom of the stack, the last input at the top, so we need to add the offset blur first and the original source graphic second. | ||
- | Begin by clicking in the Merge filter’s sole input triangle and then, holding the mouse button down, drag to the triangle in the row above (the Offset filter). Release the button and you should see a connection made, running from the base of the Offset to the input of the Merge. You’ll also notice that the Merge filter has gained a second input triangle. Click and drag from this second triangle to the Source Graphic column. Check the canvas, and you should now have a glorious drop shadow. See, filters aren’t so tricky… right? | + | Begin by clicking in the Merge filter’s sole input triangle and then, holding the mouse button down, drag to the triangle in the row above (the Offset filter). Release the button and you should see a connection made, running from the base of the Offset to the input of the Merge. You’ll also notice that the Merge filter has gained a second input triangle. Click and drag from this second triangle to the Source Graphic column. Check the canvas, and you should now have a glorious drop shadow. See, filters aren’t so tricky… right?** |
- | Now tweak the Gaussian Blur and Offset parameters to change the softness of your shadow or its relative position. Then edit the text itself. Each change you make takes place live, and you can re-open the filter editor at any time to make further changes. Try creating a “hard” drop shadow by merging an offset Source Alpha with the Source Graphic, but without using the Gaussian Blur. Or try a bit of motion blur by un-linking the horizontal and vertical sliders; adding some horizontal blur and a horizontal offset; then merging with the Source Graphic again.** | + | |
+ | Pour l' | ||
+ | |||
+ | Commencez par cliquer sur l' | ||
+ | |||
+ | **Now tweak the Gaussian Blur and Offset parameters to change the softness of your shadow or its relative position. Then edit the text itself. Each change you make takes place live, and you can re-open the filter editor at any time to make further changes. Try creating a “hard” drop shadow by merging an offset Source Alpha with the Source Graphic, but without using the Gaussian Blur. Or try a bit of motion blur by un-linking the horizontal and vertical sliders; adding some horizontal blur and a horizontal offset; then merging with the Source Graphic again. | ||
+ | |||
+ | Make sure you understand what we’ve covered in this instalment, because, next time, we’ll build on this simple drop shadow to introduce some more filter primitives that will expand your repertoire further, giving you the capability to achieve effects that just aren’t possible without a little smattering of bitmap magic on your vector objects.** | ||
+ | |||
+ | Maintenant, ajustez les paramètres de flou et de décalage pour modifier la diffusion de votre ombre et sa position relative. Puis éditez le texte. Chaque changement que vous faites est appliqué en direct et vous pouvez rouvrir l' | ||
+ | |||
+ | Assurez-vous de bien comprendre ce que nous avons traité dans cet article car, la prochaine fois, nous partirons de cette simple ombre portée pour introduire d' | ||
- | **Make sure you understand what we’ve covered in this instalment, because, next time, we’ll build on this simple drop shadow to introduce some more filter primitives that will expand your repertoire further, giving you the capability to achieve effects that just aren’t possible without a little smattering of bitmap magic on your vector objects.** |
issue108/inkscape.1462254728.txt.gz · Dernière modification : 2016/05/03 07:52 de d52fr