Customizing a gradient generator

Gradients are fun and easy to use. Some gradients in Motion can be applied to different types of objects. We can apply gradients to shapes, text, particles, and a variety of different objects to create cool looks. We can create other gradients from scratch. To do this, we need to generate the gradient.

How to do it...

  1. Launch Motion. Set the Preset to Broadcast HD 720p, Frame Rate to NTSC-DV, 29.97, and Duration to 10 seconds. Press OK.
  2. Click on the Library tab. Go to the Generators category. There are several generators for you to choose from. Choose Gradient and click Apply. Go to the Window menu and choose Show HUD, if it's not already showing. Use the following screenshot for reference:
  3. A great place to start customizing your gradient is by looking at the various presets that ship with Motion. Next to the word Gradient is an icon. Click it to reveal the gradient presets and select any random one. I choose Dusk as shown here:
  4. Set Type to Radial. Press the I icon to go to the Generators tab of the Inspector. You can see that we have more options for our gradient here than in the HUD.
  5. Click the disclosure triangle to the left of the word Gradient. Let's change the position of the radial gradient and then adjust its color setting.
  6. Scrub the Start Y Value and drag it to -360. Set the Y End value to -1120.
  7. In the gradient icon at the top, there are two parts to the line. The upper-most part contains the opacity tags for the gradient. The fact that they are both white means it's fully opaque. The bottom part contains the color stops for the gradient. Currently, this radial gradient consists of four colors. We're going to delete one of them. Click on the color tag on the left, drag it down, and release your mouse. You should see a puff of smoke quickly appear. Use the following screenshot for reference:
  8. Drag the light purple color tag over a little to the left. We're going to change its color. Click on that color stop and notice how it loads in the Color window below. Use the following screenshot for reference. Ctrl + click the stop to the right of the word Color and adjust as desired.

There's more...

Here are a few quick tips on working with and adjusting your gradient.

Adding color and opacity stops

To add tags to the gradient, simply click the color or opacity line. Wherever you click on the line, a color stop will be added at that position. Click the upper white line to add opacity tags and click the lower colored line to add color tags.

We can also reverse a gradient's direction.

Reversing gradient colors

We can easily reverse the colors on a gradient by clicking on the appropriate button to the right of the tags, as shown in the following image:

See also

  • The The power of blend modes recipe.
  • The Applying a blend mode to a gradient recipe.