Gradient Editor

Home • Gallery • Tutorials • Download • Purchase • Site Map
 

Gradient Editor Overview

The Fractal Science Kit fractal generator Gradient Editor allows you to edit a Gradient. A gradient is a continuous set of colors mapped into the range 0 to 1. Gradients are used by the Color Controllers to map the sample data to colors for display. Visually, a gradient is presented as a short wide rectangle filled with colors that vary as you move from left to right within the rectangle. The colors remain fixed as you move up and down. The horizontal position, as you move from the left edge to the right edge within the rectangle, is mapped into the range 0 to 1. You define a gradient by specifying a small set of control points. Each control point is positioned within the gradient and is assigned a color. The colors assigned to the area of the gradient between any 2 control points are computed by interpolating (in RGB space) between the points.

Fractal Science Kit - Gradient Editor

The Gradient Editor is divided into 2 panes: the RGB rectangles and the Control Point Properties. The RGB rectangles pane is subdivided into 3 rectangles that represent (from top to bottom) the Red, Green, and Blue components of the control point colors. The background of each rectangle displays the gradient. On top of the gradient, the control points are shown as a series of small boxes connected by an interpolation curve (a dashed curve connecting the control points). The color of the box is red, green, or blue, based on which rectangle it is in. The vertical position of each point within a given rectangle represents the contribution of the associated color component to the control point color as a ratio of the height of the point to the height of the rectangle. For example, the vertical position of a point in the top rectangle represents the amount of red in the associated color. Points near the bottom of the rectangle have a small red contribution while points near the top have a large red contribution. You can also determine the red, green, and blue contributions in the area between control points by examining the interpolation curves at any position in the gradient.

If you click on a control point, the Gradient Editor selects it and makes it the current point. The box for a selected point is colored white. You can add points to the selection by clicking on a new point while holding down the Control Key (Ctrl). For example, you could click on the 1st point to select it and then Ctrl-click on the 2nd point to add it to the selection. Ctrl-clicking a point selects it if it is not selected, or unselects it if it is. This is called toggling the selection of the point. You can also select multiple points at one time by pressing the left mouse button when the mouse pointer is located on one of the RGB rectangles and dragging the mouse while holding down the mouse button. As you move the mouse, a rectangle is drawn from the point where you started to the current mouse position. When you release the mouse button, all the control points inside the rectangle are selected. This is called sweep selection. Finally, if you hold down the Control Key (Ctrl) while you perform the sweep selection action, you toggle the selection of the control points inside the rectangle.

When you add a point to the selection, the newly selected point is also made the current point. There is, at most, a single current point. If the selection is empty, there is no current point. However, if the selection contains 1 or more points, exactly 1 of them is designated the current point. The current point is displayed with 2 dotted lines running vertically out of the top and bottom of the control point box. If you click the left mouse button on a selected point, it becomes the current point.

If you press the left mouse button down while over a selected control point and then move the mouse while holding down the button, all of the selected control points will move along with the mouse pointer relative to their initial position. You can release the mouse button when the points are in the desired location. By default the control point position is locked and changes via the mouse will affect only the color components. Several items on the Gradient menu control this behavior. Change Position can be selected to lock the control point color and change only the position. Select Change Both to adjust both the color and position of the points. Select Change Color/Opacity to restore the default behavior.

You can also modify the control point color using the Color Selection Dialog. Simply double-click a control point to display the dialog, change the color, and click Ok. If multiple points are selected, all the points are reset to the new color.

To add control points you must select Add Points on the Gradient menu. By default, when you click on the rectangle, your action affects the selection as described above. Once you select Add Points however, clicking anywhere on the rectangle adds a new control point at that location instead. When you are done adding points you can restore the default behavior by selecting Select/Adjust Points on the Gradient menu.

