Page 1 ® ® FIREWORKS Using Fireworks ™ macromedia...
Page 2 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.
Page 3: Table Of Contents
CONTENTS CHAPTER 1 Getting Your Bearings ......9 What’ s in this package............10 System requirements .
Page 4 CHAPTER 2 Creating and Editing a Graphic ....43 Object mode and image edit mode..........44 Fireworks drawing and editing tools.
Page 5 Find and Replace..............74 Finding and replacing text.
Page 6 Working with color palettes ........... . 96 Using palettes for drawing and creating.
Page 7 CHAPTER 4 Web Design Features ......113 Producing web components ........... . 114 Features for web production.
Page 8 Transparency ..............129 GIF transparency .
Page 9: Getting Your Bearings
CHAPTER 1 Getting Your Bearings ............
Page 10: What's In This Package
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 A CD-ROM containing the Fireworks installer need the following equipment: and the sample artwork. Using Fireworks, the manual you are now reading. Windows: Windows 95, Windows 98, or Windows NT 4 (with Service Pack 3) or later...
Page 11: Installing And Starting Fireworks
Installing and starting To install and start Fireworks on a Macintosh: Fireworks Disable virus-protection extensions and restart your computer. Before installing Fireworks, make sure your computer Insert the Fireworks CD-ROM in your CD- meets the system requirements listed in “System ROM drive.
Page 12: Uninstalling Fireworks
Choose Start > Settings > Control Panel. Fireworks Application Double-click Add/Remove Programs. The Fireworks application contains many dialog Select Macromedia Fireworks 2 in the list box. boxes and ToolTips designed to assist you in using Click the Add/Remove button. the program. ToolTips appear when your cursor Follow the instructions that appear on screen.
Page 13: What's Unique About Fireworks
What’s unique about Compatibility with Macromedia Dreamweaver— Export JavaScript rollovers that can be edited and Fireworks? changed in Dreamweaver. Or, export complex graphics as Dreamweaver library objects, easily The premier production tool for creating web graphics, placing and reusing navigation bars and complex Fireworks has features that can save hours by rollovers.
Page 14: Welcome To Fireworks
Welcome to Fireworks By creating editable paths with bitmap attributes, Fireworks ensures that your work is fully editable throughout every stage of the design process. Fireworks’ What is Fireworks? powerful export preview capabilities integrated with color palette and graphic formatting offer the designer Fireworks creates the smallest, highest-quality JPEG control over exporting.
Page 15: Using The Document Window
Using the document Launching Fireworks displays the document window, your interface to the illustration. A Fireworks canvas window can be up to 6000 pixels wide by 6000 pixels tall. Move, resize, or hide the panels, Toolbox, and toolbars to Fireworks is both a vector graphics and a bitmap customize your environment.
Page 16 Toolbox The Toolbox contains 35 tools, some of which are Use this tool Activate by contained in tool groups, as shown. To display a tool pressing group, click and hold any tool with a triangle in the lower-right corner. Select and drag objects.
Page 17 Use this tool Activate by Use this tool Activate by pressing pressing Select pixel areas of Draw brush strokes similar color in image using Stroke panel edit mode. settings. Magic Wand Brush spacebar Pan the view of the Redraw portions of a document.
Page 18 Main toolbar (Windows only) Use this tool Activate by pressing Fill objects with color, gradients, or patterns Create a new document. and adjust fills with Paint Bucket handles. Paint Bucket Remove or replace portions of image Open an existing document. objects and cut paths.
Page 19 Info panel Dimensions of selected object Paste the Clipboard’s contents into the active document. Options for choosing a color model and document unit of measurement Paste Position of Open the Object inspector to view bounding box’s properties for the selected object. upper-left corner point Object...
Page 20 Object inspector When selecting Use the Object inspector to set characteristics such as opacity, blending mode, and placement of the brush Clipping path Define how the A mask stroke in relation to a path. The Object inspector setting mask group group.
Page 21: View Controls Toolbar
Opacity and blending mode in detail Note: On the Macintosh, the View controls are located at the lower-left corner of the document window. Use the Object inspector to set opacity and blending mode. Opacity and blending modes are important in Using the toolbars the process of compositing.
Page 22 Swatches panel 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. Use the Options pop-up to add, To choose a color, you need not access the Swatches replace, delete, panel or Color Mixer.
Page 23 Color Mixer Do this Apply color to selected Choose a new color. The Select stroke text Fill color well is selected or Fill color. Choose a color mode automatically. from the Options pop- Switch color modes Choose the desired color mode from the Color Mixer Options pop-up.
Page 24 Stroke panel Fill panel Save, edit, name, and Save, edit, name, and delete strokes using the delete gradients using Options pop-up. the Options pop-up. Choose a brush stroke. Choose a fill. Choose stroke-specific Choose fill-specific settings. settings. Preview and apply Preview and apply the brush stroke.
Page 25 Effect panel 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 Save, edit, name, and effect settings. delete effects using the Options pop-up. Choose a single effect from the Effect Category pop-up, or choose Multiple to apply more than one effect.
Page 26 Text Editor Open the Text Editor by clicking on a document with the Text tool, drawing a rectangular text block with the Use the Text Editor to create and edit text. Unlike text in Text tool, double-clicking a text container, or selecting a many other applications, Fireworks text is always text block and choosing Text >...
Page 27 Layers panel and Frames panel Share objects across frames. Navigate quickly to a specific frame. Create, delete, and duplicate frames. Change global view and lock Distribute items across frames. Copy settings; create, delete, and rename selected items to specific frames. layers using the Options pop-up.
Page 28 The Frames panel is the key to Fireworks animation Do this and rollovers. Use the Frames panel and the Animation panel in the Export Preview to create animated GIFs. Duplicate selected Drag the square “Selected objects onto a new Objects” icon from the right The Frames panel lists each frame of an animation and layer or frame column of the Layers or...
Page 29 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.
Page 30 Working with the URL Manager Do this Import a URL Library 1. Choose Import URLs from Do this the Options pop-up. 2. Select desired library, HTML, Add a Fireworks Open the file. All URLs are or bookmark file. file's URLs to the automatically added to the URL Manager History pop-up.
Page 31 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.
Page 32: Navigating And Viewing The Document
To return the panels to their default positions and reset Navigating and viewing the application-level preferences, quit Fireworks, delete the document preferences file named Fireworks Preferences located in the Fireworks folder, and relaunch Fireworks. Setting document magnification Close any of these panels using the standard close box. Open or close them by choosing the appropriate Fireworks magnification ranges from 6 percent to command from the Window menu.
Page 33: Shortcut Menus
Magnification shortcuts Do this Zoom to the highest Choose 6400% from the Press magnification Magnification pop-up Set view to 50% Control-5 (Windows) or Command-5 (Macintosh). Choose View > Magnification > 6400% Set view to 100% Control-1 (Windows) or Command-1 (Macintosh). Press Control-6 (Windows) or Command-6 (Macintosh).
Page 34: Optimizing Document Redraw
Mode pop-up on the View Controls toolbar Create a line drawing of an artist’s palette using (Windows) or in the lower-left corner of the document an application, such as Macromedia FreeHand. window (Macintosh). Import the vector graphic into an image-editing...
Page 35: The Fireworks Way
The Fireworks way Apply strokes, fills, and effects. Apply realistic strokes, fills, and effects using the With Fireworks, Diana doesn’t need those other Stroke, Fill, and Effect panels. Use the Effect panel to programs. She needs only Fireworks to produce this bevel the edge of the palette.
Page 36 Add text. Create the image map. Use Fireworks’ Text Editor to create and Use the hotspot tools in the Toolbox to add hotspot modify text. 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.
Page 37: Setting Up Your Document
Optimize the graphic upon export. Setting up your document Exporting from Fireworks is a dynamic experience Consider your document’ s design and final output offering live feedback and total control over color requirements. Decide in advance which settings are best. depth, file format, palette selections, and animation.
Page 38 Number of undo steps Grid Choose File > Undo to reverse an action. Enter a value of The grid is a non-exporting background of horizontal up to 100 in the General > “Undo Steps” preference field. and vertical lines. Choose View > Grid to display the RAM requirements increase as the number of undo grid.
Page 39 Guides Working with the grid and guides Use guides, which are non-exporting guidelines, to Do this precisely align and place objects. Choose View > Guides to show or hide guides. Show or hide Choose View > Grid the grid To add a guide with the page rulers active, drag from either the horizontal or the vertical ruler.
Page 40: Importing And Exporting
Importing and Exporting Importing vector art Fireworks imports vector graphics from Macromedia Fireworks can import a wide variety of vector and FreeHand 7 and 8, Adobe Illustrator 7 and 8, and bitmap graphic formats and can export many bitmap uncompressed CorelDRAW 7 and 8. Imported paths graphic formats.
Page 41: Exporting
Exporting Enter a maximum number of colors for the exported ﬁle. Choose a format. 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...
Page 42 To export a graphic: Document Properties Choose File > Export or use Control-Shift-R The Document Properties dialog box contains (Windows) or Command-Shift-R (Macintosh) to document-specific export settings. Change these settings open the Export Preview. to control slicing and image map options. Save your defaults using the Set Defaults button.
Page 43: Creating And Editing A Graphic
CHAPTER 2 Creating and Editing a Graphic ............
Page 44: Object Mode And Image Edit Mode
Computer graphics are one of two types: vector object, while others work on both. The characteristics of drawings created in an application such as Macromedia some tools change according to the type of object being FreeHand, or bitmap images created in an application edited.
Page 45: Editing Path Objects
Editing path objects This tool In object mode In image edit mode In object mode, paths and points are the basic elements Lasso or Activates image Selects or moves a Polygon edit mode and freeform area of of graphic design. Upon magnification, Fireworks path Lasso selects or moves a pixels.
Page 46 Brush strokes created in image edit mode may appear To close a path with any drawing tool, return the cursor the same as those drawn in object mode, but they are to the starting point of the path and click when a black strictly bitmap images.
Page 47 Choose the Displayed path and points— Editing points to reshape paths Subselection tool to automatically display the points on Points are the framework for a vector path. The position all selected paths. Use the Subselection tool to drag a and length of each point handle determine the shape selection area around one or more paths, displaying the and position of adjacent path segments.
Page 48: Using Path Operations To Reshape Paths
To bend only one adjacent segment, leaving the other Drawing in object mode segment unedited, hold down Alt (Windows) or Draw paths in any of three ways: Option (Macintosh) and drag a point handle from the point with the Subselection tool. Use the Brush tool or Pencil tool to draw freeform paths.
Page 49 To draw a basic shape from a specific centerpoint, hold Drawing by plotting points down Alt (Windows) or Option (Macintosh) and drag a drawing tool. The Polygon tool always draws To draw using the Pen tool: from a centerpoint. Choose the Pen tool. To both constrain a shape and draw from the Click to plot corner points.
Page 50: Editing In Object Mode
Reorienting the brush stroke To move the brush stroke of one or more objects inside or outside the path: An object’ s brush stroke is centered on the path by Select one or more objects. default, but options for placing the brush stroke completely inside or outside the path are available.
Page 51 Specified length This cursor Indicates 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.
Page 52: Image Edit Mode Basics
Image edit mode basics When you enter image edit mode, a striped border appears around the entire document. You can draw or Switch to image edit mode to directly edit pixels in an edit pixels anywhere within the document. When you image.
Page 53 Selecting an image object Use these tools to highlight an area of pixels to edit, move, cut, or copy. Each draws a marquee that becomes Each bitmap image in Fireworks has a rectangular a flickering dotted shape when complete. To remove a bounding box.
Page 54: Converting An Object To An Image
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.
Page 55: Using Color
When moving the cursor beyond the handles in Using color transform mode to rotate selected objects interactively: Use the Color Mixer and the Swatches panel to create or Hold down Shift to constrain rotation. choose colors for brush strokes, fills, and effects. Drag the round centerpoint away from the center of Click to apply a color to the brush color well.
Page 56: Using The Color Mixer
Using the Color Mixer Choose To express color components as By default, the Color Mixer identifies colors as Values of Cyan, Magenta, and Hexadecimal RGB, displaying a color’ s values of red (R), Yellow, where each component green (G), and blue (B) color components. RGB values has a value from 0 to 255, where 0-0-0 is white and 255-255-255 is are calculated based on a range from 00 to FF.
Page 57: Using The Swatches Panel
Using the Swatches panel To replace a swatch with the active color: Hold down Shift and point to a swatch. Choose Window > Swatches to display the Swatches panel, which contains a group of colors. Click a color The cursor becomes the paint bucket cursor. swatch to choose a stroke, fill, or effect color for selected Click the swatch.
Page 58: System Color Pickers
System color pickers Double-clicking any color well displays the Windows To activate the Do this Color dialog box (Windows) or the Apple Color Picker (Macintosh). Colors created using either of these Stroke color Click the color well with the brush methods bypass the Color Mixer and Swatches panel.
Page 59: Applying Strokes And Fills
Using color well pop-up swatches Applying strokes and fills Click the box next to any color well to display pop-up Use the Stroke panel to choose a brush stroke and to swatches and choose a color to apply to that color well apply a brush stroke to selected objects.
Page 60: The Stroke Panel
The Stroke panel Using the Edit Stroke panels Save, edit, rename, and Choose Edit Stroke from the Stroke panel Options delete strokes. pop-up to display the Edit Stroke panels: Options, Choose a stroke category. Shape, and Sensitivity. Choose a specific stroke. Alter stroke color.
Page 61: The Fill Panel
The Fill panel Fireworks fill categories are None, Solid, Pattern, Web Assign the stroke Dither and various gradient shapes. Combine fill types property for sensitivity with textures to quickly create complex artwork. data to control. Save, edit, name, and Set the degree to which delete gradients.
Page 62 Choosing Edit Gradient opens the Edit Gradient dialog Filling areas of similar color box. Choose a preset Gradient from the Preset Options On image objects, use the Paint Bucket tool to fill areas pop-up. Click an area under the color ramp to add a of similar color.
Page 63: Using Styles
The round starting handle specifies the starting point of Note: To create the illusion of a true transparent ﬁll in a web browser, apply a Web Dither ﬁll to an object and the fill. Drag the starting handle to move the fill within check Transparent on the Fill panel.
Page 64: Adding Texture
Enter a name for the style and check the Importing and exporting styles properties you want to apply with the style. Styles can be exported and shared with other Fireworks Properties left unchecked will not be applied to an users. object with the style.
Page 65: Applying Effects To Objects
Applying effects to objects For example, create a button by applying an Outer Bevel effect on the button itself and apply Drop Shadow to the Use the Effect panel and Xtras menu commands to text on the button. The button shape and the text on the enhance graphics with many Live Effects and filters.
Page 66 Applying multiple effects Choose Multiple from the category pop-up of the Effect panel to apply multiple effects. Save, edit, name, and delete effects. Choose an effect category. Choose Multiple to apply Choose a specific effect. more than one effect to selected objects.
Page 67: Using Xtras
Saving, renaming, or deleting multiple Using text effect settings Add text using the Text tool and the Text Editor. Apply Once a multiple effect is set, you can save that setting so brush strokes, fills, and effects to text. Edit text and its that it can be quickly applied at a later time.
Page 68: Using The Text Editor
Resize and move the text block with the Pointer Using the Text Editor tool. The Text Editor is where you enter and edit text and Add a stroke or effect, or change the fill. change text attributes. Select all or part of the text in the To edit text, double-click a text block.
Page 69: Attaching Text To A Path
Attaching text to a path If text attached to an open path exceeds the length of the path, the remaining text returns and repeats the shape of the path. To place text on a path: Select a text block and a path. Choose Text >...
Page 70: Controlling Document Size And Resolution
Controlling document size and Check Resample Image to add or remove pixels when resizing the image to approximate the resolution same appearance at a different size. Choose Modify > Document > Image Size to open the Click OK. Image Size dialog box and change the document's dimensions, print size, and resolution.
Page 71: Organizing Your Document
Organizing your document To group two or more selected objects, choose Modify > Group. To ungroup, select the group and Fireworks has several features that help organize a choose Modify > Ungroup. document as it grows more complex. To work with individual objects within a group, either Group and ungroup individual objects.
Page 72: Arranging Objects On A Layer
Arranging objects on a layer Using layers Layers divide a Fireworks document into discrete Arranging objects on the same layer planes, as though the graphic components were drawn on separate tracing paper overlays. Each object in a graphic resides on a layer. Create all layers before you Do this draw, or add layers as needed.
Page 73 To show or hide the Layers panel choose Window > Use the Options pop-up to add, duplicate, rename, Layers. The Layers panel displays the current state of all remove, hide or show, lock or unlock, and share layers. layers in the current frame of a document. Check Single Layer Editing to restrict editing to the current layer.
Page 74: Using Frames
Add, duplicate, and delete frames; copy to Fireworks PNG files, or on files containing vector frames; or distribute objects, such as Macromedia FreeHand files, the selection. CorelDRAW files, or Adobe Illustrator files. Frames panel To show or hide the Frames panel choose Window >...
Page 75 Selecting the source for the search Choose Incremental Backups to save every instance of a changed file. The original files are moved to an Original Fireworks can perform a find and replace in any of five Files subfolder of their current folder, and an locations.
Page 76: Finding And Replacing Text
The Project Log records each changed document and Finding and replacing text displays which frame of the document contained the change, as well as the date and time of the change. Do this Manually add files Choose Add Files from the to the Project Log Project Log Options pop-up and navigate to the file you...
Page 77: Finding And Replacing Fonts
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 Choose Color from the Attributes pop-up to search for and Replace panel to search for and replace fonts in a and replace colors in Fireworks documents.
Page 78: Finding And Replacing Urls
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.
Page 79: Creating An Instance
Creating an instance Working with symbols and instances Create an instance using any of these methods: Do this Copy and paste a symbol. Create a symbol Select an object or group of Duplicate a symbol. objects and choose Insert > Symbol.
Page 80: Tweening
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.
Page 81: Compositing
Compositing Using blending modes Blending modes manipulate the color values of Compositing is the process of varying the transparency overlapping objects to create effects. They also add a or color interaction of two or more overlapping objects dimension of control to the opacity effect. to create a variety of graphic elements.
Page 82 Blending mode behavior In object mode, a blending mode affects the Choose selected object. In image edit mode, a blending mode affects the Normal Apply no blending mode. floating selection of pixels. Multiply Multiply the base color by the blend In image edit mode without a floating selection, a color, resulting in darker colors.
Page 83: Masking
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.
Page 84 To create a clipping path mask: Position the object to be pasted in front of the destination path. Cut the object to the Clipboard. Select a path inside which the object on the Clipboard is to be pasted. Choose Edit > Paste Inside. The object on the Clipboard is pasted inside the selected object in the same position from which it was cut.
Page 85: Importing And Exporting
CHAPTER 3 Importing and Exporting ............
Page 86: Fireworks In The Workflow
Fireworks in the workflow Importing Although Fireworks greatly reduces the need for other Import graphics or text in any of four ways: applications within the graphic creation workflow, it is Import highly compatible with other applications associated with producing web graphics. Open Drag and drop Import graphics created in applications such as...
Page 87: Drag And Drop
Copy and paste Adobe Illustrator 7 Objects that are pasted into Fireworks from another application are centered in the active document. When Macromedia FreeHand 7, 8 using copy and paste, Fireworks accepts these formats CorelDRAW 7 from the Clipboard: Targa...
Page 88: Importing Text
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, In object mode, pasting a pixel selection yields a 12 pixels high, and uses the current fill color. rectangular image object, which uses alpha transparency to maintain the appearance of the Importing Fireworks files...
Page 89: Importing Freehand, Illustrator, Or Coreldraw Files
CorelDRAW files Place each layer of Convert layers to frames— Import objects or files from Macromedia FreeHand, the imported document onto a separate frame in Adobe Illustrator, or CorelDRAW using any four of Fireworks. the import methods. When opening or importing a...
Page 90: Importing Animated Gifs
Because CorelDRAW supports a different set of To import an image from a scanner or digital camera: features than Fireworks, the following changes occur when importing CDR files: Connect the scanner or camera to your computer. The contents of the master pages are Master pages—...
Page 91: Exporting
Exporting Export dialog box Click Next in the Export Preview to open the Export Finding a good balance between quality and speed dialog box. 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.
Page 92 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: None Dreamweaver Library.lbi Dreamweaver 2 Use the Export Wizard (File >...
Page 93: Using Export Preview
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. Enter a maximum number of colors for the exported ﬁle.
Page 94: Preview Area
Preview area Because each preview accurately reflects the exported graphic, you can use split views to compare different The preview area displays the graphic exactly as it will be settings and create the smallest file size while exported and estimates file size and download time with maintaining an acceptable level of quality.
Page 95: Options Panel
Options panel Color depth Color depth is the number of colors used in the exported Use the Options panel to choose file format and format- graphic. Although most web images are exported in 8- specific settings for exporting. Although some settings bit color (256 colors), Fireworks exports some formats are common to many formats, other settings are unique with 24-bit and 32-bit depths.
Page 96: Working With Color Palettes
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 In the Swatches panel Options pop-up, choose are stored within an image file or as a separate palette file. Add Swatches.
Page 97: Using Palettes For Exporting
Using palettes for exporting Setting the number of colors in the palette Optimize or customize palettes during export using the Options panel of the Export Preview. When exporting Enter a number in the Number of Colors pop-up to set an image with a color depth of 8-bits or less, palette the maximum number of colors desired in the exported options appear in the Export Preview.
Page 98: Editing Colors In A Palette
Editing colors in a palette Locking colors Individual colors may be locked so that they are not The palette view displays colors used in the current removed or changed when changing palettes or reducing preview of the image when working in 8-bit color or less. the number of colors in a palette.
Page 99 If you switch to another palette after colors have been To edit a color, select the color, and then click the Edit locked, locked colors are added to the new palette button below the Preview area or choose Edit from the according to the following table: Options pop-up.
Page 100: Saving A Palette
Photoshop palettes, such as Adobe Photoshop, wish to remove. Macromedia FreeHand, or Macromedia Director. To save a custom color palette: Setting web-safe colors Choose Save Palette from the pop-up next to Web-safe colors are colors that are common to both the Format pop-up.
Page 101: Adjusting Transparency
Adjusting transparency Transparency Eyedropper tools Use the transparency eyedropper tools to add or remove Use the Transparency tools on the Options panel to colors from the transparent area of the exported image. specify which colors are transparent in exported GIFs or Changing transparency does not affect the original PNGs.
Page 102: Optimize
One solution is to set the Fireworks canvas color to be File panel the same as the background color of the web page. Use the File panel to set the scale or exported area of the Another solution is to use the Matte color in the Export exported document.
Page 103: Export Area
Export Area Web export formats Use the Export Area tool to export a part of a Fireworks GIF, JPEG, and PNG are graphic file formats that are graphic. common in web development because they are highly compressible, making for faster transfer across the Internet.
Page 104: Jpeg
JPEG Smoothing Use smoothing to help lower the file size of JPEGs. JPEG is an alternative to GIF developed by the Joint Smoothing blurs hard edges, which do not compress Photographic Experts Group specifically for well in JPEGs. photographic images. JPEG supports millions of colors (24-bit).
Page 105: Png
Compression PNG compression is lossless, even in high color depths. The Portable Network Graphic, or PNG, is the most It compresses across rows and columns of pixels, yielding versatile of the web graphic formats. However, not all better compression than GIF, which only scans rows. A web browsers can take full advantage of PNG PNG can compress more than a GIF or JPEG of the characteristics.
Page 106: Other Export Formats
Choose Custom or click the edit button to xRes LRG display the Open Multiple dialog box and select files to batch process. xRes LRG is the format used by Macromedia xRes. Choose Actions to perform during the batch process. Check Find and Replace and make settings in...
Page 107: Finding And Replacing During A Batch Process
Choose backup options for the original files. To select elements to find and replace: To create backup copies of the original files, check Select the type of element to find and replace Backup Original Files and make settings in the Save from the Attributes pop-up.
Page 108 To set file conversion options for a batch process: Choose scaling options for the batch processed files. Choose the Export Settings to apply to files during the batch process. To scale images so that they each fit within a specified width and height range, choose Scale Choose Use Settings from Each File to use each to Fit Area and enter Max Width and Max file's previous export settings during the batch...
Page 109: Backing Up Batch Processed Files
Backing up batch processed files Using batch Scriptlets Check Backup Original Files and make settings in the Save batch process settings as cross-platform Scriptlets to Save Backups dialog box to create backup copies of the easily recreate the batch process multiple times in the original files in a batch process.
Page 110: Working With Dreamweaver
Dreamweaver HTML document. The image must be placed on the server in the same Macromedia Dreamweaver is a powerful visual web place in relation to the HTML document as it was in page authoring tool. Use Dreamweaver and Fireworks your project folder.
Page 111 Close the Fireworks document. Optimizing a graphic in Fireworks Switch to Dreamweaver. In Dreamweaver 2, choose Command > Optimize in The placed image updates to reflect the changes Fireworks to open and optimize the selected image in made in Fireworks. the Fireworks Export Preview.
Page 112: Editing Fireworks Images In Other Image Editors
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...
Page 113: Web Design Features
CHAPTER 4 Web Design Features ............
Page 114: Producing Web Components
Producing web components Web objects: The basics of web production Fireworks has tools for creating many common web components, such as image maps, buttons, and animated The key component of hotspot and rollover graphics in GIFs. Also, Fireworks simplifies many web graphic Fireworks is the web object.
Page 115: Creating Web Objects
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 Use the inspector displays different controls when each type of object is selected.
Page 116: Creating An Image Map
Creating an image map On the Object inspector, enter a URL to which the hotspot will link, enter an alternative (alt) description, and enter a target. An image map is a graphic with URLs assigned to hotspot regions of the graphic from within an HTML Alternative descriptions and targets are optional.
Page 117: Exporting Image Maps
Client-side and server-side image maps Slicing images when exporting A client-side image map requires image map information to be stored within the HTML document. A common method of creating navigation bars or A client-side image map shows the actual URL in the navigation graphics for web sites is to create a graphic status bar message at the bottom of the browser window.
Page 118: Exporting An Image In Multiple Slices
Creating slices to fit one or more objects Create slice objects based on the dimensions of a selected Slice guides object or objects. Choose Insert > Slice to create a slice Slice object object that completely covers the selected object. If multiple objects are selected, choosing Insert >...
Page 119: Specifying Export Settings For Slice Objects
Choose an HTML output format, select a Setting slice auto-naming destination folder, and click Export. Slices that are not custom named are automatically Each region is exported as a separate graphic using named by Fireworks. However, you can control how the name entered in the Object inspector.
Page 120: Javascript Rollovers
JavaScript rollovers The following table describes the buttons states and on which frame to draw them. JavaScript rollovers are images that change appearance in a web browser when you move the mouse over them State Description Location or click them. JavaScript rollovers are created by drawing different rollover states, and then using JavaScript Default button appearance.
Page 121: The Down State
The Down state Assigning URL links to rollovers To assign a URL link to a rollover, select the hotspot The Down state of a rollover button depicts the button's object or slice object, and then choose or enter a URL in state on the destination web page.
Page 122: Using Irregularly Shaped Rollovers
In the Swap Image dialog box, choose the Source Using external files for rollover source for the swap, and then click OK. Fireworks can use GIFs, animated GIFs, JPEGs, and Choose the source for the swap by either clicking PNGs as the source for a rollover. When an external file the name of a slice in the In Slice field, or by clicking is chosen as the rollover source, that file is exchanged a slice in the slice preview to the right of the In Slice...
Page 123: Creating Toggle Group Rollovers
Creating toggle group rollovers In the Export dialog box, choose an HTML Style, specify a destination for the images and the A toggle group is a series of rollovers grouped so that HTML file, and then click Export. when one rollover is triggered, the others in the group are triggered as well.
Page 124: Creating Animation
Creating animation Opening an animation Open existing animated GIFs in Fireworks and edit Fireworks provides all the tools you need to create them. When an animated GIF is opened, Fireworks: animated GIFs. Fireworks animation capabilities are perfect for creating web banner ads or for adding simple Creates a shared layer named “Background”...
Page 125: Drawing An Animation
Drawing an animation Sharing layers across frames Layers on the Layers panel may be set so that the objects Creating an animation in Fireworks is simple. Create a on those layers appear on all frames of the animation. To new document, then use the Frames panel to add share a layer across frames, double-click the layer to open multiple frames to the document.
Page 126 Onion skinning Use onion skinning to view the contents of frames preceding and following the currently selected frame. Choose Onion skinning helps you to smoothly animate frames No Onion Skinning Turn off onion skinning and without having to flip back and forth through frames. only display the contents of The term “onion skinning”...
Page 127: Optimizing And Controlling The Animation
Erases the current frame's Symbols and instances Restore to Background— image and restores the area to the background color or Use symbols and instances to simplify animation and pattern that appears in the web browser. improve editability across frames. When the original Choose Restore to Background when moving an object object (the symbol) is modified, the copies (instances) in a transparent animated GIF.
Page 128: Previewing An Animation
Looping Use the Loop settings to determine how many times the animation plays. Click Set the exported animated GIF to play once and then stop. Play once button Set the exported animated GIF to replay the animation the number of times specified in Loop button the Number of Loops pop-up.
Page 129: Exporting An Animation
Preview an animation in the Export Preview— Transparency the frame controls in the Export Preview to display an animated GIF exactly as it will be exported. The Export Using Fireworks, create web graphics with fine-tuned Preview shows looping, optimization, disposal methods, transparencies.
Page 130: Using Fireworks Html
NotePad (Windows) or SimpleText (Macintosh), or in a web Click Next. authoring tool like Macromedia Dreamweaver. Portions In the Export dialog box, type a name for the file of Fireworks HTML files may be copied and pasted and select the destination.
Page 131 This style imports objects Dreamweaver Library.lbi— Edit Fireworks output styles to customize HTML as library objects within Dreamweaver. Use library exported by Fireworks. In addition, use JavaScript to items in Dreamweaver for content that appears on create dialog boxes or alerts when exporting. For many pages in your site, for content that must be example, you could create a dialog box that allowed you updated frequently, and for rapid prototyping.
Page 132: Some Html Basics
HTML tags are enclosed in brackets and look something like this: In this case, clicking the word ¨Link¨ in the browser jumps to www.macromedia.com, if the computer is <tag> affected text </tag> connected to the Internet. Like the example above, most HTML tags use both an...
Page 133: Copying And Pasting From A Fireworks Html File
Copying and pasting from a Fireworks Client-side image maps HTML file HTML exported by Fireworks for client-side image maps includes a link to the graphic and <MAP> When copying HTML exported from Fireworks, it is information to define the image map's hotspot areas. important to paste it to the correct place within the When pasting image maps into other HTML destination HTML document.
Page 134 Chapter 4...
Page 135 Ð INDEX animated GIFs 124 controlling 127 creating an animation 125 creating from multiple files 124 defined 124 disposal method 127 exporting 129 Fireworks features for 124 actions Frames panel 124 see Scriptlets importing 90 activating Layers panel 124 image edit mode 52 managing frames 125 object mode 52 onion skinning 126...
Page 136 button rollovers 120 assigning URL links 121 background color button states 120 see canvas creating toggle groups 123 Background image customizing HTML code 123 Fireworks 1 documents 53 defined 120 backing up Down state 121 during batch processing 109 exporting HTML code 123 baseline shift 68 Over state 120 basic shape tools 48...
Page 137 Ð color 55 color bar adding active color to current palette (steps) choosing a color 56 adding to Gradient fills 62 choosing a color model 56 (steps) adding to Swatches panel switching color models 23 appending a palette (steps) color depth blending modes 81 setting in Export Preview 95 canvas 59...
Page 138 Ð?? color palettes compositing 21 adaptive 97 defined 81 available on export 97 compression black and white 97 in GIF images 103 browser-safe 97 in JPEG images 104 considerations for export 96 in PNG images 105 custom 97 constraining dithering 100 Alt key (Windows) 49 editing colors 98 marquees 53...
Page 139 creating displaying batch Scriptlets (steps) paths 46 clipping path mask (steps) points 47 (steps) color in Color Mixer disposal method (animated GIFs) 127 colors in the Color Mixer 56 Distort tool 17 hotspots 116 distorting objects 54 Ð image maps 116 dithering 100 instances 79 document...
Page 140 Drag and Drop editing Scriptlets 109 areas of similar colors 62 to import graphics 87 Bézier curves 47 drawing brushes 60 Bézier curves 60 effects 66 buttons 49 fills 61 by dragging 48 fills interactively 62 by plotting points 49 Gradient fills 61 centered shapes 48 grid 38...
Page 141 Ð Ð Ellipse Marquee tool 16 exporting 40 Ellipse tool 17 adaptive palette 97 emboss effect 65 animated GIFs 129 (steps) entering text areas 92 Eraser tool 18 black and white palette 97 exact palette 97 BMP images 106 exiting Image Edit mode 52 commands 92 Expand Stroke command 48 CSS layers 92...
Page 142 Ð swatches 22 fills 61 System palette 97 adding texture 64 TIFF images 106 adjusting Pattern and Gradient fills 62 to Size Wizard 92 anti-aliasing edges 61 transparency Eyedropper tools 101 categories 61 uniform palette 97 color well 58 URLs 30 Edit Gradient dialog box 61 using Export Area tool (steps)
Page 143 Fireworks frames animation features 124 adding 125 Ð case study 34 arranging 74 copying and pasting HTML 133 copying 125 dragging and dropping (steps) creating 28 editing images in Dreamweaver 110 deleting 125 (steps) editing images placed in Dreamweaver 1.2 duplicating 28 editing images placed in Dreamweaver 2 (steps)
Page 144 graphics grid 38 Ð animated GIFs 124 editing 39 backing up during batch processing 109 modify 39 Ð batch processing 106 showing and hiding 39 bitmap 44 snapping to 39 BMP 106 working with 39 button rollovers 120 grouping objects 71 changing settings with batch processing 107 grouping panels 31 creating thumbnail 108...
Page 145 HTML image mode adding alerts to output code 131 blending mode behavior 82 assigning Alt tag 20 pasting 88 basics 132 image objects 53 copying and pasting from Fireworks 133 Image Size command 70 customizing output 123 images Ð editing output styles 131 animated GIFs 124 exporting CSS layers 131 backing up during batch processing 109...
Page 146 web formats compared 105 instances Xtras 54 breaking link with symbol 79 Import button (Windows only) 18 creating 79 Import File dialog box 86 defined 78 Ð Ð importing 40 deleting 79 animated GIFs 90 modifying 79 ASCII files 88 moving with symbol 79 bitmap images 40 tweening 80...
Page 147 Apple Color Picker 58 (steps) magnification 33 installing and starting Fireworks Knife (Eraser) tool 51 System requirements for 10 uninstalling Fireworks 12 Macromedia web site 12 Magic Wand tool 17 Lasso tool 16 magnification layers Ð document 32 adding 73...
Page 148 Ð modifying object mode 44 canvas color 37 activating 52 canvas size 37 activities 45 effects 66 blending mode behavior 82 fills 61 drawing 48 instances 79 editing tools 50 paths 48 pasting 88 strokes 60 pushing and pulling an area 51 symbols 79 pushing and pulling paths 51 moving...
Page 149 opacity mode palettes setting 21 adaptive 97 Open button (Windows only) 18 appending to current palette (steps) open paths 46 available on exporting 97 opening black and white 97 Fireworks 1 documents 53 changing 22 multiple documents 33 considerations for export 96 Text Editor 26 custom 97 optimizing...
Page 150 panels placing text on (steps) Color Mixer 23 pushing and pulling 51 Edit Stroke 60 redrawing 51 Effect 25 removing points 48 File 102 reshaping 48 Fill 24 selecting 46 Find & Replace 28 simplifying 48 Frames 27 Pen tool 17 grouping 31 Pencil tool 17 hiding 31...
Page 151 preview area rollovers in Export Preview 94 assigning URL links 121 Print button (Windows only) 18 creating toggle groups 123 printing customizing HTML code 123 Project Log 76 Down state 121 progressive JPEGs 104 exporting HTML code 123 Project Log 109 Over state 120 logging Find &...
Page 152 Scriptlets 109 showing creating (steps) edges 47 dragging and dropping 109 grid 39 (steps) running guides 39 searching 74 layers 73 Select Behind tool 16 marquees 47 Select Transparency tool 101 panels 31 selected text rulers 38 applying color using Color Mixer 23 selected objects 73 selecting Selection highlight 47...
Page 153 Stroke button (Windows only) 19 Swatches panel 22 Stroke panel 24 adding active color (steps) Stroke preview adding colors (steps) (steps) showing and hiding 24 appending a palette Ð strokes 59 applying color 57 adding texture 64 changing palette 22 (steps) brush stroke preview 60 deleting a color...
Page 154 Text tool 17 texture 64 target 121 transparency 61 templates thumbnail images HTML output styles 131 Ð creating 108 text 67 TIFF aligning 68 defined 106 anti-aliasing 67 tool groups attaching to paths 69 contents 16 baseline shift 68 displaying 16 block alignment 68 toolbars bold 68...
Page 155 Rectangle 17 Rectangle Hotspot 18 underlining 68 Redraw Path 17 Undo Reshape Area 17 command 38 Rubber Stamp 18 levels 38 Scale 17 Undo button (Windows only) 18 Select Behind 16 ungrouping objects 71 Skew 17 uniform palette 97 Slice 18 uninstalling Subselection 16 (steps)
Page 156 web-safe palette 97 Websnap adaptive palette 97 vector art Windows importing 40 (steps) installing and starting Fireworks vector drawing 44 System requirements for 10 Vector File Options uninstalling Fireworks 12 when importing 89 workflow View Controls toolbar 21 Ð How is Fireworks unique? 34 viewing document importing and exporting 86 Full Display or Draft Display 34...

This manual is also suitable for:

Fireworks 2

MACROMEDIA FIREWORKS 2-USING FIREWORKS Use Manual

Chapter 1

Chapter 2

Chapter 3

Chapter 4

Quick Links

Need help?

Questions and answers

Related Manuals for MACROMEDIA FIREWORKS 2-USING FIREWORKS

Summary of Contents for MACROMEDIA FIREWORKS 2-USING FIREWORKS

This manual is also suitable for:

Table of Contents