Outils pour utilisateurs

Outils du site


issue77:tutoriel_-_inkscape

Table des matières

1

Having manually traced a logo in the previous instalment, this time we're going to trace something a little different: a hand-sketched comic-book character. The basic principles are the same as before, but working from a sketch will allow us a little more freedom than rigorously reproducing a logo. The first step is to obtain a suitable image for tracing. If your drawing skills are as bad as mine, then I suggest finding someone who knows what to do with the pointy end of a pencil to give you a hand. In my case, I've called on Vincent Mealing – the co-creator of my webcomics – to create a headshot of “Frankie”, a character from our “Monsters, Inked” strip. After scanning and saving the sketch as a JPEG image, dragging it into Inkscape presents the familiar import dialog. As usual, I chose to link to the image, because it's only a temporary addition to the file. Locking the layer prevents the sketch accidentally being moved or selected. With that layer locked, we need to create another layer to actually draw on. When tracing a logo or photograph, I prefer to draw on a layer above the bitmap. For tracing a pencil sketch, however, it's often easier to place your drawing layer below.

Après avoir tracé manuellement un logo dans l'épisode précédent, cette fois-ci, nous allons tracer quelque chose d'un peu différent : un personnage de bande dessinée esquissé à la main. Les principes de base sont les mêmes que précédemment, mais le travail à partir d'un croquis nous laissera un peu plus de liberté que la reproduction rigoureuse d'un logo.

La première étape consiste à obtenir une image appropriée pour le traçage. Si vos compétences en dessin sont aussi mauvaises que les miennes, je vous suggère de trouver quelqu'un qui sait quoi faire avec le bout pointu d'un crayo,n pour vous aider. Dans mon cas, j'ai appelé Vincent Mealing - le co-créateur de mes webcomics - pour créer un portrait de « Frankie », un personnage de notre BD « Monsters, Inked “.

Après avoir numérisé et sauvegardé l'esquisse comme image JPEG, on la fait glisser dans Inkscape pour obtenir la boîte de dialogue d'importation familière. Comme d'habitude, je choisis de simplement de créer un lien vers l'image, parce que c'est seulement un ajout temporaire au fichier. Verrouiller le calque empêche que l'esquisse ne soit déplacée ou sélectionnée accidentellement. Avec ce calque verrouillé, nous devons créer un autre calque pour dessiner dessus. Lorsque je trace un logo ou une photo, je préfère dessiner sur un calque au-dessus du bitmap. Pour tracer un croquis au crayon, cependant, il est souvent plus facile de placer votre calque de dessin en-dessous.

2

The obvious problem with drawing below the sketch is that the white background of your scanned image will obscure anything that you draw. The solution to this is to set the Blend Mode of the Pencil Sketch layer to “Multiply”. Anything you draw on the lower layer will show through the background, but your pencil marks will still be visible on top to help guide you. With those preparations in place, it's time to start drawing. Here, I've used the Bézier tool (“B” or Shift-F6) to draw part of Frankie's skullcap. You can clearly see how the pencil marks are still visible, making it easy to trace the lines of the sketch. You can continue tracing the sketch using the Bézier tool, and tweaking the paths with the Node tool (“N” or F2) to quickly produce an acceptable result. Depending on the style you want for your final image, a simple trace such as this might be all you need to do, or you might want to add highlights, shadows, gradients and textures to give it a little more depth.

Le problème évident avec le dessin en-dessous de l'esquisse est que le fond blanc de votre image numérisée cache tout ce que vous dessinez. La solution est de définir le mode de fondu du calque de dessin au crayon à « Produit ». Tout ce que vous dessinerez sur le calque inférieur sera visible à travers l'arrière-plan, mais vos marques de crayon seront toujours visibles sur le dessus pour vous guider.

Une fois achevés ces préparatifs, il est temps de commencer à dessiner. Ici, j'ai utilisé l'outil Bézier (« B » ou Maj+F6) pour dessiner une partie du crâne de Frankie. Vous pouvez clairement voir que les marques de crayon sont toujours visibles, ce qui facilite le traçage des lignes de l'esquisse.

