Topics in Desktop Graphics - (CPTR240) - Lectures  

Arranged and adapted by: David Siguelnitzky -

Creating custom strokes

In Fireworks, much of the drawing you do is based on paths. A path is a line with certain stroke characteristics. While Fireworks comes with a variety of preset strokes, you can also edit these preset strokes to create your own strokes. By customizing stroke characteristics, you can change the appearance of a path to create a variety of effects from a soft-edged airbrush look to a splattered paint effect.

• Editing a stroke

• Setting stroke options

• Setting stroke shape

• Setting stroke sensitivity

• Saving a stroke

• Creating a dotted line

Editing a stroke

The building block of a stroke is a stamp-the basic shape that defines the stroke tip. As you draw, Fireworks renders the path as a series of closely-spaced stamps that give the appearance of one continuous stroke.

In Fireworks, you edit a stroke by changing the size and shape of the stamp that defines the stroke tip, and by changing the spacing between stamps and defining how the stamps overlap. For example, an airbrush stroke has a round-shaped stamp that defines the stroke tip and a very soft edge that causes the stamps to become more saturated where they overlap.

To edit a stroke:

1. Choose Window > Stroke to open the Stroke panel.

1.1:  For Version 6.0 only: Choose Brush Tool from the Tools panel / Bitmap options. The strokes properties appears on the Properties inspector.

2. Select a stroke category from the Stroke category pop-up menu.

Choosing a category is essential because not all editing options are available for all categories. For example, Pencil and Basic stroke types do not allow you to set Spacing and Flow Rate.

2.1:  For Version 6.0 only: Choose a category from the None pop-up menu.

3. Choose Edit Stroke from the Stroke panel Options pop-up menu.

The Edit Stroke dialog box opens.

3.1:  For Version 6.0 only: Choose Stroke Options from the None panel Options pop-up menu.

 

 

4. Assign stroke Options, Shape, and Sensitivity settings and click OK.

To preview the settings on the currently selected path, click Apply. This lets you preview your edits on the selected stroke without having to close and re-open the Edit Stroke dialog box.

Setting stroke options

Click the Options tab of the Edit Stroke dialog box to set opacity, spacing, texture, edge effects, and tip options.

Edit Stroke Options panel

For Version 6.0 only: Choose Advanced... from the Stroke panel Options pop-up menu to get the Edit Stroke window.

Opacity and spacing of the stroke stamps
The Ink Amount, Spacing, Flow Rate, and Build-up options affect smoothness or saturation of the stroke.

Ink Amount sets the opacity of the initial stroke. Use lower percentages with the Build-up option when you want airbrush-type strokes that become more opaque as you continue to draw in the same spot.

Spacing determines how far apart each stamp of the stroke is placed. At 100%, each stamp is placed at the very edge of the previous one.

• For a smooth looking stroke, use a low percentage (like 15% or 20%) so that the stamps overlap. Very low spacing settings will cause the stroke to draw more slowly.
• For dotted line or scattered effects, use percentages greater than 100%.

Flow Rate determines how fast the ink builds up in one spot as you draw with the stroke. If you hold the brush completely still while drawing, you can see the stroke become increasingly more saturated. Higher values cause the ink to accumulate faster.

Build-up causes overlapping stamps to increase in opacity. This gives the appearance of spraying more ink in a particular spot. This allows you to make the stroke more opaque by drawing more in the same spot, like spraying the same spot with an airbrush for several seconds.

Texture and edge effects
The Texture, Edge Texture, and Edge Effect settings work in conjunction with the texture settings in the Stroke panel itself. This means, if you paint with a textured stroke, and then change the texture settings of the stroke on the Stroke panel, the new settings will override the internal settings of the stroke's texture.

Texture determines by percentage how much texture is applied to the main body of the stroke.

Edge Texture sets how much the edge displays the selected texture. The edge is treated separately from the body of the stroke because the edge often has other characteristics affecting its appearance, such as feathering, or an edge effect.

Edge Effect allows you to select one of five custom appearances for the edge of your stroke. If you just want a soft or feathered edge, choose those settings in the Edit Stroke Shape dialog box, not here. There are five Edge Effect settings:

White Neon

Harsh Wet

Smooth Neon

Wavy Gravy

White Neon No Center

Stroke tips
Changing the number, spacing, and characteristics of stroke tips is critical for reproducing some stroke effects, such as the oil series of strokes.

Tip sets the number of tips on the stroke. For each tip, another stroke is drawn parallel to the main stroke.

Tip Spacing sets the spacing between each tip. A value of 100 means that the two tips are set next to each other. Less than 100 sets overlapping tips, and greater than 100 creates visible white space between the tips.

Variation sets the appearance of the secondary tips. Varying the appearance of multiple tips allows you to create a number of interesting stroke effects. There are five variations available:

• Random assigns a random color to each tip.
• Uniform sets each tip to be the same color as the original tip.
• Complementary sets the secondary tips to complementary (opposite) colors on the color wheel.
• Hue varies the hue of the secondary tips, but not the lightness.
• Shadow varies the lightness of the secondary tips, but not the hue.

Setting stroke shape

