Outils pour utilisateurs

Outils du site


issue120:inkscape

Ceci est une ancienne révision du document !


As you may have read elsewhere (you do read the rest of the magazine, right?), this issue marks the 10th birthday of Full Circle Magazine. As you may also have read, that means that we (the authors) have been given the freedom to do something a little different with our articles. So I’ve decided to make a cake.

Ingredients: • One computer, suitable for running Inkscape • One recent version of Inkscape • One pointing device, suitable for controlling Inkscape • A monitor, to provide feedback as you make the cake • (Optional) Artistic talent

Luckily, I had all of the ingredients already – with the exception of the last one. That means that my cake will be acceptable, if a little ordinary: if you have some artistic flair, I’ve no doubt you can make a much tastier creation.

Method: • Go to the shops and buy a real cake. Use it for reference, or simply eat it with a nice cup of tea or coffee to keep your spirits up when Inkscape crashes for the third time. • Using the pointing device to control Inkscape, and the monitor to see the result, draw a cake.

What? You want something more detailed. Okay then…

We’ll construct our cake layer by layer, starting from the bottom and working our way up. But before we can even begin to think about whether we want a vanilla or chocolate sponge, we’ll need a platter for the cake to sit on. Start by drawing an ellipse, then duplicate it (CTRL-D) and move the duplicate up a little using the arrow keys.

To make it look less like one disk stacked on another, and more like a solid platter, we need to straighten the sides of the bottom shape. Select it and convert it to a path (Path > Object to Path, or press CTRL-SHIFT-C). Double-click on it to edit the nodes and you should see that there are four nodes. Drag a box to select the top three, then convert them all to corner nodes using the button in the toolbar. You should now have three selected diamond-shaped nodes, and one square node. Finally click the “Make selected segments lines” button on the toolbar to give you an elliptical pie-slice.

Now double-click on one of the straight lines to create an extra node, then drag the two top nodes to the left and right, so that they touch the edges of the upper ellipse to give the appearance of straight sides. You may need to zoom in to position the nodes accurately, or enable snapping to smooth nodes (which will also snap to the quadrant points of an ellipse). If everything has gone well, you should be faced with something like this:

Switch back to the selection tool, click on the background to de-select everything, and you should find your shapes give the appearance of a thin disc. You may want to add a gradient fill to give it more depth, but I’m going for a fairly flat effect on my image (that’s non-artist speak for “getting highlights and shadows right is a bit tricky!”). Instead, I used a repeating linear gradient running from white to light gray, to give the impression of a simple silver finish to the platter:

Building the first layer of the cake is very similar. Start by duplicating the top of your platter then scaling it down (hold CTRL-SHIFT as you drag the resize handles to get it to scale proportionally from the center). Give it a suitable fill and stroke (I’ve decided on vanilla sponge), then duplicate it, move it up with the arrow keys (a bit further this time), and repeat the steps above to form a layer of cake. You might want to bow the sides out a little to give it a better shape, but otherwise it’s just a variation on making the platter.

As any competent pâtissier knows, a cake is only as good as its filling. We’ll go with the classic combination of jam (“jelly” to US readers) and cream. Obviously, once we spread jam all over the top of the cake, we won’t be able to see that top ellipse any more, so we may as well change its fill and stroke to shades of red, and use it as the basis of the jam layer instead.

This is where a little psychology kicks in: when presented with the dessert trolley at a fancy restaurant, we tend to be attracted to the perfectly formed, beautifully mirror-glazed, geometrically precise offerings, rather than those which look like the chef may have accidentally sat on them. When drawing an image, however, a flat disc of jam lacks the appeal of an overloaded cake, gloopily dripping great gobs of strawberry goodness from its sides. So gloopy gobs it is for our image. Which means more node editing.

Convert your jam ellipse to a path, but this time we’ll be working with the bottom half of the shape, not the top. Select the bottom three nodes, leaving the top one alone, but don’t convert them to corner nodes this time: rather, press the INSERT key a few times to create more smooth nodes between the existing ones. Click the background canvas to de-select them all, then start dragging individual nodes downwards, working from the center out, to give the appearance of the jam flowing down the side of the cake. Move some of the nodes to the left or right, and add or delete some to give it a more random appearance – dragging the paths rather than the nodes can also help. Try to stick to smooth nodes – there are no sharp corners in our jam! Watch out when removing nodes, as the adjacent ones may be converted to corners automatically. With a bit of manipulation you should get something similar to this:

To really get a gloopy effect, we’ll want to add some drips running down the side. The basic form of a drip is created by adding a couple of nodes to let you pinch in the “neck”, with one in-between that you can drag down to form the base of the droplet itself. Make that center one into a symmetric node to save yourself a little editing work, and position all three to give you the desired appearance.

A drip running all the way down to the platter will need a couple more nodes to handle the transition from vertical to horizontal, but otherwise it’s the same idea. With those additions, here’s the cake so far – it’s starting to look good enough to eat!

