Last month, I introduced the Fill and Stroke dialog as a method for setting flat colors or patterns on your objects. The SVG specification also allows for gradients to be used, but, unfortunately, describes only two types: linear and radial. If you've used gradients in other graphics programs, you may be used to far more variety, but Inkscape is bound by the limitations of the SVG specification so, for now at least, two gradient types are all you have. Inkscape has separate buttons for these in the Fill and Stroke Paint tabs of the dialog: as you might expect, one looks like a linear gradient: and the other looks like a radial gradient: Whichever one you choose, you'll be faced with the same user interface within the dialog (above right).
Le mois dernier, je vous ai présenté le dialogue Remplissage et contour en tant que méthode de réglage des couleurs plates ou des motifs sur vos objets. La spécification SVG vous permet d'utiliser également des dégradés, mais, malheureusement, n'en décrit que deux sortes : le linéaire et le radial. Si vous avez utilisé des dégradés dans d'autres programmes de graphismes, il se peut que vous soyez habitué à avoir beaucoup plus de variété, mais Inkscape se doit d'appliquer les spécifications SVG quelles que soient leurs limitations. Ainsi, au moins à ce moment, vous n'avez que deux sortes de dégradés. Inkscape possède un bouton distinct pour chacun d'eux dans l'onglet Remplissage et contour, Fond, du dialogue. Comme vous pouvez vous y attendre, l'un ressemble à un dégradé linéaire :
et l'autre à un dégradé radial :
Quel que soit celui que vous choisirez, vous vous trouverez confronté à la même interface utilisateur au sein du dialogue (ci-dessus à droite).
The first item is a pop-up list of the gradients that already exist within your document. The currently selected gradient, at the top of the list, will be the new one that you're in the process of creating. If you prefer to use an existing gradient, then you can simply select another one from the list. Each gradient gets given a user-unfriendly name, such as the “linearGradient3791” in the screenshot. Unfortunately, Inkscape doesn't provide a practical user interface for modifying this name, so, once you have more than a handful of gradients in a document, it can quickly become an unwieldy list which gives little indication of where each one is used in your image. Your new gradient will always take the same basic form: it has a start color which is set to a fully opaque version of your current fill color (or to black if there is no fill color set), and it has an end color which is the same as the start color – but with its alpha value set to zero. The result is a gradient running from an opaque color to a transparent color which runs from left to right for a linear gradient, and from the center outwards for a radial gradient:
Le premier élément est une liste déroulante des dégradés qui existent déjà dans votre document. Celui sélectionné actuellement, en haut de la liste, est le nouveau que vous êtes en train de créer. Si vous préférez utiliser un dégradé déjà existant, il suffit de le sélectionner dans la liste. Chaque dégradé reçoit un nom très peu convivial, comme le « linearGradient3791 » dans la capture d'écran. Malheureusement, Inkscape ne propose pas d'interface utilisateur pratique où vous pourriez modifier ce nom, ce qui fait que, une fois que vous avez placé plus d'une poignée de dégradés dans un document, la liste devient lourde sans donner beaucoup d'informations sur l'utilisation de chaque dégradé dans votre image.
Le nouveau dégradé aura toujours la même forme de base : une couleur de départ, réglée à la version entièrement opaque de la couleur de remplissage actuelle (ou noir, s'il n'y a pas de couleur de fond choisie), et une couleur de fin, qui est la même que celle du départ, mais dont la valeur alpha est mise à zéro. En résulte un dégradé allant d'une couleur opaque vers une couleur transparente, de gauche à droite pour un dégradé linéaire et du centre vers l'extérieur pour un dégradé radial :
If you double-click on your object – so that you enter editing mode and can see the small handles we've explored in previous articles – you'll also find that two or three new handles have appeared, joined by lines and indicating the start and end points of your gradients as square and circular handles respectively. You can drag these handles around – even outside the boundary of your object – in order to change the position and angle of your gradient. For radial gradients, the two end points can be moved independently, allowing you to have circular or elliptical gradients. When you click on one of the gradient handles, you'll notice that the Fill and Stroke dialog switches back to the Flat Color mode, with the selected color also reflected in the swatches in the bottom-left corner of the main Inskcape window. The color you can see is that of the selected end point of your gradient, and you can change it in any of the ways we've discussed previously. Try selecting the transparent end, clicking on another color swatch, and then playing with the opacity slider or the “O” spin-box. This approach lets you create gradients that change smoothly between any two colors.
Si vous double-cliquez sur votre objet afin de passer en mode édition où les petites poignées, dont nous avons discuté dans les articles précédents, s'affichent, vous y trouverez aussi deux ou trois nouvelles poignées, reliées par des lignes, qui indiquent le point de départ et celui de la fin de vos dégradés, comme, respectivement, une poignée carrée et une, circulaire. Vous pouvez les déplacer - même à l'extérieur des limites de votre objet - afin de modifier la position et l'angle du dégradé. En ce qui concerne les dégradés radiaux, le point à chaque bout peut être déplacé de façon indépendante, ce qui vous permet de faire des dégradés circulaires ou elliptiques.
Lorsque vous cliquez sur l'une des poignées du dégradé, vous remarquez que le dialogue Remplissage et contour bascule en mode fond et la couleur choisie apparaît également dans les à-plats de remplissage en bas à gauche de la fenêtre principale d'Inkscape. La couleur que vous voyez est celle du point de limite du dégradé sélectionné et vous pouvez le modifier par tous les moyens que nous avons vus précédemment. Essayez de sélectionner le point transparent du dégradé, puis cliquez sur un autre à-plat de remplissage et, enfin, jouez avec le curseur d'opacité ou le variateur « O ». Cette approche vous permet de créer des dégradés qui changent en douceur entre deux couleurs, n'importe lesquelles.
A gradient with two colors is all well and good, but what happens if you want three, four, or a whole rainbow? You could create multiple objects, each with a part of the overall gradient, but that quickly gets complex and unwieldy. In practice the answer is simpler than you might think – we just create more handles on our gradients. Instead of a start and end handle, we'll have one or more in the middle as well. These handles each define a particular color in the gradient, and are usually referred to as “stops”. To add a new stop to a gradient we need to make it clear to Inkscape that we want to edit the gradient rather than the object itself, by selecting the Gradient tool: from the toolbox (or by pressing “g” or CTRL-F1). Now it's possible to double-click on the line that joins your existing stops in order to add a new stop. It will default to the color and opacity at that point on the line, so the visual appearance of your object won't change – but now that the new stop exists, you can select it and change its color. You can also drag stops along the line, crowding them together for a sharp transition between colors, or spreading them out for something more gradual. Very quickly, it's easy to create garish multi-colored gradients, although more subtle color changes between stops will often give a better artistic effect.
Un dégradé de deux couleurs est bien beau, mais qu'est-ce qui se passe si vous en voulez trois, quatre ou tout un arc-en-ciel ? Vous pourriez créer de multiples objets, chacun contenant une partie du dégradé complet, mais cela deviendrait rapidement lourd et complexe. En réalité, la réponse est plus facile que vous pourriez penser : il suffit de créer plus de poignées sur les dégradés. Au lieu d'une poignée départ et une poignée fin, nous en aurons une ou plusieurs au milieu aussi. Toutes ces poignées définissent une couleur spécifique dans le dégradé et sont appelées le plus souvent, des « stops ».
Pour ajouter un nouveau stop à un dégradé, il faut bien préciser à Inkscape que nous voulons éditer le dégradé et non pas l'objet lui-même, en choisissant l'outil Dégradé :
dans la barre d'outils (ou en appuyant sur « g » ou sur CTRL-F1). Il est maintenant possible de double-cliquer sur la ligne qui relie les stops existants afin d'en ajouter un nouveau. Par défaut, il prendra la couleur et l'opacité à cet endroit de la ligne et, ainsi, l'apparence de votre objet ne changera pas - mais maintenant que le nouveau stop existe, vous pouvez le sélectionner et changer sa couleur. Vous pouvez également déplacer des stops le long de la ligne, les réunissant ensemble pour créer une transition franche entre les couleurs ou, au contraire, les éloignant l'un de l'autre pour quelque chose de plus progressif. Il est facile de créer des dégradés criards et multicolores très rapidement, bien que l'effet artistique soit souvent meilleur si les changements de couleur entre les stops sont plus subtils.
While the Gradient tool is active, you can still move the end stops to modify the size and angle of the gradient. When you're done, just select your object using the Select tool in order to return to the familiar view of the Fill and Stroke dialog with the gradient in place. A useful shortcut for this step is to just hit the space-bar. In most cases, this will toggle between the current tool and the Select tool, switching back and forth with each press. Let's go back to a simpler gradient with only two stops. The quick way to do that is to switch your fill to Flat Color, and then back to a gradient again, returning you to the default arrangement of a fade from opaque to transparent – centered on your object. The Fill and Stroke dialog should look like the first image in this article once more, giving us a chance to explore the remaining options on the screen.
Pendant que l'outil Dégradé est actif, vous pouvez toujours déplacer les points de fin pour modifier la taille et l'angle du dégradé. Quand vous avez fini, il suffit de sélectionner votre objet avec l'outil Sélectionner et vous reviendrez à la vue familière du dialogue Remplissage et contour avec le dégradé à sa place. Un raccourci utile pour cela est d'appuyer sur la barre espace. Dans la plupart des cas, cela basculera entre l'outil actuel et l'outil Sélectionner à chaque fois.
Retournons à un dégradé plus simple, avec seulement deux stops. La méthode rapide pour ce faire, c'est de régler votre remplissage en Fond, puis de basculer en dégradé. Le résultat en sera l'affichage par défaut d'un fondu d'opaque vers transparent, centré sur votre objet. À nouveau, le dialogue Remplissage et contour devrait s'afficher exactement comme dans la première image de cet article, ce qui nous offre l'occasion d'examiner les options restantes.
The Duplicate button is almost self explanatory. It duplicates whichever gradient is currently selected in the pop-up menu, and applies the duplicate to the currently selected object. That last point is important – it means that you can happily change the stop colors and positions in the duplicated gradient without affecting any objects that use the original version. As such, it can be a convenient starting point if you already have a gradient that's close to the one you need, but not quite perfect. The Edit… button we'll come back to shortly.
Le bouton Dupliquer est presque explicite. Il reproduit le dégradé sélectionné dans le menu déroulant et applique la copie à l'objet actuellement sélectionné. Cette dernière précision est importante, cela veut dire que vous pouvez y aller joyeusement : modifier la couleur et la position des stops dans la copie du dégradé sans que cela ait un impact sur les objets qui en utilisent la version originale. Comme cela, il peut être un point de départ commode si vous avez déjà un dégradé qui est proche de celui que vous voulez, mais pas tout à fait parfait.
Nous reviendrons au bouton Éditer… dans très peu de temps.
The Repeat pop-up is used to define what happens beyond the start and end stops of your gradient. The default setting is “none”, in which case the area before the start handle will take on the same color as the start handle itself, and the area beyond the end handle will likewise take on the color of the end stop. Both the other settings repeat the gradient: “reflected” causes the gradient to reverse for each repeat, giving a smooth transition that cycles as Start-End, End-Start, Start-End, End-Start…; “direct” uses the gradient as it stands, giving a more abrupt cycle of Start-End, Start-End, Start-End, Start-End… As is often the case, a picture demonstrating this makes far more sense than a textual description, so here are three pairs of gradients demonstrating “none,” “reflected” and “direct” modes using the gradients shown in the top pair: Now we'll return to that Edit… button. If you click it, you'll bring up a gradient editor window. This is an alternative interface for editing gradients: you can add and remove stops, change their position within the gradient, and alter their colors – exactly the same features that are available by editing using the Gradient tool on the canvas except that the editor won't help you to change the position and angle of your gradients within your objects. The gradient editor dialog has been officially deprecated though, and will likely be removed in a future release in favor of some additions to the on-canvas editing, so I won't go into any more detail about it.
Le variateur Répétition sert à définir ce qui se passe au-delà des stops de départ et de fin de votre dégradé. Par défaut, c'est réglé sur « aucune » ; dans ce cas la zone avant la poignée départ aura la même couleur que la poignée départ elle-même et, de la même façon, la zone au-delà de la poignée fin prendra la même couleur que celle du stop fin. Les deux autres réglages répètent le dégradé : « réflexion » fait que le dégradé s'inverse à chaque répétition, ce qui donne une transition fluide qui se répète ainsi - Départ-Fin, Fin-Départ, Départ-Fin, Fin-Départ… ; « directe » utilise le dégradé tel quel, ce qui crée un cycle beaucoup plus brutal - Départ-Fin, Départ-Fin, Départ-Fin, Départ-Fin… Comme souvent, une illustration rend ceci beaucoup plus compréhensible qu'une description textuelle. Voici donc trois paires de dégradés démontrant les modes « aucune », « réflexion » et « directe » se servant des dégradés de la première paire :
Nous allons maintenant revenir au bouton Éditer… Si vous cliquez dessus, une fenêtre Éditeur de dégradé s'affichera. Ceci est une interface alternative pour la modification des dégradés : vous pouvez ajouter et enlever des stops, changer leur position à l'intérieur du dégradé et modifier leur couleur - ce sont exactement les mêmes fonctionnalités disponibles en utilisant l'outil Dégradé sur le canevas sauf que l'éditeur ne vous aidera pas à changer la position et l'angle des dégradés à l'intérieur des objets. Cependant, le dialogue de l'éditeur de dégradé a été déclaré officiellement obsolète et il est probable qu'il disparaisse lors d'une version ultérieure, au profit de quelques fonctionnalités de modifications sur le canevas ; je n'en dirai donc pas plus.
Throughout this article I've talked about editing the fill. But you can also apply a gradient to your object's stroke. Here we have two thick-stroked rectangles, one with a linear gradient for the stroke, and the other with a radial gradient: Being able to use a gradient for the stroke can be a useful workaround for one of SVG's (and therefore Inkscape's) limitations: strokes are always a fixed width. This restriction makes it difficult to draw lines that taper out, but using a stroke that fades to transparent can often give a similar visual effect, especially with thin lines: There is one feature that crops up when using both fill and stroke gradients which can sometimes feel more like a bug: Inkscape likes to 'help' by snapping the handles of gradients together so that you can manipulate them as one. In this example, I've drawn a square with a yellow fill and blue stroke, then clicked the linear gradient buttons in the Fill and Stroke dialog. It looks like there's only one pair of gradient handles, but that's because one set is on top of the other.
Tout au long de cet article, j'ai parlé de la modification du remplissage. Mais il est possible d'appliquer un dégradé au contour de l'objet aussi. Voici deux rectangles au contour épais, l'un avec un dégradé linéaire, l'autre avec un dégradé radial :
La possibilité d'utiliser un dégradé sur le contour peut être un contournement utile pour l'une des limitations de SVG (et donc d'Inkscape) : l'épaisseur des contours est toujours défini. Cette restriction rend difficile le dessin de lignes qui s'amincissent, mais l'utilisation d'un contour qui s’atténue jusqu'à en devenir transparent peut souvent donner un effet visuel similaire, surtout avec des lignes minces :
Il y a une fonctionnalité qui survient lors de l'utilisation de dégradés de remplissage et de contour en même temps et qui, parfois, peut sembler être un bogue : Inkscape aime « aider » en assemblant les poignées pour qu'elles puissent être manipulées comme une seule. Dans cet exemple, j'ai dessiné un carré avec un remplissage jaune et un contour bleu pour ensuite cliquer sur le bouton Dégradé linéaire dans le dialogue Remplissage et contour. Vous avez l'impression qu'il n'y a qu'une seule paire de poignées de dégradé, mais c'est parce qu'un groupe de poignées se trouve l'un par dessus l'autre.
If you wish to modify just the fill or the stroke gradient, the obvious thing to do would be to grab the visible handles and move them out of the way to reveal the second pair below, right? If you try that, you'll find that Inkscape's propensity for snapping gradient handles together means that both sets of handles move as one. The solution to this conundrum is simply to hold the SHIFT button as you drag the handles around. This will let you separate them, and prevent them snapping back together if they get too close to one another. Now that you can create gradients, perhaps it's time to replace the simple blurred shading on your snowman with some radial gradients, to give him a little more depth. Don't forget linear gradients for his nose, arms, hat and pipe. As a finishing touch, a nicely shaded sky is usually more interesting than a flat plane.
Si vous souhaitez modifier juste le dégradé du remplissage ou le dégradé du contour, il paraît évident qu'il faille déplacer les poignées visibles pour que la paire du dessous devienne visible, non ? Si vous essayez de le faire, vous trouverez que la propension d'Inkscape d'assembler les poignées veut dire que les deux paires de poignées bougent comme s'il n'y en avait qu'une seule.
La solution à cette énigme est simple : il suffit d'appuyer sur la touche MAJ pendant que vous déplacez les poignées. Cela vous permettra de les séparer et les empêchera de s'assembler à nouveau si elles se trouvent trop près les unes des autres.
Maintenant que vous savez faire les dégradés, il est temps, peut-être, de remplacer les couleurs floutées simples de votre bonhomme de neige par des dégradés radiaux, pour lui donner un peu plus de profondeur. N'oubliez pas les dégradés linéaires pour son nez, ses bras, son chapeau et sa pipe. Comme touche finale, un ciel joliment dégradé est généralement plus intéressant qu'un plan plat.