This chapter is from the book
This chapter is from the book
This chapter is from the book
Tools Unique to Fireworks
Many of the tools used in Fireworks are similar to tools found in other Studio programs. 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 3.8), which enables you to select objects beneath or stacked behind other objects. You can access the tool by clicking and holding on the Pointer tool and then choosing Select Behind tool.
)
Figure 3.8 The Select Behind tool enables you to select objects placed behind other objects.
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 3.9) to move one of the object handles.
Export Area
The Export Area tool (see Figure 3.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 3.9 The Distort tool enables you to distort and rotate objects.
)
Figure 3.10 The Export Area tool enables you to define an area for export.
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 3.11). To deselect the area choose Select, Deselect [Cmd-Shift-A] (Ctrl+D) from the upper menu bar or select any area outside the marquee.
When you use any of the Marquee or Lasso tools, as well as the Magic Wand tool, the Property inspector has an Edge menu that gives three Edge options for the tool when you copy and paste the selection:
- 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 shows a Style menu that gives three selection 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.
)
Figure 3.11 The Marquee tool defines a bitmap area selection.
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 3.12).
)
Figure 3.12 The Lasso tool is used to select pixels often found in complex shapes.
Polygon Lasso
The Polygon Lasso tool enables you to draw a polygonal selection area with numerous points (see Figure 3.13). This is a smarter choice than the Lasso tool if you need to select areas with straight lines.
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 3.14). Using the Property inspector, you can control the Tolerance (0–255) and Edge (Hard, Anti-Alias, or Feather).
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 are selected.
)
Figure 3.13 The Polygon Lasso tool is used to select a polygonal pixel area.
)
Figure 3.14 The Magic Wand tool is used to select pixels that are similar in color.
Brush
Like its real-world counterpart, the Brush tool (see Figure 3.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 3.15 The Brush tool is used like an artist’s brush to apply colored pixels to your digital canvas.
The power of the Brush tool can be utilized when you use the Property inspector (see Figure 3.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, you can use more than 50 types of brush strokes.
)
Figure 3.16 The Property inspector gives you incredible control over the Brush tool’s properties.
Pencil
The Pencil tool is basically a single-pixel version of the Brush tool. The Pencil tool is constrained to be a 1-pixel brush (see Figure 3.17). Using the Property inspector, you can control the Pencil tool’s color, anti-alias, and transparency.
)
Figure 3.17 The Pencil tool is a 1-pixel brush.
Eraser
The Eraser tool (see Figure 3.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.
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 3.19) creates the effect of blurring pixels, giving a soft or out-of-focus effect. The Property inspector enables you to control the size, shape, edge, and intensity of the blur.
)
Figure 3.18 The Eraser tool removes pixels from an image.
)
Figure 3.19 The Blur tool is used to blur sections of an image or the entire image.
Sharpen
The Sharpen tool (see Figure 3.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 3.20 The Sharpen tool increases contrast between pixels.
Dodge
A throwback to the darkroom days of photography, the Dodge tool is used to lighten pixels on the image (see Figure 3.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.
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 3.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.
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.
)
Figure 3.21 The Dodge tool was used to turn the seat from black to white by lightening the pixels.
)
Figure 3.22 The paint was darkened from yellow to brown using the Burn tool.
Smudge
The Smudge tool (see Figure 3.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 enables you to set the size, shape, edge, and pressure of the stroke. It also enables 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 3.23 The Smudge tool smears colors, allowing the motorcycle to look like it’s already moving.
Rubber Stamp
The Rubber Stamp tool takes pixels or objects from one area of your canvas and paints them in another. This replication process from one area to another is called "cloning." 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 with 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 3.24).
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 3.25) lets you select one color and paint over it with a different color. To use the Replace Color tool, choose whether you want to select replacement colors from the swatches or from the image itself using the From drop-down. If you choose to select from the swatches, 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 3.24 The Rubber Stamp tool was used to clone the SuperHawk logo and place a duplicate below the bike.
)
Figure 3.25 The Replace Color tool replaces the yellow in the gas tank with red.
Next, 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 by dragging 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 3.26). The functionality of the Red-Eye Removal tool has been enhanced in Fireworks 8 to enable you to more accurately identify and remedy red-eye in your photographs.
)
Figure 3.26 Get the red out with the Red-Eye Removal tool.
Select the Red-Eye Removal tool and drag a selection marquee across or click on 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.
Vector Tools
Although working with photographs and imported images revolves around bitmaps, Fireworks also has some powerful vector tools that enable you to unleash the illustrator within. In addition, you can compress and export both photographs and vectors in formats that are optimized for the Web. This section looks at Fireworks’s vector tools and what they can do.
Line
The Line tool (see Figure 3.27) 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 or Alt key while dragging to constrain the line to 45° increments. In the Property inspector you can adjust the stroke color, width, and line type, along with the selected line’s transparency, overall size (width and height), and position (x and y fields).
)
Figure 3.27 A small sampling of some of the lines you can create with the Line tool.
Pen Tool
The Pen tool is used to draw complex shape and vector paths, similar in nature to the complex illustration tools offered by Macromedia’s FreeHand illustration program. To draw straight lines, create plot points by clicking the pen tool anywhere on the canvas. It’s as simple as playing connect-the-dots, as shown in Figure 3.28. 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 3.28 The Pen tool can draw lines after you plot a series of points.
To draw an open path, plot the points until the path is complete and then double-click the final point or select any tool in the toolbar. To draw a closed path, create 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 mouse button down to position the control handles as you draw. While drawing curves is easy, drawing curves that actually represent what you had in your mind’s eye is usually not (see Figure 3.29). Keep in mind that the farther you drag the mouse, the greater the effect on the curve. One way to practice drawing curves is by tracing existing images or other rounded objects to get the feeling for how curves are created.
){kind=link}
After an object has been created with the Pen tool, you can easily remove the points that define its shape or add additional points to modify its shape. To remove a plot point, click on it and it is removed from the path. Remove curved points by clicking and dragging in the opposite direction of the curve. Add new plot points by clicking anywhere on the path where a plot point doesn’t already exist. If you want to edit the location of existing plot points, choose the subselection tool and you can drag the plot point to a new location.
Figure 3.29 The Pen tool can be used to draw curved lines as well.
As you can see, the Pen tool offers many of the illustration features that are included in more complex illustration applications such as FreeHand or Illustrator. Although the Pen tool certainly can’t compete with these applications for full-blown illustration, it does provide some of the basic functionality that enables you to illustrate within Fireworks without having to rely on one of these more complex applications.
Vector Path
If you are interested in using Fireworks to create basic illustrations, the Vector Path tool (see Figure 3.30) is a great place to start. The Vector Path tool is the vector version of the Pencil tool, and it enables you to do freeform illustration. 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. You can always come back and edit the shape later with the Sub-selection tool.
){kind=link}
Use the Property inspector to control your line characteristics.
Redraw Path
The Redraw Path tool is another drawing tool that enables you to modify an existing path either by extending the path on either or both ends or by changing its existing structure. Using this tool enables you to extend or change any segment of the path while retaining the path’s stroke, fill, and effect characteristics (see Figure 3.31). Basically, it gives you a quick, easy tool to make adjustments to any path on your canvas without having to redraw the path with the Pen tool.
){kind=link}
Figure 3.30 The Vector Path tool is the freehand vector drawing tool.
Figure 3.31 The Redraw Path tool is used to extend a previously drawn line segment.
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 many-sided shapes and stars (see Figure 3.32). 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.
){kind=link}
Figure 3.32 Polygons and stars created with the Polygon tool.
To draw a shape, select the Polygon tool (see Figure 3.33). Then, in the Property inspector, select Polygon or Star from the Shape menu, the number of sides or your new shape, and the angle for the sides. Finally, choose the fill and stroke features for the shape. With these options selected, draw the shape on the canvas.
){kind=link}
Figure 3.33 Polygon tool options are accessed in the Property inspector and enable you to adjust the attributes of the object.
Auto Shapes
A look at the Auto Shapes tools in the toolbar Rectangle menu (see Figure 3.34) reveals a host of 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.
){kind=link}
Figure 3.34 Auto Shapes simplifies the process of creating complex shapes by giving you "canned" shapes that can be modified.
Select an Auto Shape from the Shape pop-up menu in the toolbar and click and drag to draw your shape. Use the Property inspector, shown in Figure 3.35, to modify the width, height, position on the stage, fill, and stroke properties. Use the Auto Shape Properties panel to the right to set specific properties for the selected Auto Shape.
){kind=link}
Figure 3.35 The Property inspector enables you to modify the various attributes of your shape.
Fireworks comes with the following Auto Shapes:
- Arrow—Draws simple 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 in flowcharts.
- Doughnut—Draws filled ring shapes.
- L-Shape—Draws corner shapes with right angles.
- Pie—Draws pie charts.
- Rounded Rectangle—Draws rectangles with rounded corners.
- Smart Polygon—Draws equilateral polygons with 3 to 25 sides.
- Spiral—Draws open spirals.
- Star—Draws stars with any number of points from 3 to 7.
The Auto Shapes tab in the Assets panel (see Figure 3.36) also lets you create your own shapes, as well as use shapes from third-party developers.
){kind=link}
Figure 3.36 Shapes in the Shapes tab in the Assets panel that are shipped with Fireworks 8.
Freeform
The Freeform tool is one of the more fun tools to play with in Fireworks. This tool enables you to push and pull on various objects to change their curvature. For instance, as shown in Figure 3.37, you can push a segment of a straight line with the tool to create a curved shape. The size and pressure exerted by the tool can be adjusted with the Property inspector.
){kind=link}
Figure 3.37 The Freeform tool enables you to push or pull a line segment to create a curve.
Reshape Area Tool
The Reshape Area tool (see Figure 3.38) is a nifty feature that enables you to stretch and mold paths. To use the tool, just select any path and then select the Reshape Area tool. As you roll your cursor over the path, you can see the various handles that are available for each object. Just click and drag any of the handles and you reshape the path as you drag.
){kind=link}
Path Scrubber—Additive and Subtractive
Use the Path Scrubber tools to change the appearance of a path with varying pressure applied to a pressure-sensitive tablet or changing 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 in the Property inspector (see Figure 3.39). You can also specify how much pressure and speed affects these properties.
){kind=link}
Figure 3.38 Edit and reshape your vector paths with the Reshape Area tool.
Figure 3.39 Control the pressure and speed of the Path Scrubber tools in the Property inspector.
Knife Tool
As indicated by the name, the Knife tool is used to cut objects apart. Select an object on the canvas, drag the knife across the object, and the plot points are created showing the path that was cut. You can then use the Pointer tool to drag the objects to different locations on the canvas as two separate objects.
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
A hotspot is an area of the canvas that is intended to have user interaction. In Fireworks, this feature comes into play when you export an image as an HTML file and the hotspot becomes an area that provides a function (such as a hyperlink) or changes (such as rollover buttons) when the user rolls the mouse over the area or clicks on it. The Rectangle, Circle, and Polygon Hotspot tools (see Figure 3.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 the Alt or Option 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.
){kind=link}
Figure 3.40 Use the Polygon Hotspot tool to create an odd-shaped image map.
The Polygon Hotspot tool draws a hotspot by connecting a series of points; it’s similar to the Pen tool, but without the capability to create curved points.
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 3.41).
){kind=link}
Figure 3.41 Modify the hotspot or link settings in the Property inspector.
Slice and Polygon Slice
A slice is a place in the larger image where you want to create a smaller section that operates differently when the image is exported. Slices are usually areas where you want to create behaviors such as rollover effects or just want to have a larger image divided up into smaller portions.
To create a slice, select the Slice tool and drag to draw the slice object (see Figure 3.42). The slice object appears on the Web Layer, and the slice guides appear in the document.
){kind=link}
As with a hotspot, you can use the Property inspector to add a link URL, Alt tag, and target, as well as set a default export compression for each individual slice. This is convenient for those times when you have a top banner for a site that needs some sections to be exported as JPEGs (logo graphics with gradients) and others as GIFs (text navigation).
The options you have for adding behaviors to both hotspots and slices in Fireworks are covered when the Behavior panel is discussed later in this chapter.
Figure 3.42 Create an image slice with the Slice tool or Polygon Slice tool.
Use the Polygon Slice tool to create a slice by connecting a series of points, similar to the Pen tool.
){kind=link}
Figure 3.43 Hide or show image slices by using the Hide or Show Slices buttons.