-
macromedia ® ® FIREWORKS 2 Using Fireworks ™ macromedia
-
Licenses and Trademarks Fireworks was created by Macromedia, Inc. © 1999. All rights reserved. Apple, the Apple Logo, Macintosh, Power Macintosh, Mac OS, and LaserWriter are registered trademarks of Apple Computer, Inc. Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries. GIF-LZW licensed under U.S. Patent No. 4,558,302 and foreign counterparts. This software is based in part on the work of the Independent JPEG Group.
-
CONTENTS CHAPTER 1 Getting Your Bearings . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 What’s in this package. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Windows: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
CHAPTER 2 Creating and Editing a Graphic . . . . . . . . . . . . . . . . . .43 Object mode and image edit mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Fireworks drawing and editing tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Editing path objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45 Using path operations to reshape paths . . . .
-
Find and Replace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Finding and replacing text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 Finding and replacing fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77 Finding and Replacing colors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
Working with color palettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Using palettes for drawing and creating. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Using palettes for exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97 Setting the number of colors in the palette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
CHAPTER 4 Web Design Features . . . . . . . . . . . . . . . . . . . . . . . . . .113 Producing web components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Features for web production. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Web objects: The basics of web production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Creating web objects . . . . . . . . . . . . . .
-
Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129 GIF transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129 PNG alpha transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129 Using Fireworks HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
1 CHAPTER 1 Getting Your Bearings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
What’s in this package System requirements The Fireworks package contains: Fireworks runs on either the Windows or Macintosh operating systems. Before you install Fireworks, you need the following equipment: ◆ A CD-ROM containing the Fireworks installer and the sample artwork. ◆ Using Fireworks, the manual you are now reading.
-
Installing and starting Fireworks Before installing Fireworks, make sure your computer meets the system requirements listed in “System requirements” on page 10. Read the ReadMe document on the Fireworks CD-ROM for late-breaking information. To install and start Fireworks on Windows NT 4 or Windows 95 or 98: 1 Insert the Fireworks CD-ROM in your CD-ROM drive. 2 Follow the instructions that appear on screen.
-
Uninstalling Fireworks ◆ Fireworks tutorials, available from the Help menu whenever the Fireworks application is active, contain step-by-step lessons for the most common Fireworks tasks, such as optimizing GIFs and JPEGs, and creating animations, image maps, and rollovers. Use the uninstaller to ensure that all Fireworks files are removed from the computer. To uninstall Fireworks on Windows NT 4, Windows 95, or Windows 98: 1 Choose Start > Settings > Control Panel. 2 Double-click Add/Remove Programs.
-
What’s unique about Fireworks? The premier production tool for creating web graphics, Fireworks has features that can save hours by simplifying the web-graphic creation workflow. Fireworks was created from the ground up specifically for the web. Compatibility with Macromedia Dreamweaver— Export JavaScript rollovers that can be edited and changed in Dreamweaver. Or, export complex graphics as Dreamweaver library objects, easily placing and reusing navigation bars and complex rollovers.
-
Welcome to Fireworks What is Fireworks? Fireworks creates the smallest, highest-quality JPEG and GIF graphics in the fewest number of steps. It is a total solution for creating and producing web graphics. Fireworks simplifies and streamlines the process of making web and screen graphics, while providing the ultimate in flexibility and editability. Fireworks also makes it easy to minimize file size without sacrificing quality, which results in faster web sites and higher satisfaction among web site visitors.
-
Using the document window Fireworks is both a vector graphics and a bitmap graphics application. Vector objects are composed of paths, and bitmap objects are composed of individual pixels. Fireworks combines the organic look of bitmap objects with the flexibility, control, and editability of Bézier paths. Launching Fireworks displays the document window, your interface to the illustration. A Fireworks canvas can be up to 6000 pixels wide by 6000 pixels tall.
-
Toolbox The Toolbox contains 35 tools, some of which are contained in tool groups, as shown. To display a tool group, click and hold any tool with a triangle in the lower-right corner. Use this tool To Activate by pressing Select and drag objects. v or 0 (zero) Select objects behind other objects. v or 0 (zero) Discard or add canvas area. c Export a portion of a document. j Pointer Select Behind Crop Export Area Press and hold a tool to reveal tool groups.
-
Use this tool To Select pixel areas of similar color in image edit mode. Activate by pressing Use this tool w Magic Wand To Activate by pressing Draw brush strokes using Stroke panel settings. b Redraw portions of a selected path. b Resize and rotate objects. q Slant and rotate objects, and change perspective. q Distort and rotate objects. q Pull a path segment or push a path segment using a resizable cursor. f Reshape a selected path within the area of the resizable cursor.
-
Use this tool To Activate by pressing Fill objects with color, gradients, or patterns and adjust fills with Paint Bucket Paint Bucket handles. k Remove or replace portions of image objects and cut paths. e Clone portions of an image object. s Main toolbar (Windows only) Use To Create a new document. New Open an existing document. Eraser Rubber Stamp Open Save the active document. Save Draw URL hotspots in the shape of rectangles or squares. Rectangle Hotspot Import a file.
-
Use To Paste the Clipboard’s contents into the active document. Info panel Dimensions of selected object Options for choosing a color model and document unit of measurement Paste Position of bounding box’s upper-left corner point Open the Object inspector to view properties for the selected object. Object Inspector Cursor position Open the Color Mixer. Color of pixel beneath cursor Color Mixer Open the Stroke panel. Alpha opacity measured in increments from 0 to 255 Stroke Open the Fill panel.
-
Object inspector Use the Object inspector to set characteristics such as opacity, blending mode, and placement of the brush stroke in relation to a path. The Object inspector contains status information for selected objects. The Object inspector operates in one of eight different modes, depending on the object type selected. Use To When selecting Clipping path setting Define how the mask group appears A mask group. Export Settings Assign export Slice objects.
-
Opacity and blending mode in detail Use the Object inspector to set opacity and blending mode. Opacity and blending modes are important in the process of compositing. Compositing is the process of varying the transparency of two or more overlapping objects to create a variety of graphic elements. An opacity setting of 100 renders an object completely opaque. Conversely, an opacity setting of 0 renders an object completely transparent.
-
Swatches panel Use the Options pop-up to add, replace, delete, save, and sort swatches, and choose a color palette. Add a color to the palette by clicking in an empty area. When moving the cursor over the Swatches panel, the cursor becomes an Eyedropper tool. Click a color to apply it automatically to selected objects and color wells. To choose a color, you need not access the Swatches panel or Color Mixer.
-
Color Mixer Select stroke or Fill color. Choose a color mode from the Options popup. Pick a color from the color bar. Set color values. Swap stroke and fill colors. To Do this Apply color to selected text Choose a new color. The Fill color well is selected automatically. Switch color modes Choose the desired color mode from the Color Mixer Options pop-up. Switch brush and fill color Click the Swap Colors button. Revert to default colors Click the Default Colors button.
-
Stroke panel Fill panel Save, edit, name, and delete strokes using the Options pop-up. Save, edit, name, and delete gradients using the Options pop-up. Choose a brush stroke. Choose a fill. Choose stroke-specific settings. Preview and apply the brush stroke. Use the Stroke panel to design and modify strokes, as well as alter the appearance of paths that have already been drawn. Changing stroke settings affects selected paths and paths drawn after the settings are changed.
-
Effect panel Save, edit, name, and delete effects using the Options pop-up. Choose an effect. Choose effectspecific settings. Preview and apply an effect. Like the Stroke and Fill panels, the Effect panel has controls for selecting effect type and name. Use the Options pop-up to save, name, and delete custom effect settings. Choose a single effect from the Effect Category pop-up, or choose Multiple to apply more than one effect.
-
Text Editor Use the Text Editor to create and edit text. Unlike text in many other applications, Fireworks text is always editable all the time. Edit text quickly and easily after custom effects have been applied. To choose a color in the Text Editor, you need not access the Swatches panel. Just click the pop-up to the right of the color well to access all the swatches in the current color palette. Then click to pick a color from the pop-up set of color swatches.
-
Layers panel and Frames panel Share objects across frames. Navigate quickly to a specific frame. Create, delete, and duplicate frames. Distribute items across frames. Copy selected items to specific frames. Change global view and lock settings; create, delete, and rename layers using the Options pop-up. Drag to rearrange layers. Double-click to rename a layer. Drag to assign selected objects to another layer. Drag to rearrange frames. See “Icon buttons” on page 28. See “Icon buttons” on page 28.
-
The Frames panel is the key to Fireworks animation and rollovers. Use the Frames panel and the Animation panel in the Export Preview to create animated GIFs. The Frames panel lists each frame of an animation and has controls for adding and deleting frames. Use the Options pop-up to add, delete, duplicate, and copy objects to specific frames.
-
Project Log panel The Behaviors inspector lists all behaviors assigned to the currently selected web object. Use the Behaviors inspector to edit or remove existing behaviors. URL Manager The Project Log panel stores a log of changes made during Find & Replace operations when searching multiple files. Any documents changed during a Find & Replace are automatically recorded in the Project Log.
-
Working with the URL Manager To Do this Add a Fireworks file's URLs to the URL Manager Open the file. All URLs are automatically added to the History pop-up. Determine what URL Select the object and note the is assigned to an URL’s name in the History object field. Assign a URL to an object Select the object and choose a URL from the History pop-up or Select the object and click a URL in the Library window. Add a URL to the URL Library 1. Enter or select the URL in the History pop-up. 2.
-
Using panels To group a panel with another panel: Fireworks panels float above the document. Place them anywhere on your screen. Click a tab to display a particular panel. View and hide all panels as described below. These tabbed panels can be moved, separated, or grouped by dragging their tabs. Use the Window menu to show and hide panels individually.
-
To return the panels to their default positions and reset application-level preferences, quit Fireworks, delete the preferences file named Fireworks Preferences located in the Fireworks folder, and relaunch Fireworks. Navigating and viewing the document Close any of these panels using the standard close box. Open or close them by choosing the appropriate command from the Window menu. Setting document magnification Fireworks magnification ranges from 6 percent to 6400 percent.
-
To Do this Zoom to the highest Choose 6400% from the magnification Magnification pop-up or Choose View > Magnification > 6400% or Press Control-6 (Windows) or Command-6 (Macintosh). Zoom to the lowest Choose 6% from the magnification Magnification pop-up or Choose View > Magnification > 6%. Zoom in to view a specific area Choose the Magnify tool and drag a selection area. Zoom out Choose the Magnify tool and hold down Alt (Windows) or Option (Macintosh) and drag a selection area.
-
To open a second document view: 1 Choose Window > New Window. 2 Change the view and magnification of the new document window. To close a document view window, click the window’s close box. Optimizing document redraw Choose one of two view modes from the View menu: Full Display or Draft Display. View modes affect a document’s on-screen representation, not its object data or output quality.
-
The Fireworks way 2 Apply realistic strokes, fills, and effects using the Stroke, Fill, and Effect panels. Use the Effect panel to bevel the edge of the palette. In this example, Diana uses the vector tools to alter the number and location of the paint wells on the artist’s palette. She then applies a wood pattern fill and bevel effect to produce this image. With Fireworks, Diana doesn’t need those other programs. She needs only Fireworks to produce this graphic from start to finish.
-
4 Add text. Use Fireworks’ Text Editor to create and modify text. 5 Add a drop shadow to the text. Apply a live drop shadow effect to the text using the Effect panel. Even though a drop shadow effect has been added, the text can still be modified. 36 Chapter 1 6 Create the image map. Use the hotspot tools in the Toolbox to add hotspot objects to the paint wells. These hotspots can link to any URL. Use the Object inspector to define map type, background URL, and alternate image descriptions.
-
7 Optimize the graphic upon export. Exporting from Fireworks is a dynamic experience offering live feedback and total control over color depth, file format, palette selections, and animation. View up to four simultaneous live previews as you compare output options and see the results on screen before exporting. Setting up your document Consider your document’s design and final output requirements. Decide in advance which settings are best.
-
Number of undo steps Grid Choose File > Undo to reverse an action. Enter a value of up to 100 in the General > “Undo Steps” preference field. RAM requirements increase as the number of undo steps increases. The grid is a non-exporting background of horizontal and vertical lines. Choose View > Grid to display the grid. With View > Snap to Grid checked, dragging an object near a grid line causes that object to snap to the grid.
-
Guides Working with the grid and guides Use guides, which are non-exporting guidelines, to precisely align and place objects. Choose View > Guides to show or hide guides. To Do this Show or hide the grid Choose View > Grid or Check Show Grid in the Grid dialog box. Snap objects to the grid Choose View > Snap to Grid or Check Snap to Grid in the Edit Grid dialog box. Modify the grid Choose View > Grid Options > Edit Grid. Show or hide rulers Choose View > Rulers.
-
Importing and Exporting Importing vector art Fireworks can import a wide variety of vector and bitmap graphic formats and can export many bitmap graphic formats. Discussed in “Using Export Preview,” one of Fireworks’ greatest strengths is the ability to export many formats with extensive export preview capabilities. Fireworks imports vector graphics from Macromedia FreeHand 7 and 8, Adobe Illustrator 7 and 8, and uncompressed CorelDRAW 7 and 8.
-
Exporting Choose a format. Enter a maximum number of colors for the exported file. Click to edit, save, or load a palette. Choose a color depth. Preview up to four previews. Choose a color palette. Check to dither the image. Preview and edit the colors in the image’s palette. Add to or remove colors from the transparency. Check to optimize the exported graphic. Choose the type of transparency. Click to launch the Export Wizard. Use the Magnification tool to magnify the preview area.
-
To export a graphic: 1 Choose File > Export or use Control-Shift-R (Windows) or Command-Shift-R (Macintosh) to open the Export Preview. 2 Choose settings on the Options, File, and Animation panels. 3 View the effect of your settings in the preview area. The preview area can display up to four views simultaneously. 4 Click Next when you are ready to export the file with the current settings.
-
2 CHAPTER 2 Creating and Editing a Graphic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
Object mode and image edit mode Computer graphics are one of two types: vector drawings created in an application such as Macromedia FreeHand, or bitmap images created in an application such as Adobe Photoshop. Paths are the basic elements of vector graphics. Generated mathematically, a path has at least two points. Each point joins path segments and point handles control the shape and length of adjacent segments.
-
This tool In object mode In image edit mode Lasso or Activates image Polygon edit mode and Lasso selects or moves a freeform area of pixels. Selects or moves a freeform area of pixels. Magic Wand Selects an area of similarly colored pixels. Activates image edit mode and selects or moves a area of similarly colored pixels. Line and Draws objects as Basic editable paths. Shapes Paints pixel brush strokes on an image object. Pen Draws objects as editable paths.
-
Brush strokes created in image edit mode may appear the same as those drawn in object mode, but they are strictly bitmap images. Conventional vector-editing techniques cannot edit these images. Working in image edit mode is similar to other image-editing applications. To close a path with any drawing tool, return the cursor to the starting point of the path and click when a black square appears next to the cursor. When this square appears, release the mouse button to close the path.
-
Displayed path and points—Choose the Subselection tool to automatically display the points on all selected paths. Use the Subselection tool to drag a selection area around one or more paths, displaying the path and points of all selected objects, or click a path to select it. Editing points to reshape paths Points are the framework for a vector path. The position and length of each point handle determine the shape and position of adjacent path segments.
-
To bend only one adjacent segment, leaving the other segment unedited, hold down Alt (Windows) or Option (Macintosh) and drag a point handle from the point with the Subselection tool. Drawing in object mode Draw paths in any of three ways: ◆ Use the Brush tool or Pencil tool to draw freeform paths. Using path operations to reshape paths ◆ A powerful way to create complex paths is to use path operations to combine or alter paths.
-
To draw a basic shape from a specific centerpoint, hold down Alt (Windows) or Option (Macintosh) and drag a drawing tool. The Polygon tool always draws from a centerpoint. To both constrain a shape and draw from the centerpoint, hold down Shift-Alt (Windows) or ShiftOption (Macintosh) while using a drawing tool. The corner rounding percentage setting on the Rectangle Tool Options panel determines the curvature of the corners of rectangles drawn using the Rectangle tool.
-
Reorienting the brush stroke An object’s brush stroke is centered on the path by default, but options for placing the brush stroke completely inside or outside the path are available. To move the brush stroke of one or more objects inside or outside the path: 1 Select one or more objects. 2 Choose Window > Object. 3 Choose a stroke placement button. Normally, the stroke appears over the fill. To draw the fill on top of the stroke, check Draw Fill over Stroke in the Object inspector.
-
This cursor Indicates Specified length The Freeform tool or the Reshape Area tool is in use. Move onto a selected path to activate the pull cursor. Click and hold away from a selected path to activate the push cursor or reshape cursor. The Freeform tool is in use. The pull cursor is in position to pull the selected path. Click and hold the mouse and drag to reshape the path. The Freeform tool pulls a path segment. The Freeform tool is in use. The pull cursor is pulling the selected path.
-
Image edit mode basics Switch to image edit mode to directly edit pixels in an image. Activities in image edit mode include: ◆ Editing imported images, such as GIFs, JPEGs, and PNGs. ◆ Editing pixels with the Pencil tool. ◆ Painting in color with the Brush tool. ◆ Erasing to transparency or to another color. ◆ Applying Xtra filters to pixel selections. ◆ Replicating image elements with the Rubber Stamp tool. ◆ Compositing images.
-
Selecting an image object Each bitmap image in Fireworks has a rectangular bounding box. This box is highlighted when an image is selected in object mode with View > Hide Edges unchecked. To switch to image edit mode, double-click a visible part of the image. Use these tools to highlight an area of pixels to edit, move, cut, or copy. Each draws a marquee that becomes a flickering dotted shape when complete. To remove a marquee, draw another one, choose Edit > Deselect, or exit image edit mode.
-
Trimming the canvas Once an image is edited in image edit mode, its size is automatically trimmed to a rectangular shape in the size of the used pixels, removing transparent space around the image. Use Modify > Document > Trim Canvas to remove excess pixels from around the edge of the document. ◆ The canvas is cropped to the outermost edge of all pixels in the document. ◆ If multiple frames exist in the document, Trim Canvas crops to include all objects in all frames, not just the current frame.
-
When moving the cursor beyond the handles in transform mode to rotate selected objects interactively: ◆ Hold down Shift to constrain rotation. ◆ Drag the round centerpoint away from the center of the handles to relocate the axis of rotation. When dragging a transform handle in distort mode: ◆ Hold down Shift to constrain handle movement to 45-degree angles. ◆ Hold down Control (Windows) or Command (Macintosh) to achieve the illusion of perspective (corner handles only).
-
Using the Color Mixer By default, the Color Mixer identifies colors as Hexadecimal RGB, displaying a color’s values of red (R), green (G), and blue (B) color components. RGB values are calculated based on a range from 00 to FF. To create a color in the Color Mixer: 1 Choose Window > Color Mixer, if necessary, to display the Color Mixer. 2 Click either the stroke color well or fill color well, or display the Stroke, Fill, or Effect panel, to choose the destination for the new color.
-
Using the Swatches panel To replace a swatch with the active color: Choose Window > Swatches to display the Swatches panel, which contains a group of colors. Click a color swatch to choose a stroke, fill, or effect color for selected objects and objects to be drawn later. 1 Note: The Swatches panel displays the current Fireworks palette, not the current document’s palette. When the cursor points to a swatch, it becomes one of three Eyedropper tool icons.
-
System color pickers Double-clicking any color well displays the Windows Color dialog box (Windows) or the Apple Color Picker (Macintosh). Colors created using either of these methods bypass the Color Mixer and Swatches panel. To activate the Do this Stroke color well Click the color well with the brush next to it in the Toolbox or in the Color Mixer or Click the color well in the Stroke panel.
-
Using color well pop-up swatches Click the box next to any color well to display pop-up swatches and choose a color to apply to that color well and any selected objects. The color well pop-up contains the swatches currently in Fireworks Swatches panel. Applying strokes and fills Use the Stroke panel to choose a brush stroke and to apply a brush stroke to selected objects. Use the Fill panel to fill selected objects and subsequently drawn objects.
-
The Stroke panel Using the Edit Stroke panels Save, edit, rename, and delete strokes. Choose a stroke category. Choose a specific stroke. Alter stroke color. Alter stroke size. Alter stroke edge. Show current stroke shape. Change intensity of the brush stroke texture. Choose a stroke texture. Preview stroke. Choose Edit Stroke from the Stroke panel Options pop-up to display the Edit Stroke panels: Options, Shape, and Sensitivity.
-
The Fill panel Assign the stroke property for sensitivity data to control. Fireworks fill categories are None, Solid, Pattern, Web Dither and various gradient shapes. Combine fill types with textures to quickly create complex artwork. Save, edit, name, and delete gradients. Set the degree to which sensitivity data affects the current stroke property. Choose a fill category. Choose Anti-Alias, Hard Edge, or Feathered edge. Control edge feathering. Preview the stroke.
-
Choosing Edit Gradient opens the Edit Gradient dialog box. Choose a preset Gradient from the Preset Options pop-up. Click an area under the color ramp to add a color well. Click and drag any color well below the color ramp to change the transition between colors in the fill. Double-click any color well to pick a color from the color palette pop-up menu. Add as many colors to the color ramp as you want.
-
The round starting handle specifies the starting point of the fill. Drag the starting handle to move the fill within the object without changing the size, width, skew, or angle of the fill. The ending handle represents the ending point of the fill. The distance between the ending handle and the width handle sets the fill angle. Dragging the ending handle does not move the other handles. The width handle represents both aspect (or width) and skew.
-
3 Enter a name for the style and check the properties you want to apply with the style. Properties left unchecked will not be applied to an object with the style. 4 Click OK. An icon for the style appears on the Styles panel showing a quick preview of the style. Importing and exporting styles Styles can be exported and shared with other Fireworks users. To Do this Import styles Choose Import Styles from the Options pop-up, and then choose a saved styles document to import.
-
Applying effects to objects Use the Effect panel and Xtras menu commands to enhance graphics with many Live Effects and filters. Easily achieve common web effects such as Bevel, Glow, Drop Shadow, and Emboss, or apply combinations of any of those effects. Alter images with Xtra filter effects such as Blur, Unsharp Mask, and Invert. Live Effects For example, create a button by applying an Outer Bevel effect on the button itself and apply Drop Shadow to the text on the button.
-
Applying multiple effects Save, edit, name, and delete effects. Choose Multiple from the category pop-up of the Effect panel to apply multiple effects. Choose an effect category. Choose a specific effect. Choose Multiple to apply more than one effect to selected objects. Set effect-specific options such as width, contrast, and softness. Click to open the Effect panel for the checked effect. Choose bevel appearance. Effect panel To apply an effect to an object: 1 Select the object.
-
Saving, renaming, or deleting multiple effect settings Using text Once a multiple effect is set, you can save that setting so that it can be quickly applied at a later time. Add text using the Text tool and the Text Editor. Apply brush strokes, fills, and effects to text. Edit text and its stroke, fill, and effect attributes redraw accordingly. To Do this Save a multiple effect setting Choose Save Effect As from the Effect panel Options popup, enter a name for the effect, then click OK.
-
5 Resize and move the text block with the Pointer tool. 6 Add a stroke or effect, or change the fill. To edit text, double-click a text block. Within a single block of text, you can vary all aspects of text, including size, font, spacing, leading, baseline shift, and more. To resize a text block, pull any text block selection handle. To use Type 1 fonts on the Macintosh, Fireworks requires Adobe Type Manager 4 or higher.
-
Attaching text to a path To place text on a path: 1 Select a text block and a path. 2 Choose Text > Attach to Path. 3 Optionally, choose Text > Orientation, then choose an orientation option. Choose any of four orientation options for text on a path: Rotate around Path, Vertical, Skew Vertical, or Skew Horizontal. If text attached to an open path exceeds the length of the path, the remaining text returns and repeats the shape of the path. Text on a path returns and repeats the path shape.
-
Controlling document size and resolution Choose Modify > Document > Image Size to open the Image Size dialog box and change the document's dimensions, print size, and resolution. 6 Check Resample Image to add or remove pixels when resizing the image to approximate the same appearance at a different size. 7 Click OK.
-
Organizing your document Fireworks has several features that help organize a document as it grows more complex. ◆ Group and ungroup individual objects. ◆ Arrange objects behind or in front of other objects. ◆ Arrange, lock or unlock, and show or hide layers. ◆ Organize layers and frames within a document. ◆ Arrange frames. ◆ Hide individual objects. To group two or more selected objects, choose Modify > Group. To ungroup, select the group and choose Modify > Ungroup.
-
Arranging objects on a layer Arranging objects on the same layer To Do this Move an object forward on the same layer Select the object and choose Modify > Arrange > Bring Forward. Move an object to the front of a layer Select the object and choose Modify > Arrange > Bring to Front. Move an object backward on the same layer Select the object and choose Modify > Arrange > Send Backward.
-
To show or hide the Layers panel choose Window > Layers. The Layers panel displays the current state of all layers in the current frame of a document. Use the Options pop-up to add, duplicate, rename, remove, hide or show, lock or unlock, and share layers. Check Single Layer Editing to restrict editing to the current layer. To Do this Add a layer Choose New Layer from the Options pop-up on the Layers panel or Click the New Layer button or Choose Insert > Layer.
-
Using frames Find and Replace Frames comprise the structure for an animated Fireworks document, or contain the alternate states for behaviors. Each frame within a document is the same size and has the same layers in the same order as the other frames. Use Find & Replace to search for and replace different elements in a document, such as text, URLs, fonts, and colors. When you use Find & Replace, Fireworks can search the current document or multiple files.
-
Selecting the source for the search Fireworks can perform a find and replace in any of five locations. Choose an option from the Search In field to select the range of content you want to find and replace: Selection—Find and replace elements only among the currently selected objects and text. Frame—Find and replace elements only within the current frame. Document—Find and replace elements in the active document.
-
The Project Log records each changed document and displays which frame of the document contained the change, as well as the date and time of the change. To Do this Manually add files to the Project Log Choose Add Files from the Project Log Options pop-up and navigate to the file you want to add. Open or display files Select a file listed in the listed in the Project Project Log and click Open, or Log double-click a file listed in the Project Log.
-
Finding and replacing fonts Finding and Replacing colors Find & Replace Fonts panel Find & Replace Colors panel Choose Font from the Attributes pop-up of the Find and Replace panel to search for and replace fonts in a Fireworks document or documents. Specify the font or font characteristics to find in the Find area. Specify the font or font characteristics used to replace found fonts in the Change to area. Choose Color from the Attributes pop-up to search for and replace colors in Fireworks documents.
-
Finding and Replacing URLs Symbols and instances Use symbols and instances to simplify Fireworks animations and improve editability. Instances are representations of an original Fireworks object, which is designated as the symbol. When the symbol object (the original) is edited, the instances (copies) automatically change to reflect the modifications to the symbol.
-
Creating an instance Create an instance using any of these methods: ◆ Copy and paste a symbol. ◆ Duplicate a symbol. ◆ Clone a symbol. ◆ Choose a symbol and select Copy to Frames from the Frames panel. ◆ Press Alt (Windows) or Option (Macintosh) after you begin dragging a symbol. An arrow icon represents an instance object. Modifying a symbol Modify a symbol to automatically modify all associated instances. Symbols behave as groups when modified or transformed.
-
Tweening Choose Insert > Tween Instances to blend a symbol and one or more of its instances, creating interim instance objects with transitional attributes. This is known as tweening. Alternatively, tween two or more instances without using a symbol. Instance objects created by tweening derive attributes from the symbol or instance objects used.
-
Compositing Using blending modes Compositing is the process of varying the transparency or color interaction of two or more overlapping objects to create a variety of graphic elements. Blending modes manipulate the color values of overlapping objects to create effects. They also add a dimension of control to the opacity effect. Using the Object inspector Choose a blending mode. Adjust opacity. Choosing a blending mode applies it to the entire appearance of selected objects.
-
Blending mode behavior ◆ In object mode, a blending mode affects the selected object. Apply no blending mode. ◆ Multiply the base color by the blend color, resulting in darker colors. In image edit mode, a blending mode affects the floating selection of pixels. ◆ Screen Multiply the inverse of the blend color by the base color, resulting in a bleaching effect. In image edit mode without a floating selection, a blending mode affects the brushes and fills of subsequently drawn objects.
-
Masking In Fireworks, masks are created by grouping two objects together as a mask group. The top object acts as the mask, while the bottom object is the image to be masked. Create masks from any element in Fireworks, including images, path objects, or text. A mask group has two primary uses: ◆ Pasting an object inside another object, so that the top object continues to be visible. This is known as a paste inside or clipping path in FreeHand. It crops an image to its shape.
-
To create a clipping path mask: 1 Position the object to be pasted in front of the destination path. 2 Cut the object to the Clipboard. 3 Select a path inside which the object on the Clipboard is to be pasted. 4 Choose Edit > Paste Inside. The object on the Clipboard is pasted inside the selected object in the same position from which it was cut. The Object inspector identifies this element as a clip group.
-
3 CHAPTER 3 Importing and Exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
Fireworks in the workflow Importing Although Fireworks greatly reduces the need for other applications within the graphic creation workflow, it is highly compatible with other applications associated with producing web graphics. Import graphics or text in any of four ways: ◆ ◆ Import graphics created in applications such as FreeHand or Photoshop, and edit them using familiar tools and similar document-organization features such as layers and frames.
-
◆ Adobe Photoshop 3, 4, 5 Copy and paste ◆ Adobe Illustrator 7 ◆ Macromedia FreeHand 7, 8 ◆ CorelDRAW 7 Objects that are pasted into Fireworks from another application are centered in the active document.
-
Pasting ASCII Each edit mode handles pasted data differently: Import ASCII text using any of the four import methods. Imported ASCII text is set to the default font, 12 pixels high, and uses the current fill color. ◆ ◆ In object mode, pasting a pixel selection yields a rectangular image object, which uses alpha transparency to maintain the appearance of the selection. In image edit mode, pasting a vector graphic or image object pastes a pixel selection that remains floating until it is deselected.
-
Importing FreeHand, Illustrator, or CorelDRAW files ◆ Import objects or files from Macromedia FreeHand, Adobe Illustrator, or CorelDRAW using any four of the import methods. When opening or importing a vector-based file, use the Vector File Options dialog box to define specific settings. Vector File Options do not apply when pasting or dragging. ◆ Remember layers—Maintain the layer structure of the imported file.
-
Because CorelDRAW supports a different set of features than Fireworks, the following changes occur when importing CDR files: To import an image from a scanner or digital camera: 1 Master pages—The contents of the master pages are repeated on each Fireworks frame. Follow the connection instructions included with the camera or scanner to ensure correct installation. Blends—Fireworks only imports the two end objects of the CorelDRAW blend. The objects are grouped after import.
-
Exporting Finding a good balance between quality and speed when exporting a graphic for the web can be a daunting task. Fireworks offers several methods to help develop top-quality graphics with the lowest possible file size. Export dialog box Click Next in the Export Preview to open the Export dialog box.
-
Export Wizard Slicing options available: ◆ None: Use no slice options when exporting. ◆ Use Slice Objects: Export slice objects as defined using the Slice tool. ◆ Slice Along Guides: Slice exported objects along existing guides. Default HTML styles available: Use the Export Wizard (File > Export Wizard) to help optimize your exported files. Answer questions about the file's destination and intended use, and the Export Wizard suggests file type and optimization settings.
-
Using Export Preview Use the Export Preview to try different settings for the chosen file format, compare the effects of different color palettes and transparencies, customize palettes and animation settings, and preview the file pixel-for-pixel as it will be exported. Choose a format. Enter a maximum number of colors for the exported file. Click to edit, save, or load a palette. Choose a color depth. Preview up to four previews. Choose a color palette. Check to dither the image.
-
Preview area The preview area displays the graphic exactly as it will be exported and estimates file size and download time with the current export settings. Because each preview accurately reflects the exported graphic, you can use split views to compare different settings and create the smallest file size while maintaining an acceptable level of quality. Magnification and pan control Choose a saved set of options for the selected export preview.
-
Options panel Color depth Use the Options panel to choose file format and formatspecific settings for exporting. Although some settings are common to many formats, other settings are unique to a single format. Color depth is the number of colors used in the exported graphic. Although most web images are exported in 8bit color (256 colors), Fireworks exports some formats with 24-bit and 32-bit depths.
-
Working with color palettes To add colors from a palette to the Swatches panel: Color palettes are groups of colors, 8-bit or less, which are stored within an image file or as a separate palette file. 1 In the Swatches panel Options pop-up, choose Add Swatches. 2 Browse to the saved color palette or GIF image file that contains colors you want to add, and click OK. ◆ ◆ Use palettes when creating graphics to control which colors are available.
-
Using palettes for exporting Optimize or customize palettes during export using the Options panel of the Export Preview. When exporting an image with a color depth of 8-bits or less, palette options appear in the Export Preview. Choose a palette from the Palette pop-up, and then optimize it as desired. These palettes are available by default: Adaptive—A custom palette derived from the actual colors in the document.
-
Editing colors in a palette Locking colors The palette view displays colors used in the current preview of the image when working in 8-bit color or less. Use the palette view to preview or modify the palette for an image. The preview window updates to reflect changes made in the palette view. Individual colors may be locked so that they are not removed or changed when changing palettes or reducing the number of colors in a palette.
-
If you switch to another palette after colors have been locked, locked colors are added to the new palette according to the following table: When switching to Locked colors are Adaptive or WebSnap Adaptive Forced into the new palette. Web 216 or Uniform Added to the palette if not already present. Only the first 40 locked colors from the previous palette are added. Additional locked colors are discarded. Exact Added until the total number of colors in the palette equals 256.
-
Removing edits to colors Saving a palette Remove any edit made to a color by selecting the color and choosing Remove Edit from the Options pop-up. Also, individual edits may be removed by selecting a color and then deselecting the button of the edit you wish to remove. Custom palettes may be saved as Photoshop palette files.
-
Adjusting transparency Transparency Eyedropper tools Use the Transparency tools on the Options panel to specify which colors are transparent in exported GIFs or PNGs. Also, make colors transparent by selecting them in the Palette view and then clicking the Transparency button. A gray and white checkerboard denotes transparent areas in both the preview area and the palette view. Use the transparency eyedropper tools to add or remove colors from the transparent area of the exported image.
-
One solution is to set the Fireworks canvas color to be the same as the background color of the web page. Another solution is to use the Matte color in the Export Preview to change the canvas color during export to match the background color of the web page. This way, a commonly reused image can quickly be re-exported to match a variety of web page background colors. File panel Use the File panel to set the scale or exported area of the exported document.
-
Export Area Web export formats Use the Export Area tool to export a part of a Fireworks graphic. GIF, JPEG, and PNG are graphic file formats that are common in web development because they are highly compressible, making for faster transfer across the Internet. However, a graphic’s visual integrity can vary from one format to another, depending upon each format’s method of compression. Therefore, base your choice of file format upon the design and use of your graphic.
-
JPEG Smoothing JPEG is an alternative to GIF developed by the Joint Photographic Experts Group specifically for photographic images. JPEG supports millions of colors (24-bit). Use smoothing to help lower the file size of JPEGs. Smoothing blurs hard edges, which do not compress well in JPEGs. Compression JPEG is a lossy format, which means that some image data is discarded when it is compressed, reducing the quality of the final file.
-
PNG Compression The Portable Network Graphic, or PNG, is the most versatile of the web graphic formats. However, not all web browsers can take full advantage of PNG characteristics. A PNG supports up to 32-bit color, can contain transparency or an alpha channel, and can be progressive. PNG compression is lossless, even in high color depths. It compresses across rows and columns of pixels, yielding better compression than GIF, which only scans rows.
-
Other export formats Batch processing Fireworks exports other image formats which support up to 32-bit color. Use batch processing to convert a group of graphic files. When batch processing, you can convert a selection of files to another format; convert a selection of files to the same format with different settings; and find and replace text, colors, URLs, or fonts. TIFF Tagged-Image File Format, or TIFF, is used for highresolution images that are printed.
-
4 Choose backup options for the original files. To create backup copies of the original files, check Backup Original Files and make settings in the Save Backups dialog box. 5 Click OK to run the batch process, or click Script to create a script of the current Batch Processing dialog box settings. A status message displays the number of files currently processed out of the total files appearing in the selected folder. Click Cancel to cancel the batch process.
-
To set file conversion options for a batch process: 1 Choose the Export Settings to apply to files during the batch process. ◆ ◆ ◆ 2 3 Choose Use Settings from Each File to use each file's previous export settings during the batch process. For example, when batch processing a folder of GIFs and JPEGs, the resulting files will still be GIFs and JPEGs, and the original palette and compression settings are used when exporting each file.
-
Backing up batch processed files Using batch Scriptlets Check Backup Original Files and make settings in the Save Backups dialog box to create backup copies of the original files in a batch process. Backup copies of files are placed in an Original Files subfolder in the same folder as each original file. If an Original Files subfolder already exists, the backup copies are placed in the existing folder.
-
Working with Dreamweaver Macromedia Dreamweaver is a powerful visual web page authoring tool. Use Dreamweaver and Fireworks together to streamline your web design process. Fireworks images in Dreamweaver The most common way to use Fireworks and Dreamweaver is to create web graphics and HTML in Fireworks and then include them on web pages created with Dreamweaver. Fireworks supports CSS (Cascading Style Sheet) layers and Dreamweaver libraries on export.
-
7 Close the Fireworks document. Optimizing a graphic in Fireworks 8 Switch to Dreamweaver. In Dreamweaver 2, choose Command > Optimize in Fireworks to open and optimize the selected image in the Fireworks Export Preview. Make changes in the Export Preview and then click Update to save the image and return to Dreamweaver. Launch and optimize does not work in Dreamweaver 1 or in Dreamweaver 1.2. The placed image updates to reflect the changes made in Fireworks.
-
HTML and JavaScript Fireworks generates HTML files when exporting image maps, JavaScript rollovers, or slices. Although Dreamweaver can generate the same data, it is often much faster to copy and paste the HTML generated from Fireworks into the Dreamweaver document. When copying JavaScript from Fireworks into Dreamweaver, be sure to: ◆ Copy the HTML into the Dreamweaver HTML inspector and not directly into the Dreamweaver page.
-
4 CHAPTER 4 Web Design Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-
Producing web components Fireworks has tools for creating many common web components, such as image maps, buttons, and animated GIFs. Also, Fireworks simplifies many web graphic preparation tasks, such as slicing large graphics into multiple files and creating JavaScript rollovers. Features for web production There are eight primary features used to produce hotspots, slices, and rollovers. Those features are: Hotspot Object tools—Draw hotspot objects in the shape of rectangles, circles, or polygons.
-
Creating web objects Setting web object properties Use the Hotspot tools or Slice tool to draw a web object. Use the Object inspector to view and change properties of selected web objects. Since slice objects and hotspot objects have slightly different characteristics, the Object inspector displays different controls when each type of object is selected. Use the To Draw a rectangular hotspot object. Rectangle Hotspot tool Draw a circular hotspot object. Enter a URL. Enter alternative text.
-
Creating an image map An image map is a graphic with URLs assigned to hotspot regions of the graphic from within an HTML file. Clicking a hotspot in a web browser opens the web page to which the URL links. 4 On the Object inspector, enter a URL to which the hotspot will link, enter an alternative (alt) description, and enter a target. Alternative descriptions and targets are optional. 5 Optionally, click the Overlay Color color well and choose a color for viewing on The Web Layer.
-
Client-side and server-side image maps A client-side image map requires image map information to be stored within the HTML document. A client-side image map shows the actual URL in the status bar message at the bottom of the browser window. A server-side (NCSA) image map requires the image map information to be saved within a separate file stored on a server and accessed by a CGI script. This type of image map is far more complicated to set up, and is not supported by all servers.
-
Creating slices to fit one or more objects Create slice objects based on the dimensions of a selected object or objects. Choose Insert > Slice to create a slice object that completely covers the selected object. Slice guides Slice object If multiple objects are selected, choosing Insert > Slice will display a dialog box prompting you specify whether to create a single slice or multiple slices.
-
5 Choose an HTML output format, select a destination folder, and click Export. Each region is exported as a separate graphic using the name entered in the Object inspector. If no name is entered, then the slice is named according to settings in the File > Document Properties dialog box. See “Setting slice auto-naming.” for more information on how slice names are generated. Specifying export settings for slice objects Each slice object can use different export settings when the image is exported.
-
JavaScript rollovers JavaScript rollovers are images that change appearance in a web browser when you move the mouse over them or click them. JavaScript rollovers are created by drawing different rollover states, and then using JavaScript within an HTML file to switch to a different image for certain events, such as moving the mouse over the image or clicking the image. The following table describes the buttons states and on which frame to draw them.
-
The Down state Assigning URL links to rollovers The Down state of a rollover button depicts the button's state on the destination web page. For example, the Down state is commonly used to show which button was clicked to view the current web page. To assign a URL link to a rollover, select the hotspot object or slice object, and then choose or enter a URL in the URL link pop-up on the Object inspector.
-
5 In the Swap Image dialog box, choose the Source for the swap, and then click OK. Choose the source for the swap by either clicking the name of a slice in the In Slice field, or by clicking a slice in the slice preview to the right of the In Slice field. The source for the swap can be the contents of another frame or an external file. ◆ ◆ ◆ 6 When the source is another frame, only the area immediately below the target slice object on the specified frame is used.
-
Creating toggle group rollovers A toggle group is a series of rollovers grouped so that when one rollover is triggered, the others in the group are triggered as well. For example, in a group of buttons used for navigating a site, pressing one button might cause it to appear sunken while at the same time raising the previously pressed button. Using toggle group rollovers also eliminates the graphic flicker sometimes seen in certain instances of Simple Rollover or Swap Image rollovers.
-
Creating animation Opening an animation Fireworks provides all the tools you need to create animated GIFs. Fireworks animation capabilities are perfect for creating web banner ads or for adding simple motion to your web site. Open and edit existing animated GIFs or create new animated GIFs from scratch. Open existing animated GIFs in Fireworks and edit them.
-
Drawing an animation Sharing layers across frames Creating an animation in Fireworks is simple. Create a new document, then use the Frames panel to add multiple frames to the document. Draw objects on separate frames, starting with Frame 1. Layers on the Layers panel may be set so that the objects on those layers appear on all frames of the animation. To share a layer across frames, double-click the layer to open the Layer Options dialog box.
-
Onion skinning Use onion skinning to view the contents of frames preceding and following the currently selected frame. Onion skinning helps you to smoothly animate frames without having to flip back and forth through frames. The term “onion skinning” comes from a traditional animation technique of using thin, translucent tracing paper to view animated sequences. Before and After Onion Skinning is applied to the frame containing the middle bird.
-
Symbols and instances Use symbols and instances to simplify animation and improve editability across frames. When the original object (the symbol) is modified, the copies (instances) automatically change to reflect the modifications to the symbol. For example, when animating the word “Cow” across ten frames, create a symbol from the word “Cow” on the first frame, and then place instances of “Cow” on the other nine frames. Move them, transform them, and apply effects to them.
-
Looping Use the Loop settings to determine how many times the animation plays. Click To Set the exported animated GIF to play once and then stop. Play once button Loop button Set the exported animated GIF to replay the animation the number of times specified in the Number of Loops pop-up. For example, entering 4 plays the animation the first time, then replays it four more times. Choose Forever from the Number of Loops pop-up to play the animation continuously.
-
Preview an animation in the Export Preview— Use the frame controls in the Export Preview to display an animated GIF exactly as it will be exported. The Export Preview shows looping, optimization, disposal methods, and frame delay. Transparency Using Fireworks, create web graphics with fine-tuned transparencies. Transparency is supported in two graphic formats: GIF and PNG. Exporting an animation GIF transparency After creating an animation, export it as either an animated GIF or as multiple files.
-
To include alpha transparency in an exported PNG: 1 Create an image in Fireworks using a transparent canvas. Images with feathered edges, anti-aliasing, or varied opacity settings benefit from alpha transparency. 2 Choose File > Export. 3 Choose PNG from the Formats pop-up on the Options panel of the Export Preview. Choose a bit depth of 8-bits to avoid creating extremely large files. 4 Choose Alpha Channel from the Transparency pop-up. 5 Click Next.
-
Dreamweaver Library.lbi—This style imports objects as library objects within Dreamweaver. Use library items in Dreamweaver for content that appears on many pages in your site, for content that must be updated frequently, and for rapid prototyping. Library files must have an “.LBI” extension and must be located in a folder named Library at the site root. FrontPage—This style is easy to edit in Microsoft FrontPage. Generic—This style adheres to basic HTML standards, but favors no particular HTML editor.
-
Some HTML basics HTML files are essentially text files that contain: ◆ Text that appears on the web page. ◆ HTML tags that define document formatting and structure, and link to images and other HTML documents (web pages). HTML tags are enclosed in brackets and look something like this: affected text Like the example above, most HTML tags use both an opening tag and a closing tag, which together define the beginning and ending of the affected text.
-
Copying and pasting from a Fireworks HTML file When copying HTML exported from Fireworks, it is important to paste it to the correct place within the destination HTML document. When copying and pasting Fireworks HTML into other HTML documents, you do not have to copy the or
tags. Those tags should already be included in the destination HTML document. Note: Exporting as a Dreamweaver 2 library (.lbi) file makes copying and pasting HTML unnecessary when inserted in Dreamweaver.
-
Chapter 4
-
INDEX A actions see Scriptlets activating image edit mode 52 object mode 52 adaptive palette 97 Add Swatches command 22 Add to Transparency tool 101 adding active color to current palette 57 (steps) colors to Swatches panel 96 (steps) guides 39 layers 73 styles 63 (steps) Adobe Illustrator see Illustrator files alpha channel 129 alpha opacity 56 Alt key drawing centered shapes (Windows) 49 Alt tag assigning with Object inspector 20 Alter Path commands Crop 48 Expand Stroke 48 Inset Path 48 Intersect 48 Pun
-
B background color see canvas Background image Fireworks 1 documents 53 backing up during batch processing 109 baseline shift 68 basic shape tools 48 Batch Export dialog box 107 batch processing 106Ð109 backing up original files 109 Batch Export dialog box 107 changing file settings 107 creating Scriptlets 109 (steps) file formats 107 finding and replacing during 107 Project Log 109 running Scriptlets 109 (steps) Scriptlets 109 setting conversion options 108 (steps) using Scriptlets 109 behaviors attached t
-
color 55Ð59 adding active color to current palette 57 (steps) adding to Gradient fills 62 adding to Swatches panel 96 (steps) appending a palette 57 (steps) blending modes 81 canvas 59 choosing from color bar 56 choosing from Effect panel 25 choosing from Fill panel 24 choosing from Stroke panel 24 choosing from Text Editor 26 Color Mixer 56 creating in Color Mixer 56 (steps) default 58 deleting from Swatches panel 57 (steps) displaying in Color Mixer 56 filling a selection 62 filling areas of similar color
-
color palettes adaptive 97 available on export 97 black and white 97 browser-safe 97 considerations for export 96 custom 97 dithering 100 editing colors 98, 99 exact 97 grayscale 97 locking colors 98 optimizing 102 overview 96 removing edits 100 saving custom 100 setting number of colors 97 setting transparency during export 101 System 97 uniform 97 Web 216 97 web-safe colors 100 Websnap adaptive 97 color pickers see palettes color ramp Edit Gradient dialog box 61 Gradient editor 61 color well Apple Color P
-
creating batch Scriptlets 109 (steps) clipping path mask 84 (steps) color in Color Mixer 56 (steps) colors in the Color Mixer 56 hotspots 116 image maps 116Ð117 instances 79 layers 73 mask similar to layer mask 84 (steps) slice objects 117 symbols 78, 79 textures 64 vector objects 44 web objects 115 Crop command 48 Crop tool 16 cropping canvas 37 images 53 CSS layers 131 custom palettes 97 Cut button (Windows only) 18 D default colors 58 applying using Color Mixer 23 deleting color from Swatches panel 57 (s
-
Drag and Drop Scriptlets 109 to import graphics 87 drawing Bézier curves 60 buttons 49 by dragging 48 by plotting points 49 centered shapes 48 circles 48 constraining centered shapes 49 in object mode 48 lines 46Ð51 rounded corners 49 squares 48 using Pen tool 49 (steps) with the Brush tool 60 with the Pen tool 60 Dreamweaver copying HTML into 112 copying JavaScript into 112 editing Fireworks images 110 (steps) editing Fireworks images in 110 exporting libraries 111 (steps) optimizing images in Fireworks 11
-
Ellipse Marquee tool 16, 53 Ellipse tool 17, 48 emboss effect 65 entering text 67 (steps) Eraser tool 18, 50, 51 exact palette 97 exiting Image Edit mode 52 Expand Stroke command 48 Export Area tool 16, 103 Export button (Windows only) 18 export commands 92 Export Again 92 Export Area 92 Export as CSS Layers 92 Export Special 92 Export Wizard 92 Export dialog box 42, 91 export presets in Export Preview 94 Export Preview 41, 93 Animation panel 102 comparing alternatives 94 components of 93 magnification in 9
-
swatches 22 System palette 97 TIFF images 106 to Size Wizard 92 transparency Eyedropper tools 101 uniform palette 97 URLs 30 using Export Area tool 103 (steps) using Export Preview 91 (steps) using matte color 101 Web 216 palette 97 web formats 103Ð106 web-safe colors 100 Websnap adaptive palette 97 Wizard 42, 92 xRes LRG images 106 Eyedropper tool 17 placing a color in the Color Mixer 56 F feather 67 features for animation 124 for web production 114 unique to Fireworks 13 file conversion 89 File panel 102
-
Fireworks animation features 124 case study 34Ð37 copying and pasting HTML 133 dragging and dropping 87 (steps) editing images in Dreamweaver 110 editing images placed in Dreamweaver 1.
-
graphics animated GIFs 124Ð129 backing up during batch processing 109 batch processing 106Ð109 bitmap 44 BMP 106 button rollovers 120 changing settings with batch processing 107 creating thumbnail 108 edit mode 52 editing 52 editing in Dreamweaver 110 exporting 91Ð109 exporting a graphic 42 (steps) exporting GIFs 103 exporting HTML with 112 exporting JavaScript with 112 exporting to size 92 filters 54 importing 40, 86Ð90 importing a graphic 40 (steps) including Dreamweaver libraries 111 (steps) JPEGs 104 le
-
HTML adding alerts to output code 131 assigning Alt tag 20 basics 132 copying and pasting from Fireworks 133 customizing output 123 editing output styles 131 exporting CSS layers 131 exporting image maps 117 exporting with a Fireworks file 130 exporting with graphics 112 JavaScript rollover code 123 JavaScript rollovers 120Ð123 output styles 130 overview 132 tags 132 using Fireworks HTML 130 HTML styles available when exporting 92 hyperlinks see URLs I Icon buttons 28 Illustrator files converting 89 importi
-
web formats compared 105 Xtras 54 Import button (Windows only) 18 Import File dialog box 86 importing 40Ð42, 86Ð90 animated GIFs 90 ASCII files 88 bitmap images 40 CorelDRAW files 89Ð90 digital camera images 90 file conversion 89 Fireworks files 88 formats supported 86 FreeHand files 89 from scanner or digital camera 90 graphics 40, 86Ð90 Illustrator files 89 images 40 (steps) pasting in image mode 88 pasting in object mode 88 Photoshop Acquire plug-ins (Macintosh) 90 resampling during Copy and Paste 87 RTF
-
K kerning 68 keyboard shortcuts 16Ð18 magnification 33 Knife (Eraser) tool 51 L Lasso tool 16, 53 layers adding 73 creating 28, 73 deleting 73 duplicating 28, 73 editing current layer 73 editing objects on 72 icon buttons 28 inserting 73 locking and unlocking 73 moving 73 moving objects to 73 sharing across frames 73, 125 showing and hiding 73 Web Layer 73 working with 72 Layers button (Windows only) 19 Layers panel 27 animated GIFs 124 choosing frames from 27 leading 68 learning Fireworks resources for 12
-
modifying canvas color 37 canvas size 37 effects 66 fills 61 instances 79 paths 48 strokes 60 symbols 79 moving brush stroke 50 (steps) in document 32Ð34 multiple document views 33 multiple effects applying 66 deleting 67 renaming 67 saving 67 settings 67 multiple file searches 75 N navigating in document 32Ð34 New button (Windows only) 18 New Document dialog box setting resolution in 37 Numeric Transform command 55 O object editing tools 50, 51 Object inspector 20Ð21 adjusting opacity with 81 blending mode
-
opacity mode setting 21 Open button (Windows only) 18 open paths 46 opening Fireworks 1 documents 53 multiple documents 33 Text Editor 26 optimizing animated GIFs 127 colors 102 images 111 Option key drawing centered shapes (Macintosh) 49 Options panel in Export Preview 95 Tool Options panels 21 organizing your document 71Ð74 Over state JavaScript rollovers 120 OverDown state JavaScript rollovers 120 overview of Fireworks 14 P package contents of Fireworks package 10 page magnification setting 32Ð33 Paint B
-
panels Color Mixer 23 Edit Stroke 60 Effect 25, 66 File 102 Fill 24, 61 Find & Replace 28 Frames 27 grouping 31 hiding 31 Info 19 Project Log 29 removing 31 setting to defaults 31 showing 31 Stroke 24, 60 Styles 30, 63 Swatches 22 Text Editor 26 Tool Options 21 using 31 viewing 31 Paste button (Windows only) 19 paste inside 83 pasting in image mode 88 in object mode 88 Path Redraw tool 51 Path Scrubber tool 17, 50 paths 44 adding points 47 attaching text 69 closing 46 convert text to 69 converting text to 6
-
preview area in Export Preview 94 Print button (Windows only) 18 printing Project Log 76 progressive JPEGs 104 Project Log 109 logging Find & Replace changes 74 managing searches 75 viewing and printing 76 Project Log panel 29 properties document 42 web objects 115 pulling paths 51 Punch command 48 pushing and pulling an area 51 pushing paths 51 R Rectangle Hotspot tool 18, 115 Rectangle tool 17, 48 rounded corners 49 rectangles rounded corners 49 Redo button (Windows only) 18 Redraw Path tool 17 redrawing
-
Scriptlets 109 creating 109 (steps) dragging and dropping 109 running 109 (steps) searching 74 Select Behind tool 16, 47 Select Transparency tool 101 selected text applying color using Color Mixer 23 selecting additional objects 47 all within a group 67 an image in object mode 53 deselecting 53 elements for Find & Replace 107 (steps) group containing a selection 67 objects 46 objects behind objects 47 paths 46 pixels 53 subselecting 67 superselecting 67 within a masked group 84 working with groups 71 select
-
Stroke button (Windows only) 19 Stroke panel 24, 60 Stroke preview showing and hiding 24 strokes 59Ð61 adding texture 64 brush stroke preview 60 categories 60 changing centering 50 choosing a stroke 60 color well 58 edge 60 editing 60 finding and replacing 77 moving 50 (steps) names 60 reorienting 50 saving settings 61 texture 60 styles adding 63 (steps) deleting 64 editing 64 exporting 64 importing 64 using 63 Styles panel 30, 63 Subselect command 67 Subselection tool 16, 47 Subtract from Transparency tool
-
T target 121 templates HTML output styles 131 text 67Ð69 aligning 68 anti-aliasing 67 attaching to paths 69 baseline shift 68 block alignment 68 bold 68 bold italic 68 changing attributes 68 choosing fonts 68 converting to images 69 (steps) converting to paths 69 (steps) detaching from paths 69 direction 69 direction of flow 68 editing path attached to 69 editing when attached to path 69 entering 67 (steps) feathering 67 finding and replacing 76 fonts 68 horizontal scale 68 importing 88 importing ASCII 88 i
-
Rectangle 17 Rectangle Hotspot 18 Redraw Path 17 Reshape Area 17 Rubber Stamp 18 Scale 17 Select Behind 16 Skew 17 Slice 18 Subselection 16 Text 17 ToolTips 19 Transform tools 54 transforming by dragging 54 numerically 55 transforming objects 54 transparency Add to Transparency tool 101 adding to fill textures 64 alpha channel transparency 129 animated GIFs 127 compositing 81 Eyedropper tools 101 GIF images 129 overview 129 Select Transparency tool 101 setting during export 101 Subtract from Transparency to
-
V vector art importing 40 vector drawing 44 Vector File Options when importing 89 View Controls toolbar 21 viewing document Full Display or Draft Display 34 viewing panels 31 views, multiple 33 W Web 216 palette 97 Web Dither fill 63 web export formats 103Ð106 web formats compared 105 Web Layer 73 web layers 114 web objects 114Ð115 alternate text 114 auto-naming slice objects 119 behaviors 114 characteristics 114 creating 115 creating toggle groups 123 customizing HTML code 123 export settings 119 exporting