Gradients

A gradient is a color transition between two or more colors and opacities rendered along a geometric form. Gradients can be used as object fills, outlines or transparency masks. Gradient colors are also used in some of the color and image effects as parameters. Gradients are used in artwork to create various shade effects, color transitions, and other styling schemes.

In VectorStyler, a gradient consists of three set of attributes, that can be adjusted and styled independently:

• The gradient color defines a set of two or more colors and opacities, and a transition function between these colors. A detailed description of the gradient color attributes can be found in the Gradient Color Selector section. The gradient color does not specify the shape of the gradient.
• The gradient shapes defines the geometric form of the gradient. There are 5 basic gradient shapes in VectorStyler, each with additional parameters used to create variations of the shape. A detailed description of gradient shapes and their attributes can be found in the Gradient Shapes section.
• The gradient uses a gradient color and a shape with additional attributes (like angle and scaling) to define a gradient style that can fill a shape.

Editing Gradients

A typical way to select a gradient is to use the Gradient panel. The gradient panel can be opened from the Panels menu. The gradient panel allows the selection of a gradient from the existing gradient styles and presets, and the selection of the gradient color and shape from existing styles and presets. The panel also contains the gradient angle and scaling values.

To edit the gradient fill of an object interactively, use the Gradient tool from the application toolbox. The gradient tool allows the interactive adjustment of the gradient angle for linear, concentric, conical and spiral gradient shapes, and the scaling amount for concentric gradient shapes. The color stops can be interactively adjusted and new color stops created. The colors at the gradient color stops can be set using the color or palette panel.

Gradient presets and styles listed in the Presets and Styles panels can be edited using the gradient selector view, by double clicking the gradient. Gradient presets and styles can be used to easily store, manage and select frequently used gradients.

Gradient Shapes

In VectorStyler, the linear, concentric and conical gradient shapes can use arbitrary open or closed paths and shapes to define the geometric form of the gradient. The noise gradient shape uses procedural noise to generate the gradient transition values at pixel locations.

A new gradient shape can be created by selecting an object with the shape and selecting one of the gradient shape preset or style creation commands from the gradient panel menu. A gradient shape preset or style will show up in the gradient shapes list of the panel and view used to edit gradients. Defining gradient shape styles allows the easy replacement of gradient shapes in all used instances by overriding the style with a new shape.

To create a new gradient shape, use the following steps:

• Select the object whose shape will be used to create the gradient shape.
• To create a linear gradient shape the object must have an open shape. In this case, select the Create Linear Shape Preset command to create a preset, or the Create Linear Shape Style command to create a style from the gradient panel menu.
• To create a concentric gradient shape the object must have an closed shape. In this case, select the Create Concentric Shape Preset command to create a preset, or the Create Concentric Shape Style command to create a style from the gradient panel menu.
• To create a conical gradient shape the object must have an open shape. In this case, select the Create Conical Shape Preset command to create a preset, or the Create Conical Shape Style command to create a style from the gradient panel menu.

When creating a gradient shape preset or style, a modal view is shown to set the preset or style name and other attributes specific to the gradient shape. After the selections made in the view are confirmed, the new gradient shape is added to the shape lists of the gradient panel and view.

The shape of a gradient can be interactively edited using the Gradient Shape tool. When the gradient shape tool is active, the selected linear, concentric or conical gradient shape will be visible and can be edited in a similar way as a path or shape is edited using the Node tool.

The object referencing and object role mechanism of VectorStyler can also be used to define gradient shapes, by pointing a gradient shape to an object shape. When the referenced object shape is changed (using the typical shape editing tools), all gradients using the shape style are automatically updated.

To use object references as gradient shapes, follow these steps:

• Draw an object with an open (for linear and conical gradients) or closed (for concentric gradients) shape.
• Select the Object Options command from the Object menu.
• Set the name of the object in the Name field, and select a gradient shape role from the menu opened using the Role button.
• Depending on the gradient type, the selected shape role can be Linear Gradient Shape, Concentric Gradient Shape or Conical Gradient Shape.
• Set the selected object options by pressing Ok.
• The new gradient shape using the object name is available in gradient shape lists of the gradient panel and view.
• Select the gradient shape on other objects.
• Editing the shape of the referenced object will automatically update all gradient shapes using the style referencing the object.