Despite my earlier avoidance of highlights and shadows, there’s no denying that the best jam has a glistening surface that makes ours look somewhat lifeless. An obvious candidate for adding specular lighting would be to use the filter primitive of the same name – but that’s probably overkill for the result we’re looking for, and would likely take a lot of trial-and-error to even come close. For the comic-style image we’re creating, hard-edged highlights are frequently a better choice, and can often be made using copies of the very shape you’re trying to highlight.

Start by duplicating your jam path and moving the duplicate up, away from the cake, by using SHIFT-UP ARROW. The advantage of moving it in this way is that the final result can be moved back precisely by pressing SHIFT-DOWN ARROW, even if you’ve changed the zoom level whilst working. Remove the stroke from this copy. Now duplicate the new copy (so that you’ve got two duplicates of the original, stacked on top of each other), and give the top one a contrasting fill. Holding the ALT key, use the cursor keys to shift the top copy slightly to the left and down, so that you have a thin slice of the underlying red path peeking out at the right of each descending loop.

Drag a selection box around both duplicates (that’s why we moved them away from the main part of the cake), and ensure that the status bar shows two paths are selected. Now use the Path > Difference menu entry to remove the top shape, leaving only those thin edges. Use SHIFT-DOWN ARROW to move the resultant path back into place, then set its fill to white. Holding the ALT key, you can now use the arrow keys to precisely position the highlights until most are in the right place. Now use Path > Break Apart to separate each highlight into its own object, making it easier to fine tune them, by moving, editing or even deleting those that don’t look quite right.

Repeat the jam layer, but with a pale yellow fill color to represent cream. Highlights don’t work so well on something so pale, so, instead, create some lowlights – shifting your duplicate in the opposite direction, and using a slightly darker fill color to add a subtle shadow to each glob of cream. You can also give it a little more depth by simply putting a dark duplicate below the cream path and shifting it so that it peeks out ever so slightly.

That’s the first layer of our cake pretty much finished, but there is one final trick that will make the sponge look more… well, spongey. Duplicate the beige sponge object and move it up away from the cake. Tweak the color to make it a darker shade, then duplicate it. Open the Fill & Stroke dialog, and select a pattern fill, specifically the “Sand (bitmap)” pattern. Depending on the size you’re drawing at, the grain of the image may be too coarse or too fine, so, if necessary, double-click on the object to gain access to the handles for scaling the pattern. These appear as a cross, circle and square, anchored to the top-left of the page. Use the cross to reposition them, if you wish. Dragging the square will change the scale of the pattern, whereas the circle will let you rotate it (which you’ll need later on). By the time you’re finished, you should have a dark beige cake base completely covered by a course, sandy duplicate. Select both, then use Object > Mask > Set to reduce the pair to a single, blobby, brown shape. Move it back down over the cake, and use the Page Down key (or the button on the toolbar) to drop it down in the z-stack until it’s above the cake base, but below the jam.

Repeat the steps above to create more layers of cake, jam and cream. On your topmost layer, add a little shadow to the front edge by using Path > Difference between two ellipses to create a thin crescent of color which helps to define the shape.

As this is a celebratory cake, it should probably have a little more decoration. How about some sprinkles? There are a few ways to approach this, but I opted to use tiled clones (see parts 33 to 36 of this series). My parent object was just a short straight line which I cloned into 10 rows by 20 columns. Each row and column position was randomised, as was the rotation of each clone. Once I achieved the sort of distribution I was looking for, I unset the stroke on the original object so that I could use the Color tab of the Tiled Clones dialog to set a random hue to each sprinkle, giving me this result:

Grouping the clones, then scaling the group vertically gives the right sort of perspective appearance. Clipping with an ellipse results in a neat top for the cake.

As this is specifically a birthday celebration, candles are also in order. I began by creating a single candle using the same basic techniques of drawing primitives, converting them to paths, and tweaking the shape using the node handles. To add stripes to the candle, I used the same approach (of a patterned fill masking a flat color) that I used for the texture on the cakes. This time the fill was “Stripes (1:1) White”, and I used the previously mentioned pattern adjustment handles to not only scale, but also rotate the pattern. The object behind was given an “unset” fill, then the whole candle was grouped. Because of the unset fill, it was possible to clone the group and give each clone its own individual color:

After placing the candles onto the cake, there was one final step to really make the image stand out: in classic comic-strip style, I wanted to give it a thick black outline. To do this, I selected the whole image and duplicated it, then moved the duplicate well away from the original. I deleted the sprinkles, highlights and lowlights, since they wouldn’t have an effect on the silhouette. Then I repeatedly used Edit > Clone > Unlink Clone and Object > Ungroup – until the status bar showed that there were no more clones or groups in the selection. Finally, Path > Union joined all those separate objects into a single shape, which I could fill with black as a silhouette. I moved it back over the original image, gave it a thick black stroke, then sent it to the back of the z-stack.

So here’s the result of all that work: Happy 10th birthday Full Circle Magazine!

issue120/inkscape.1493463128.txt.gz · Dernière modification : 2017/04/29 12:52 de auntiee