Tools Unique to Fireworks

     

Many of the tools used in Fireworks are similar to tools found in other Studio MX programs, particularly FreeHand. For instance, there is little variation in how the selection and drawing tools work between the programs. There are, however, a few "administrative" tools specific to Fireworks, as well as some robust image modification tools we'll discuss in the following sections.

Select Tools Group

As the name indicates, the Select tools are used to select objects, as well as reposition and resize assets.

Select Behind

Unique to Fireworks is the Select Behind tool (see Figure 25.8), which enables you to select objects beneath or stacked behind other objects.

Figure 25.8. The Select Behind tool enables you to select objects placed behind other objects.

graphics/25fig08.jpg


Distort

The Distort tool enables the user to distort objects by arbitrarily resizing points and sides, as well as by rotating them. Select the object you want to modify, then use the Distort tool (see Figure 25.9) to move one of the object handles.

Figure 25.9. The Distort tool enables you to distort and rotate objects.
graphics/25fig09.jpg

Export Area

The Export Area tool (see Figure 25.10) is used to define an area on the canvas for export. Select the tool and click and drag to define the export area. Release the mouse button and press the Enter key. The Export Preview dialog box appears, enabling you to control the export settings.

Figure 25.10. The Export Area tool enables you to define an area for export.
graphics/25fig10.jpg

For more information on exporting images, see Chapter 27, "Optimizing and Exporting Graphics and Web Pages" page 755 .


Bitmap Tools

The Bitmap group contains 19 tools that are used to modify bitmap images.

Marquee

The Marquee tool, or " marching ants ," is used to define a rectangular area of pixels. Select the Marquee tool and click and drag to create a rectangular area that you can modify (see Figure 25.11). After you've released the mouse button, a new bitmap layer is created. To deselect the area, use Select, Deselect.

Figure 25.11. The Marquee tool defines a bitmap area where a new fill was applied.
graphics/25fig11.jpg

When you use any of the Marquee or Lasso tools, as well as the Magic Wand tool, the Property inspector displays three Edge options for the tool:

  • Hard ” Creates a selection with a defined edge.

  • Anti-alias ” Reduces jagged edges in the selection.

  • Feather ” Softens the edge of the selection.

When you choose the Marquee or Oval Marquee tool, the Property inspector also displays three style options:

  • Normal ” Creates a marquee in which the height and width are independent of each other.

  • Fixed Ratio ” Sets the height and width to a defined ratio.

  • Fixed Size ” Constrains the height and width to a defined dimension.

Oval Marquee

The Oval Marquee tool is identical to the Marquee tool except that it defines an elliptical area of pixels.

Lasso

The Lasso tool enables you to draw a freeform selection area. This is handy if you are selecting pixels in complex shapes (see Figure 25.12).

Figure 25.12. The Lasso tool is used to select pixels often found in complex shapes.
graphics/25fig12.jpg

Polygon Lasso

The Polygon Lasso tool enables you to draw a polygonal selection area with numerous points (see Figure 25.13). This is better to use than the Lasso tool if you need to select areas with straight lines.

Figure 25.13. The Polygon Lasso tool is used to select a polygonal pixel area.
graphics/25fig13.jpg

Magic Wand

The Magic Wand tool is probably one of the most used tools in image editing. Using this tool, you can select contiguous pixels of a similar color (see Figure 25.14). Using the Property inspector, you can control the Tolerance (0 “255) and Edge (Hard, Anti-Alias, or Feather).

Figure 25.14. The Magic Wand tool is used to select pixels that are similar in color.
graphics/25fig14.jpg

Adjusting the tolerance setting controls the tonal range of colors that are selected when you click a pixel with the Magic Wand. If you enter 0 and click a pixel, only adjacent pixels of exactly the same tone are selected. Conversely, if you enter 255, all colors in the object will be selected.

Brush

Like its real-world counterpart , the Brush tool (see Figure 25.15) is used to apply paint to a canvas. Rather than applying acrylic , oil, or watercolor paint, the Fireworks Brush tool applies pixels with a variety of settings.

Figure 25.15. The Brush tool is used like an artist's brush to apply colored pixels to your digital canvas.
graphics/25fig15.jpg

The power of the Brush tool can be utilized when you use the Property inspector (see Figure 25.16), the Stroke Options pop-up menu, and the Edit Stroke dialog box to add incredible control over every aspect of the brush. You adjust pixel color, brush size, edge effect, brush shape, texture, and transparency. In fact, there are more than 50 types of brush strokes you can use.

