Gradient editor controls

Most attributes that can be filled with a color can also be filled with a gradient. Like color controls, gradient controls are a group of compound settings that can be expanded for more precise control. You can use these expanded controls to add keyframes and create animated gradient effects.

To customize or modify a gradient, click the disclosure triangle in the Gradient row of the Inspector to reveal the advanced gradient controls:

• Gradient preset pop-up menu: An unlabeled pop-up menu at the top of the gradient controls used to apply preset gradients or to save custom gradients.

• Graphical controls: Three horizontal bars that let you set and preview the opacity, color, and spread of a gradient.

  The narrow, white top bar (the opacity bar) controls opacity and transparency in the gradient. Adjust the spread of opacity across the gradient by dragging one of the small box-shaped opacity tags horizontally along the bar. Click in the opacity bar to add opacity tags, creating a gradient with varying levels of transparency. Delete an opacity tag by dragging it away from the color bar. Change the value of an opacity tag by selecting it and dragging the Opacity slider (described below).

  Opacity tags have a value range of 0% (completely transparent) to 100% (completely opaque). Adjust the transition between two opacity tags by dragging the middle control—a small triangle between adjacent tags, available when Interpolation is set to Continuous (described below). By default, the opacity of a gradient applied to text is 100%.

  The wide middle bar shows a preview of the current gradient.

  The narrow bottom bar (the gradient bar) controls color in the gradient. Adjust the spread of color across the gradient by dragging one of the small box-shaped color tags horizontally along the bar. Click in the gradient bar to add more color tags. Delete a color tag by dragging it away from the gradient bar. Change the value of a color tag by selecting it and choosing a color from the color well below, or by double-clicking the tag and choosing a color from the Colors window. Adjust the transition between color tags by dragging the middle control—a small triangle between adjacent tags, available when Interpolation is set to Continuous (described below).

  Selecting a color tag activates the Color and Location controls (described below). Selecting an opacity tag activates the Opacity slider (described below). Selecting a middle control activates the Middle slider (described below).

• Color: A color well and eyedropper that sets the hue of a selected color tag in the gradient bar. For more information about color wells, see Basic color controls.

• Opacity: A slider that sets the transparency of a selected opacity tag in the opacity bar. Values range from 0% (completely transparent) to 100% (completely opaque).

• Interpolation: A pop-up menu that sets the interpolation of a selected color tag or opacity tag. There are three options:

  • Linear: Creates a uniform distribution of opacity or color between the tags.

  • Continuous: Sets an adjustable rate of change between adjacent opacity or color tags. Adjust the rate of change by dragging a middle control in the opacity bar or gradient bar, or by dragging the Middle slider (described below).

  • Constant: Creates a constant color distribution from the color or opacity tag, moving from left to right in the gradient. For example, if the left color tag is set to Constant, the area of the gradient between that tag and the next one to the right is a single, solid color.

    

• Middle: A slider that duplicates the function of the middle controls in the opacity bar and gradient bar, adjusting the transition point between opacity tags or color tags. When you select a middle control, the Middle slider becomes available.

• Location: A slider that adjusts the location of a selected opacity tag or color tag.

• Type: A pop-up menu that lets you choose a linear or radial gradient.

• Start: Value sliders that set the start position of the gradient in the selected object. This parameter affects the gradient as a whole—colors and opacity. Clicking the disclosure triangle stacks the X and Y value sliders vertically instead of horizontally.

  • X: Controls the X start position of the gradient.

  • Y: Controls the Y start position of the gradient.

    

• End: Value sliders that set the end position of the gradient in the selected object. This parameter affects the gradient as a whole—colors and opacity. Clicking the disclosure triangle stacks the X and Y value sliders vertically instead of horizontally.

  • X: Controls the X end position of the gradient.

  • Y: Controls the Y end position of the gradient.

  Note: The Start and End parameters do not appear in text gradients.

• Angle: When the Type pop-up menu is set to Linear, this dial specifies the direction of a linear gradient. This parameter only appears for text gradients.