Adding Fills

---

The Fill area in the Property inspector (or Tools panel) works very much like the Stroke area. You select the type of fill you want, the color, the type of edge, and a texture if you want one. Figure 16-10 shows the Fill area of the Property inspector.

Figure 16-10: The fill area of the Property inspector

You can add fills in a several ways. You can choose to use any of these methods or a combination of methods:

• Fills are added automatically to a closed path.

• You can add fills via the Fill box in the Tools panel.

• You can add fills via the Fill box in the Property inspector.

• You can add a fill by using the Paint Bucket tool.

• You can add a gradient fill by using the Gradient tool (in the Paint Bucket tool fly-out).

Note 

Everything in the Property inspector is context sensitive. You need to have a vector object or a vector tool selected in order for the fill options to be visible. For a bitmap image, the Paint Bucket tool or a bitmap selection needs to be made to see the fill options.

To fill an object, text, or path, follow these simple steps:

1.  Habitat Alert site   Open a new document (File ® New) that is 800 × 500 with a white canvas.

2. Select the Rectangle tool and draw a rectangle that is 100 pixels high and 800 pixels wide.

   Tip 

   You can draw a rectangle any size, enter the desired height and width into the Property inspector, and press the Enter/Return key to activate the change.

3. Access the Fill Category Options menu (in the Property inspector or Tools panel) and select Solid.

4. Click the color box to change the color. The example uses #999933 from the custom swatches.

5. In the Edge area, click the drop-down arrow and make a selection. Anti-Alias, which helps smooth the edges, is the default. A Hard edge gives a sharp edge, but will be jagged on any curves; the Feather option can soften the edges a great deal depending on the amount of feather you use. When the Feather option is selected the Amount of Feather option becomes available.

6. If you want a texture, click the arrow to access the Textures pop-up menu, and choose a texture from the list. For this example, click Line-Horiz 4 and move the Amount of Texture slider to 25%.

7. Save your file. I saved a copy for you as well. To find all the Habitat Alert source files navigate to the habitat_alert_start folder on the CD-ROM.

Notice the Other option, which is discussed in the following section. If you select a texture, you have to increase the opacity so you can see the texture. When you increase the texture amount, a Transparent option becomes available. If you click Transparent to select it, the objects or image below (assuming there is something below your object) show through.

Note 

A word on transparency: This is not a true transparency; it will appear transparent only over the object you are using in Fireworks. In other words, you can't export the object alone and expect it to be transparent in the browser. At this time, only a PNG32 file will do this, but unfortunately all the browsers do not support this format.

None

Using no fill at all is an option. There are two different ways to use no fill. The Tools panel contains a white square with a red slash mark. The ToolTip calls it No Stroke or Fill. Click it to remove the fill from a selected object. You can also click the fill color box in the Tools panel or Property inspector and click the white box with a red slash, which appears near the top-right of the Color pop-up window. The ToolTip for this one calls it Transparent Button.

Solid

The fill category of Solid fills your object with a solid color. The default is a 100% fill, but you can alter the percentage in the Property inspector by changing the Opacity (to the left of the Blend Mode).

Web dithering

Web dithering expands your Web-safe color palette greatly. Dithering was originally used when only the GIF format was available, and photographs with millions of colors were being used for the Web and being viewed with monitors using 256 colors. The process of dithering involves taking two or more pixels of different colors and positioning them to produce a pattern. This pattern tricks the eye into seeing a different color. This technique works well with GIFs, but with photographs you lose a lot of detail when many colors blend. The best path to take is to use the JPEG format for photographs and the GIF format for vectors and images containing few colors.

This technique of combining two colors or more into a new one is called dithering, producing a hybrid-safe color. In Fireworks it is called Web Dither. Web Dither contains two Web-safe colors in an alternating 2 pixel × 2 pixel pattern producing a third color. With this technique, you have 46,656 Web-safe "designer" colors. Don't worry. Fireworks provides you with a simple-to-use interface. To use the Web Dithering feature follow these steps:

1. In the Property inspector, open the Fill Category menu and choose Web Dither. Click the color box to see the Web Dither menu shown in Figure 16-11.

   
   Figure 16-11: The Web Dither pop-up menu

