Ceci est une ancienne révision du document !
When I'm not drawing things in Inkscape, I like to spend my spare time playing lead guitar for a 1970s style prog rock band called “Envelope Deformation”. So when we decided to record our first album, it naturally fell on me to come up with a suitable logo for the band. My starting point, of course, was the name of the band in a bold font (Impact), with a golden gradient applied (when we hit the big time, no doubt our record company will pay for proper gold embossing on all our merchandising, so we may as well start as we mean to go on). That's a good start, but it's a bit plain. I could use the Bend LPE from last time to add a bit of a curve to the whole logo, but 70’s style prog-rock really calls for something more indulgent. A quick scan through the list of LPEs reveals the suspiciously coincidentally named “Envelope Deformation” path effect, so that seems like an obvious one to try. After converting the text to a path (CTRL-K, then ungroup), then applying the LPE, I found myself faced with this user interface in the Path Effect Editor dialog. Skipping the two checkboxes for now, what will be immediately apparent is that this looks like four sets of the UI from the Bend LPE. The four lines correspond to the four sides of the path's bounding box: by default they are straight horizontal and vertical paths, but by using the buttons in the same way as we did for the Bend LPE, you can deform each side along a bend path. The result is as though your skeleton path is printed on a rubber sheet whose sides are stretched, distorting the shape. For example, clicking the “Edit on-canvas” button for the Bottom bend path allows me to quickly change the logo to something more suitable for an album cover.
Quand je ne suis pas en train de dessiner dans Inkscape, j'ai passer mon temps libre à jouer de la guitare solo dans un groupe de rock progressif style années 70, appelé « Envelope deformation » (déformation par enveloppe). Aussi, quand nous avons décidé de 'enregistrer notre premier album, il m'a paru naturel de créer un logo pour le groupe. Mon point de départ, bien sûr, était le nom du groupe en caractère gras (Impact), avec application d'un gradient doré (quand nous toucherons le gros lot, nul doute que notre société de production paiera pour embosser en vrai or tous les produits dérivés ; aussi, nous pouvons commencer dans la direction où nous voulons aller).
C'est un bout départ, mais c'est un peu plat. Je pourrai utiliser l'effet de chemin (LPE) de courbure vu dans l'article précédent pour appliquer une légère courbure à tout le logo, mais le style rock progressif des années 70 demande quelque chose de plus onctueux. Un parcours rapide de la liste des LPE révèle, coïncidence suspecte, un effet de chemin appelé « déformation par enveloppe » ; il semble évident de l'essayer. Après conversion du texte en chemin (CTRL-K puis dégrouper), l'application de l'effet de chemin, m'a mis face à l'interface utilisateur de la boîte de dialogue Édition des effets de chemin. Sautant les deux cases à cocher, pour l'instant, ce qui est immédiatement visible c'est sa ressemblance avec les quatre parties de l'interface utilisateur du LPE de courbure. Les quatre lignes correspondent aux quatre côtés de la boîte englobante du chemin : par défaut, nous avons directement les chemins horizontal et vertical, mais en utilisant les boutons comme pour le LPE de courbure, nous pouvons déformer chaque côté suivant un chemin courbé. Le résultat, c'est comme si notre chemin squelette était imprimé sur une plaque de caoutchouc dont les bords auraient été étirés, ce qui en distord la forme. Par exemple, un clic sur le bouton « Éditer sur la zone de travail » pour le chemin de courbure du bas me permet une modification rapide du logo en quelque chose de plus adapté à la couverture d'un album.
As you can see, the path currently being edited is displayed in green. Notice also that the deformation stretches across the whole height of the skeleton path, even though we only modified the bottom path. For more fine-grained control – such as keeping the top of the text horizontal – you have little choice but to engage in some manual node editing With just the Envelope Deformation LPE and a bit of tweaking to each of the four sides, we get closer to a classic prog-rock logo. One thing I find frustrating is that three of the four bend paths are not displayed when you use on-canvas editing. For tweaking the shape of the path, that's not too much of a problem. But, if you decide to move the end nodes, it can be tricky to keep things in sync so that you don't lose the sharpness of the corners. Like the Bend LPE, however, our four lines in the UI also offer the ability to link to an existing path. It can be a bit fiddly to draw four lines that match the bounding box (Object > Objects to Guides can help), and then there's a lot of clicking to link them all up, but it does at least mean that you can keep an eye on all four paths at once – and even select nodes from more than one path at a time in order to move them in unison. Once your editing is done, simply set the opacity of the paths to 0 to make them disappear from sight. One thing to watch out for with this LPE is the direction of the paths. If your paths don't match the directions that the effect expects, you can easily end up with a result like this: If that happens to you, just use Path > Reverse to change the order of your path's nodes without affecting their positions.
Comme vous pouvez le voir, le chemin en cours de modification est affiché en vert. Notez aussi que les les déformations s'étirent sur la toute la hauteur du chemin squelette, même si nous n'avons modifié que le chemin du bas. Pour un contrôle avec une granularité plus fine - tel que le maintien horizontal du sommet du texte - vous n'avez que le choix de modifier les nœuds à la main.
Avec seulement le LPE de Déformation par enveloppe et un peu d'ajustement sur chacun des quatre côtés, nous sommes près d'un logo classique de rock progressif.
Une chose que j'ai trouvé frustrante c'est trois des quatre chemins de courbure ne sont pas affichés quand vous êtes en édition sur la zone de travail. For ajuster la forme du chemin, ce n'est pas trop un problème. Mais, si vous décidez de déplacer les nœuds terminaux, ça peut devenir difficile de garder une harmonie de sorte que vous ne perdiez pas la finesse des coins. Cependant, comme pour le LPE de courbure, nos quatre lignes dans l'interface utilisateur offrent aussi la possibilité de se relier à un chemin existant. Il peut être délicat de dessiner quatre lignes qui correspondent à la boîte englobante (Objet > Objets en Guides peut aider), et puis il faut beaucoup de clics pour les relier tous, mais ça signifie au moins que vous pouvez garder un œil sur les quatre chemins en même temps - et même sélectionner ensemble des nœuds de plus d'un chemin pour les bouger à l'unisson. Une fois votre modification faite, mettez simplement l'opacité des chemins à 0 pour les rendre invisibles.
Une chose à surveiller avec ce LPE, c'est la direction des chemins. Si vos chemins ne ne correspondent pas à la direction attendue par l'effet, vous pouvez facilement vous retrouver à un tel résultat : Si ça vous arrive, utilise juste Chemin > Inverser pour changer l'ordre des nœuds de vos chemins, sans effet sur leurs positions.
As to those checkboxes… as their labels imply, they are used to enable or disable the top/bottom or left/right paths in the effect. Be aware that disabling a pair of paths is not the same as setting them to a straight line, which can lead to some confusing results. Where I find these options most useful is for creating trapezoid shapes. Here's the logo with left and right paths disabled, and the top path edited to be smaller than the bottom one: The alternative, with left and right paths enabled, led to distortion around the bottom of the shape. Of course you can use the Envelope Deformation LPE with any path, not just one created from text. You can also stack it up with other LPEs, in case you want to stretch some Spiro Splines or add some fake perspective to a set of gears – although you sometimes get better results if you “fix” the earlier LPEs using Path > Object to Path, at the expense of the live editing capability. Like all good 70’s bands, however, halfway through writing this tutorial we had “artistic differences” and split up. The keyboard player and bassist got custody of the name; I got the singer and drummer. So we needed a new name for the band. The singer suggested “Live Path Effects”. “We would abbreviate it to LPE,” he said, “with the logo being something more geometric made up of the three letters crossing over and under each other.”
“So something like the Emerson, Lake and Palmer logo?” I asked. “Erm… no, not at all like that. Their's is ELP, whereas ours is LPE. See the difference?” “I do, but I'm not sure their lawyers will.” Despite my misgivings, I began work on the logo. Starting with letters made from simple paths (red), I extended and arranged them to create something more logo-like (black). For the “crossing over and under” requirement, it's another trip to the Path Effects dialog. First, as usual, I turned my separate paths into a single composite path using Path > Combine (CTRL-K). Then I added the Knot LPE, and watched in horror as much of my path seemed to vanish completely! Unchecking a couple of the checkboxes got things back on track a little. Before explaining what each of them does, it will probably be more helpful to see the final result, with the parameters that produced it: As you can see, this LPE automatically introduces gaps into a path where it crosses itself or any other sub-path. Most of the controls are used to simply alter the width of the gaps. With all the checkboxes cleared, the Fixed Width spinbox allows you to set a fixed size, in pixels, for the gaps. Check the “In units of stroke width” box, and it instead becomes a multiplier of the stroke width. The value of 1.50 that I've chosen just means that the gap will be 50% larger than the stroke, giving a nice 25% gap on either side.
It is possible to apply this LPE to a group of paths, rather than a single composite path. In that case you could be dealing with different stroke widths as a thick line crosses over, or under, a thin one. The last two checkboxes let you add the width of the “under” stroke (the one that gets the gap inserted) and the “crossing path” stroke, respectively. This can be useful to automatically compensate for line differences in complex arrangements or to have gaps that automatically adjust if you change the stroke width, whether explicitly or just by scaling your design. Which brings us to the last control: Switcher size. In order to understand what this does, I first need to introduce you to the switcher. With your path selected, highlight the Knot LPE in the Path Effects dialog, then switch to Node Edit mode (F2, double-click on the path, or choose the second icon in the toolbox). You should now see the nodes of your path, as normal, but with one small addition. At one of the path crossings there will be a small, white, diamond-shaped handle. That's the switcher. It can be really hard to spot in Inkscape 0.48 and, despite the name of the control, changing the Switcher Size parameter will have no effect whatsoever. On 0.91, however, the switcher is surrounded by a blue arc or circle. Modifying the parameter will affect the size of the circle, making it easier to spot the switcher on a busy path with lots of intersections.
But what does the switcher actually do? Clicking on it cycles the crossing between three states: the first two determine which path has the break (and therefore, which path appears to go over the other), whilst the third state removes the break entirely. Version 0.91 indicates these three states using a blue arc with an arrowhead pointing clockwise or anti-clockwise for the first two states, and a circle with no arrowhead to indicate the third state (0.48 offers no such indication). Unfortunately there's no fourth state to break both paths, leaving a large void. If you want that effect you'll have to manually break the paths yourself. Whichever state you choose, however, only affects that one crossing point. You can drag the switcher to another crossing point in your design then change the state of that point by clicking. Being able to change only one point at a time like this, with a dragging process in-between, can quickly become tiresome on a complex design, but unfortunately there's no way to select or change multiple crossings at once. With the basics of the design complete, I added a couple of finishing touches to turn it into a proper logo. First I copied the original path and removed the LPE before using Path > Stroke to Path. This resulted in an outline version of the logo that I could then apply an extra stroke to in order to thicken it. I copied this version again, leaving me with three paths, one of which has the Knot LPE applied. By setting the fill and stroke to white on one of the copies, and setting a thicker black stroke on the third, I was then able to stack the paths on top of each other to produce the final effect.
There are a few things worth mentioning about the Knot LPE. Trying to edit the skeleton path while the LPE is visible can lead to Inkscape crashes, especially if you're still using version 0.48. Make sure you save regularly, and know where any auto-save files are stored. Simply turning off the visibility of the LPE in the Path Effects dialog is enough to mitigate this problem and you can then make it visible again afterwards. Depending on how your skeleton path was produced, you can also end up with unexpected breaks in it when using the Knot LPE. If this occurs, check for nodes that are doubled up on top of each other, perhaps as the result of a boolean operation. These can be fixed using the Node tool by rubber-band selecting the two nodes in question, then using the “Join Selected Nodes” button on the tool control bar to combine them into one. Where misplaced breaks are not due to doubled up nodes, your only recourse is to reshape your path a little. Try adding a node at a nearby intersection, then removing the one at the break, or adding another node close to the breaking one.
It's also worth reiterating that a Live Path Effect takes a path as its input, and produces a path as its output. Therefore your knotted path is still just a path, so is limited by the choice of end-caps that are available in SVG. If your paths cross at 90°, as in the logo example, butt or square caps will usually produce a good result. For anything else, however, you might find that rounded caps are better. This restriction does limit the artistic effects you can get from this LPE when lines have to cross at shallow angles. In the following example, the red and blue lines are broken using the Knot LPE with round and square caps. To get the effect of the purple line, however, it was necessary to convert the stroke to a path, then manually cut out the gaps. All the practice of designing our new logo looked like it would be particularly useful when the lead singer declared that our album would be called “Celtic Knot”. I quickly designed a potential album cover. Thanks to the Knot LPE it didn't take too long to produce that design – which is a good thing, as the following day the singer decided that he was leaving the band to go on a spiritual retreat to India. Perhaps I should form an 80’s style synth pop group instead. “Spiro Spline” sounds like a great band name to me…