Vous pouvez continuer à tracer l'esquisse à l'aide de l'outil Bézier et peaufiner les chemins avec l'outil nœud (« N » ou F2) pour produire rapidement un résultat acceptable. Selon le style que vous voulez pour votre image finale, un simple tracé comme celui-ci pourrait être suffisant, sinon vous voudrez peut-être ajouter des reflets, des ombres, des dégradés et des textures pour lui donner un peu plus de profondeur.

3

Tracing or drawing using simple objects and paths can sometimes feel a bit sterile. Lines that keep the same constant width don't add much character to a drawing, and optical tricks like fading out lines using a stroke gradient quickly lose their effect at large sizes. As is so often the case, Inkscape is constrained by the SVG format, which doesn't contain any notion of variable line thickness. Despite this omission, Inkscape does have a few ways to create more dynamic and variable lines, but each approach comes with compromises in order to maintain SVG compatibility. The biggest compromise – shared by all these methods – is that you can no longer create a filled path with a stroke, and instead have to create two separate objects, one for the outline and another for the fill. Your outline will no longer be a simple stroke, but will itself be a filled path. If you modify the shape of your outline, you'll need to also change the shape of the fill to match, so I recommend just drawing your outlines at first and then only adding fills once you're happy with your final design. This should all become a little clearer as we progress through some examples.

Tracer ou dessiner en utilisant des objets simples et des chemins peut parfois sembler un peu fade. Les lignes qui gardent une largeur constante n'ajoutent pas beaucoup de caractère à un dessin, et les illusions d'optique comme les lignes qui s'estompent grâce à un dégradé perdent rapidement leur effet dans les grandes tailles. Comme c'est souvent le cas, Inkscape est limité par le format SVG, qui ne contient aucune notion d'épaisseur variable de ligne. Malgré ce manque, Inkscape offre quelques moyens de créer des lignes plus dynamiques et variables, mais chaque approche vient avec des compromis pour maintenir la compatibilité SVG.

Le plus grand compromis - partagé par toutes ces méthodes - c'est que vous ne pouvez plus créer un chemin rempli avec un contour, mais vous devez à la place créer deux objets distincts, l'un pour le contour et l'autre pour le remplissage. Votre contour ne sera plus un simple contour, mais sera un chemin rempli. Si vous modifiez la forme de votre contour, vous devrez aussi changer la forme du remplissage pour correspondre, donc je vous recommande de dessiner vos lignes d'abord, puis d'ajouter le remplissage seulement quand vous êtes content de votre conception finale. Tout cela devrait devenir un peu plus clair en étudiant quelques exemples.

4

An easy way to tweak the thickness of your outlines is to draw them as strokes, then convert the strokes to paths using the Path > Stroke to Path menu item, or CTRL-ALT-C keyboard shortcut. The effect of this is most obvious if you look at a thick stroke before and after conversion, using the node tool. The first image shows the original stroke – a simple squiggle with only four nodes, and a constant width. By converting the stroke to a path we end up with a filled object that matches the shape and size of the original, except now the number of nodes has increased significantly. In this case, it's obvious that some of those 29 nodes aren't really required and can be deleted. You can perform this operation manually if you want precise control over the outcome, but Inkscape also offers an automated option in the form of the Path > Simplify menu option (CTRL-L).

Un moyen facile de modifier l'épaisseur de vos lignes est de les dessiner comme des contours, puis de les convertir en chemins en utilisant le menu Chemin > Contour en chemin ou le raccourci Ctrl-Alt-C. L'effet en est plus évident si vous regardez un contour très épais avant et après la conversion, en utilisant l'outil de nœud.