Figure 25.16. The Property inspector gives you incredible control over the Brush tool's properties.
graphics/25fig16.jpg

Pencil

The Pencil tool is a less adept version of the Brush tool. The Pencil tool is constrained to be a 1-pixel brush (see Figure 25.17). Using the Property inspector, you can control the Pencil tool's color, anti-alias, and transparency.

Figure 25.17. The Pencil tool is a 1-pixel brush.
graphics/25fig17.jpg

Eraser

The Eraser tool (see Figure 25.18) is used to remove pixels from an image. Think of it as the anti-Brush tool. Using the Property inspector, you can control the Eraser tool's size, edge, shape, and transparency.

Figure 25.18. The Eraser tool removes pixels from an image.
graphics/25fig18.jpg

The Eraser tool, however, is not a universal eraser. Note that it is a bitmap tool and erases only pixels. It does not erase vector graphics such as shapes you create with the vector tools. This nuance has driven many to near insanity until they realized they were trying to use the wrong tool for the job.

Blur

The Blur tool (see Figure 25.19) creates the effect of blurring pixels, much like a soft or out-of-focus effect. The Property inspector enables you to control the size, shape, edge, and intensity of the blur.

Figure 25.19. The Blur tool is being used to blur the fur on the puppy 's ear.
graphics/25fig19.jpg

Sharpen

The Sharpen tool (see Figure 25.20) increases the contrast between pixels and is useful for repairing out-of-focus images. The Property inspector enables you to control the size, shape, edge, and intensity of the effect.

Figure 25.20. The Sharpen tool increases contrast between pixels.
graphics/25fig20.jpg

Dodge

A throwback to the darkroom days of photography, the Dodge tool is used to lighten pixels on the image (see Figure 25.21). Dodging areas of an image is useful to bring out more detail in darker pixels. The Property inspector enables you to control the size, edge, shape, range, and exposure of the dodge. You can apply the Dodge tool to three tonal ranges:

  • Shadows ” Change the dark portions of the image.

  • Highlights ” Change the light portions of the image.

  • Midtones ” Change the middle range of the image.

Figure 25.21. The Dodge tool lightens pixels.
graphics/25fig21.jpg

The exposure ranges from 0% to 100%. Specify a lower percentage value for a lessened effect, and a higher percentage for a stronger effect.

Burn

Another darkroom tool brought to the digital age is the Burn tool (see Figure 25.22). The Burn tool is used to darken pixels in the image. As with the Dodge tool, the Property inspector enables you to control the size, edge, shape, range, and exposure of the burn.

Figure 25.22. The Burn tool darkens pixels.
graphics/25fig22.jpg

Hold down Alt (Windows) or Option (Macintosh) as you drag the tool to switch back and forth between the Burn tool and the Dodge tool.

Smudge

The Smudge tool (see Figure 25.23) smears and displaces images. Visually, the effect is similar to that of the Blur tool. However, think of taking your finger and rubbing the wet ink on your freshly printed image. That's the Smudge tool. The Property inspector allows you to set the size, shape, edge, and pressure of the stroke. It also allows you to use a specified color at the beginning of each smudge stroke. If the smudge color is checked, the color under the tool pointer is used. If the Use Entire Document check box is selected, the tool uses color data from all objects on all layers to smudge the image.

Figure 25.23. The Smudge tool smears colors and allows this dog to go from no dreams to sweet dreams.
graphics/25fig23.jpg

Rubber Stamp

The Rubber Stamp tool takes pixels from one area of your image and paints them in another. Select the Rubber Stamp tool and click the area you want to clone. The sampling pointer turns into crosshairs. Move to a different part of the image and drag the pointer. You will now see two pointers. The first one is the source and the second is the Rubber Stamp. As you drag the second pointer, pixels beneath the first pointer are copied and applied to the area beneath the second (see Figure 25.24).

Figure 25.24. The Rubber Stamp tool clones pixels and can be used to clone objects like this row boat.
graphics/25fig24.jpg

Use the Property inspector to control the Rubber Stamp tool's size, edge, and transparency. When Source Aligned is selected, the sampling pointer moves vertically and horizontally in alignment with the second. When Source Aligned is deselected, the sample area is fixed, regardless of where the second pointer is moved. If the Use Entire Document check box is selected, the tool samples from all objects on all layers. When this option is deselected, the Rubber Stamp tool samples from the active object only.

Replace Color

