Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Fireworks

  • Print
  • + Share This
  • 💬 Discuss

Creating Gradient Fills

In addition to solid colors, Fireworks lets you fill objects with gradients, which gradually blend one color into another. There are two parts to applying a gradient fill: choosing the type of gradient and setting the colors.

To apply a gradient fill:

  1. Choose one of the vector drawing tools or select a vector object. The Property Inspector displays the Fill options.

    or

    Choose the Gradient tool in the Tools panel (see page 114).

  2. Choose one of the types of gradient fills from the Fill category menu . If you have chosen the Gradient tool, the Fill category menu displays only the gradient fill choices.

    Figure 12 Choose one of the preset gradient color combinations from the Preset Colors menu in the Gradient controls.

    TIP

    Each type of gradient changes how the colors of the gradients are manipulated. For instance, Linear creates a gradient that changes the colors along a line.

  3. Click the Fill Color Well in the Property Inspector. This displays the Gradient controls .

    Figure 13 Click the Color Well in the Property Inspector to open the Gradient controls.

  4. Choose one of the preset color combinations from the Preset Colors menu . (See the exercise on the next page for how to set your own color combinations.)

    Figure 14 Choose one of the preseet gradient color combinations from the Preset Colors menu in the Gradient controls.

  5. Click inside the Property Inspector or on the canvas area to close the Gradient controls.

The preset color combinations are just the starting point for working with gradients. Most likely, you will want to create your own color combinations.

To edit the colors in a gradient fill:

  1. With a gradient selected in the Fill options menu (see the previous exercise), click the Fill Color Well in the Property Inspector. This displays the Gradient controls.

  2. Click one of the gradient color stops in the Gradient controls. A Swatches panel appears where you can choose a color . (See page 108 for a description of choosing colors in the Swatches panel.)

    Figure 15 Click the color stop in the Property Inspector to open the Gradient controls.

  3. To add a new color to the gradient, click in the empty area between the color stops. A new color stop appears .

    Figure 16 Click in the color stop area to add a new color stop to the gradient.

  4. To change the position of a color, drag the Gradient color stop along the top ramp .

    Figure 17 Drag the color stop to change the position of the color in the gradient.

  5. To duplicate a color stop, hold the Opt/Alt key as you drag the stop to a new position.

    TIP

    As you modify the colors, the Preview area at the bottom of the Gradient controls shows the effect of changing the colors.

  6. To delete a Gradient color stop, drag it off the Gradient controls .

    Figure 18 Drag the color stop off the Gradient controls to delete the color from the gradient.

    TIP

    You must have at least two color stops in the Gradient colors.

In addition to setting the color stops for a gradient, you can also set the opacity stops. This allows you to create an area of the gradient that fades to transparent.

TIP

The transparency in a gradient is not readily apparent unless you put the artwork that contains the gradient over another piece of art

Figure 19 An example of how the opacity settings in the Gradient controls affect the appearance of the gradient in the circle. As the color changes from gray to black, the transparent rings let you see through the circle to the stripes underneath.

To add colors to a gradient:

  1. Click one of the opacity stops in the Gradient controls. The Opacity controls appear.

    Figure 20 Click the opacity stop to open the Opacity controls for a gradient.

  2. Drag the Opacity slider or type a number in the Opacity field to change the transparency of that area of the gradient.

    TIP

    Use any of the techniques described in the previous exercise to add new opacity stops, move the opacity stops, duplicate the opacity stops, or delete the opacity stops.

    Once you have created a gradient, you will probably want to save it to use in other objects. In earlier versions of Fireworks, you could save the gradient as its own preset. Starting with Fireworks MX, you need to create a style. (For more information on working with styles, see Chapter 13, "Automation Features.")

Warning: Gradients Use Tons of Colors

Watch out when you apply gradients to your Fireworks documents. Even though you use only two or three colors in the Gradient Color controls, the gradient itself requires many colors to display properly.

A gradient that blends black into white may require as many as 256 colors to look smooth on screen. Add another Gradient Color control and you may find it difficult to optimize the file using the 256 colors in a GIF image.

In addition to controlling the colors in a gradient, you can also change the appearance of a gradient by changing its direction, length, and center.

To change the appearance of a gradient:

  1. Select an object filled with a gradient.

  2. Click the Pointer tool or the Paint Bucket tool in the Tools panel . The Vector controls appear in the object .

    Figure 21 Select the Gradient tool, the Paint Bucket tool, or the Pointer tool to work with the Gradient Vector controls.

    Figure 22 The Gradient Vector controls at their default setting within the object.

    TIP

    If you don't see the Gradient Vector controls when you choose the Pointer tool, check Show Fill Handles in the Pointer Tool Options under the Editing Preferences.

    Some gradients provide two control handles to control two separate axes of the gradient.

  3. Move the circle control to change the start point of the gradient .

    Figure 23 Move the Circle Vector control to change the start point of a gradient.

  4. Drag the square control to change the end point of the gradient .

    Figure 24 Drag the Square Vector control to change the end point of the gradient. A short gradient repeats to fill the object.

    TIP

    If a control has two handles, hold the Shift key as you drag a square control to move the other one at the same time.

  5. Drag the line of the control to change the rotation of the gradient .

    Figure 25 Drag the angle of the Vector controls to rotate the gradient.

    TIP

    Double-click the circle control to reset the Vector controls to the default setting.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus