Fills and Strokes

The power in Fireworks MX® comes from the program's ability to combine many effects in one object. The heart of this power is the Fill panel, and we will take a close look at this easy to use feature.

The fill and stroke functions in Fireworks MX® are so easy to use, that even if you have just started with Fireworks MX® today, you will be able to follow all the texture and style instructions.

Stroke/Fill Colors

The currently selected Stroke color, or color of any line segment you create, is displayed in the Stroke Color box. By default, the Stroke Color is black.

The currently selected Fill color is displayed in the Fill color box. By default, the Fill color is white. {Click} the Default Colors icon to restore or return the Stroke and Fill colors to default black and white and the No Color button to prevent color application. To switch the Stroke and Fill colors {Click} the Switch Arrow.

Stroke Color

Fill Color

Default Colors, No Color, and Switch Icon

Fill an object
You can control the fill and stroke color of an object in the Toolbox with the drop-down selectors as shown at the right. In this sample, the stroke color is black and the fill color is green.

However, if you wish to adjust the width and appearance of the stroke or the appearance of the fill, you must move to the Stroke or Fill panel. The Fill panel is shown at the left of the canvas. Note that the color well is showing the color as displayed in the Toolbox.

When you draw an object, it will be filled and stroked with the current fill and stroke as shown in the Toolbox. To change the fill, make sure the object is selected with the Pointer tool, and click on the color well in the Toolbox, or in the Fill panel. Select a new color and the object will change to the new color.

As an alternative, you can select the Paint Bucket tool and click on the object. The object will be filled with the current fill.

That is all there is adding a solid fill in Fireworks MX®. You cannot add texture or a pattern from the Toolbox.

Editing a stroke
Stroke can be very handy when planning special effects in Fireworks MX®. Not only can you add an outline to contain the potentially complicated patterns you will use, but you have another texture option. In addition to the preset selection of strokes, you can adjust the width and add texture to any stroke style.

1. Make sure your object is selected.
   
2. In the STROKE COLOR BOX select the STROKE OPTIONS button. As shown to the right.
   
   
   
   
   
   
   
   
3. Then select ADVANCED from the new menu.
   
4. Select the desired stroke style and assign a stroke color. Change the width of the stroke, if desired, by selecting a new tip size. Choose a texture from the drop-down list. Increase the Amount of Texture to apply the effect.

Fireworks MX® Gradients
Gradient fills are are set up in two stages, which provides a great deal of flexibility.

1. Select the object you wish to fill with the pointer tool.
   
2. In the PROPERTIES MANAGER at the bottom of the Fireworks MX® window, select the FILL TYPE drop down window.
   
3. Select LINEAR from the drop down.
   
4. The object you select immediately changes to the 2 colors selected in your stroke and fill windows in the TOOLBOX. These may not be the color you want so you may need to edit the colors.
   
   
   
   
   
   
   
   
   
   
   
   
   

To Edit Gradient Colors

1. Select the object you wish to fill with the pointer tool.
   
2. In the PROPERTIES MANAGER at the bottom of the Fireworks MX® window, select the FILL TYPE drop down window.
   
3. Select FILL OTPIONS from the menu.
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
4. Then select EDIT from the resulting menu.
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
5. Click on any of the points to pull up a color palette so you can change the color.
   
6. Click and drag the any of the points to distribute the gradient differently.
   
   
   
   
   
   
   
   
   
   
7. To add another color, click your mouse where you would like a new marker to appear. The marker is assigned the color in the gradient at that spot. Click on the new marker to choose a different color.
   

When you create a great custom gradient fill, you may want to be able to use it again. Select New Style from the Style panel. Give the style a name then choose OK. from the pop-up window. The new name will now appear in the Style panel selection list.

If you would like to use your new gradient in another document, select the vector object that you would like to apply the attributes. Open the Styles panel. the new style will appear in the Styles panel. Select the new style and all of the saved attributes will instantly be applied to your new object.

If you are designing a site that uses a variety of graduated fills repetitively, try setting up a separate document for your fills. Follow the instructions above to place each new fill into the fills document. Whenever you are working on the graphics for your site, your fills will all be ready to use.

Patterns
With your object selected. Go to the PROPERTIES MANAGER at the bottom of the Fireworks MX® window you will find the Fill window. Specify the pattern you wish to use.