Using gradient shape roles to define new gradient shapes enables the easy and direct editing of these shapes using the Node tool or the Shape panel.

Gradient Styles

Using styles to set gradients enables a more structured workflow when creating a document with multiple gradients and multiple instances of similar gradients.

In VectorStyler, the color, the shape or the whole gradient can be saved and reused as a style. These styles can be applied on objects as fill, outline or transparency styles from the gradient panel or from the Styles panel.

When gradient styles are used to set the same gradient on multiple objects, a single editing or updating of the gradient styles is automatically reflected on all instances of that style. Styles can be defined by explicitly setting up a gradient style, or by referencing a named object as a gradient style.

To work with gradient styles, use the following steps:

• To create a reusable gradient color style, select the Save Gradient Color Style command from the Gradient panel menu. Set the name of the style and confirm. A new gradient color is shown in the Styles panel and in the gradient color lists.
• To apply a gradient color style, select the style using the gradient color drop box in the Gradient panel, or use the Styles panel to select the style.
• To create a reusable gradient shape style, select the Save Gradient Shape Style command from the Gradient panel menu. Set the name of the style and confirm. A new gradient shape is shown in the Styles panel and in the gradient shape lists.
• To apply a gradient shape style, select the style using the gradient shapes drop box in the Gradient panel, or use the Styles panel to select the gradient shape.
• To create a reusable gradient style, select the Save Gradient Style command from the Gradient panel menu. Set the name of the style and confirm. A new gradient is shown in the Styles panel and in the gradient list opened using the gradient preview button of the gradient panel.
• To apply a gradient style, select the style using the gradient drop box in the Gradient panel (upper-left corner), or use the Styles panel to select the style.

Gradient styles can also be defined as references to the gradient fill of a named object. These styles can reference the whole gradient, or only the color or the shape of the gradient filling the object. Defining object references as gradient styles, enables the interactive and easy modification of the style, by editing the gradient of the referred object. To use object references as gradient styles, follow these steps:

• Setup an object with a gradient fill. The shape or color of the gradient, or the whole gradient will be defined as a style.
• Select the Object Options command from the Object menu to set the object name in the Name field and role using the Role button.
• To use the object as a gradient style, select the Gradient Style as the object role.
• To use the object as a gradient color style, select the Gradient Color as the object role.
• To use the object as a gradient shape style, select the Gradient Shape as the object role.
• Confirm the object options by pressing Ok.
• A new gradient style is shown in the Styles panel, or in the corresponding style lists of the Gradient panel or view.
• Select the gradient style on other objects.
• IMPORTANT: do not select the same style on the original object, as it will result in an empty fill.
• If the referenced object gradient is edited (using the Gradient panel or tool), all instances of this style are updated automatically.

Working with Gradients

The sections of this chapter describe various aspects of working with gradients.

• Gradient Panel - Contains a description on how to use the Gradient panel (from the Panels menu) to assign gradient fill, outline or transparency styles to selected objects.
• Gradient Color Selector - Describes the detailed attributes of gradient colors, and how to edit gradient colors using the modal gradient selector view. Gradient colors are edited in the gradient selector view, when a preset or style is edited, or when a gradient color attribute of a color or image effect is edited.
• Gradient Selector - Describes the modal gradient selector view used to edit the attributes of a gradient style or preset. This view can be accessed from the gradient panel, or by double clicking a gradient in the presets or styles lists.
• Gradient Tool - Describes how to use the interactive Gradient tool to edit gradient fills of objects.
• Gradient Shapes - Describes how to edit the shape of gradients and how to create new gradient shapes. Gradient shapes determine the geometric form of a gradient. In VectorStyler, new gradient shapes can be defined using open (linear and conical) or closed (concentric) shapes and paths from objects on the canvas.