Outils pour utilisateurs

Outils du site


issue120:inkscape

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.

Comme vous avez pu le lire par ailleurs (vous lisez bien tout le magazine, n'est-ce pas ?), ce numéro marque le 10e anniversaire du Full Circle Magazine. Comme vous pourriez aussi l'avoir lu, ça signifie que nous (les auteurs) étions libres de faire quelque chose d'un peu différent dans nos articles. Aussi, j'ai décidé de faire un gâteau.

Ingrédients : • Un ordinateur, capable de faire tourner Inkscape. • Une version récente d'Inkscape. • Un dispositif de pointage, capable de contrôler Inkscape. • Un écran, pour voir ce que vous faites en préparant le gâteau. • (optionnel) Un talent artistique.

Heureusement, j'avais déjà tous les ingrédients - à l'exception du dernier. Ça veut dire que mon gâteau sera acceptable, mais un peu quelconque ; si vous avez du flair artistique, je ne doute pas que vous ferez une création beaucoup plus goûteuse.

Méthode : • Allez dans une boutique et achetez un vrai gâteau. Utilisez-le comme modèle, ou mangez-le simplement avec une tasse de thé ou de café pour garder le moral quand Inkscape plante pour la troisième fois. • En utilisant le dispositif de pointage pour le contrôle d'Inkscape, et l'écran pour voir le résultat, dessinez un gâteau.

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:

Comment ? Vous voulez plus de détails ? Bon, alors…

Nous construirons notre gâteau par couches, en commençant par le bas et en montant. Mais avant que nous ne commencions à réfléchir sur le parfum, vanille ou chocolat, de notre génoise, nous avons besoin d'un plat sur lequel poser le gâteau. Débutez en dessinant une ellipse, puis dupliquez-la (CTRL-D) et déplacez le double un petit peu vers le haut avec les touches fléchées.

Pour faire penser moins à deux disques l'un sur l'autre, et plus à un plat en dur, nous avons besoin de redresser les côtés de la forme du bas. Sélectionnez-la et convertissez-la en chemin (Chemin > Objet en chemin, ou appuyez sur CTRL-MAJ-C). Double-cliquez-la pour éditer les nœuds et vous devriez en voir quatre. Tirez un rectangle pour sélectionner les trois du haut, puis convertissez-les tous en nœuds durs en utilisant le bouton de la barre de tâches. Vous devriez avoir maintenant trois nœuds en losange sélectionnés, et un nœud carré. Enfin, cliquez sur le bouton de la barre de tâches « Rendre rectilignes les chemins sélectionnés » pour obtenir une portion d'ellipse.

Maintenant, double-cliquez sur une des lignes droites pour ajouter un nœud, puis tirez les deux nœuds du haut vers la droite et la gauche, jusqu'à ce qu'ils touchent les bords de l'ellipse supérieure pour donner l'apparence de flancs droits. Vous aurez sans doute besoin de zoomer pour positionner précisément les nœuds ou activer le collage aux nœuds doux (qui se colleront aussi aux quatre nœuds d'une ellipse). Si tout s'est bien passé, vous devriez voir quelque chose comme ceci :

Reprenez l'outil de sélection, cliquez sur le fond pour tout désélectionner et vous devriez trouver que vos formes ont l'apparence d'un disque fin. Vous aurez peut-être envie d'ajouter un remplissage en dégradé pour lui donner plus de profondeur, mais je ne fais qu'un effet d'aplat sur mon image (c'est du parler non artistique pour « Bien rendre les reflets et les ombres en un peu difficile ! »). À la place, j'utilise un dégradé linéaire répétitif allant du blanc au gris pâle, pour donner au plat l'impression d'une simple finition argentée.

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.

La construction de la première couche du gâteau est très similaire. Commencez par dupliquer le sommet de votre plat puis réduisez-le (appuyez sur CTRL-MAJ pendant que vous tirez les poignées de dimensionnement pour lui donner une échelle proportionnelle à partir du centre). Donnez-lui un remplissage et un contour correct (je me suis décidé pour une génoise à la vanille), puis dupliquez-le, déplacez-le vers le haut avec les touches fléchées (un peu plus loin ce coup-ci), et répétez les étapes ci-dessus pour former une couche du gâteau. Vous souhaiterez peut-être arrondir un peu les flancs pour lui donner une meilleure forme ; mais autrement, c'est juste une variante de la réalisation du plat.

Comme le sait tout cuisinier compétent, un gâteau ne vaut que par son fourrage. Nous choisirons la combinaison classique de la confiture (« jelly » pour nos lecteurs américains) et de la crème. Évidemment, une fois la confiture étalée sur tout le haut du gâteau, nous ne pouvons plus voir l'ellipse supérieure ; aussi, nous devons modifier son remplissage et son contour en nuances de rouge, et l'utiliser comme base de la couche de confiture.

C'est ici qu'une petite réflexion entre en jeu : s'il était présenté sur un chariot à dessert dans un bon restaurant, nous serions attirés par les présentations parfaitement formées, avec un glaçage magnifique, genre miroir, et à la géométrie précise, plutôt que par ceux où il semblerait que le chef se soit accidentellement assis dessus. Cependant, quand on dessine une image, un disque plat de gelée n'est pas aussi attrayant qu'un gâteau surchargé, dégoulinant de larges coulées de fraise délicieuse sur les bords. Aussi, notre choix va aux coulées baveuses pour notre image. Ce qui signifie plus de nœuds à modifier.

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!

Convertissez votre ellipse de confiture en chemin, mais, cette fois-ci, nous travaillerons avec la moitié basse de la forme, pas avec le haut. Sélectionnez les trois nœuds du bas, en délaissant celui du haut, mais, cette fois, ne les convertissez pas en nœuds durs : appuyez plutôt plusieurs fois sur la touche INSÉRER pour créer d'autres nœuds doux entre ceux existants. Cliquez sur le fond du canevas pour tous les désélectionner, puis commencez à tirer individuellement les nœuds vers le bas, en allant du centre vers les bords, pour donner l'apparence de la confiture coulant le long du bord du gâteau. Déplacez quelques nœuds vers la droite ou la gauche, ajoutez ou retirez-en certains pour donner une plus grande impression de hasard - tirer les chemins plutôt que les nœuds aide aussi. Essayez de rester en nœuds doux, parce qu'il n'y a pas de coins dans votre gelée ! Surveillez la suppression des nœuds, car les nœuds adjacents pourraient être convertis automatiquement en nœuds durs. Avec quelques manipulations, vous pourriez obtenir un résultat similaire à ceci :

Pour obtenir vraiment un effet coulant, vous voudrez ajouter quelques gouttes glissant le long du bord. La forme de base d'une goutte est créée en ajoutant une paire de nœuds pour vous permettre de serrer le « cou », avec un intermédiaire que vous pouvez tirer vers le bas pour former la base de votre goutte. Transformez celui du centre en un nœud symétrique pour vous éviter un peu de travail d'adaptation et positionnez-les tous les trois pour vous donner l'apparence désirée.

Une goutte descendant jusqu'au plat demandera deux nœuds de plus pour gérer la transition entre le vertical et l'horizontal, mais, autrement, c'est la même idée. Après ces ajouts, voici le gâteau à ce point - il commence à vous mettre l'eau à la bouche !

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.

Malgré ma réticence précédente à utiliser les reflets et les ombres, il est indéniable que la meilleure confiture a une surface luisante et la nôtre semble un peu terne. Un candidat évident pour ajouter un éclairage spéculaire serait d'utiliser la primitive de filtrage du même nom, mais c'est peut-être exagéré pour le résultat que nous cherchons, et demanderait pas mal d'essais et de reprises pour même s'en approcher. Pour l'image dans le style des bandes dessinées que nous créons, des reflets bien marqués sont souvent un choix meilleur, et peuvent souvent être faits en utilisant des copies de la véritable forme que nous essayons de surligner.

Commencez par dupliquer le chemin de confiture et remonter le doublon, hors du gâteau, en utilisant MAJ-Flèche-vers-le-haut. L'avantage de le bouger de cette manière est que le résultat final peut être redescendu précisément avec un appui sur MAJ-Flèche-vers-le-bas, même si vous avez changé le grossissement pendant votre travail. Enlevez le contour de cette copie. Maintenant, dupliquez cette nouvelle copie (vous avez donc deux copies de l'original, empilées l'une sur l'autre), et donnez à celle du dessus un remplissage bien contrasté. En maintenant la touche ALT, utilisez les touches fléchées pour décaler légèrement la copie du dessus à gauche et vers le bas ; ainsi, vous avez une mince couche du chemin rouge sous-jacent ressortant à droite de chaque boucle descendante.

Tirez un rectangle de sélection autour des deux doubles (c'est pour ça que nous les avons déplacés en dehors de la partie principale du gâteau), et assurez-vous que la barre d'état montre que les deux chemins sont sélectionnés. Maintenant, utilisez l'entrée de menu Chemin > Différence pour enlever la forme du dessus, ne gardant que de fines bordures. Utilisez MAJ-Flèche-vers-le-bas pour ramener le chemin résultant à sa place, puis remplissez-le en blanc. En maintenant la touche ALT, vous pouvez utiliser les touches fléchées pour positionner précisément les reflets jusqu'à ce que la plupart soient à la bonne place. Maintenant, utilisez Chemin > Séparer pour séparer chaque reflet dans son propre objet, rendant plus facile leur ajustement fin, en déplaçant, modifiant et même supprimant ceux qui ne paraissent pas assez bien.

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.

Répétez la couche de confiture, mais avec une couleur de remplissage jaune pale pour représenter la crème. Les reflets ne marchent pas très bien sur quelque chose de si pâle ; aussi, à la place, créer des ombres, en décalant votre double dans la direction opposée et en utilisant une couleur légèrement plus foncée pour ajouter une ombre subtile à chaque coulure de crème. Vous pouvez aussi lui donner un peu plus d'épaisseur en mettant simplement un double foncé sous le chemin de crème et en le décalant, de sorte qu'il dépasse toujours aussi légèrement.

Bon. La première couche de votre gâteau est presque terminée, mais il y a une astuce finale qui fera que la génoise paraîtra plus moelleuse. Dupliquez l'objet beige de la génoise et sortez la copie de la zone du gâteau. Ajustez sa couleur pour en faire une ombre plus sombre et dupliquez-la. Ouvrez le dialogue Fond et contour et sélectionnez le remplissage en motif, spécifiquement le motif « Sable (bitmap) ». Suivant l'échelle à laquelle vous dessinez, le grain de l'image peut paraître trop grossier ou trop fin ; aussi, si nécessaire, double-cliquez sur l'objet pour accéder aux poignées de manipulation pour mettre le motif à l'échelle. Celles-ci apparaissent comme une croix, un cercle et un carré, ancrées au point haut à gauche de la page. Utilisez la croix pour les repositionner, si vous le souhaitez. En tirant le carré, l'échelle du motif changera, alors que vous le ferez pivoter avec le cercle (ce dont vous aurez besoin plus tard). Quand vous aurez fini, vous devriez avoir une base de gâteau beige sombre complètement recouverte par un grossier double sableux. Sélectionnez les deux, puis utilisez Objet > Masque > Définir pour réduire la paire à une seule forme marron et poreuse. Ramenez-la sur le gâteau et utilisez la touche Page Suivante (ou le bouton de la barre d'outils) pour la descendre dans l'empilement des couches jusqu'à ce qu'elle soit au-dessus de la base du gâteau, mais sous la confiture.

Répétez les étapes précédentes pour créer plus de couches de gâteau, confiture et crème. Sur la plus haute couche ajoutez une légère ombre au bord de devant en utilisant Chemin > Différence entre deux ellipses pour créer un fin croissant de couleur qui aide à définir la forme.

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:

Comme c'est un gâteau de fête, il devrait probablement avoir un peu plus de décorations. Que diriez-vous de quelques nonpareils ? Il y a plusieurs façons de le faire, mais j'ai opté pour l'utilisation de clones en tuiles (voir parties 33 à 36 de cette série). Mon objet parent était une courte ligne droite que j'ai clonée sur 10 lignes par 20 colonnes. La position dans chaque ligne et colonne était aléatoire, de même que la rotation du clone. Une fois réalisé le type de distribution que je cherchais, j'ai indéfini le contour de l'objet d'origine, de sorte que je pouvais utiliser l'onglet Couleur du dialogue des clones en tuile pour régler une couleur aléatoire pour chaque nonpareil, me donnant ce résultat :

Le regroupement des clones, puis une mise à l'échelle verticale du groupe donne le bon genre de perspective. Détourer avec une ellipse donnera un résultat net sur le dessus du gâteau.

Comme c'est spécifiquement un gâteau d'anniversaire, les bougies sont aussi de rigueur. J'ai commencé par créer une bougie unique en utilisant les mêmes techniques de base des primitives du dessin, les convertissant en chemins, et ajustant la forme en utilisant les poignées de manipulation. Pour ajouter les bandes à la bougie, j'ai utilisé la même approche (d'un motif de remplissage masquant une couleur unie) que j'ai utilisée pour la texture sur les couches du gâteau. Cette fois, le remplissage était « Rayures (1:1) Blanc » et j'ai utilisé les poignées d'ajustement de motif indiquées précédemment, non seulement pour mettre à l'échelle, mais aussi pour tourner le motif. À l'objet en arrière-plan était donné un remplissage « indéfini », puis toute la bougie était groupée. À cause du remplissage indéfini, il était possible de cloner le groupe et de donner à chaque clone sa propre couleur individuelle.

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!

Après avoir placé les bougies sur le gâteau, il y avait une étape finale pour faire vraiment ressortir l'image : dans le style classique des bandes dessinées, j'ai voulu lui appliquer un épais contour noir. Pour ce faire, j'ai sélectionné toute l'image et je l'ai copiée ; puis, j'ai déplacé le doublon à l'extérieur de l'original. J'ai effacé les nonpareils, les reflets et les ombres, car ils n'auraient pas d'effet sur la silhouette. Puis, j'ai utilisé plusieurs fois Édition > Cloner > Délier le clone et Objet > Dégrouper - jusqu'à ce que la barre d'état ait montré qu'il n'y avait plus de clones ou de groupes dans la sélection. Enfin, Chemin > Union a rejoint tous ces objets séparés en une seule forme, que je pouvais remplir en noir comme une silhouette. Je l'ai replacé sur l'image originale, lui ait donné un contour noir épais puis je l'ai mis en bas de la pile.

Voici donc le résultat de tout ce travail : joyeux 10e anniversaire, Full Circle Magazine !

issue120/inkscape.txt · Dernière modification : 2017/05/10 17:23 de andre_domenech