- Creating Basic Fills
- Creating a Web Dither Fill
- Creating Gradient Fills
- Working with Patterns
- Using Textures
- Modifying Fill Edges
This chapter is from the book
This chapter is from the book
This chapter is from the book
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:
-
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).
-
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.
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.
-
Click the Fill Color Well in the Property Inspector. This displays the Gradient controls
.
Click the
Color Well in the Property Inspector to open the Gradient controls. -
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.)
Choose one
of the preseet gradient color combinations from the Preset Colors menu
in the Gradient controls. -
Click inside the Property Inspector or on the canvas area to close the Gradient controls.
){kind=small}
){kind=small}
){kind=small}
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:
-
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.
-
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.)
Click
the color stop in the Property Inspector to open the Gradient controls. -
To add a new color to the gradient, click in the empty area between the color stops. A new color stop appears
.
Click in the
color stop area to add a new color stop to the gradient. -
To change the position of a color, drag the Gradient color stop along the top ramp
.
Drag the color
stop to change the position of the color in the gradient. -
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.
-
To delete a Gradient color stop, drag it off the Gradient controls
.
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.
){kind=small}
){kind=small}
){kind=small}
){kind=small}
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){kind=small}
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:
-
Click one of the opacity stops in the Gradient controls. The Opacity controls appear
.
Click the
opacity stop to open the Opacity controls for a gradient. -
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.")
){kind=small}
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:
-
Select an object filled with a gradient.
-
Click the Pointer tool or the Paint Bucket tool in the Tools panel
.
The Vector controls appear in the object 
.
Select the
Gradient tool, the Paint Bucket tool, or the Pointer tool to work with the
Gradient Vector controls.
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.
-
Move the circle control to change the start point of the gradient
.
Move the Circle
Vector control to change the start point of a gradient. -
Drag the square control to change the end point of the gradient
.
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.
-
Drag the line of the control to change the rotation of the gradient
.
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.
){kind=small}
){kind=small}
){kind=small}
){kind=small}
){kind=small}