Macromedia fireworks MX bible phần 4 docx

Structuring Paths E ven with the coolest stroke, the snazziest fill, and the wildest effect, you rarely get exactly the graphic you need the first time you draw an object. Maybe it needs to be a little bigger, smaller, taller, or wider, or maybe it’s perfect — but it’s facing the wrong way, and it’s upside down. Whatever the problem, Fireworks has the tools to fix it and, because Fireworks blends pixel surfaces with vector skeletons, you get amazingly sharp results. Fireworks has the kinds of tools you would normally expect to find in a full-fledged vector drawing application. You can com- bine several vector objects in any number of ways with evoca- tively named tools, such as Union, Intersect, Punch, and Crop. Naturally, what you have joined together you can split apart and regroup as needed. Vector objects can be simplified, expanded, or inset with Fireworks commands. This chapter covers all the tools and techniques in Fireworks for transforming and combining objects. You’ll also find a sec- tion that describes how you can use Fireworks to create per- spectives in your imagery. You really begin to appreciate the power of Fireworks’ vector/ bitmap combination when you start transforming your objects. In a pure bitmap graphics application, if you increase the size of a bitmap, you have to add pixels, whereas shrink- ing a bitmap causes the program to throw away pixels — you rarely achieve ideal results in either situation. However, in Fireworks, when you rescale a vector object, the vector path is altered (a snap for vector graphics), and the pixels are reapplied to the new path, just as if you had drawn it that way to begin with. 9 9 CHAPTER ✦✦✦✦ In This Chapter Transforming vectors Fireworks technique: creating perspective Working at the point level on a vector path Editing existing vectors Using vector power tools ✦✦✦✦ 123662-1 ch09.F 8/2/02 2:26 PM Page 267 268 Part II ✦ Mastering the Tools Transforming Objects Visually Fireworks includes methods for transforming objects, both visually and numeri- cally. The visual method relies on three key tools found in the Select section of the Tools panel: Scale, Skew, and Distort. Although I primarily use vector objects as examples in this section, all the transfor- mation tools work with bitmap objects, as well. Using scaling In Web design, the size of an object frequently needs adjustment. Sometimes a button is too large for the current navigation bar, or the client wants the “On Sale” notice to be much bigger. Other times a graphic just looks better at a particular size. Regardless of the reason, Fireworks gives you a quick way to resize an object — up or down — through the Scale tool. The Scale tool is the first of three transformation tools in the Tools panel that become active when an object is selected. Choose the Scale tool (or use the key- board shortcut, Q) and the standard selection highlight is replaced with a transform- ing highlight, as shown in Figure 9-1. There are eight sizing handles — one on each corner and one in the middle of each side — and a centerpoint on the transforming highlight. You can drag any of the sizing handles to a new position in order to resize the selected object. Dragging any corner handle scales the object proportionately. Figure 9-1: Choose the Scale tool and sizing handles, and a centerpoint appears on the selected object. To resize an object using the Scale tool, follow these steps: 1. Select the object you want to resize. Sizing cursor CenterpointSizing handles Note 123662-1 ch09.F 8/2/02 2:26 PM Page 268 269 Chapter 9 ✦ Structuring Paths 2. Choose the Scale tool from the Tools panel, or use the keyboard shortcut, Q. Alternatively, you can use the menu command, Modify ➪ Transform ➪ Scale. Sizing handles and a centerpoint appear on the selected object. 3. Position your pointer over any sizing handle until it changes into a two- headed arrow. 4. Click and drag the sizing handle in the direction you want the object to grow or shrink. To scale an object while maintaining the current proportions, click and drag a corner-sizing handle. 5. To cancel a resizing operation and return the object to its original dimensions, press Esc. 6. To accept a rescaled object, double-click anywhere on the document. You can also move or rotate an object when any of the transform tools are selected. When the pointer is positioned within the selected object and it becomes a four- headed arrow, click and drag the object to a new position. If the pointer is outside of the selected object’s bounding box, the pointer turns into a rotate symbol; click- ing and dragging when this occurs rotates the object around its centerpoint. The transform tools all have a Scale Attributes option available through the Info panel Options menu. By default, when you resize an object, the stroke, fill, and effect settings are resized, as well. If you disable the Scale Attributes option in the Info panel Options menu, these settings are reapplied without being recalculated. Why might you want to do this? Although the results can be unpredictable, interest- ing variations can occur, such as the variations in Figure 9-2. Figure 9-2: Most of the time you want your stroke, fill, and effects to rescale along with your object, but turning off the Scale Attributes option can lead to some interesting effects. Scale Attributes checked Scale Attributes unchecked 2-pixel stroke 5-pixel stroke 2-pixel stroke Original 123662-1 ch09.F 8/2/02 2:26 PM Page 269 270 Part II ✦ Mastering the Tools In my experiments with the Scale Attributes option, the most interesting effects occurred when my object was filled with a gradient and the Scale Attributes option was turned off. Examining skewing The Skew tool is used to move one side of an object, while the opposing side remains stationary. Select the Skew tool by clicking and holding the Scale tool until you can choose the Skew tool from the flyout menu, or by pressing the keyboard shortcut, Q, twice. Selecting the Skew tool causes transform handles to appear on the selected object, as it does when selecting the Scale tool. The Skew handles work somewhat differently, though: ✦ Drag any middle Skew handle in order to slant that side of the object. ✦ Drag any corner Skew handle in order to slant that side and the opposing side in the opposite direction. Skewing a corner is a useful technique for giving an object a dynamic appearance, as shown in Figure 9-3. Figure 9-3: Skew an object along one side by dragging the middle handle. Completing a Skew operation is handled the same as completing a scaling opera- tion: Press Esc to cancel, or double-click anywhere to accept the new shape. Tip 123662-1 ch09.F 8/2/02 2:26 PM Page 270 271 Chapter 9 ✦ Structuring Paths Discovering distorting With both the Scale and Skew tools, entire sides move when you adjust one of the transform handles. The Distort tool (the third tool on the transform flyout) removes this restriction. When the Distort tool is selected, you can adjust the bounding box surrounding the selected object by dragging the handles in any direction. The object is then redrawn to fit within the confines of the new bounding box shape, as in Figure 9-4. Figure 9-4: Use the Distort tool to reshape a bitmap or vector object by altering its bounding box. The Distort tool is useful for warping flat objects — especially bitmaps — into novel shapes, or for fitting an object into the shape of another object. Use the Distort tool to flip a bitmap horizontally or vertically by dragging a middle handle across the opposite side. This technique won’t automatically size the bitmap to match the original size, as do the Flip Horizontal or Flip Vertical com- mands, but you can control the sizing. Understanding rotating Rotating is available with any of the transform tools: Scale, Skew, or Distort. Moving your mouse cursor just outside of the bounding box causes the Rotate cursor to appear. As you can see in Figure 9-5, an object rotates around its centerpoint and can rotate a full 360 degrees. Tip 123662-1 ch09.F 8/2/02 2:26 PM Page 271 272 Part II ✦ Mastering the Tools Figure 9-5: An object rotates around its centerpoint when the Rotate cursor drags the object. To rotate any object, follow these steps: 1. Select any one of the transform tools from the Tools panel, or choose the equivalent tool from the Modify ➪ Transform menu. 2. Move your pointer outside of the bounding box. The pointer turns into a Rotator cursor. 3. Click and drag in any direction to rotate the object. 4. To cancel the rotation and return to the original object, press Esc. 5. To accept the transformation, double-click anywhere on your document. An object’s centerpoint is placed in the middle of the transform bounding box by default. To change the rotation axis, click and drag the centerpoint to a new loca- tion — the centerpoint can remain within the object’s bounding box or be placed outside of it. If the centerpoint is placed outside of the object, the radius used connects the centerpoint and the nearest corner handle, as shown in Figure 9-6. Rotate cursor Centerpoint 123662-1 ch09.F 8/2/02 2:26 PM Page 272 274 Part II ✦ Mastering the Tools Figure 9-7: The Numeric Transform dialog box gives you exacting control when scaling or rotating an object. 3. Check Scale Attributes to reapply the object’s attributes after the transformation. 4. Check Constrain Proportions to preserve the object’s aspect ratio. 5. To scale an object proportionately: a. Choose Scale from the Option list. b. Enter a new percentage value in either the height or width text boxes. If the height and width boxes are “locked” and you want to unlock them, uncheck Constrain Proportions. 6. To resize an object to a specific pixel size: a. Choose Resize from the Option list. b. Enter the pixel dimensions in either the width or height text boxes. 7. To rotate an object by a specific number of degrees: a. Choose Rotate from the Option list. b. Enter a degree value in the text box, or drag the knob to select a rotation degree. 8. Click OK when you’re done. Fireworks Technique: Creating Perspective Although Fireworks is hardly a 3D-modeling program, you can quickly generate per- spective views using several of its transform and other tools. If you’ve ever taken Drawing 101, you understand the basic principles of perspective: The particular view you’re illustrating has a vanishing point where the imaginary lines of the draw- ing meet on the horizon. The vanishing-point concept is most simply applied by using a special property of the Skew tool. Tip 123662-1 ch09.F 8/2/02 2:26 PM Page 274 275 Chapter 9 ✦ Structuring Paths To give an object the illusion of perspective, follow these steps: 1. Select the object you want to modify. 2. Choose the Skew tool from the Tools panel, or press the keyboard shortcut, Q, twice. 3. Choose the direction of perspective: • To make the object appear as if it is along a left wall, vertically drag the top- or bottom-left corner away from the object. • To make the object appear as if it is along a right wall, vertically drag the top- or bottom-right corner away from the object. • To make the object appear as if it is on the floor, horizontally drag the bottom-left or -right corner away from the object. • To make the object appear as if it is on the ceiling, horizontally drag the top-left or -right corner away from the object. 4. To intensify the perspective, repeat Step 3 with the opposite corner, dragging in the opposite direction. For example, in Figure 9-8, I dragged the bottom- right corner away from the object and the bottom-left corner into the object to exaggerate the effect. Figure 9-8: Make a flat figure appear to have perspective by using the Skew tool. Applying textures to a rectangle fill is a good way to start building a perspective background. I’ve found that breaking up the textures into small rectangles, rather than use one large rectangle is better. The room depicted in Figure 9-9 uses a series of rectangles with a Wood-Light Pattern fill, which are then grouped and skewed together to gain the perspective feel. By duplicating and flipping this skewed group, I’m able to quickly build the other sides of the room. Texture fills are discussed at length in Chapter 11. Cross- Reference 123662-1 ch09.F 8/2/02 2:26 PM Page 275 276 Part II ✦ Mastering the Tools Figure 9-9: When using a pattern for perspective, try smaller rectangles of the same pattern, grouped and skewed together. Dragging a corner with the Skew tool always moves the top opposite sides equally. This operation makes an object’s vanishing point appear to be evenly spaced between the sides of an object, which is not always the case. You can also use the Distort tool to drag one corner unevenly. But use the Distort tool with cau- tion — or perhaps with the Grid visible; there’s no way to snap a dragged corner when using the Distort tool, and straight lines are often difficult to maintain. Managing Points and Paths Sometimes transforming an object in its entirety is more than you really want or need to do. Fireworks offers numerous options for adjusting vector paths on a point-by-point basis. You can easily move, add, or delete points. In addition, paths can be joined, either to themselves — changing an open path to a closed path — or to another path. Naturally, you can also split joined paths at any point. Moving points with the Subselection tool Much path work on the point level is handled through the Subselection tool. Similar to the Pointer tool in that you use it for selecting and dragging, the Subselection tool works on the components of the path, rather than on the path itself. The Subselection tool is located directly to the right of the Pointer in the Tools panel. You can also choose it through its keyboard shortcut, A. When you select a Tip 123662-1 ch09.F 8/2/02 2:26 PM Page 276 [...]... away A few programs have since followed Macromedia s lead, but Fireworks still leads the way In this chapter, I show you basic things such as choosing fonts and aligning text, as well as more advanced features, such as attaching text to a path You also learn a technique that enables you to combine images with text using Fireworks Mask Groups Working with Text In Fireworks, all text creation and modification... mistakes, though Figure 9- 14 shows how you can use the Redraw Path tool to make a portion of a geometric shape more organic-looking Modified with Redraw Path tool Original object Figure 9- 14: The Redraw Path tool can easily alter a standard shape into something unique Tip Pressing Shift while using the Redraw Path tool constrains your replacement path to lines in increments of 45 degrees Examining the... circle as an object that you use to push against the stroke Freeform push cursor Figure 9-15: Round out your paths with the Freeform tool’s push mode 283 123662-1 ch09.F 2 84 8/2/02 2:26 PM Page 2 84 Part II ✦ Mastering the Tools 4 Click and drag the ball cursor into the path, pushing it into a new shape Caution Pushing a closed path too fast or too far results in an overlapping path line with unpredictable... to start redrawing Fireworks displays a small caret (^) in the lower right of the pointer when you are in position over the path 281 123662-1 ch09.F 282 8/2/02 2:26 PM Page 282 Part II ✦ Mastering the Tools 4 Click and drag out your new path 5 Position your pointer over the original path in the spot where you want to connect the new and old paths, and then release the mouse button Fireworks removes... cursor Figure 9-16: The Freeform tool is used to pull out a segment of a path 4 Click and drag in the direction that you want to pull the segment You can pull the path away from or into the object 5 Release the mouse button in order to complete the pull 123662-1 ch09.F 8/2/02 2:26 PM Page 285 Chapter 9 ✦ Structuring Paths Fireworks adds as few pixels as possible when you are pulling with the Freeform... plan to divide 2 Choose the Knife tool from the Tools panel, or use the keyboard shortcut, Y 3 Draw a line through the path with the Knife tool Fireworks separates the path, although this is not always immediately obvious because both new paths are still selected 4 To move one of the newly divided paths, choose the Pointer tool and click once on the canvas away from any object The split paths are deselected... standard circle and then use the Knife to slice off a portion of it As with many tools, pressing Shift constrains the Knife to angles with increments of 45 degrees Discerning path operations The more you work in vector-based drawing programs such as Fireworks, the sooner you begin to look for new and novel shapes Face it, no matter how many points you put on that star, it’s still a star Whereas you... To round out our food-like illustrations of the Combine commands, Figure 9- 24 disposes of all but the last bite of a cookie I created the shapes of the remains, joined the shapes into a single object, selected that object and the cookie, and then chose Modify ➪ Combine Paths ➪ Crop Almost completely gone in one bite Figure 9- 24: With the Crop command, the shape of the original top object provides the... expand the stroke The options include the following: Figure 9-26: Choose your options in the Expand Stroke dialog box in order to make a wide range of Expanded strokes 293 123662-1 ch09.F 2 94 8/2/02 2:26 PM Page 2 94 Part II ✦ Mastering the Tools ✦ Width: Determines the final width of the expanded stroke The range is from 1 to 99 pixels ✦ Corners: Choose from three types of corners From left to right,... clone of the original path 3 Choose Modify ➪ Alter Path ➪ Inset Path The Inset dialog box appears 4 Choose the Direction, Width, and Corner option If you choose the Miter Corner, you can enter a Miter Limit Click OK when you’re done The new path is drawn and the old path is deleted 5 Repeat Steps 2 through 4 for as many concentric shapes as desired, keeping the same values in the Inset dialog box in order . down. Whatever the problem, Fireworks has the tools to fix it and, because Fireworks blends pixel surfaces with vector skeletons, you get amazingly sharp results. Fireworks has the kinds of tools. with Fireworks commands. This chapter covers all the tools and techniques in Fireworks for transforming and combining objects. You’ll also find a sec- tion that describes how you can use Fireworks. is then redrawn to fit within the confines of the new bounding box shape, as in Figure 9 -4. Figure 9 -4: Use the Distort tool to reshape a bitmap or vector object by altering its bounding box. The