• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

The Pen Tool

The Pen tool creates complex lines, curves, and shapes in Fireworks. You draw complex lines and shapes with the Pen tool using Bezier curves. This tool, when mastered, can turn you into a force to be reckoned with, not only in Fireworks but also in any application that contains Bezier Pen tools. (Macromedia Flash, FreeHand, and Adobe Illustrator and Photoshop all have vector drawing.)

Note

Three types of points exist: corner, curve, and join.


Take a look at the available tool options for the tool that will be displayed on the property Inspector (see Figure 4.15). For example, the Show Pen Preview and Show Solid Points options for the Pen tool can have a drastic affect on how it behaves and how you use the tool.

Figure 4.15. The Pen tool options on the Property Inspector.


Drawing Straight Lines

To draw a straight path with the Pen tool, follow these steps:

1.
Select the Pen tool from the Tools panel. Position the cursor on the canvas.

Notice that the Pen cursor displays an X next to it, which indicates the origin point of the path.

2.
Click the canvas to create an anchor point.

3.
Move the cursor to another location.

4.
Click to create a second anchor point. This connects the two points with the vector path.

5.
Continue to click in a zigzag fashion around the canvas to created additional line segments (see Figure 4.16).

Figure 4.16. Pen tool zigzag.


6.
To end the path, click while pressing the Ctrl key in Windows or the Command key on Macintosh.

Drawing a Lightning Bolt

This connect-the-dots style exercise with the Pen tool guides you through creating a complex series of straight-line segments and then closing its path. See Figure 4.17 and follow the visual steps to draw the lightning bolt:

Figure 4.17. Tutorial file bolt_01.png.


1.
Open the bolt_01.png file from the Exercises/04 folder on the accompanying CD-ROM.

This file contains a locked layer with the lightning bolt diagram. The layer with the lightning bolt template in it is locked to make tracing it easier.

2.
Select the Pen tool from the Tools panel.

3.
With the Pen tool, click 1 through 11 in numerical order as you would in a connect-the-dots puzzle.

4.
Move the cursor over dot 1. A small circle appears to the right of the pen cursor, which signals that clicking this point closes the path.

5.
Click directly on this point to close the path.

6.
Save your file as my_bolt.png. You use the lightning bolt again in Chapter 6, “Working with Text.”

As you can see, it can be simple to create straight-edged shapes.

Drawing Curved Paths

Once you get the hang of working with the Pen tool, you’ll discover it’s really a blast:

1.
Click to select the Pen tool from the Tools panel.

2.
Position the cursor on the canvas.

Notice that the Pen cursor displays an X next to it, which indicates the origin point of the path.

3.
Click and drag from the anchor point origin. Release the mouse. This creates Bezier control handles.

4.
Move the cursor to another location.

5.
Click and drag again to create a curved segment between your two anchor points. Or you can just click to set a corner point for the first anchor point and click-drag for the second. Only one Bezier control handle is necessary to create a curved line between two points.

6.
Continue to create curves by clicking and dragging in a zigzag fashion around the canvas. This creates wavy line segments (see Figure 4.18).

Figure 4.18. Using the Pen tool Bezier handles to create wavy lines. (My lines are not artistic, but you get the idea.)


7.
To end the path, click while pressing the Ctrl key in Windows or the Command key on Macintosh if the Show Pen Preview is on. If it is off, the last click with the tool becomes the endpoint of the path.

Manipulating Bezier Paths

It is enormously useful to understand what Bezier curves are and, thus, what it means to draw curves with the Pen tool. In my understanding, curves consist of looking at shapes and being able to identify, or break down, the components of their segments and curves.

What exactly is the structure of what you are trying to draw?

Shapes are made up of a series of complex curves. When I examine a shape or think about drawing a shape, I ask myself, “Where does the curve begin and where does it end?”

Shapes are made of different types of points that produce curved and straight vectors. These elements can have different directions and can go for different lengths of space. For this reason, Fireworks provides a few additional aspects of the Pen tool that enable you to alter and create various types of lines.

If you are interested in the Advanced Pen tool tutorial, check out the mega drawing lesson on the accompanying CD-ROM (see Figure 4.19). Working through this exercise gives you a great deal of practice using the full range of drawing tools available in Fireworks.

Figure 4.19. The completed drawing exercise “Mega Drawing,” which is available on the CD-ROM.


Look carefully at the image of the butterfly woman. It is made up of a series of complex curves. I created it to help explain point and line types and to give the Pen tool a workout.

Modifying Line Types

This is a great time to discuss line types. In Figure 4.19, notice the number of different line types. For example, the wings are soft, wide, and wavy curves. The fingertips contain curves that change direction. The vest contains elliptical curves joined to straight-line segment.

There are different combinations of clicks and drags that you perform when drawing with the Pen tool. These methods are how you use the tool to get specific results. Here’s what I mean:

When you click the left middle of the canvas and then click directly across from it, you create a straight line across the center of the canvas.

When you click and drag up from the left middle of the canvas and then click and drag down directly across from your first click and release, you create a curve that goes up. The direction of the curve follows exactly how you drag.

Initially, when you are dragging, you are setting the Bezier control that determines the direction. Here’s the trick to getting your curve segment to fit just right using the Pen tool:

  1. Estimate the distance of the curve that you are drawing.

  2. Drag approximately one third of the total distance of the curve you are drawing along its axis.

You can further build and fine-tune complex curves by

  • Adding points

  • Converting corner points to curve points and curve points to corner points

  • Changing the direction of straight segments and curves and back again

If you’re doing waves or curves, you sometimes need to make tight turns. Sometimes, a turn might be a curve, and other times, a turn might be an angle turning into a curve.

Grouping Path Objects

Grouping makes several path objects into one object, like in the wing of the butterfly woman (refer to Figure 4.19). You use the butterfly warrior artwork to learn more about Color Fills and Stroke in the next chapter.

Note

I’ve found that using a pressure-sensitive tablet gives my hand and line fluidity. If you have a pressure-sensitive tablet, you might experience the fluidity with which you can draw. I like the feeling of drawing this way because it’s more natural and, having studied drawing and sculpting, it allows me to use skills from those disciplines more intuitively.


In the Modify menu, there is an option called Combine Paths (Modify, Combine Paths). Click anywhere on this option to reveal the Combine submenu.

To the Combine submenu’s right is a submenu that contains the four combine options: Union, Intersect, Punch, and Crop. The combine option is a cool feature that enables you to create elements from existing closed-vector objects by selecting two or more objects and combining their paths in the four following ways:

  • Union— Creates one object from two or more overlapping items. The resultant object is a single path.

  • Intersect— Creates one object from the intersection of two or more objects. Intersection means the area that is common to both objects.

  • Punch— The opposite of Intersect. Intersect leaves you the common area, but Punch only leaves you the area of the bottom object that’s not common to the overlapping object.

  • Crop— The reverse of punch. Removes portions of selected paths outside the area defined by an overlapping selected path. Similar to Intersect, but more suited to use with multiple objects. It’s similar only in that the common area in the bottom object is left after the operation, but the common area of the top object is not.

Exercise 4.1 Building a Ciber-Training Interface

This exercise guides you through the steps for making a ciber-training interface. Each of these files is available on the CD-ROM: ciber_combine01.png through ciber_combine07.png. You can try drawing them from scratch in the following steps, or go right to the CD-ROM and inspect the artwork:

1.
Choose File, New to create a new file. Make the canvas width 800 pixels and the canvas height 600 pixels. Make the resolution 72 ppi. Set the canvas color to white. Click OK.

Notice that your file automatically contains two layers in the Layers panel. One is named Layer One and the other is named Web layer.

By default, every Fireworks document contains these two layers. Layer One always contains artwork elements, and Web layer is a special layer that contains web elements including hotspots and slices.

2.
Select the Rounded Rectangle tool from the Tools panel. Set the Stroke to None and the Fill to Light Gray, hexadecimal color number CCCCCC. Using the Property Inspector, set the Rectangle Roundness to 80. (See Figure 4.20.)

Figure 4.20. The Rounded Rectangle tool Property Inspector settings.


3.
Dragging from the upper left to the lower right, create a tall, narrow, and rounded rectangle with the width of 163 and the height of 627.

4.
Choose the Pointer tool from the Tools panel and position by clicking and dragging the rectangle to move it to the position at x = -17, y = -32, or use the x, y location fields in the Property Inspector to set the location numerically.

5.
Deselect the rectangle by clicking away from it in the canvas or by pressing Ctrl-D (for Windows) or Command-D (for a Macintosh).