The Replace Color tool (see Figure 25.25) lets you select one color and paint over it with a different color. To use the Replace Color tool, click the Change color well in the Property inspector to select the color, and choose a color from the pop-up menu. You can also click in the image to choose the color you want to replace.

Figure 25.25. The Replace Color tool replaces specific colors in an image.
graphics/25fig25.jpg

Click the To color well in the Property inspector to select the replacement color, then choose a color from the pop-up menu. You can also select a color from the image. Drag the tool over the color you want to replace.

The Property inspector enables you to control brush size and shape, as well as color tolerance and strength. Select Colorize to replace the Change color with the To color. Deselect Colorize to tint the Change color with the To color, leaving some of the Change color intact.

Red-Eye Removal

The Red-Eye Removal tool is used to correct the red-eye effect in photographs. This tool is essentially a stripped down version of the Replace Color tool in that it paints only red areas of an image and replaces the red pixels with grays and blacks (see Figure 25.26).

Figure 25.26. Get the red out with the Red-Eye Removal tool.
graphics/25fig26.gif

Select the Red-Eye Removal tool and drag or click the red pupils in the photograph to replace the red pixels. Use the Property inspector to set stroke attributes, brush tip size, brush tip shape, and tolerance (0 replaces only red; 255 replaces all hues that contain red). Strength sets the darkness of the grays used to replace reddish colors.

Gradient

The Gradient tool works like the Paint Bucket tool, but fills an object with a gradient rather than a solid color. To use the Gradient tool, select the Gradient tool from the Paint Bucket pop-up menu. Before you apply the gradient, you need to set the gradient attributes in the Property inspector (see Figure 25.27).

  • Fill Options ” Enables you to choose a gradient type.

  • Fill Color box (when clicked) ” Displays the Edit Gradient pop-up window, where you can set a variety of color and transparency options.

  • Edge ” Lets you select a hard, anti-aliased, or feathered fill edge. If you choose a feathered edge you can specify the amount of the feathering.

  • Texture ” Provides several textures to choose from, including Grain, Metal, Hatch, Mesh, or Sandpaper.

Figure 25.27. Fireworks MX 2004 provides plenty of gradient options and controls.
graphics/25fig27.jpg

Click and drag the pointer to establish a starting point for the gradient, as well as the direction and length of the gradient.

New in Fireworks MX 2004 is the contour gradient. A contour gradient follows a shape's outline, applying the gradient effect to match the shape itself. Although the effect works best on complex shapes, the examples in Figure 25.28 should give you an idea of what can be done with contour gradients.

Figure 25.28. New in Fireworks MX 2004 is the ability to create contour gradients.

graphics/25fig28.jpg


But wait, there's more.

To edit a gradient, select the object with the gradient. Click the Fill Color box to view the Edit Gradient pop-up window. To add a color swatch, click the area below the gradient color ramp. To add an opacity swatch, click the area above the gradient color ramp.

To remove a color or opacity swatch from the gradient, simply drag the swatch away from the Edit Gradient pop-up window.

You can change the color of a color swatch by clicking the color swatch and choosing a color from the pop-up window.

You can adjust the transparency of an opacity swatch by clicking the opacity swatch and dragging the slider to the percentage of transparency, (0 is transparent and 100 is opaque ) or by entering a numeric value from 0 “100.

When you have finished editing the gradient, press Enter or click outside the Edit Gradient pop-up window. The gradient fill appears in any selected objects.

After the gradient is applied, you can still move, rotate, skew, and change the width of the gradient. When you use the Pointer or Gradient tools to select an object with a gradient fill, a set of handles appears on or near the object. You can drag these handles to adjust the object's fill.

To move the fill within an object, drag the round handle, or click in a new location in the fill with the Gradient tool. To rotate the fill, drag the lines connecting the handles. To adjust the fill width and skew, just drag a square handle.

Vector Tools

Although working with photographs and imported images revolves around bitmaps, Fireworks still has some powerful vector tools that allow you to unleash the illustrator within. This section looks at Fireworks' vector tools and what they can do.

Line

The Line tool (see Figure 25.29) is used to draw straight lines. To draw a straight line, select the Line tool and then click on the canvas and drag to create the line. Hold down the Opt/Alt key while dragging to constrain the line to 45 ° increments . The Property inspector enables you to numerically adjust the width and height of the line, as well as its position on the canvas. You can also control the stroke settings and transparency attributes.

Figure 25.29. A small sampling of some of the lines you can create with the Line tool.
graphics/25fig29.jpg