2. For more options, click the color box from the Fill area in the Tools panel, and then click the Fill Options button. Figure 16-12 shows the Fill Options window. Notice that edge options are now available. These are already available in the Property inspector, so an extra click isn't needed to access the edge options.

   
   Figure 16-12: The Fill options pop-up that opens when the Fill Options button is clicked

3. The first color well on the top is the current fill color. Click the color well to choose a non-Web-safe color or type a Hexadecimal number, or select a color with the Eyedropper.

Note 

The color you see in the large color area is the color that will be applied to your object. Fireworks automatically selects the best Web-safe colors to mix to obtain the closest color to the one you choose. You can, however, click in either color box on the right and choose a different color.

You can see the two different colors side by side that Fireworks has chosen to pattern (the first two colors below the original color well), and then the reverse of these colors just below it. To see the Hexadecimal numbers, simply move your mouse over the color and the number will appear. Sometimes it's fickle, so simply move your mouse over again until you see the number. This is the pattern being used to produce the best match possible, which can be seen in the large color area. If the area you want to fill is selected, it automatically fills with the new color.

You don't have to use the color that Fireworks has chosen to blend with; you can choose your own colors to mix if you are feeling adventurous. Fireworks does a great job of automatically finding the best possible match to the color you want to be Web safe. If you move your mouse over the fill color from the Info palette, you see two different RGB settings — one for each Web-safe color used to achieve a new Web-safe color.

Using patterns and textures as a fill

You can use patterns and/or textures to fill with. Most images can be used as a pattern or a texture. As long as an image is a 32-bit image in a BMP, PNG, GIF, JPEG, TIFF, or PICT (for the Macintosh) file format, you can have an instant pattern. You are limited only to what you can hold on your hard drive or on CD-ROMs. You see later in this section how to utilize this almost limitless resource.

Filling with patterns

The use of a pattern in a path object increases the range of options you have as a designer, making flat, uninteresting objects come alive. Although many preset Patterns are available in Fireworks, the Other option in the Fill Options menu opens the door to limitless patterns. To use a pattern follow these steps:

1. Select the object you want to fill.

2. In the Property inspector, from the Fill Category, choose Pattern.

3. Click in the Fill color box, and access the Pattern Name list.

4. Choose any pattern you want. If you want to use a pattern from an image on your hard drive or CD-ROM, scroll to the bottom of the list and select, Other.

5. If you choose Other, browse to an image file, select it, and click Open.

Note 

If you want a pattern to be permanently added to the Pattern Name drop-down list, simply place the image file in the Fireworks MX\Configurations \Patterns folder. The path name may vary depending on the OS you are using, so look around for the Patterns folder.

Editing patterns

After you apply a pattern (or gradient), you can move, rotate, skew, and change the width of a pattern. When an object that has a pattern (or gradient) fill is selected you see handles. As you pass your cursor over a handle, you see the rotation icon (Figure 16-13). You can click and drag to rotate. Or you can click the circle in the center and drag to a new location. By clicking and dragging on the solid point, you can adjust the handles.

Figure 16-13: A pattern-filled object, which is selected revealing the adjustment bars

Adding textures

Textures can be added to any fill, modifying the brightness of the fill but not the hue. You can use any PNG, GIF, JPEG, BMP, TIF, or PICT file as a texture. When an image is used as a texture fill, its grayscale value is used. To add texture, follow these steps:

1. Select any object containing any fill, gradient, or pattern.

2. In the Property inspector, click the down arrow for the Texture Name to access the Texture Name list. Choose one of the included texture files or click Other to select a file of your own. The texture shows in the Texture list only for this document, it's not a permanent addition.

   Note 

   If you want a texture to be permanently added to the Texture Name list, simply place the image file in the Fireworks MX\Settings\Textures folder.

3. Adjust the percentage of opacity, which determines the amount of the texture that is applied.

   Cross-Reference 

   In Chapter 15 refer to Edit Preferences — save an additional texture file, and tell Fireworks where to find it.

Using gradient fills

A gradient is a blend of two or more colors. Gradients are often used to produce lighting effects, to give the illusion of depth, and to provide an interesting blend of colors. They are also used as terrific backgrounds and as a fill for transparency masks when working with bitmaps (see Chapter 19). In this section, you learn how to use gradient fills and how to edit them to suit your needs.

Tip 