Deselecting deactivates vector shapes so that they are not affected by changes.

6.
Select the Rounded Rectangle tool from the Tools panel. Set the roundedness setting to 100 in the Property Inspector.

7.
Click and drag a wide horizontal rectangle with the width of 780 and the height of 118.

8.
Switch to the Pointer tool and position your rectangle at the coordinates of x = -28, y = -56 by clicking and dragging the rectangle, or by using the x and y coordinates in the Property Inspector.

9.
Hold the Shift key and click the vertical rectangle; now both rectangles should be selected.

10.
Choose Modify, Combine Paths, Union.

11.
Switch from the Rounded Rectangle tool to the Rectangle tool.

12.
Click and drag a small rectangle with the width of 128 and the height of 94. Switch to the Cursor tool and position this rectangle at x = -44, y = 500.

13.
Holding the Shift key, select the unionized shape along with your new rectangle, and choose Modify, Combine Paths, Union (see Figure 4.21).

Figure 4.21. Ciber-Training user interface.


The resulting shape is used for the background element of the ciber-training user interface.

Note

It is perfectly acceptable that the vector shapes that you have drawn overlap or bleed out from the canvas into the work area. In Chapter 14, “Exporting,” all the areas outside the canvas are not exported.


Adding Layers

Now you add layers into the mix. You work with the single object that you just created out of two other objects:

Note

For a refresher on some of the things that you can do with layers and how to work with them, see the section, “Working with Layers” in Chapter 3, “Setting Up a New Document and Navigating the Workspace.”


1.
Double-click the object in the Layers panel and change the name to Base Art.

2.
Duplicate the single object that you created so far.

There’s only one object in your Base Art layer. The name of this object, by default, is Path.

3.
With the Pointer tool, click the Path object to select it.

4.
Copy this object, making an exact duplicate of it.

You can make duplicates of objects in Fireworks in more than one way. Choose one of the following options:

  • Option #1— Choose Edit, Clone. You have made an exact duplicate in place of your original.

  • Option #2— Select Copy, Control-C (for Windows) or Command-C (for a Macintosh) and Paste, Control-V (for Windows) or Command-V Paste (for a Macintosh).

  • Option #3— Choose Edit Menu, Duplicate. (Clone puts your copy in exact registration with your original, whereas Duplicate positions your duplicate cascaded down and 10 pixels to the right of the original object.)

5.
Click the cloned object to select it on the Canvas.

6.
Use the Fill button. You can just click the Color box on the Property Inspector. It reveals the Color box pop-up menu. Change the color from light gray to medium gray, and choose hexadecimal number color 999999.

7.
Click in the Tools panel to select the Rounded Rectangle shape object. Reset the roundedness to 20. Drag a rounded rectangle with a width of 800 and the height of 600.

Hint: At this point, while your rectangle is still selected, it’s helpful to change the color. This makes it easier to tell your cookie cutter from your cookie dough.

8.
Using the Pointer tool, reposition your object to x = 11, y = 28.

Look at the lower left-hand corner of your canvas. You need to make some adjustments to trim the bottom corner to a straight segment.

This piece of artwork is available on the CD-ROM in ciber_combine04.png (see Figure 4.22).

Figure 4.22. The tutorial file ciber_combine04.png.


Scaling the Rectangle Object

Now you will create a shape to use as a modifier:

1.
Click and select the green rectangle object.

2.
Switch to the Scale tool in the Tools panel.

Eight square black rectangles are around the perimeter of the shape and one round circle is in the middle of the shape. The dot at the center represents the center point. The default setting is Center.

You can reset the center point of an object by clicking and dragging the center point to a different location on the shape. The eight square bullets around the outside edge of your rectangle are its Bezier control handles.

3.
Click the lower-right Transform handle of your rectangle while holding the Shift key. Drag your shape’s width to an approximate width of 850 and height of 640. Note: The lower left-hand corner edge is now “trimmed” by a straight shape instead of a curved shape (see Figure 4.23).

Figure 4.23. The tutorial file ciber_combine05.png.


Notice that the object is not completely “trimmed.” The object is partially off the canvas and is not exported with the final image or table. Because it is larger than the canvas, it’s not completely trimmed unless you have the preferences set to Delete Objects When Cropping in the Editing section, and if you crop your document before exporting. In this case, objects that are partially off the canvas are trimmed in that only the part on the canvas is exported.