Pen Tool

The Pen tool is used to draw complex shape and vector paths. You can draw straight lines by clicking plot points. It's as simple as playing connect-the-dots, as shown in Figure 25.30. Select the Pen tool and start clicking on the canvas. When you plot the next point, the previous line segment is deselected, as indicated by a hollow white center plot point. A straight line, representing the path , connects the two points.

Figure 25.30. The Pen tool can draw lines by plotting a series of points.
graphics/25fig30.jpg

To draw an open path, plot the points until the path is complete and then click the Pointer tool or any other tool. To draw a closed path, plot the points until the shape is complete and return to click on the first point again. When you hover over the first point, a hollow circle appears to the right of the Pen tool cursor. Clicking on the first point closes the path.

To draw a curve, press and hold the the mouse button down to position the control handles as you draw. Drawing curves is easy. Drawing curves that actually represent what you had in your mind's eye is not (see Figure 25.31). Practice drawing curves by tracing images or other rounded objects.

Figure 25.31. The brave can use the Pen tool to draw curved lines as well.
graphics/25fig31.jpg

Use the Property inspector to control your line characteristics.

Vector Path

The Vector Path tool is the vector version of the Pencil tool. Points are automatically inserted as you draw. To use the Vector Path tool, select the tool from the Pen pop-up menu and start drawing. Like the Pen tool, the Vector Path tool is easy to play with, but difficult to master.

The drawing in Figure 25.32 shows a quick application of the Vector Path tool and why I'll never be asked to write a book on illustration. Naturally, a graphics tablet would dramatically improve your drawing abilities .

Figure 25.32. The Vector Path tool is the freehand vector drawing tool.
graphics/25fig32.jpg

Use the Property inspector to control your line characteristics.

Redraw Path

The Redraw Path tool is used to extend a segment of a previously drawn path. Using this tool to extend the segment retains the path's stroke, fill, and effect characteristics (see Figure 25.33).

Figure 25.33. The Redraw Path tool is used to extend a previously drawn line segment.
graphics/25fig33.jpg

Select the Redraw Path tool, located in the Pen tool pop-up menu, and move the pointer directly over the path. The pointer changes to the Redraw Path pointer. Drag to extend the path segment and the new portion of the path is highlighted in red. Release the mouse button and you're good to go.

Rectangle

The Rectangle tool is used to draw rectangles and squares. To draw a rectangle, select the Rectangle tool and drag on the canvas to draw. Release the mouse button when you are finished and modify the rectangle's characteristics as needed in the Property inspector. To draw a perfect square, hold down the Shift key as you draw.

Ellipse

The Ellipse tool is used to draw ellipses and circles. To draw an ellipse, select the Ellipse tool from the Rectangle pop-up menu and drag on the canvas to draw. Release the mouse button when you are finished and modify the ellipse's characteristics as needed in the Property inspector. To draw a perfect circle, hold down the Shift key as you draw.

Polygon

The Polygon tool is used to draw polygons and stars (see Figure 25.34). To draw a polygon, select the Polygon tool from the Rectangle pop-up menu and drag on the canvas to draw. Release the mouse button when you are finished and modify the polygon's characteristics as needed in the Property inspector.

Figure 25.34. Polygons and stars created with the Polygon tool.
graphics/25fig34.jpg

The nuisance about this tool is that you can't change the number or angle of sides after you've drawn the polygon or star. To make those changes, you need to do so before you draw the shape. Make sure no other items are selected on the canvas when you select the Polygon tool, or the Polygon tool options will not be displayed in the Property inspector. When you can get the tool options displayed (see Figure 25.35), you can select Polygon or Star for the Shape, the number of Sides, and the Angle for the sides.

Figure 25.35. Polygon tool options are accessed in the Property inspector as long as no item on the canvas is selected.
graphics/25fig35.jpg

Auto Shapes

The Auto Shapes tools are new to Fireworks MX 2004. A look at the Auto Shapes tools (see Figure 25.36) will reveal a slew of new shapes that you can use in your designs. Even better, you can modify these shapes by using the control handles, as well as change their stroke and fill properties. Auto Shapes can also be ungrouped and modified as individual objects.

Figure 25.36. Auto Shapes simplifies the process of creating complex shapes by giving you "canned" shapes that can be modified.

graphics/25fig36.jpg


Select an Auto Shape from the Polygon pop-up menu and click and drag to draw your shape. Use the Property inspector and other vector drawing tools to modify the shape.