La première image montre le contour original - un simple gribouillis avec seulement quatre nœuds et une largeur constante. En convertissant le contour en un chemin nous nous retrouvons avec un objet rempli qui correspond à la forme et la taille de l'original, sauf que, maintenant, le nombre de nœuds a considérablement augmenté. Dans ce cas, il est évident que certains de ces 29 nœuds ne sont pas vraiment nécessaires et peuvent être supprimés. Vous pouvez effectuer cette opération manuellement si vous voulez un contrôle précis sur le résultat, mais Inkscape offre également une option automatique en passant par le menu Chemin > Simplifier (Ctrl-L).

5

Using Simplify once will try to reduce the number of nodes without changing the shape or size of your path too much. Pressing it repeatedly will try to reduce the number further, taking more and more liberties with the shape as it does so. Sharp corners tend to be the first to suffer, but if you keep pressing CTRL-L frequently enough you'll ultimately end up with something that bears little resemblance to the path you started with. Using the Simplify command is therefore a trade-off between fidelity to the original shape, and the number of nodes you're left with. If the Selection tool is active, you can keep an eye on the number of nodes in the Status Bar at the bottom of the Inkscape window. If you go too far, Edit > Undo (CTRL-Z) will take you back in the opposite direction – press it enough and you'll eventually get back to the original stroke. In this case, pressing CTRL-L just once was sufficient to reduce the node count from 29 down to a more manageable 18. Manually adjusting the positions of those nodes gives us the variable width outline we're looking for, as you can see in this second pass at Frankie's skullcap.

Utiliser Simplifier une fois essaiera de réduire le nombre de nœuds sans trop changer la forme ou la taille de votre chemin. L'utiliser plusieurs fois va essayer de réduire encore le nombre, en prenant de plus en plus de libertés avec la forme au fur et à mesure. Les angles aigus ont tendance à être les premiers à souffrir, mais si vous continuez à appuyer sur Ctrl-L assez souvent, vous aurez finalement quelque chose qui ne ressemble guère au chemin avec lequel vous avez commencé. L'utilisation de la commande Simplifier est donc un compromis entre la fidélité à la forme originale et le nombre de nœuds qu'il vous restera. Si l'outil de sélection est actif, vous pouvez garder un œil sur le nombre de nœuds dans la barre d'état en bas de la fenêtre d'Inkscape. Si vous allez trop loin, Edition > Annuler (Ctrl-Z) vous ramènera en arrière ; appuyez dessus suffisamment de fois et vous finirez par revenir au contour d'origine.

Dans ce cas, l'appui sur Ctrl-L une seule fois a été suffisante pour réduire le nombre de nœuds de 29 à un 18 plus gérable. On peut ajuster manuellement les positions de ces nœuds, ce qui nous donne la largeur variable du contour qu'on recherche, comme vous pouvez le voir dans le deuxième essai de crâne de Frankie.

6

As you might imagine, converting your strokes to paths, and then manually editing every node, can be extremely time consuming – however, if you have the patience and skill, it's the best way to have complete control over your drawing. Inkscape does have a quicker way to achieve a similar result, by letting you select from a few preset path shapes when you draw your line. “Few” is the important word here: currently your choice is limited to three predefined shapes – two of which are essentially the same – although you can use a path from the clipboard if you want something different. To activate this feature, when drawing a Bézier curve, use the “Shape” drop-down on the tool control bar to select “Triangle In”, “Triangle Out”, or “Ellipse”. The first two will both draw your path as a triangle. The difference is simply whether the wide end is at the start of your line and the pointed tip is at the end, or vice versa. “Ellipse” draws your path as an ellipse – fatter in the center and thinner at the ends. “None” turns off the shaped lines entirely, taking you back to drawing normal strokes.

Comme vous pouvez l'imaginer, la conversion de vos contours en chemins, puis l'édition manuelle de chaque nœud peut représenter beaucoup de temps ; toutefois, si vous avez la patience et la compétence, c'est le meilleur moyen d'avoir un contrôle complet sur votre dessin.

