Skip to main content

Gradient Editing

Gradients are one way to give something a visual flair that's a bit more than a simple solid color. In this tutorial, we're going to explore how to create and edit both a linear and a radial gradient.

To begin with, I've drawn a simple rectangle, which I've selected, and selected the Fill property in the Property Inspector.

First, select the Gradient fill in the Brush Editor. This is the box just to the right of the solid color brush. When you do this, your rectangle immediately takes the default linear gradient, which is a simple black to white.

The default gradient only has two gradient 'stops'. One all the way on the left, and one on the right. You can add additional stops by clicking anywhere in the gradient editor band. You can also delete gradient stops by clicking and dragging them downward (off the gradient editor).

At all times, one of the gradient stops will be drawn with a black outline. This indicates the currently selected stop, and you can change its color in the color editor just like you did with a solid color brush. To switch which stop is currently selected, you simply click on it.

Selecting the Brush Transform tool will allow you to modify the vector that the gradient is mapped along. Select the brush transform tool (it's right above the Pen), and look at how the rectangle looks now. If you don't see the vector, it's because you don't have the rectangle selected. Click it to select it.

You can drag the tail or head of the vector to change the start and end points of the gradient, and you can drag the center of the vector to move it around. Just click and drag whichever adorner you want to move. If you move the mouse near either end of the gradient vector, you can also get a rotation adorner that will let you rotate without changing the size.

The default behavior for a gradient is to pad the remainder of the space with the gradient stops at either end of the vector. This is why everything 'behind' the gradient is black, and everything 'ahead' of it is white. You can change this behavior in the Options menu in the Brush Editor. If you change the gradient to Reflect, the gradient will repeat, but flipped, so in my case it will go from black to white and back to black.

Alternatively, you can set the gradient to repeat, so that when it hits the end of the gradient, it makes an immediate jump back to the first gradient stop. This is shown here:

The Linear Gradient maps its color along a linear vector. But, you can switch to a radial gradient by clicking the radial gradient button, just to the left of the Options button.

In a linear gradient, the only transformations you can really do, is change the location of the tail and head of the vector. With a radial gradient, you can skew, rotate, change the focal point and several other options. Experiment with the brush transform tool, and take a look at all the things you can do.

You can also change the gradient to repeat or reflect its gradient, just as you did with the linear gradient, but the result is a bit more dramatic with a radial gradient.

Finally, after all the modifications to your gradient, you can always reset the position of the vector by double clicking either the head or the tail of the gradient. This works for either the radial or the linear gradient.