Fireworks comes with the following Auto Shapes:

  • Arrow ” Draws simple arrow shapes of any proportions .

  • Bent Arrow ” Draws right-angled arrow shapes of any proportions.

  • Beveled Rectangle ” Draws rectangles with beveled corners.

  • Chamfer Rectangle ” Draws rectangles with corners that are rounded to the inside of the rectangle.

  • Connector Line ” Draws three-segment connector lines like those used flowcharts.

  • Doughnut ” Draws filled ring shapes.

  • L-Shape ” Draws corner shapes with right angles.

  • Pie ” Draws pie charts .

  • Smart Polygon ” Draws equilateral polygons with 3 to 25 sides.

  • Rounded Rectangle ” Draws rectangles with rounded corners.

  • Spiral ” Draws open spirals .

  • Star ” Draws stars with any number of points from 3 to 25.

The Auto Shapes panel (see Figure 25.37) also lets you create your own shapes, as well as use shapes from third-party developers.

Figure 25.37. Shapes in the Auto Shapes panel that are shipped with Fireworks MX 2004.

graphics/25fig37.jpg


You can add new Auto Shapes by using the Fireworks Exchange Web site. To add new Auto Shapes, display the Shapes tab in the Assets panel. Click the Options menu and choose Get More Auto Shapes. Fireworks connects to the Fireworks Exchange Web site (see Figure 25.38). Follow the onscreen instructions to select new Auto Shapes and add them to Fireworks.

Figure 25.38. Add new Auto Shapes from the Fireworks Exchange Web site.
graphics/25fig38.jpg

Freeform

For more information on using the Freeform tool, see Chapter 29, "FreeHand MX Environment and Tools," page 806 .


For more information on using the Reshape Area tool, see Chapter 29, page 808 .


Path Scrubber-Additive & Subtractive

Use the Path Scrubber tools to change the appearance of a path with varying pressure from a pressure-sensitive tablet or speed if you're using a mouse. Path scrubber properties, which include stroke size, angle, ink amount, scatter, hue, lightness, and saturation, can be specified by using the Property inspector (see Figure 25.39). You can also specify how much pressure and speed affects these properties.

Figure 25.39. Control the pressure and speed of the Path Scrubber tools in the Property inspector.

graphics/25fig39.jpg


Web Tools

Fireworks is the Web designer's best friend when it comes to creating graphics for the online medium. Because many Web graphics are used in interactions (links, rollovers, and so on), Fireworks has set aside several dedicated Web objects and tools in the Web category of the Tools panel.

Hotspot

The Rectangle, Circle, and Polygon Hotspot tools (see Figure 25.40) create hotspots, or image maps, specific to their shape. To create a hotspot, simply drag the Hotspot tool to draw a hotspot over an area of the graphic. Hold down Option/Alt key to draw from a center point. You can adjust a hotspot's position while you are drawing. While holding down the mouse button, press and hold down the Spacebar, then drag the hotspot to another location on the canvas. Release the Spacebar to continue drawing the hotspot.

Figure 25.40. Use the Polygon Hotspot tool to create an odd-shaped image map.
graphics/25fig40.jpg

The Polygon Hotspot tool draws a hotspot by connecting a series of points; it's similar to the Pen tool, but without the Bezier handles.

After you've created the hotspot, use the Property inspector to add the link URL, Alt tag, and Target (None, _blank, _self, _parent, _top) (see Figure 25.41).

Figure 25.41. Modify the hotspot or link settings in the Property inspector.
graphics/25fig41.jpg

Slice and Polygon Slice

Sliced Web objects are not really considered images, but HTML code ”even though they represent an image. To create a slice, select the Slice tool and drag to draw the slice object (see Figure 25.42). The slice object appears on the Web Layer, and the slice guides appear in the document.

Figure 25.42. Create an image slice with the Slice tool or Polygon Slice tool.
graphics/25fig42.jpg

Use the Polygon Slice tool to create a slice by connecting a series of points, similar to the Pen tool.

The Property inspector enables you to select an image type for the slice as well as set link properties.

Hide and Show Slices

Use the Hide and Show Slices buttons (see Figure 25.43) to respectively hide or display your slices on the canvas.

Figure 25.43. Hide or show image slices by using the Hide or Show Slices buttons.

graphics/25fig43.jpg




Using Macromedia Studio MX 2004
Special Edition Using Macromedia Studio MX 2004
ISBN: 0789730421
EAN: 2147483647
Year: N/A
Pages: 339

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net