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

Home > Articles > Web Design & Development

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Applying and Editing Strokes

Now that you have the details on how to work with fills, it's time to learn the ins and outs of strokes.

Fireworks enables you to set the stroke, or the outline, of your vector objects to an incredible assortment of looks and feels. Stroke settings, which reside in the Property Inspector, can be applied to open paths, such as those created with Pencil, Brush, and Line tools. They can also be applied to closed paths, including basic shapes (shapes created with the Pen tool), and to text objects.

You can adjust the size, color, and texture of strokes. You can fine-tune and control strokes of your vector objects in a variety of ways. You can simulate natural media, including brushes, crayons, chalk, pencils, oil paints, air brush, and things that you never conceived of, such as 3-D glow, toxic waste, and fluid splatter.

Fireworks allows for pressure-sensitive input by using a pressure-sensitive drawing tablet that gives you a natural pressure-sensitive look and feel; plus, it lets you simulate a tablet using your mouse.

Eleven stroke categories exist in Fireworks, each with its own set of presets. There are a total of 48 various strokes in all.

Controlling Strokes

The best way to learn about the stroke options is to examine them and try them out:

  1. Open the Stroke panel if it is not already showing.

  2. Open the stroke_fun.png file from the Exercises/05 folder on the accompanying CD-ROM (see Figure 5.35).

  3. Figure 5.35Figure 5.35 You can play with the strokes I made in the stroke_fun.png file.

    Notice that the file has six strokes of the same basic configuration with different attributes applied to them.

  4. Using the Pointer tool from the Tools panel, click each of the strokes one at a time to see their settings reflected in the Stroke panel (see Figure 5.36).

  5. With a stroke selected, you can alter the path's attributes by using the Stroke panel. Just make sure that the stroke you want to modify is selected.

    Figure 5.36Figure 5.36 The Stroke panel controls in the Property Inspector. These attributes reflect the Fluid Spatter stroke that I applied.

  6. You can change the stroke category and the stroke name by using the Stroke list and Category list pop-up menus in the Stroke panel.

  7. You can use the Color box on the Stroke panel to change the stroke's color.

  8. You can change the softness of the stroke tip by sliding the Edge Softness slider. Sliding the slider up increases the stroke softness, while sliding the slider down makes the stroke appear harder.

  9. You can apply texture to a stroke by choosing a texture from the Texture Name pop-up menu and increasing the texture value.

After you create a stroke that you like, you can save it for future use.

Saving Strokes

Strokes can be saved as styles in much the same way as fills:

  1. Select the object that contains the stroke you want to save.

  2. From the Styles panel Options pop-up menu, select New Style.

  3. The New Style dialog box appears, which allows you to name your style and select options for properties, including effect, stroke type, and stroke color.

  4. Give your stroke style a name and click OK.

  5. Your style now appears in the Styles panel for any document that you create in Fireworks.

Understanding Pressure Sensitivity

Personally, I was excited when I realized that you can create pressure-sensitive effects in Fireworks to simulate the look and feel of creating with natural media (see Figure 5.37):

Figure 5.37Figure 5.37 My stroke style, Wild Cherry, with pressure sensitivity applied using a Wacom Tablet.

  1. If you have never worked with pressure sensitivity, open the wild_cherry.png file from the Exercises/05 folder on the accompanying CD-ROM.

  2. Select one of the objects on the page and view the Property Inspector.

  3. By examining each of the strokes, you can get an idea of what you can do with pressure sensitivity. I created this stroke using a Wacom Tablet, which responds to both speed of motion and pressure applied.

  4. To save this stroke style to your preset, select one of the paths and follow the previous list's instructions to save it to your presets.

Using Pressure Sensitivity

I find that pressure-sensitive stroke types work best when trying to simulate pressure effects with either the mouse or a tablet:

  1. Select the Brush tool from the Tools panel.

  2. Use the Property Inspector to set the Stroke category to Airbrush, or Calligraphy, Quill (see Figure 5.38).

  3. Figure 5.38Figure 5.38 The Stroke Category pop-up menu with Calligraphy, Quill selected.

  4. Click and drag to create the stroke. If you are using a mouse, pausing while dragging creates a thickening of the stroke simulating pressure. If you are using a tablet, experiment with pressure and speed as you drag.

Refining and Tweaking Your Stroke

After the initial stroke is set, you can continue to modify it. Here's how:

  1. Click Stroke Options to further enhance and customize your stroke (see Figure 5.39).

  2. Figure 5.39Figure 5.39 The Stroke Category pop-up menu with Stroke Options selected.

  3. Make the adjustments that you desire by altering the settings for Category, Edge Softness, Tip, Texture, Location on Path, and Fill over Stroke.

  4. If you want, you can make even more precise modifications by clicking the Advance button and launching the Edit Stroke controls (see Figure 5.40).

  5. Figure 5.40Figure 5.40 The Edit Stroke Options, Shape, and Sensitivity menus.

    This panel contains tabs for Options, Shape, and Sensitivity.

The Path Scrubber Tool

I have just one more thing to mention about working with strokes: the Path Scrubber tool.

The Path Scrubber tool, which is found in the Tools panel, helps to further manipulate the pressure-sensitive effects of strokes. It has two variations—the Path Scrubber Additive tool and the Path Scrubber Subtractive tool (see Figure 5.41). The Additive tool increases the thickness, or pressure, of the stroke, and the Subtractive tool decreases the thickness of a stroke, which minimizes the pressure's appearance:

  1. With the path still selected, select the Path Scrubber Additive tool.

  2. Click and drag it along the path to increase the pressure effect on the path.

  3. Switch to the Path Scrubber Subtractive tool and drag it along the path to decrease the pressure effect along the path.

Figure 5.41Figure 5.41 The Path Scrubber Additive and Subtractive Tools.

You can use the Alt key (for Windows) or the Option key (for a Macintosh) to switch between the Path Scrubber Additive and Subtractive tools.


Now, you can see the myriad of possibilities and directions that are open to you when creating fills and strokes in Fireworks MX. The only real limits you have are time and imagination. Go for it!

  • + Share This
  • 🔖 Save To Your Account