The stroke shape is the basic shape of each stroke stamp, including its size, edge softness, aspect, angle, and whether or not its round or square.

• Square toggles the stamp between a round and a square shape.
• Size sets the default size of the stroke. This can be adjusted each time you draw by changing the size in the Stroke panel.
• Edge determines how wide in pixels the "soft" area of the edge is.
• Aspect adjusts the shape of the stroke tip-from a circle to an oval in the case of a round tip, and from a square to a line in the case of a square tip.
• Angle sets the angle of the stroke tip. Used in conjunction with Aspect, this is a common way to create a calligraphic-type stroke.

Setting stroke sensitivity

The Sensitivity setting determines how the stroke characteristics change according to the speed at which you draw or the pressure you use when drawing (if you have a pressure-sensitive drawing pad.)

There are thousands of different combinations you can make to stroke sensitivity, but this article describes only the basic options. Experiment with different combinations to discover what you want in a stroke. The last section of this article, Creating a dotted line demonstrates how you can use these settings together to create a specific stroke type.

Selecting the stroke property
Each stroke has seven properties, based on the input values previously discussed, which can be altered as the stroke is drawn.

• Size varies the size of the stroke tips. For example, you could set a stroke tip to increase in size as you increase pressure, or decrease in size as you draw the stroke faster.
• Angle changes the angle of the tip. A very practical use of this is setting the Horizontal and Vertical input values to 100 so that the angle of the tip follows the direction of the path.
• Ink Amount changes the build-up of stroke stamps.

Scatter determines how far each stroke stamp is placed off the path center.

Hue varies the color of the stroke stamps

Lightness changes the light/dark values of the stroke stamps.

Saturation alters the saturation of the stroke stamps. Use Saturation with a low setting in the Random value to simulate watercolor strokes.

Selecting a value that affects the stroke
For each stroke property, there are five options that can alter the appearance of the stroke property as you draw.

• Pressure changes the stroke property according to the amount of pressure you apply with a pressure-sensitive drawing pen, or, in the absence of a pen, how the pressure data of the path is adjusted using the Path Scrubber tool.
• Note: If you do not have a pressure-sensitive pen, you can alter the pressure as you draw by pressing a key on your keyboard. Press the 1 or left arrow key to decrease the pressure as you draw. Press the 2 or right arrow key to increase pressure as you draw.
• Speed varies the stroke based on how fast you draw the stroke. This type of effect can be used to simulate an elegant calligraphic stroke.

• Horizontal affects the stroke based on horizontal movement of the stroke.
• Vertical affects the stroke based on vertical movement of the stroke.
• Random changes the stroke in a random fashion. With the Random setting, you can create strokes that have a scatter effect, or that randomly change hue as you draw.

Saving a stroke

Any custom stroke you create can be saved and reused later in the current document. Strokes are saved in the stroke category where you began editing them.

Also, you can save a stroke as a style so that you can share it between documents or with another Fireworks user.

To save a custom stroke:

1. Choose Save Stroke As from the Stroke panel Options pop-up menu.

1.1 For Version 6.0 only: Choose the symbol rounded with red color... from the Stroke panel pop-up menu to get the Save Stroke window.

 

 

 

2. Enter a name for the stroke and click OK.

Your stroke appears in the Stroke name pop-up menu under the currently active Stroke category.

 

Creating a dotted line

Creating a dotted line stroke for Fireworks provides a good example of how the various stroke settings work together.

To created a dotted line stroke:

1. On the Stroke panel, choose Unnatural from the Stroke category pop-up menu.

You can choose any category you feel is appropriate, other than Basic or Pencil. Basic and Pencil do not allow you to set a critical option for creating a dotted line.

2. Choose Save Stroke As from the Stroke panel Options pop-up menu, and enter the name Dotted Line.

By entering a new name you ensure against making changes to another existing stroke that you might want to use later.

3. Choose Edit Stroke from the Stroke panel Options pop-up menu.

4. Choose the Options tab and enter the following settings:

• Ink Amount: 100
• Spacing: 100
• Flow Rate: 0
• Texture: 0
• Edge Texture: 0
• Edge Effect: None
• Tips: 1

Spacing is the critical setting for creating a dotted line. Setting Spacing to 100 tells Fireworks that you want each stroke stamp to be drawn 100% away from the previous one, in effect leaving a gap between the stamps the same size as each stamp.

5. Choose the Shape tab and enter the following options:

• Check Square.
• Size: 5
• Edge: 3
• Aspect: 100
• Angle: 360

You can set the shape and size characteristics to whatever works best for you. To create a dotted line that looks like the example, however, set the shape to Square.

6. Choose the Sensitivity tab make sure each Stroke Property category is set to 0.

7. Choose Stroke Property: Angle and set Horizontal to 50 and Vertical to 50.

This causes the square dots to follow the direction of the path. If the path curves, the angle of the dots change so they stay parallel with the direction of the path.

8. Click OK.

That's it! You're done. Now, click the Brush tool, Line tool, Rectangle, Ellipse, or Polygon tool and draw.

Source: David Jacowitz and Gary White - Macromedia FIREWORKS MX (2004) - http://www.macromedia.com/support/fireworks/tutorial_index.html