Macromedia fireworks MX bible phần 3 pps

165 Chapter 5 ✦ Creating Vector Objects 4. Drag the control point away from the arch. If Alt (Option) was not pressed, the connecting line (on the left side of the arch) would be affected by the control- point drag. 5. Release the mouse button when the arch is in the desired shape. Figure 5-18: Use the Pen to manipulate Bézier curves and create objects with combinations of straight and curved lines. You can also use this constraining property to draw uneven curves, where you drag a little bit before pressing Alt (Option) and effectively lock the previous curve. Adjusting curves The alternative name for the two control points in Bézier curves is control handles. As the name implies, you can grab and manipulate control handles. By changing the position of the control handle, you can adjust the shape of the curve. Here are a few guidelines for moving control handles: ✦ The closer the control handle is to its associated curve point, the flatter the curve. ✦ Alternatively, the further away the control handle is from its curve point, the steeper the curve. ✦ If a control handle is on top of its curve point, the curve becomes a straight line, and the curve point becomes a corner point. ✦ You can convert straight lines into curves by pulling the control handle away from the corner point. ✦ After you’ve drawn a curve point, you can retract one of the control handles so that the next segment can be either a curve or a straight line. 083662-1 ch05.F 8/2/02 2:25 PM Page 165 166 Part II ✦ Mastering the Tools All the manipulations involving control handles can be accomplished after the fact using the Subselection tool; you can find a discussion of how to use this point adjustment device in Chapter 9. However, you can perform a few of these opera- tions while drawing with the Pen. The two key operations involve adding and removing a control handle. Adding a control handle to a corner point To add a control handle to a corner point, follow these steps: 1. Use the Pen to draw a path with a curve point. Two control points are visible. 2. Move the pointer over the last curve point set. Figure 5-19: By retracting one control handle, you can continue the curve in the same direction. 3. Click once. The curve point is converted into a corner point, and one control handle is retracted. 4. To draw a straight line from the corner point, move your pointer away and click once. 5. To draw a curve, move your pointer away and click and drag out the control handles. This technique is very handy for drawing a series of scallop or wave shapes where the curves all go in the same direction. 083662-1 ch05.F 8/2/02 2:25 PM Page 166 167 Chapter 5 ✦ Creating Vector Objects Extending a control handle from a corner point The opposite of retracting a control handle is extending one. To extend a control handle from a corner point, you need to enlist the aid of a couple of keyboard modi- fiers: Ctrl+Alt (Command+Option) to be specific. When you extend a control handle while drawing, you are, in effect, changing your mind. Instead of proceeding with the straight line that you first indicated you wanted with the corner point, you can now draw a curve. To extend a control handle from a corner point while drawing, follow these steps: 1. Draw a straight line segment with the Pen. 2. Move the pointer over the last point set. 3. Press Ctrl+Alt (Command+Option) and then click and drag a control handle out from the point. When you press the keyboard modifiers, the pointer changes to a white arrowhead. 4. Release the mouse button when you’ve positioned the control handle where desired. 5. Move the pointer to the position for the curve to end. 6. Continue drawing or double-click the final point to complete the shape. In this technique, it’s important that you press the keyboard modifiers before you drag the control handle. If you begin dragging before pressing the special keys, you move the anchor point instead of extending a control handle. This is actually a fea- ture that enables you to move a previously set point by starting the drag and then pressing the Ctrl (Command) key; the Alt (Option) key has no effect on this sequence. Bézier curves are not easy to master and you may find yourself getting frustrated. Stick with them as, once you have them tamed, they open a whole new creative door. Using the keyboard modifiers Bézier curves in Fireworks use a fair number of keyboard modifiers to achieve vari- ous effects. While these special keys are explained throughout this section in con- text, it is useful to put them all in one place (see Table 5-1) for easy reference. Note 083662-1 ch05.F 8/2/02 2:25 PM Page 167 168 Part II ✦ Mastering the Tools There’s a lot more to manipulating Bézier curves and other Fireworks objects, as you find out in Chapter 9. Table 5-1 Bézier Curves Keyboard Modifiers Windows Keys Macintosh Keys Description Shift Shift Constrains the straight line or control handle to a 45-degree angle Ctrl Command Moves a set curve or corner point or a control handle to a new position Ctrl and double-click Command and double-click Completes an open path without adding another point Ctrl+Alt Command+Option Extends a control handle from a corner point Summary I once had to indoctrinate a corporate design team into “The Fireworks Way” in a two-day training session. When it came to vector objects, I described them as being the “skeleton” of Fireworks graphics. After the vector object is completed — and the body of fills and clothing of strokes have been applied — you won’t be able to see its underlying structure, but it is the basis of the image. As you begin to build vector objects, keep these points in mind: ✦ Paths are the most basic element of Fireworks’ vector objects. A path must be stroked and/or filled before it becomes visible in your image. ✦ The geometric shape tools — Rectangle, Rounded Rectangle, Ellipse, and Polygon — can also create squares, circles, and stars. ✦ Spacebar Move enables you to move geometric shapes while drawing by sim- ply holding the spacebar and repositioning your shape. Spacebar Move works while drawing Rectangles, Rounded Rectangles, Ellipses and Circles, as well as Polygons and Stars. ✦ The Line tool creates one straight line at a time. Cross- Reference 083662-1 ch05.F 8/2/02 2:25 PM Page 168 169 Chapter 5 ✦ Creating Vector Objects ✦ The Vector Path tool enables you to draw on the Fireworks canvas without restriction. ✦ The Pen draws Bézier curves, which use a series of corner and curve points in conjunction with control points and handles to make smooth curves and con- nected straight lines. In the next chapter, you learn about the other side of Fireworks graphics: bitmap objects. ✦✦✦ 083662-1 ch05.F 8/2/02 2:25 PM Page 169 083662-1 ch05.F 8/2/02 2:25 PM Page 170 Working with Bitmaps V ector objects are the backbone of Fireworks, and are perfectly suited for the bulk of a Web artist’s work — building navigation bars, drawing shapes and lines, and inserting editable text. These design elements benefit from the precision that vector drawing provides, and are the type of things you’re likely to draw right from scratch in Fireworks. Some kinds of images couldn’t possibly benefit from a vector- based substructure, though. Photographic images that started life in a digital camera or scanner are pure bitmap, through and through. Think of product photographs for an online store, or digitized paintings for an online art gallery; incorpo- rating them into a Web page won’t involve drawing. Instead you cut and paste pixel selections and manipulate alpha masks and blending modes. This chapter begins with a discussion of how Fireworks generally handles bitmaps. We delve into an exploration of the various tools available for bitmap editing. And, finally, this chapter covers how to change a vector object into a bitmap object and the benefits you might realize by doing so. Understanding Bitmaps in Fireworks Here’s a quick refresher course on bitmap images — just in case you’re coming from the world of vector graphics and can’t tell a pixel from a pig in a poke. The word pixel is derived from the term picture element (pix for picture and el for element). A pixel is the smallest component part of a bitmap image. In the early days of computer graphics, the color of each pixel was stored in 1 bit of memory, which was 6 6 CHAPTER ✦✦✦✦ In This Chapter Getting to know bitmaps Opening bitmaps in Fireworks Resizing bitmaps Selecting bitmap elements Defining a drawing area Working with bitmap tools ✦✦✦✦ 093662-1 ch06.F 8/2/02 2:25 PM Page 171 172 Part II ✦ Mastering the Tools either on for white or off for black. Map these bits along an x and y axis and you can create an image out of them. Editing a bitmap basically involves adding or removing pixels, or changing their colors. Even when you erase part of an image, you’re just setting the color of those excess pixels to your chosen background color (or to “transparent” so that they show another image underneath) so that they appear to have been erased. The best way to describe the difference between a bitmap image (also called a raster graphic) and a vector object, is to ask you to think of a line, 100-pixels long and 1-pixel wide. With vector graphics, all you need to make this line visible is two points and a stroke in between. With a bitmap, you need exactly 100 pixels. To move one end of the vector version of this line up a notch, you just need to move one of the endpoints. With pixel-based images, however, you have to erase all the pixels in the line and redraw them in another location. Examining bitmap preferences The two Bitmap options under the Editing category of the Preferences can prove useful. ✦ Turn Off Hide Edges: Turns off the View ➪ Hide Edges command when you select vector or bitmap objects. This is convenient to make your selection easy to find, but if you really think edges are a visual nuisance, uncheck this preference. Turn Off Hide Edges takes effect immediately upon exiting the Preferences. ✦ Display Striped Border: Tells Fireworks to draw a striped “barber-pole” bor- der around the canvas when you’re working on a bitmap object. Changes to this preference take effect immediately upon exiting the Preferences. Opening existing bitmaps I’m sure you’ve heard the expression, “Success is 1 percent inspiration and 99 per- cent perspiration.” In the Internet graphics field, the formula is a bit different: “Web design is 20 percent creation and 80 percent modification.” Of course, this is just my rough estimate — but it definitely feels as if I spend most of my day revising an image already created by me or someone else. Fireworks offers multiple ways to open existing bitmaps — and it supports a wide range of file formats as well. Increasingly, more of your work will be stored in Fireworks’ PNG-based format, which enables both vector and bitmap editing. However, many times you find yourself working with a bitmap file created in another application such as Photoshop. 093662-1 ch06.F 8/2/02 2:25 PM Page 172 173 Chapter 6 ✦ Working with Bitmaps As with many computer programs, Fireworks loads images and other files through the File ➪ Open command. This command displays the Open dialog box (see Figure 6-1), which previews various file types. You can select multiple files by press- ing Shift or Ctrl (Command) as you click on filenames. The Open dialog box also has a very useful option, Open as Animation, which creates an animation from multiple files by distributing them across the frames of one document. Make sure you select more than one file in order to enable the Open as Animation checkbox. For detailed information on how to use the Open command to load any type of file, see Chapter 14. Figure 6-1: Opening an image sequence as an animation using Fireworks’ Open as Animation option Scaling bitmaps Changing the size of a pixel-based bitmap image is something probably taken for granted, but it’s actually a pretty complex task, requiring Fireworks to literally create a new image — with the newly specified dimensions — by analyzing the old image. Fireworks examines groups of pixels and basically makes a best guess about how to represent them, with either more or fewer pixels. Coming up with intermedi- ate values based on analysis of known values is called interpolation. Cross- Reference 093662-1 ch06.F 8/2/02 2:25 PM Page 173 174 Part II ✦ Mastering the Tools Fireworks offers you four interpolation methods (see Figure 6-2): ✦ Bicubic: With bicubic interpolation, Fireworks averages every pixel with all eight pixels surrounding it — above, below, left, right, and all four corners. This scaling option gives the sharpest results under the most conditions and is recommended for most graphics. ✦ Bilinear: Bilinear interpolation is similar to bicubic, but only uses four neigh- boring pixels (above, below, left, and right), instead of eight. ✦ Nearest Neighbor: The Nearest Neighbor algorithm causes Fireworks to copy neighboring pixels whenever a new pixel must be interpolated. Consequently, the Nearest Neighbor scaling option creates very pixelated, stairstep-like images. This is the fastest interpolation method available. ✦ Soft: Soft interpolation offers a smoothing blur to the scaled-down images. The Soft Interpolation scaling option is a good choice if your images are producing unwanted artifacts using the other scaling options. Figure 6-2: Fireworks offers four scaling options to suit different kinds of images. Although I tend to use Bicubic Interpolation most of the time, I do turn to Bilinear and Soft Interpolation in some cases, usually when small text is involved. I haven’t found much use for the blockiness produced by the Nearest Neighbor scaling option. Experimenting with the different interpolation methods is the best way to become familiar with the results. Interpolation methods option list 093662-1 ch06.F 8/2/02 2:25 PM Page 174 [...]... shortcut by pressing R four times 3 Tweak the settings in the Property inspector until they’re set up the way you want them 4 Click and drag over the pixels you want to darken Fireworks uses the settings in the Property inspector to darken the pixels in your image 5 Repeat steps 3 and 4 for any other areas you wish to darken 0 936 62-1 ch06.F 8/2/02 2:25 PM Page 1 93 Chapter 6 ✦ Working with Bitmaps... control what Fireworks defines as a “similar color” through the Tolerance setting on the Property inspector The Tolerance scale goes from 0 to 255; lower tolerance values select fewer colors and higher values select more 0 936 62-1 ch06.F 8/2/02 2:25 PM Page 1 83 Chapter 6 ✦ Working with Bitmaps Here’s how the Magic Wand and the Tolerance work By default, the initial Tolerance is set to 32 The Tolerance... choosing the button from the flyout menu Alternatively, you can press the keyboard shortcut, M, twice 3 Click where you want one corner of your selection to begin, and drag to the opposite corner Fireworks displays a moving dashed line, called a marquee or, more familiarly, “marching ants” (see Figure 6-4) 177 0 936 62-1 ch06.F 178 8/2/02 2:25 PM Page 178 Part II ✦ Mastering the Tools Tip You can refine the... shown in Figure 6-5, by selecting Window ➪ Properties, or by pressing Ctrl+F3 (Command+F3) The Marquee properties affect two separate items: Style and Edge Figure 6-5: Use the Property inspector to set the Marquee to a predetermined size or ratio; you can also choose a type of edge for the selection: Hard, Anti-Alias, or Feather 0 936 62-1 ch06.F 8/2/02 2:25 PM Page 179 Chapter 6 ✦ Working with Bitmaps Discovering... 10-pixel increments Inserting an empty bitmap So far you’ve seen how Fireworks can open a wide range of file formats for bitmap editing But what if you want to create a bitmap image directly from within Fireworks? Whereas vectors are far more editable than bitmaps, occasionally only a bitmap will do For those times, you can use a Fireworks feature that creates an editable bitmap area by choosing Edit... the Tools panel; alternatively, you can use the keyboard shortcut by pressing R 3 Tweak the settings in the Property inspector until they’re set up the way you want them 4 Click and drag over the pixels you want to blur Fireworks uses the settings in the Property inspector to blur the pixels in your image 5 Repeat steps 3 and 4 for any other areas you wish to blur Use the sharpen tool to bring clarity... Pointer to quickly and easily reposition your bitmaps by clicking and dragging anywhere within the bitmap object, as shown in Figure 6 -3 Just make sure that there are no active pixel selections Figure 6 -3: You can use the Pointer to move whole bitmap objects around the canvas 0 936 62-1 ch06.F 8/2/02 2:25 PM Page 177 Chapter 6 ✦ Working with Bitmaps Tip You can also use the Pointer to resize a bitmap object... panel; alternatively, you can use the keyboard shortcut by pressing R five times 3 Tweak the settings in the Property inspector until they’re set up the way you want them 4 Click and drag over the pixels you want to smudge Fireworks uses the settings in the Property inspector to smudge the pixels in your image 5 Repeat steps 3 and 4 for any other areas you wish to smudge You can accomplish an interesting... shortcut, L 2 With the Lasso, click at the starting point for your selection, and drag the mouse around the desired area, releasing the mouse when you’re done 181 0 936 62-1 ch06.F 182 8/2/02 2:25 PM Page 182 Part II ✦ Mastering the Tools 3 To use the Polygon Lasso, select and hold the Lasso tool until the flyout appears, and then choose the Polygon Lasso, or press the keyboard shortcut, L, twice 4 With... to the next point on the outline, surrounding the desired area and click again Fireworks connects each point that you set down with a straight line 5 Repeat Step 4 until you’ve outlined the entire area, and then close the selection by moving your pointer over the starting point and clicking once or double-clicking to permit Fireworks to connect the first and final points As a matter of personal preference, . side of Fireworks graphics: bitmap objects. ✦✦✦ 0 836 62-1 ch05.F 8/2/02 2:25 PM Page 169 0 836 62-1 ch05.F 8/2/02 2:25 PM Page 170 Working with Bitmaps V ector objects are the backbone of Fireworks, . interpolation. Cross- Reference 0 936 62-1 ch06.F 8/2/02 2:25 PM Page 1 73 174 Part II ✦ Mastering the Tools Fireworks offers you four interpolation methods (see Figure 6-2): ✦ Bicubic: With bicubic interpolation, Fireworks. in another application such as Photoshop. 0 936 62-1 ch06.F 8/2/02 2:25 PM Page 172 1 73 Chapter 6 ✦ Working with Bitmaps As with many computer programs, Fireworks loads images and other files through the