A 4th rectangle can be added to the top pane that displays the color's Alpha channel, also called the color's opacity. The Opacity rectangle is identical in operation to the RGB rectangles except that it has an independent set of control points, and these control the opacity of the gradient in the same way the red channel of the color is controlled by the top rectangle in the RGB rectangles. Points close to the top of the rectangle have high opacity while points close to the bottom of the rectangle have low opacity. To visualize opacity, the Gradient Editor displays a checkerboard pattern that is invisible in those locations with full opacity and that becomes increasingly apparent as the opacity is reduced.

When the Opacity rectangle is displayed, either the RGB rectangles or the Opacity rectangle has focus. A box is present around the rectangle with focus. Click a rectangle to move the focus. The Gradient Editor commands operate on the rectangle with focus. In the remaining discussion, I will concentrate on control points in the RGB rectangles and how they are affected by each command. However, be aware that most of the descriptions apply equally well to the Opacity rectangle.

Fractal Science Kit - Gradient Editor Rotation Slider

Just below the top pane is the rotation slider. This can be used to rotate the gradient. That is, as you move the slider to the right, the gradient is shifted to the right and the portion of the gradient that falls off the right edge is copied into the gradient on the left. Moving the slider to the left is handled in a similar fashion. The rotation slider lets you align the gradient's colors with respect to the sample data to achieve the best result.

Fractal Science Kit - Gradient Editor Control Point Properties

The bottom pane of the Gradient Editor is called Control Point Properties. The square box on the left of the pane displays the color of the current point. Click the box to display the Color Selection Dialog to reset the color of all the selected points. The Rotation field displays a numerical representation of the rotation currently in effect as a number in the range of -200 to 200. The Position field displays the horizontal position of the current point as an integer between 0 and 399. The Opacity field displays the opacity for the current point as an integer between 0 and 255. The Red, Green, and Blue fields display the RGB values for the current point. These fields are integers between 0 and 255. The Hue, Saturation, and Lightness fields display the HSL values for the current point. Hue is an integer between 0 and 359. Saturation and Lightness are integers between 0 and 100.

You can modify these fields as required. All of these fields, with the exception of Rotation, are tied to the current point. When multiple points are selected, these fields show the value of the (single) point designated the current point. However, changes to these fields are applied to all selected points relative to their current value. For example, assume that 2 points are selected that have Hue values of 60 and 120, respectively. Also, assume that the point with Hue of 60 is the current point so the Hue field will display 60. If you increase the Hue field to 65, this will change the Hue values for the selected points to 65 and 125, respectively.

To generate a gradient based on the colors in an image found on your computer, execute Generate From Image... item on the File menu, to display the Generate Gradient From Image Dialog. Select the "..." button next to the Image property to open the Select Image dialog and navigate to an image file on your computer on which to base the new gradient, and click Open. On the Generate Gradient From Image Dialog, you can adjust the properties to control the gradient generation. Then select Apply until you like the gradient displayed in the Gradient Preview, and click Ok to return to the Gradient Editor.

The menu items provide complete access to all of the commands. Most of the commands have a toolbar button as well. The following description is aimed at the menu items but applies equally well to the toolbar buttons which are not described separately. Hold the mouse over the toolbar button to see the associated menu item text.

File Menu

Fractal Science Kit - Gradient Editor File Menu

The File menu has the following commands:

  • New... displays the New Gradient Dialog to generate a set of control points for the gradient. If this command is executed when the Opacity rectangle has focus, only the Red component of the points is used to define the opacity.

  • Adjust... displays the Adjust Gradient Dialog to adjust parameters for the current gradient. The Adjust... command is enabled only if the gradient was initially created via New... and if no changes have been made to the control point colors or position. If this command is executed when the Opacity rectangle has focus, only the Red component of the points is used to define the opacity.

  • Generate From Image... displays Generate Gradient From Image Dialog to generate a gradient using the colors found in an existing image on your computer.

  • Save is used to save the changes to the gradient and close the Gradient Editor.

  • Save As... is used to save the working gradient under a different name and close the Gradient Editor.

  • Close closes the Gradient Editor.