Gradients are best used in images that you plan to export as JPEG files. Many colors are needed to make a nice smooth transition of colors. Gradients often appear banded (noticeable lines) in a GIF image.

Fireworks MX ships with 11 types of gradients and 13 preset gradient color patterns. But, the number of alterations and variations is almost endless. The best way to describe the 11 types of gradients is to show you a small sample of each. Figure 16-14 shows a representation of each. From left to right, they are Linear, Radial, Ellipse, Rectangle, Cone, Starburst, Bars, Ripples, Waves, Satin, and Folds.

Figure 16-14: A representation of the gradient options

After you choose the type of gradient you want, you can change the preset colors, add additional colors, and even add transparency. Click in the Fill color box to access the Edit Gradient dialog box (Figure 16-15).

Figure 16-15: Edit Gradient window

To fill using a preset gradient follow these steps:

1. Select an object you want to apply a gradient to.

2. From the Fill category in the Property inspector, choose one of the gradient options.

3. Choose the color combination you like from the Preset gradient color sets, or use the gradient that is the default.

Note 

The default gradient fill color is a combination of the current color of your stroke and the color of the Fill tool.

If your object is selected, it is automatically filled with the gradient. Test each of the presets and all the different gradient types to get an idea of how each one looks and performs.

Tip 

If you are using a gradient fill in a GIF image, you may see banding. To help minimize this effect, add a small blur to the fill.

Altering gradients

This is where the real power of the Gradient tool becomes evident. Adjusting the pattern's center, width, and skew can customize gradients. To alter a gradient's position, follow these steps:

1. Follow the preceding steps for filling with a gradient. To alter the gradient's position, click the object to make it active; the gradient handles appear.

2. To change the position of the gradient, drag the circular handle to adjust the gradient's starting point.

3. Move the cursor over the control handles until you see the rotate cursor. You can now drag the handles to a new location

Tip 

It is sometimes difficult to adjust a gradient, which is small. For instance, if you want a vertical gradient, the gradient handles need to be perfectly straight. Holding the Shift key doesn't help. What does do the trick is to adjust the handles larger than needed, then shorten them. Another way to fill vertically is to use the Gradient tool from the Tools panel, and click and drag while pressing the Shift key, to apply the fill.

Editing gradient colors

Existing colors in a gradient preset can be changed, deleted, moved around, or new colors can be added with ease by following these steps:

1. Draw a rectangle and fill it with a gradient style you prefer.

2. Click the Fill color box to access the Gradient Edit window.

   Note 

   If you access the gradient fill by clicking the Fill color box in the Tools panel, you need to click the Edit button to access the Gradient Edit window.

3. To change any of the colors, click the color swatch and choose another color.

4. To add another color, place your cursor anywhere below the color ramp where you want another color added. A plus (+) sign appears next to your cursor; click and choose a new color.

5. To move the position of any of the colors, click and drag the color swatch to the new location.

6. To delete a color, click and drag the swatch toward the bottom of the panel.

You have plenty of control when it comes to gradient colors. You can sample colors from other images with the Eyedropper tool — just as you can when selecting solid fills — to produce some interesting color combinations. You make a custom gradient using the colors you find in an image.

Adding Transparency

New Feature 

The ability to add transparency to your gradients is new to Fireworks MX.

To add transparency to a gradient, follow these steps:

1. Fill an object with a gradient of any color and style.

2. Click the Fill color box in the Property inspector.

3. Click one of the transparency swatches (Figure 16-15) and move the slider to the opacity you want. You can adjust both the swatches as well as add additional ones in the same way you added color swatches.

Saving gradient colors

After you have meticulously produced a new gradient, you may want to use it again later. Unfortunately, your custom gradient is good for only your current document.

You can save the gradient type and colors as a style. Any repositioning you may have done won't be saved. To save as a style, follow these steps:

1. Open the Styles panel (Assets Panel group or Windows ® Styles).

2. From the Styles option menu, choose New Style. The New Style dialog box opens; name the gradient, choose which properties to save as a style, and click OK. Your new gradient style is added to the bottom of your Styles panel.

Note 

If you save properties such as text, anytime this style is applied it changes the font, font size, or text style depending on which options you choose. If you want only the effects to be applied to any other object or text, leave the text options unchecked.

---