4.
Using the Pointer tool, click to select the rectangle (if it is not already selected) and hold the Shift key to select the path object located in the middle position within the stack of three objects on your Base Art layer.

5.
With these two objects selected, choose Modify, Combine Paths, Punch.

The result is a single shape from the original two, creating a bracket around the top and left sides of your user interface object. Because this object was created from a clone of the original, the curved edge at the upper right aligns perfectly with the layer beneath.

Naming Objects

You can organize layers and objects in a document by naming them. This helps you to keep track of the objects in your artwork. Here’s the process:

1.
Double-click to select the name path on the bottom object of your Base Art layer. Change the name to Bottom.

2.
Double-click the word “Path” in the top layer to select the name field. Rename it Top.

3.
Click the bottom layer to select it. This automatically selects the object on the bottom layer.

4.
Choose Edit, Clone to make an exact duplicate of the bottom layer in exact registration to it.

5.
Double-click the name of the newly created layer, which exists directly on top of the bottom layer, and change its name from bottom to middle. See Figure 4.24.

Figure 4.24. The tutorial file ciber_combine06.png.


Hiding a Layer

Another of the many ways Fireworks helps you to keep track of and isolate just the right elements you are working with is the hide and show options on the Layers panel. This next part of the exercise gives you some practice using this feature:

1.
Click the eyeball of the Top user interface object in the Base Art layer to hide it.

2.
With the Pointer tool, click the middle layer, which automatically selects it.

3.
Change its color from light gray to dark gray, hexadecimal number color 333333.

4.
Select the Regular Rectangle tool from the Tools panel.

5.
Click and drag outside the canvas from the upper left down vertically across to the lower right, just trimming at the edge of the vertical area of the interface panel. See Figure 4.25.

Figure 4.25. Tutorial file ciber_combine07.png.


Note

To make your work easier to see, after this rectangle is drawn, change its color to something other than the current color.


Using Guides

Guides are lines that you can drag out from the rulers onto the document canvas. Guides are used as drawing aids to help you place and align objects within your design. You can use them to mark important places of your document, such as the baseline of type elements, a shape’s center point, and areas within which you want to work very accurately.

Note

Guides are invisible when your files are exported and are used as design tools only.


To help you align objects precisely, Fireworks lets you snap objects to guides. Guides can be locked and unlocked to allow flexibilty and protection in the workspace:

1.
From the View menu, choose Rulers and make sure that they are checked on (Ctrl-Alt (for Windows) or Command-R (for a Macintosh).

This option allows Fireworks to display rulers at the top and left of your Document window. You can click inside the ruler and drag a guide onto the canvas to aid in positioning your artwork. The cross-hair icon that appears at the intersection of the vertical and horizontal rulers allows you to change the document’s origin (0,0), thus repositioning the grid. Double-click this icon to restore the origin to the top-left corner of the canvas.

2.
For now, click the eyeball to hide the rectangle layer. The middle layer should appear to be the top-most layer, as the other two layers that are actually above are currently hidden.

3.
Under View, Guides, hold your mouse down to display the Guides’ submenu. Check to make sure that the Snap-to-Guides option is checked.

4.
Click in your vertical ruler at the left and drag into the canvas, allowing your guide to gently snap to the edge of your vector shape.

Notice that, when Snap-to-Guides is checked on, a slight snapping sensation occurs when your guide picks a vector point or an exact point on the ruler.

5.
Align your guide with the right edge of the middle user interface object’s vertical segment.

6.
Click the eyeball next to the top-most rectangle layer to display it.

7.
Using the Pointer tool to select the rectangle, move it to align it perfectly with the new guide that you just set.

Hint: Use the arrow keys on your keyboard to move vector objects 1 pixel at a time. Holding the Shift key while using the arrow keys move vector objects 10 pixels at a time.

8.
After the rectangle is positioned along the right edge of the vertical element on the middle object, select both the rectangle and the middle object.

9.
Choose Modify, Combine Paths, Crop. The resulting object is a curved corner vertical panel (see Figure 4.26).

Figure 4.26. The tutorial file ciber_combine08.png.


10.
Click the eyeball of the top object within the base layer to see the result.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint