Inkscape - master gradients

From LXF Wiki

(Original version written by Dmitry Kirsanov for LXF issue 74.)

Original article (PDF) Click Here (http://www.linuxformat.co.uk/wikipdfs/LXF74.tut_ink.pdf)

Table of contents

Inkscape: Master gradients

Part 1. Doing graphics in a good vector editor is not only practical; it’s also a lot of fun. Dmitry Kirsanov shows you some advanced Inkscape techniques.


Everyone seems to be talking about Inkscape these days. Not only has it risen quickly to the position of the vector graphics editor for Linux, it is also getting noticed on Windows and Macs too. And why wouldn’t it, being the only completely free vector editor of its level on any platform? The growth of SVG (Inkscape’s native format and a W3C standard), in particular its support in the forthcoming Firefox 1.5, is a factor as well.

Inkscape is still quite young and developing very fast. In less than two years of existence, Inkscape has had seven major releases, each one delivering an abundance of new features and usability improvements. The latest release to date, 0.42, is no exception; in fact, it’s the biggest Inkscape release so far, with hundreds of major and minor improvements of all kinds.

Many novices who start using Inkscape face a double challenge. Not only is the program itself new, but the concept on which it operates – vector graphics – is also unfamiliar to many people whose graphics experience is limited to bitmap graphics (most often in programs such as Gimp or Photoshop).

Luckily, learning to work (and eventually think) in vector graphics is usually easy and natural. The basic idea is that (just like in the real world) everything is composed of objects, and you can select these objects to transform them or change their properties. In fact, editing vector images requires less black magic than editing bitmaps, because objects remember what they are and are willing to tell you what you can do to them.

The basics of Inkscape are covered in the interactive SVG tutorials that come with Inkscape itself (in the Help > Tutorials menu). I especially recommend the Basic tutorial as the first step for newcomers; when done with it, you will know the basic terms and will be able to create simple but useful graphics. There were also a number of Inkscape overviews and tutorials in magazines and on the Web, but most of them only cover the bare essentials of the program.

This series of Inkscape tutorials will demonstrate some of the more powerful and less documented features recently introduced into the software. This tutorial explains one of the most important new features in 0.42: the Gradient tool.

Gradients are essential. They are the easiest way to jazz up that lifeless flat look that vector objects have by default. Master designers can create amazingly photorealistic art using nothing but carefully laid-out gradients. We’ll cover the basic techniques of gradient creation and editing; then on page 88 we’ll look at how they can be used to create professional-quality images.

Part 1 - Getting to know the gradient tool

Drag to create a gradient

Image:LXF74 - Inkscape - fig 1.png

A gradient is a smooth transition between two or more colours. In SVG, ‘colour’ also includes alpha (transparency); this means that you can, for example, make a gradient from opaque red to transparent red (this is what the Gradient tool creates by default). Just select (or draw) an object, switch to the Gradient tool and drag across the object. Here, we’ve applied a gradient to a solid yellow object, creating a transition from opaque to transparent.

Drag gradient handles

Image:LXF74_-_Inkscape_-_fig_2.png

As you can see, the gradient is visualised by two square ‘handles’ connected by a line. The line between them is the direction of the gradient; by moving the handles around, you can freely change the direction, position, and length of the colour transition. Here, both handles have been moved so that the gradient is vertical and spans the entire object. The gradient repaints itself as you drag a handle – very convenient!

Colour the handles

Image:LXF74_-_Inkscape_-_fig_3.png

You can assign any colour and/or level of transparency to the selected end of gradient, in the same way you would change the style of an object. The Fill And Stroke dialog, the Swatches, or the Dropper tool all work as you’d expect. When a handle is selected (blue), clicking with the Dropper tool will blend that end of the gradient into the clicked area. To deselect the handle, press Esc once; another Esc will deselect the object.

Create an elliptical gradient

Image:LXF74_-_Inkscape_-_fig_4.png

You can create elliptical gradients with the toggle button in the Controls bar (above the canvas). Ensure the button is pressed, and drag again with the same object selected. This time an elliptical gradient for the selected object will be created. If the selected object already had some gradient, the new one will use the old gradient’s colours; otherwise, the default opaque-to- transparent gradient will be created from the object’s colour.

Edit an elliptical gradient

Image:LXF74_-_Inkscape_-_fig_5.png

All three handles of an elliptical gradient – the centre and the two perpendicular radii – can be dragged freely in any direction. This makes it possible to move, stretch, squeeze, or rotate a radial gradient. By the way, if you happen to need a symmetric linear gradient with a bell-curve profile, the easiest way to do this is via an elliptic gradient with one radius much longer than the other, as demonstrated by the bottom rectangle.

Tweak elliptical gradient focus

Image:LXF74_-_Inkscape_-_fig_6.png

A radial gradient also has a fourth, normally hidden, handle: the focus. This is the point where the gradient’s central colour is at its purest and thickest; normally it is merged together with the central handle and moves with it, but you can separate them by dragging away from the central handle with Shift. The focus handle is shown as an “X”. To merge it back, just drag it close enough to the central handle and it will snap into position.

Draw gradient on the stroke

Image:LXF74_-_Inkscape_-_fig_7.png

Apart from the fill (interior) of an object, gradient can also be applied to an object’s stroke (outline). Here, the rectangle has an elliptical yellow-to-transparent gradient on its fill and a linear black-to-transparent gradient on its stroke. Both gradients’s handles are displayed simultaneously; a visible difference between them is that the stroke gradients use greenish connecting lines between the handles, while fill gradients use blue lines.

Merge and separate handles

Image:LXF74_-_Inkscape_-_fig_8.png

The handles of any selected objects can be merged together. Dragging a merged handle will affect several gradients at once. For example, you can merge the centres of two objects’ elliptical gradients (A), merge an elliptical handle with another object’s linear handle (B), or merge the fill and stroke handles of the same object (D). When you drag to create a new gradient with several objects selected, you get what looks and acts like a single gradient applied to multiple objects, but is in fact many gradients, with the handles of all gradients merged together (as in C in this illustration).

Snap handles

Image:LXF74_-_Inkscape_-_fig_9.png

To make editing easier, all gradient handles ‘snap’ to the edges of the object’s bounding box, its central axes, and their continuations (shown by blue dotted lines in this illustration). This makes it easy to place a gradient handle exactly where you want it. Another useful shortcut is dragging handles with Ctrl to snap the gradient angle (that is, limit it to horizontal, vertical, and 15 degree increments in between).

Go beyond the handles

Image:LXF74_-_Inkscape_-_fig_10.png

Outside of the gradient’s colour transition, the object’s fill or stroke is by default painted by the flat colour of the corresponding gradient end. This is changeable, however. With that object (but not any handle) selected, go to the Fill And Stroke dialog and in the Repeat list (A) select either Reflected (C) or Direct (D) instead of the default None (B). With this, you can easily create various striped patterns on objects.

Choose a gradient definition

Image:LXF74_-_Inkscape_-_fig_11.png

The set of colour/transparency values that a gradient uses is called its definition. Any gradient you create or edit adds its definition to the list of all gradient definitions in the document, and you can easily give any gradient a different definition. Just select it from the drop-down list in the Controls bar; it will be assigned to the gradient(s) of the selected object or objects. There’s no way to save and reuse gradient definitions across documents yet, but this is planned for a future release.

Inkscape doesn't provide a way to change the name of a gradient through the user interface, but you can use the built-in XML editor if you know what you're doing!

Create multi-stop gradient

Image:LXF74_-_Inkscape_-_fig_12.png

The Edit button next to the gradient definitions list opens the Gradient Editor window (another way to open it is to double- click on any gradient handle). This window is currently the only way to create multi-stop gradients – gradients with more than two colours. Click the Add Stop button to create a new stop in the middle of a gradient, then adjust the position of the new stop by dragging the Offset slider and set colour/transparency for it. Here, a semitransparent yellow stop was inserted in the middle of an opaque red-to-blue gradient.

Part 2 - Putting gradient techniques into practice

The layered water drop

Image:LXF74_-_Inkscape_-_fig_13.png

Designers often overlay several objects with semi-transparent gradients. This image is actually a group of five objects with various elliptical gradients. Use Alt+click or Alt+Ctrl+click to examine what layers make up a composite image like this; watch the status bar for the description of the currently selected object, and leave the Fill And Stroke dialog open to see its style.

Feathering edges with gradients

Image:LXF74_-_Inkscape_-_fig_14.png

If you want to fade out or ‘feather’ the edge of an object, you don’t have to apply a colour-to-transparent gradient to it. An overlay object in the same colour as the background with an opaque-to-transparent gradient is often much easier to create and maintain. In this example, four gradient overlays on the edges of a bitmap feather it out on a white background.


Note: There is a simple way how to feather object's (eg. image) edges - via Set Mask, but it is not a "gradient way" :-)

Shading by ellipses

Sometimes you don’t even need to edit gradients to get the result you need. Here, to get from A to C, the Gradient tool was only used twice: to create opaque-to-transparent elliptical gradients on two ellipses, one white and one black (B). Then, a total of 29 clones (linked copies) of these shader ellipses, variously scaled and rotated, were used to add depth and expressiveness to the cartoon face.

Glass half-full!

For a final example, consider how this intricate semi-transparent glass was done (it’s a public domain image from www.openclipart.org, a highly recommended resource for designers). It consists of 12 objects with various linear and radial gradients. Note that some handles are merged, the bottom shadow objects use eccentric foci (A), and the rim of the glass is made with a gradient on stroke (B).