Creating Vector Graphics / Creating Graphics with the Pen Tool
Subtitles of the Movie
Continuing my review of creating Vector objects in Fireworks CS4 we now get to the Pen Tool. One way to draw and edit Vector objects in Fireworks is to plot points as if drawing a connect-the-dots picture. When you click each point with the Pen Tool Fireworks automatically draws the path of the Vector object from the last point that you clicked, so I've selected the Pen Tool here in the Vector section of the Tools Panel, and notice that if I click on my Canvas I get a Vector object. Now in addition to connecting the points with only straight segments, the Pen Tool can draw smooth, mathematically derived curve segments, notice it says Bezier Curves. Each point's type, whether it's a corner point or a curve point, determines whether the adjacent curves are straight lines or curves. As I just demonstrated, drawing straight line segments with the Pen Tool is a simple matter of clicking to place the points. Each click with the Pen Tool plots a corner point. I'm going to double-click on that last point there and notice that I close off that object so that then fills with my designated fill color, right there. My fill color is here. Now, to draw curved path segments you click and drag as you plot points. Let's go ahead and select the Pointer Tool. Let's delete all of those points. Let me also change colors here so we can see that a little bit brighter. And now, with my Pen Tool this time I'm going to click and drag, and you can see that I'm now creating curved line segments. Notice that this shape is still not filled in yet, so I haven't completed my object, and then as soon as I complete the path, Fireworks fills my object with my fill color there. Now notice that all the points on this curved path have point handles. These handles are visible if you zoom in here. They're also only visible on the curved line segments. Let's take my Subselection Tool and with the Subselection Tool I can see these Bezier handles, is what they're referred to, and these handles will indicate the level of curvature of each line segment. There are two: one for controlling the amount of curvature previous to the point, that's this one here, and the other one for the curvature for the line segment after the point, so you can see the longer I make these handles the more curvature there is in the line segment. In general you want to typically keep these Bezier handles about half the length of the line segment itself. In general, that makes these easier to manage and manipulate, so notice that my line segment is this long, so about half is about that length right there. That seems to be the optimal way to control these line segments. So notice that I'm adjusting the shape of this curved line segment with the Subselection Tool, the white arrow. I can drag the points on the line segment, and these point handles determine the location of that shape. The handles here, the Bezier handles, determine the degree of curvature between these fixed points, and as I mentioned, these are known as Bezier curves. My students often have trouble when introduced to the Pen Tool and using it to draw various shapes. What I often do is draw out some waves like I have here in this diagram and have them try to duplicate those waves, first using the Pen Tool and then using the Subselection Tool to select the various points and then work the Bezier handles to increase or decrease the curvature of these lines to get a better wave shape. What's nice about these wave shapes is they require both curved line segments and straight line segments so they can practice using the Pen Tool to achieve these shapes. Generally the first time they try to draw these they don't look too good so it also gives them a chance to work with the Subselection Tool. So I'll go ahead and save this file in the Work Files folder and call it Draw Wave, so you can load it into your Fireworks and practice tracing over it so you can get some more practice in work with the Pen Tool and the Subselection Tool. I can use Path Operations in the Modify Menu here to create new shapes by combining or altering existing paths, so let me now move on to the next movie and demonstrate how to edit your paths here with Path Operations in the Modify Menu.
Tutorial Information
| Course: | Adobe Fireworks CS4 |
| Author: | James Gonzalez |
| SKU: | 33999 |
| ISBN: | 1-935320-47-5 |
| Release Date: | 2009-05-21 |
| Duration: | 8 hrs / 90 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (20,800 free)
- Video Available as Flash or QuickTime
- Over 782 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 