Ceci est une ancienne révision du document !
Last time, we looked at the updated color pickers in the Fill & Stroke dialog, including the more widely available color wheel, and the new HSLuv color picker.
To be honest, I still struggle to understand how to pick a specific target color in the HSLuv picker, but it’s apparently intended to make it easier to choose colors that have an optically similar saturation. You may find that one practical use for this mode is to perform your ‘normal’ color selection using the palette or the other pickers, but then switch to this mode if you need to create additional colors that share a similar ‘strength’. For example, this might be helpful if you’re trying to stick to pastel colors in your design, without having to work around all the more vibrant ones in the other color pickers.
As I mentioned last time, switching between the new color pickers is done using a pop-up menu. This keeps the UI looking neat and tidy, but does mean a bit more mouse work, either in clicks or drags, to switch back and forth between the choices. If you do need to change between different pickers quite frequently, then you might find it more convenient to return to a UI that presents all the options at once. In that case, open the Inkscape Preferences (Edit > Preferences) and select the ‘Interface’ entry at the left (select it, don’t just expand it). Part-way down, you’ll find the ‘Use compact color selector mode switch’ option.
Un-check that option and the color picker pop-up will be replaced by a group of radio buttons instead. It’s not the nested-tabs interface of old, but it’s a bit closer to the previous design, and requires fewer mouse interactions.
So far, I’ve shown these color pickers in the ‘Flat Color’ mode of the Fill tab, but this whole section is a common component that is used elsewhere in the application, whether it’s the ‘Swatch’ section of the Fill tab, or the ‘Replace Color’ tool in the Extensions > Color menu. And, in all cases, the preference to use radio buttons is honoured, so you won’t find yourself dealing with inconsistencies in that part of the UI across the application.
One place that makes use of the color pickers is in the Gradient Editor. Recent Inkscape converts might only be familiar with the on-canvas editing of gradients, but veteran users will remember the days of a simple gradient editor accessed via the Fill & Stroke dialog. For a long time, it was possible to re-enable that with a preference, but there’s no longer a need for that as a brand-new gradient editor is now available by default.
The old editor was sparse and could best be described as ‘functional’. But it was still extremely useful at times. When dealing with very small objects or complex scenes, it’s often easier to edit a gradient via a separate UI, rather than on the canvas. The re-addition of a dedicated editor, as well as the on-canvas tools, now offers the best of both worlds. And the new editor is a lot more functional than the old one, too.
As has long been the case, linear and radial gradients are separate buttons at the top of the Fill or Stroke Paint tabs of the dialog. You can also find Mesh Gradients here, but they have nothing to do with the gradient editor, and still have to be modified entirely on-canvas. Having selected either Linear or Radial gradient mode, you’re presented with a compact UI that squeezes a lot of options into a small space.
At the top-left is one of the most important parts of this interface, but it’s one that is easy to gloss over. This pop-up houses the gradient list that used to occupy this entire tab in previous releases!
You may wonder why I think this is so important: this is the key to avoiding gradient proliferation. Particularly in very complex drawings, it’s possible to end up with a large number of gradients, many of which are either identical, or similar enough, that they could be replaced with a single entry. In that case, you may wish to consolidate some of those gradients into one, ensuring that all the objects update when you change the gradient, and potentially resulting in a smaller file size too. Conversely, you might want to ensure that each gradient is used only once, so that edits for one object don’t affect any others. This pop-up shows you all the gradients that currently exist in the document, together with a count of the number of objects they’re applied to. With an object selected on the canvas, pick a gradient from this list to have it applied, replacing any existing gradient it might have had (you should also see the count – in the ‘#’ column – increase when you do this). The pop-up is also a good way to see if you still have any gradients in the document that aren’t being used (the count column shows 0), and which can therefore be removed by using File > Clean Up Document, before saving. Note that these will also be auto-removed if the ‘Auto-delete unused gradients’ setting is enabled in Edit > Preferences, within the Tools > Gradient pane, so check that if you find that unused gradients are being purged when you don’t want them to be.
At the bottom of this pop-up are plus and minus buttons. The former will duplicate the currently selected gradient and apply it to the currently selected object(s). This is useful if you need a gradient that is similar to an existing one, but want a separate copy that can be edited without affecting other objects. The minus button deletes the currently selected gradient if it is ‘unused’. The use of this word in the tooltip is perhaps a little misleading: it will delete a gradient if it is actively used on the currently selected object, but no others – i.e. if there’s a ‘1’ in the count column (so, not really ‘unused’ then). The button becomes disabled if the column holds ‘2’ or more, preventing really serious disasters that might affect many objects. What it doesn’t do is clear out any non-selected gradients, whether they have a ‘1’ or even a ‘0’ in the count column. You either have to select-then-remove each of those separately, or use the File > Clean Up Document option to delete the ‘0’ entries en masse.
One feature which is still missing from this part of the UI, and which I would love to see added, is an option to select all the objects that use a particular gradient. It’s all well and good knowing that I’ve still got one object left on the page using a gradient, but it would be better still if the application could show me which object it is!
Moving on from this pop-up, on the same row of controls, you’ll next find a small button. In my screenshot, it’s shown as a double-headed arrow, but it may differ depending on what icon set you use. This button reverses the entire gradient, flipping the order of all the stops. Note that using this button will automatically create a copy of your gradient (assuming the ‘Prevent sharing of gradient definitions’ preference is enabled in the Tools > Gradient pane of the prefs), so any other objects sharing the original won’t be adversely affected. I don’t really know why this button doesn’t deserve to have a label when all the other controls on this row do, but it means that it doesn’t stand out quite as much as it should.
Finally, on this row is another pop-up – complete with label. This one says ‘Repeat’, and the pop-up lets you choose whether the gradient should not repeat (‘None’), should repeat as a direct copy of itself (‘Direct’), or should alternate its repeats between direct and reversed copies (‘Reflected’). This has a visible effect only on objects where the gradient end stops are placed inside the element, and determines what happens to the parts of the object beyond the stops. In the case of ‘None’, the end stop colors are simply continued, so you won’t end up with a big gap beyond the handles of the gradient, whereas the other two options repeat the gradient stops. In no case does the gradient simply stop where the end points are placed, so you won’t end up with an object that has unfilled corners (unless your gradient is designed that way).
In this example, I’ve used the same red-white gradient in both linear and radial modes. The end stops have been moved to be well within the outlines of the squares, and you can see how the three options deal with coloring the areas beyond those stops.
Below that first row of controls in the dialog, we get to a wide colored track that previews the gradient itself, with handles below it indicating the stop positions and colors. Note that you’ll still see a linear representation of the gradient here, even if you’re actually editing a radial gradient. That’s not usually a problem in practice, but you may find it easier to still make some changes to the individual stops on the canvas where you can at least see the gradient used in context.
Each of the gradient stop handles can be moved – even the end ones – by dragging them along this track. They can’t pass each other, though, so if you’ve got three stops set to red, green, blue, then no amount of sliding will change the order if you actually wanted green, blue, red. Instead, you’ll have to set each stop color separately by selecting the handles one-by-one, and using the color picker section below. When a stop is selected, a small circle is displayed in the handle.
New stops can be added by double-clicking in the track, or removed by selecting them and pressing the Backspace or Delete key on your keyboard. The editor doesn’t allow for single-stop gradients, however, so you won’t be able to delete the first or last stops if there are only two stops in the gradient. If dragging the handles to position the stops is too coarse for your requirements, it’s also possible to adjust the selected stop’s position numerically using the Stop Offset control below the gradient track. The number in this box runs from 0.00 at the left of the track, to 1.00 at the right. Even this approach prohibits you from swapping stops around, though, so don’t think you can sneak that green stop into first place just by nudging the red one up a bit, then setting green to zero.
The individual stops are also displayed as a vertical list at the left of the display. It’s possible to hide this list using the ‘Stops’ control just above, though I can’t see any particularly good reason why you would want to. The selection in this list is kept in sync with the selected handle on the preview track, and vice versa, so you can just select the stops using whichever is most convenient at the time.
This list also provides plus and minus buttons at the bottom. The latter is pretty self-explanatory: it deletes the currently selected stop, unless there are only two remaining. The plus button is slightly more complex: when a stop is selected, clicking this button will create a new stop placed exactly halfway between the selected stop and the next one. The only exception is if the last stop is selected, then the new stop is added halfway between the penultimate stop and the last one. When a stop is added (even if via a double-click on the track), Inkscape sets its color to the existing value of the gradient at that point. This ensures that the gradient remains undisturbed by default, until you start to shift the stop around, or change its color.
The last part of the gradient editor is the large color picker to the right of the stop list, used for setting the stop’s color. As this reflects the same style and operation as the new color picker for flat fills, I’m sure you can work out how to operate it without any further help from me. Just note that SVG gradients can include translucent or transparent stops. If you actually want opaque colors, then make sure to set the Alpha channel accordingly – I’ve been caught out more than once when I’ve found that the ‘white’ in my gradient was actually just the page color showing through, causing problems with my PNG exports.
As a frequent user of gradients, I’m extremely pleased to see the return of a dedicated editor – and very happy with the way it’s turned out. I would like to see the addition of a context menu to the color stops, however – providing a convenient way to select common colors (e.g. black, white, most recently used), or to set one stop to the same color as another without having to resort to copy-pasting the hex code. For that matter, being able to drag and drop palette entries onto stops would be a nice addition, too. But those are just items for the wish list, and aren’t meant to undermine the great work that the developers have already put into this feature.
As great as the color pickers and gradient editor are, there’s yet more that has been added to the Fill & Stroke dialog! So far we’ve looked at the controls that are common to both the fill and the stroke, but the Stroke Style tab carries a few things that are specific to strokes alone. But, again, the word count catches up with me, so the additions and changes in that tab will be the subject of next month’s instalment…