Inkscape propose un moyen plus rapide d'obtenir un résultat similaire, en vous permettant de choisir parmi quelques formes de chemin prédéfinis lorsque vous dessinez votre ligne. « Quelques » est le mot important ici : pour l'instant, votre choix est limité à trois formes prédéfinies - dont deux sont essentiellement les mêmes - mais vous pouvez utiliser un chemin du presse-papiers si vous voulez quelque chose de différent. Pour activer cette fonction, lorsque vous dessinez une courbe de Bézier, utilisez le menu déroulant « Forme » sur la barre de contrôle de l'outil pour sélectionner « Triangle croissant », « Triangle décroissant », ou « Ellipse ».

Les deux premiers traceront votre chemin comme un triangle. La différence est simplement que l'extrémité large sera au début de votre ligne et le bout pointu à la fin ou le contraire. « Ellipse » trace votre chemin comme une ellipse : plus gros au centre et plus mince aux extrémités. « Aucun » désactive complètement les formes de lignes, ce qui vous ramène à un traçage de contours normaux.

7

Unfortunately, there's no simple way to adjust the width of the triangle's base or the ellipse's center, so these shapes can be a bit too heavy for some lines, and a bit too light for others. Using just these shapes gives us another variation of Frankie's head to consider. Inkscape's tiny palette of line shapes is a real issue compared with other competing applications. Triangles are okay, but what if you don't want your line tapering to nothing? And whilst an ellipse lets you create lines that bulge in the middle, it's no use if you want one that thins in the middle instead. Although it's not possible to add your own shapes to the drop-down menu, the “From Clipboard” option does at least offer some additional flexibility that lets you work around the limited list of defaults. In order to use this, you first need to create a path that will be used as your line's shape. In order to create a line that thins in the middle, for example, you require a shape that thins in the middle: a smoothed out dog bone or bow-tie design.

Malheureusement, il n'y a pas de moyen simple de régler la largeur de la base du triangle ou le centre de l'ellipse, ce qui fait que ces formes peuvent être un peu trop foncées pour certaines lignes, et un peu trop claires pour d'autres. L'utilisation de ces formes nous donne une autre variante de la tête de Frankie à étudier.

La petite palette de formes d'Inkscape est un vrai problème par rapport aux applications concurrentes. Les triangles sont corrects, mais que faire si vous ne voulez pas que votre ligne se rétrécisse vers rien ? Et alors qu'une ellipse vous permet de créer des lignes bossues au milieu, elle ne sert à rien si vous voulez plutôt une ligne qui s'amincit au milieu.

Même s'il n'est pas possible d'ajouter vos propres formes dans le menu déroulant, l'option « à partir du presse-papiers » offre au moins une certaine souplesse supplémentaire qui vous permet de contourner la liste limitée de valeurs par défaut. Pour l'utiliser, vous devez d'abord créer un chemin qui sera utilisé comme forme pour votre ligne. Pour créer une ligne qui s'amincit au milieu, par exemple, vous avez besoin d'une forme qui s'amincit au milieu : par exemple un os de chien lissé ou un nœud papillon.

8

This path will be stretched to cover the length of your Bézier curve, so make sure you draw it at the right sort of scale for your image. When you're ready, you have to put it on the clipboard by selecting it and either copying (Edit > Copy or CTRL-C) or cutting (Edit > Cut or CTRL-X). Now select the Bézier tool again, change the Shape drop-down to “From Clipboard”, and draw your curve as usual. You can continue to draw new curves, and they'll all use the same shape, until something replaces it on the clipboard. Because of this I prefer to copy, rather than cut, in case I need to put the shape back on the clipboard later. In practice, there's no live connection between the shape path and the Bézier curve, so once you're finished with it, you can safely remove the shape from your drawing without any change to the shaped curves you've created. Once again we'll use Frankie's cranium to demonstrate the result. I've left the original bow-tie in view to make it clear how the thickness of the final curve relates to the size and shape of the path.

Ce chemin sera étiré pour couvrir la longueur de votre courbe de Bézier, alors assurez-vous de le dessiner à la bonne échelle pour votre image. Lorsque vous êtes prêt, vous devez le mettre dans le presse-papiers en le sélectionnant et en le copiant (Édition > Copier ou Ctrl-C) ou en le coupant (Edition > Couper ou Ctrl-X). Maintenant, sélectionnez l'outil Bézier à nouveau, choisissez « à partir du presse-papiers » dans la liste déroulante, et dessinez votre courbe comme d'habitude.

Vous pouvez continuer à dessiner de nouvelles courbes et elles utiliseront toutes la même forme, jusqu'à ce que quelque chose la remplace dans le presse-papiers. Pour cette raison, je préfère copier plutôt que de couper, au cas où je doive mettre à nouveau la forme dans le presse-papiers plus tard. Dans la pratique, il n'y a pas de lien direct entre le chemin de la forme et la courbe de Bézier, aussi, une fois que vous avez terminé avec elle, vous pouvez supprimer la forme de votre dessin en toute sécurité sans qu'il n'y ait de modification dans les courbes créées.

Encore une fois, nous allons utiliser le crâne de Frankie pour démontrer le résultat. J'ai laissé le nœud papillon original apparent pour montrer clairement comment l'épaisseur de la courbe finale s'appuie sur la taille et la forme du chemin.

9

You can, of course, mix and match various shaped paths within a drawing. Looking back at the examples, it's clear that different parts of the image work best with different shapes. Whether you use triangles, ellipses, or the clipboard, you can select the shaped curve and use Path > Object to Path (CTRL-SHIFT-C) in order to create a path that is more suited to manual editing. Note that you don't use Stroke to Path in this case, because the shaped Bézier is implemented as a closed path, not a simple stroke – and don't forget to keep an eye on the number of nodes created, and Simplify if necessary. As you might expect, the features introduced in this article apply to more than just manual tracing of comic characters. You can Simplify any path, convert any stroke to a path, or use shapes when drawing a Bézier curve, irrespective of whether you're tracing a sketch, a logo, a photograph – or just drawing freehand, with no reference image to trace. In the next instalment, we'll continue to outline the image of Frankie using tools that are more suited to freehand drawing using a graphics tablet, rather than the less-than-fluid movements of a mouse. In the meantime, why not try using some of these techniques to trace an image of your own? Or, if you prefer, you can download the sketch of Frankie from www.peppertop.com/fc/ and try to replicate some of the examples shown here.

Vous pouvez bien sûr mélanger et assortir différents chemins mis en forme dans un dessin. En regardant les exemples, il est clair que différentes parties de l'image fonctionnent mieux avec des formes différentes. Que vous utilisiez des triangles, des ellipses ou le presse-papiers, vous pouvez sélectionner la courbe mise en forme et utiliser Chemin > Objet en chemin (Ctrl-Maj-C) pour créer un chemin qui sera plus adapté à une édition manuelle. Notez que vous n'utilisez pas Contour en chemin dans ce cas, car la forme de Bézier est implémentée comme un chemin fermé, pas un simple contour - et n'oubliez pas de surveiller le nombre de nœuds créés et Simplifier si c'est nécessaire.

Comme on pouvait s'y attendre, les fonctionnalités introduites dans cet article s'appliquent au-delà du traçage manuel des personnages de BD. Vous pouvez Simplifier tout chemin, convertir n'importe quel contour en chemin, ou utiliser des formes lors de l'élaboration d'une courbe de Bézier, indépendamment du fait que vous tracez un croquis, un logo, une photo, ou dessinez à main levée, sans image de référence à retracer.

Dans le prochain épisode, nous continuerons à tracer l'image de Frankie en utilisant des outils qui sont plus adaptés au dessin à main levée sur une tablette graphique, plutôt que les mouvements peu fluides d'une souris. En attendant, pourquoi ne pas essayer d'utiliser certaines de ces techniques pour tracer une de vos images ? Ou, si vous préférez, vous pouvez télécharger le croquis de Frankie sur www.peppertop.com/fc/ et essayer de reproduire certains des exemples présentés ici.

10 - Critique rapide

Quick Review by Jimmy Naidoo The Toshiba Satellite C850-F0155 is a low end notebook computer supplied with no operating system. It features a 15.6” LCD display, full keyboard with numeric keypad, Intel 1000M cpu, 2GB DDR3 1600MHz ram, 320GB 5400rpm hard drive, DVD multi drive and a 6 cell 4200mAh battery. It weighs 2.3kg. I recently purchased one for my parents and installed Ubuntu 13.04 on it. Display The 1366×768 display is ok when viewed directly but is quite poor when viewed from oblique angles. It performs poorly in bright sunlight.

Critique rapide par Jimmy Naidoo

Le Toshiba Satellite C850-F0155 est un ordinateur portable bas de gamme fourni sans système d'exploitation. Il dispose d'un écran LCD de 15,6“, d'un clavier complet avec pavé numérique, d'un processeur Intel 1000M, de 2 Go de RAM DDR3 1600 MHz, d'un disque dur de 320 Go 5400 tours/mn, d'un lecteur DVD multi-format et d'une batterie à 6 cellules 4200 mAh. Il pèse 2,3 kg. J'en ai récemment acheté un pour mes parents et j'y ai installé Ubuntu 13.04.

Affichage

L'écran de 1366×768 est correct en vue directe, mais pas bon du tout depuis des angles obliques. Il fonctionne mal en plein soleil.

11

Hardware The keyboard is about average for a low-end notebook, as is the touch pad(supports multi-touch). The hard drive is reasonably quick and quiet. Audio is tinny as per usual for a low-end notebook. The biggest surprise is the cpu, which is a lot better than I expected, though it does get rather hot at times. The gpu is quite good also, no problems playing back hd content or basic gaming (SuperTuxKart, Battle for Wesnoth, etc.). The unit is well built and does not flex like some similarly priced units. Battery The Lithium-ion battery offers around 2.5hours of normal, continuous use. Recharging is swift, under an hour from totally flat to fully charged.

Matériel

Le clavier est dans la moyenne pour un portable bas de gamme, comme le pavé tactile (qui supporte le « multi-touch »). Le disque dur est assez rapide et silencieux. L'audio est faible, comme d'habitude pour un portable bas de gamme. La plus grande surprise est le CPU, qui est bien meilleur que ce à quoi je m'attendais, bien qu'il chauffe pas mal parfois. Le GPU est très bon aussi - aucun problème à la lecture de contenu HD ou avec des jeux de base (SuperTuxKart, Battle for Wesnoth, etc.). L'appareil est bien construit et ne se tord pas comme quelques autres au même prix.

Batterie

La batterie Lithium-ion offre environ 2,5 heures d'utilisation continue normale. La recharge est rapide, moins d'une heure pour la recharger totalement quand elle est à plat.

12

Ubuntu Ubuntu 13.04 installed quickly and has worked flawlessly so far. All hardware is natively supported. The system boots and shuts down very quickly and the Unity interface seems perfectly suited to this portable device. Summary The Toshiba Satellite C850-F0155 is hard to beat at the price. Most similarly priced notebooks have weaker cpu's, smaller screens, or lower build quality. The only negative seems to be the rather short battery life.

Ubuntu

Ubuntu 13.04 s'est installé rapidement et a fonctionné sans problème jusqu'à présent. Tout le matériel est pris en charge nativement. Le système démarre et s'arrête très rapidement et l'interface Unity semble parfaitement adaptée à cet appareil portable.

Résumé

Le rapport qualité/prix du Toshiba Satellite C850-F0155 est difficile à battre. Les ordinateurs portables de prix similaire ont des CPU moins bons, des écrans plus petits, une qualité de construction plus faible. Le seul point négatif semble être la durée de vie assez courte de la batterie.

issue77/tutoriel_-_inkscape.txt · Dernière modification : 2014/03/10 18:48 de auntiee