Edit Menu

Fractal Science Kit - Gradient Editor Edit Menu

The Edit menu has the following commands:

  • Copy copies the current point's color to the clipboard. The Copy command is disabled if the selection is empty or contains more than 1 point.

  • Paste pastes the color on the clipboard into the selected control points.

  • Delete deletes the selected control points.

  • Edit Color displays the Color Selection Dialog to change the color for all of the selected control points.

  • Sample Color changes the cursor to the eyedropper and allows you to click on any color visible on the screen and that color replaces the color for all of the selected control points.

  • Select All selects all the control points.

  • Invert Selection selects all unselected control points and unselects all selected control points.

  • Reverse Points reflects all control points about the center position of the gradient.

  • Convert to Grayscale replaces all control point colors with their grayscale equivalent.

  • Reload Gradient reloads the gradient prior to any changes you may have made.

View Menu

Fractal Science Kit - Gradient Editor View Menu

The View menu has the following commands:

  • Opacity is used to view or hide the Opacity rectangle. A check mark appears next to the menu item if the Opacity rectangle is visible.

Smoothing Menu

Fractal Science Kit - Gradient Editor Smoothing Menu

The colors assigned to the area of the gradient between any 2 control points are computed by interpolating (in RGB space) between the points. Smoothing controls the method of interpolation. If Smoothing is off, linear interpolation is used; i.e., a line is formed between adjacent control points and the point on the line at a given horizontal position defines the color. If Smoothing is on, a set of Bezier curves are constructed through the control points and these curves are used to define the color at a given position.

The Smoothing menu has the following commands:

  • None is used to turn off smoothing.

  • 1 (low) to 5 (high) are used to set the degree of smoothing. A check mark appears next to the current setting. Smoothing works best when you have a small number of control points.

Gradient Menu

Fractal Science Kit - Gradient Editor Gradient Menu

The Gradient menu has the following commands:

  • Select Previous Point selects the point just before the current point. If the 1st point is the current point, the last point is selected.

  • Select Next Point selects the point just after the current point. If the last point is the current point, the 1st point is selected.

  • Select/Adjust Points is used to select/adjust existing points. If this item is checked, clicking on the gradient alters the set of selected points. Select/Adjust Points and Add Points are exclusive settings; only 1 can be checked at any time.

  • Add Points is used to add additional points. If this item is checked, clicking on the gradient adds a new point at the place where you clicked. Select/Adjust Points and Add Points are exclusive settings; only 1 can be checked at any time.

  • Change Color/Opacity is used to change the color or opacity of existing points. If this item is checked, you can click and drag a point up/down to change its color (or opacity if the point is on the Opacity rectangle). The position of the points is locked when this item is checked. Change Color/Opacity, Change Position, and Change Both are exclusive settings; only 1 can be checked at any time.

  • Change Position is used to change the position of existing points. If this item is checked, you can click and drag a point left/right to change its position. The color/opacity of the points is locked when this item is checked. Change Color/Opacity, Change Position, and Change Both are exclusive settings; only 1 can be checked at any time.

  • Change Both is used to change the color/opacity and/or position of existing points. If this item is checked, you can click and drag a point up/down to change its color/opacity and/or left/right to change its position. Change Color/Opacity, Change Position, and Change Both are exclusive settings; only 1 can be checked at any time.

  • Cyclic is used to create a cyclic gradient; i.e., a gradient that smoothly interpolates between the last point and the 1st point. This is the default behavior. If this item is unchecked, the part of the gradient to the left of the 1st point has the same color as the 1st point, and the part of the gradient to the right of the last point has the same color as the last point. For example, ramp gradients look best when you uncheck Cyclic.

Help Menu

Fractal Science Kit - Gradient Editor Nelp Menu

The Help menu has the following commands:

  • Open Documentation... opens the documentation in your browser to this page.

 

Copyright © 2004-2019 Ross Hilbert
All rights reserved