USING FIREWORKS
© 2007 Adobe Systems Incorporated. All rights reserved. Adobe® Fireworks® Using Fireworks® If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license.
iii Contents Chapter 1: Getting Started Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Adobe Help Resources ............................................................................... 2 ................................................................................ 4 What’s new in Fireworks CS3 ..............................................................
iv Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Using the Text Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Chapter 7: Applying Color, Strokes, and Fills Using the Colors section of the Tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
v Chapter 14: Creating Slideshows The Create Slideshow command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Building or editing a slideshow Slideshow properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1 Chapter 1: Getting Started Adobe® Fireworks® CS3, a unique hybrid vector and bitmap tool, delivers the most efficient design environment for rapidly prototyping websites and user interfaces, and creating and optimizing images for the web. Fireworks CS3 offers the flexibility to edit both vector and bitmap images, a common library of prebuilt assets, and time-saving integration with Adobe Photoshop® CS3, Adobe Illustrator® CS3, Adobe Dreamweaver® CS3, and Adobe Flash® CS3 Professional software.
ADOBE FIREWORKS CS3 2 User Guide Note: If you want to install the software on a different computer, you must first deactivate it on your computer. Choose Help > Deactivate. Register Register your product to receive complimentary installation support, notifications of updates, and other services. ❖ To register, follow the on-screen instructions in the Registration dialog box, which appears after you install and activate the software.
ADOBE FIREWORKS CS3 3 User Guide Most versions of in-product and LiveDocs Help let you search across the Help of multiple products. Topics also contain links to relevant content on the web or to topics in the Help of another product. Think of Help, both in the product and on the web, as a hub for accessing additional content and communities of users. The most complete and up-to-date version of Help is always on the web.
ADOBE FIREWORKS CS3 4 User Guide • Standard HTML tags define content structure, for screen reading or text-to-speech tools. • Style sheets control formatting, so there are no embedded fonts.
ADOBE FIREWORKS CS3 5 User Guide When you start the Video Workshop, you choose exactly the products and topics you want to learn. You can see details about each video to help focus your learning path. Community of presenters With this release, we invited the Adobe community to share their expertise and insights. Adobe and Lynda.com present tutorials, tips, and tricks from leading designers and developers such as Michael Ninness, Katrin Eismann, and Chris Georgenes.
ADOBE FIREWORKS CS3 6 User Guide Plug-ins Plug-in modules are small software programs that extend or add features to your software. Once installed, plug-in modules appear as options in the Import or Export menu; as file formats in the Open, Save As, and Export Original dialog boxes; or as filters in the Filter submenus. Presets Presets comprise a wide variety of useful tools, preferences, effects, and images.
ADOBE FIREWORKS CS3 7 User Guide • Think Tank articles describe how designers engage with technology and what their experiences mean for design, design tools, and society. • In Dialog Box, experts share new ideas in motion graphics and digital design. • The Gallery showcases how artists communicate design in motion. Visit Adobe Design Center at www.adobe.com/designcenter.
ADOBE FIREWORKS CS3 8 User Guide User communities Features forums, blogs, and other avenues for users to share technologies, tools, and information; ask questions; and find out how others are getting the most out of their software. User-to-user forums are available in English, French, German, and Japanese; blogs are posted in a wide range of languages. To participate in forums or blogs, visit www.adobe.com/communities.
ADOBE FIREWORKS CS3 9 User Guide Add multiple pages to a single document In a never-ending effort to improve web-design workflows, Fireworks CS3 makes it easy to build complex multipage web prototypes using a single PNG file. Each page contains its own settings for canvas document, size, color, image resolution, and guides. These settings can be set on a per-page basis, or globally across all pages in the document.
ADOBE FIREWORKS CS3 10 User Guide Work with Photoshop files With Fireworks CS3, you can directly import native files from Photoshop. Achieving a whole new level of functionality, Adobe is redefining the concept of what integration should be. Fireworks design comps and images can now be saved as native Photoshop files and opened in either Photoshop or Fireworks CS3 with layer information preserved.
ADOBE FIREWORKS CS3 11 User Guide Adobe Bridge Simplify file handling in Fireworks and within Adobe Creative Suite with Adobe Bridge, the next-generation file browser. Efficiently browse, tag, search, and process your images. Using Bridge and Fireworks together means you can take advantage of XMP metadata in your files.
12 Chapter 2: Fireworks Basics Fireworks CS3 is a software program for designing professional on-screen graphics. Its innovative solutions tackle the major problems facing graphic designers and webmasters. Using the wide range of tools in Fireworks, you can create and edit both vector and bitmap graphics within a single file. The advent of Fireworks freed web designers from having to jump back and forth among as many as a dozen taskspecific applications.
ADOBE FIREWORKS CS3 13 User Guide You can also use the Fireworks tools to edit imported graphics. You can import and edit files in JPEG, GIF, PNG, PSD, and many other file formats. After you import a graphic image, you can adjust its color and tone, as well as crop, retouch, and mask it. Interactive graphics Slices and hotspots are web objects that specify interactive areas in a web graphic.
ADOBE FIREWORKS CS3 14 User Guide About vector graphics Vector graphics render images using lines and curves, called vectors, that include color and position information. For example, the image of a leaf may be defined by a series of points that describe the outline of the leaf.
ADOBE FIREWORKS CS3 15 User Guide Creating a new document When you select File > New to create a new document in Fireworks, you create a Portable Network Graphic, or PNG document. PNG is the native file format for Fireworks. After you create graphics in Fireworks, you can export or save them in other familiar web graphic formats, such as JPEG, GIF, and animated GIF. You can also export or save graphics in many of the popular formats used off the web, such as TIFF, PSD, and BMP.
ADOBE FIREWORKS CS3 16 User Guide Opening and importing files In Fireworks, you can easily open, import, and edit both vector and bitmap images created in other graphics programs. In addition, you can import images from a digital camera or scanner. Note: Fireworks preserves many, but not all JavaScript behaviors when you import a file from Adobe Dreamweaver. If Fireworks supports a particular behavior, it recognizes that behavior and maintains it when you move a file back to Dreamweaver.
ADOBE FIREWORKS CS3 17 User Guide Note: Fireworks saves 16-bit TIFF images at 24-bit color depth. Animated GIFs You can bring animated GIF files into Fireworks in two ways: • You can import an animated GIF as an animation symbol. You can edit and move all the elements of the animation as a single unit and use the Library panel to create new instances of the symbol. Note: When you import an animated GIF, the frame delay setting defaults to 0.07 seconds.
ADOBE FIREWORKS CS3 18 User Guide You can get HTML content into Fireworks in several ways: • You can open all the HTML tables in an HTML file. • You can open the first HTML table that Fireworks encounters in an HTML file. • You can import the first HTML table that Fireworks encounters into an existing Fireworks document. Note: Fireworks can also import documents that use UTF-8 encoding and those that are written in XHTML.
ADOBE FIREWORKS CS3 19 User Guide Pasting into Fireworks Pasting an object copied from another application into Fireworks places the object in the center of the active document. You can copy and paste an object or text in any of these formats from the Clipboard: • FreeHand 7 or later • Illustrator • PNG • PICT (Macintosh) • DIB (Windows) • BMP (Windows) • ASCII text • EPS • WBMP • TXT • RTF To paste into Fireworks: 1 In the other application, copy the object or text that you wish to paste.
ADOBE FIREWORKS CS3 20 User Guide 2 Select Edit > Paste in Fireworks. If the bitmap image on the Clipboard has a different resolution than the current document does, you see a dialog box asking whether or not to resample. 3 Select one of the following: Resample •maintains the original width and height of the pasted bitmap, adding or subtracting pixels as necessary. Don’t Resample •maintains all the original pixels, which may make the relative size of the pasted image larger or smaller than expected.
ADOBE FIREWORKS CS3 21 User Guide 3 Select Photoshop Plug-Ins. 4 Click Browse if the Select the Photoshop Plug-ins Folder (Windows) or Choose a Folder (Macintosh) dialog box doesn’t automatically open. 5 Navigate to the folder containing the Photoshop plug-ins. To import an image from a digital camera (Windows): 1 Connect the camera to your computer. 2 Install the software that accompanies the camera if you have not already done so.
ADOBE FIREWORKS CS3 22 User Guide 4 Follow the instructions to apply the desired settings. The imported image is opened as a new Fireworks document. Saving Fireworks files When you create a new document or open an existing Fireworks PNG file, the document’s filename has the extension .png. Files of other types, such as PSD and HTML, also open as PNG files, allowing you to use the Fireworks PNG document as your source file, or working file.
ADOBE FIREWORKS CS3 23 User Guide 4 Select either Images or Fireworks PNG in the Export As pop-up menu. If you select Images, each page will be saved in the default file format. This file format can be set using the Optimize panel. All objects on the top-level layers will be saved in the export, but any items on sub-layers will not be exported.
ADOBE FIREWORKS CS3 24 User Guide The Fireworks work environment When you open a document in Fireworks for the first time, Fireworks activates the work environment, including the Tools panel, Property inspector, menus, and other panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector, and web tool groups. The Property inspector appears along the bottom of the document by default and initially displays document properties.
ADOBE FIREWORKS CS3 25 User Guide Using the Tools panel The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View. Changing tool options When you select a tool, the Property inspector displays tool options. Some tool options remain displayed as you work with the tool. For other tools, such as the basic shape, Pen, and Line tools, the Property inspector displays the properties of selected objects.
ADOBE FIREWORKS CS3 26 User Guide Selecting a tool from a tool group A small triangle in the lower right corner of a tool in the Tools panel indicates that it is part of a tool group. For example, the Rectangle tool is part of the basic shape tool group, which also includes the Rounded Rectangle, Ellipse, and Polygon basic tools, as well as all of the Auto Shape tools, which appear below the divider line.
ADOBE FIREWORKS CS3 27 User Guide To collapse the Property inspector when it is docked, do one of the following: • Click the expander arrow or the title of the Property inspector. • Select Collapse Panel Group from the docked Property inspector Options menu. For more information about specific Property inspector options, see the appropriate sections throughout Using Fireworks or Fireworks Help.
ADOBE FIREWORKS CS3 28 User Guide The Color Mixer panel lets you create new colors to add to the current document’s color palette or to apply to selected objects. The Swatches panel manages the current document’s color palette. The Info panel provides information about the dimensions of selected objects and the exact coordinates of the pointer as you move it across the canvas. The Behaviors panel manages behaviors, which determine what hotspots and slices do in response to mouse movement.
ADOBE FIREWORKS CS3 29 User Guide • Select Group With > New Panel Group from the Options menu in the panel group’s title bar. (The Group With command’s name changes depending on the name of the active panel.) The panel appears in a new panel group of its own. To dock a panel in a panel group, do one of the following: • Make sure both the panel and the panel group are open. Click on the panel and drag it to the panel group.
ADOBE FIREWORKS CS3 30 User Guide Using the panel group or panel Options menu Each panel group and panel has an Options menu listing a range of choices specific to the active panel or panel group. An Options menu also appears in the Property inspector (except in Windows when the Property inspector is undocked). To select an option from a panel group or panel Options menu: 1 Click the Options menu icon in the upper right corner of the panel group or panel to open the menu. 2 Select a menu item.
ADOBE FIREWORKS CS3 31 User Guide About the Quick Export button The Quick Export button lets you export your Fireworks files to a number of programs, including Dreamweaver, Flash, Photoshop, Illustrator, Adobe Director, Adobe GoLive®, and FreeHand. In addition, you can preview your files in the browser of your choice. For more information, see “Using the Quick Export button” on page 288.
ADOBE FIREWORKS CS3 32 User Guide Zooming and panning Fireworks lets you zoom in or out at a preset or user-defined magnification percentage. A. Hand tool B. Zoom tool C. Zoom pop-up menu To zoom in using preset increments, do one of the following: • Select the Zoom tool and click to specify the new center point inside the document window. Each click magnifies the image to the next preset magnification. • Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window.
ADOBE FIREWORKS CS3 33 User Guide Note: You cannot enter a magnification percentage in the Set Magnification text box. To zoom out based on a specific area: ❖ Alt-drag (Windows) or Option-drag (Macintosh) a selection area with the Zoom tool. To return to 100% magnification: ❖ Double-click the Zoom tool in the Tools panel. To pan around the document: 1 Select the Hand tool. 2 Drag the hand pointer.
ADOBE FIREWORKS CS3 34 User Guide To close a document view window: ❖ Click the window’s Close button. Controlling document redraw Display modes affect a document’s onscreen representation, but not its object data or output quality. To control document redraw: ❖ Select View > Full Display. When Full Display is selected, Fireworks displays the document in all available colors with full detail.
ADOBE FIREWORKS CS3 35 User Guide To change the canvas color from the Modify menu: 1 Select Modify > Canvas > Canvas Color. 2 Select White, Transparent, or Custom. If you select Custom, click a color in the Swatches pop-up window. To select the canvas color from the Property inspector: 1 Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, then click the Canvas color box.
ADOBE FIREWORKS CS3 36 User Guide 7 Select Current Page Only to apply the canvas size change to the current page. If this box is unchecked, the canvas size change applies to all pages in the active document, as well as any new pages that are created. 8 Click OK. About resampling Fireworks resamples images differently than most image-editing applications do. Fireworks contains pixel-based bitmap image objects and path-based vector objects.
ADOBE FIREWORKS CS3 37 User Guide Original; trimmed canvas To trim or fit the canvas to the document contents: 1 Choose Select > Deselect to view the document properties in the Property inspector. 2 Click Fit Canvas in the Property inspector. The canvas expands or contracts to the size of the contents of the canvas. Cropping a document By cropping, you can delete unwanted portions of a document. The canvas is resized to fit an area that you define.
ADOBE FIREWORKS CS3 38 User Guide Using rulers, guides, and the grid You can use rulers and guides to lay out objects as precisely as possible and to help you draw. You can place guides in the document and snap objects to those guides or turn on the Fireworks grid and snap objects to the grid. Using rulers Rulers help you to measure, organize, and plan the layout of your work.
ADOBE FIREWORKS CS3 39 User Guide Fireworks also has slice guides that allow you to slice a document for use on the web. Regular image guides are different from slice guides, however. For information on slice guides, see “Moving slice guides to edit slices” on page 204. To create a horizontal or vertical guide: 1 Click and then drag from the corresponding ruler. 2 Position the guide on the canvas and release the mouse button. Note: You can reposition the guide by dragging it again.
ADOBE FIREWORKS CS3 40 User Guide 2 Select the new grid color from the color box pop-up window, and click OK. To change the size of the grid’s cells: 1 Select View > Grid > Edit Grid. 2 Enter the appropriate values in the horizontal and vertical spacing text boxes, and click OK. Using the History panel to undo and repeat multiple actions With the History panel, you can view, modify, and repeat the actions taken to create the document.
41 Chapter 3: Selecting and Transforming Objects As you work in Fireworks CS3, you manipulate vector and bitmap objects, text blocks, slices and hotspots, and areas of pixels. Using the selection and transformation tools, you can move, copy, delete, rotate, scale, or skew objects. In documents that have multiple objects, you can organize the objects by stacking, grouping, and aligning them.
ADOBE FIREWORKS CS3 42 User Guide • Select the object in the Layers panel. To preview what you would select if you were to click on an object beneath the pointer on the canvas, select the Mouse Highlight option in the Editing tab of the Preferences dialog box. For more about preferences, see “Setting preferences” on page 346. To select objects by dragging: 1 Drag the Pointer tool to include one or more objects in the selection area.
ADOBE FIREWORKS CS3 43 User Guide Note: The name appears in the title bar of the document whenever you select this item. For slices and buttons, the name is the filename when exported. • The number of objects when more than one object is selected Note: If the status bar is turned on (Windows only), selected objects are also identified in the status bar at the bottom of the document window. The Property inspector also displays information and settings for the object type selected.
ADOBE FIREWORKS CS3 44 User Guide To show all objects: ❖ Select View > Show All. Note: To hide objects whether they are selected or not, you can click or drag along the Eye column in the Layers panel. Selecting pixels You can edit pixels over an entire canvas or select one of the selection tools to constrain your editing to a particular area of an image: The Marquee tool selects a rectangular area of pixels in an image. The Oval Marquee tool selects an elliptical area of pixels in an image.
ADOBE FIREWORKS CS3 45 User Guide Note: The Magic Wand tool also has a Tolerance setting. For more information, see “Selecting areas of similar color” on page 46. Creating pixel selection marquees The Marquee, Oval Marquee, and Lasso tools in the Bitmap section of the Tools panel allow you to select specific pixel areas of a bitmap image by drawing a marquee around them.
ADOBE FIREWORKS CS3 46 User Guide Selecting areas of similar color The Magic Wand tool allows you to select areas of pixels that are similar in color. By adjusting the Magic Wand’s Tolerance and Edge options in the Property inspector, you can control how the Magic Wand selects pixels. To select an area of pixels of similar color range: 1 Select the Magic Wand tool. 2 Select an Edge option in the Property inspector. For more information, see “Bitmap selection tool options” on page 44.
ADOBE FIREWORKS CS3 47 User Guide Removing a selection marquee You can remove a selection marquee without affecting the document. To remove a marquee, do one of the following: • Draw another marquee. • Click outside the current selection with a marquee or lasso tool. • Press Escape. • Choose Select > Deselect. Adjusting selection marquees After selecting pixels with a marquee or lasso tool, you can edit or move the marquee border without affecting the pixels beneath it.
ADOBE FIREWORKS CS3 48 User Guide To subtract pixels from a selection: ❖ Hold down Alt (Windows) or Option (Macintosh) and use a bitmap selection tool to select the pixel area to be punched out. Creating a marquee from intersecting marquees You can select pixels in an existing marquee by drawing a marquee that overlaps the original.
ADOBE FIREWORKS CS3 49 User Guide A pixel selection is created on the selected bitmap from the intersection of the opaque areas of the two overlapping objects. When you position the pointer over the thumbnail and hold down the specified modifier keys, the pointer indicates that you are about to create a pixel selection from the intersection of the opaque areas of two overlapping objects.
ADOBE FIREWORKS CS3 50 User Guide Selecting an area around an existing marquee You can create an additional marquee to frame an existing marquee at a specified width. This lets you create special graphics effects, such as feathering the edges of a pixel selection. To select an area around an existing marquee: 1 After drawing a marquee, select Select > Border Marquee. 2 Enter the width of the marquee that you want to place around the existing marquee, and click OK.
ADOBE FIREWORKS CS3 51 User Guide Saving marquee selections You can save the size, shape, and location of a selection to reapply later. You can also save multiple marquee selections. To save a marquee selection: 1 Choose Select > Save Bitmap Selection to open the Save Selection dialog box. 2 The Document box displays the name of the active document in which your marquee selection will be saved.
ADOBE FIREWORKS CS3 52 User Guide • “Subtract from selection” subtracts the active selection from the one specified in the Document and Selection boxes. • “Intersect with selection” intersects the active selection with the one specified in the Document and Selection boxes. 6 Select an option in the Operation section, and then click OK Repeat this process for each of the marquee selections that you want to restore.
ADOBE FIREWORKS CS3 53 User Guide Inserting a new bitmap by cutting or copying You can insert a new bitmap based on a pixel selection into the current layer of a document by cutting or copying the selected pixels. To insert a new bitmap by cutting and pasting a pixel selection: 1 Select an area of pixels using a pixel selection tool. 2 Select Edit > Insert > Bitmap via Cut.
ADOBE FIREWORKS CS3 54 User Guide Note: You cannot use the Duplicate or Clone commands with bitmap selections. Use the Subselection tool or Rubber Stamp tool to duplicate parts of a bitmap image. For more information about using the Subselection tool, see the following procedures. For more information about using the Rubber Stamp tool, see “Retouching bitmaps” on page 66. To duplicate a pixel selection, do one of the following: • Drag the pixel selection using the Subselection tool.
ADOBE FIREWORKS CS3 55 User Guide A. Center point B. Transform handles Object rotated, scaled, skewed, distorted, and flipped vertically and horizontally To transform selected objects using the transform handles: 1 Select a transformation tool. As you move the pointer on or near the selection handles, the pointer changes to indicate the current transformation. 2 Do one of the following to transform the objects: • Place the pointer near a corner point and then drag to rotate.
ADOBE FIREWORKS CS3 56 User Guide Note: You can also rotate the document canvas. For more information, see “Rotating the canvas” on page 36. To rotate a selected object 90° or 180°: ❖ Select Modify > Transform and select a Rotate command from the submenu. To rotate a selected object by dragging: 1 Select any transformation tool. 2 Move the pointer outside the object until the rotation pointer appears. 3 Drag to rotate the object.
ADOBE FIREWORKS CS3 57 User Guide To achieve the illusion of perspective: ❖ Drag a corner point. Distorting objects You change the size and proportions of an object by dragging a selection handle with the Distort tool. To distort a selected object: 1 Do one of the following to display the transform handles: • Select the Distort tool. • Select Modify > Transform > Distort. 2 Drag a handle to distort the object. 3 Double-click inside the window or press Enter to apply your changes.
ADOBE FIREWORKS CS3 58 User Guide Organizing objects When working with multiple objects in a single document, you can use several techniques to organize the document: • You can group individual objects to treat them as one or protect each object’s relationship to the others in the group. • You can arrange objects behind or in front of other objects. The way objects are arranged is called the stacking order. • You can align selected objects to an area of the canvas or to a vertical or horizontal axis.
ADOBE FIREWORKS CS3 59 User Guide To select the group that contains a subselected object, do one of the following: • Right-click (Windows) or Control-click (Macintosh) anywhere in the group and choose Select > Superselect from the context menu. • Choose Select > Superselect. To select all objects within a selected group, do one of the following: • Right-click (Windows) or Control-click (Macintosh) anywhere on the group and choose Select > Subselect from the context menu. • Choose Select > Subselect.
ADOBE FIREWORKS CS3 60 User Guide • Select Modify > Align > Center Horizontal to align the center points of the objects along a horizontal axis. • Select Modify > Align > Bottom to align the objects to the bottommost selected object. To evenly distribute the widths or heights of three or more selected objects: ❖ Select Modify > Align > Distribute Widths or Modify > Align > Distribute Heights. About arranging objects among layers The Layers panel offers another dimension of organizational control.
61 Chapter 4: Working with Bitmaps Bitmaps are graphics composed of small colored squares called pixels, which combine like the tiles of a mosaic to create an image. Examples of bitmap graphics include photographs, scanned images, and graphics created from paint programs. They are sometimes referred to as raster images. Fireworks CS3 combines the functionality of photo-editing, vector-drawing, and painting applications.
ADOBE FIREWORKS CS3 62 User Guide When you create a new bitmap object, it is added to the current layer. In the Layers panel with layers expanded, you can see a thumbnail and name for each bitmap object under the layer on which it resides. Although some bitmap applications consider each bitmap object a layer, Fireworks organizes bitmap objects, vector objects, and text as separate objects that reside on layers. For more information, see “Working with layers” on page 159.
ADOBE FIREWORKS CS3 63 User Guide Accessing photo editing tools To make it easy for you to get started editing photos as quickly as possible, Fireworks has assembled the most commonly used tools for photo editing all in one place. The Image Editing panel contains the following tools: Redeye Removal, Crop, Rotate, Blur, Sharpen, Dodge, and Burn.
ADOBE FIREWORKS CS3 64 User Guide Painting bitmap objects You can use the Brush tool to paint a brush stroke using the color in the Stroke Color box, or you can use the Paint Bucket tool to change the color of selected pixels to the color in the Fill Color box. With the Gradient tool, you can fill bitmap or vector objects with a combination of colors in adjustable patterns. To paint an object with the Brush tool: 1 Select the Brush tool. 2 Set the stroke attributes in the Property inspector.
ADOBE FIREWORKS CS3 65 User Guide 2 Open a Fireworks document or any file that Fireworks can open. For more information, see “Slices, Rollovers, and Hotspots” on page 200. Select the Eyedropper tool from the Colors section of the Tools panel. Set the Color Averaging Sample setting in the Property inspector: 3 1-pixel creates a stroke or fill color from a single pixel. 3x3 pixels creates a stroke or fill color from the average of color values in a 3-by-3-pixel area.
ADOBE FIREWORKS CS3 66 User Guide To feather the edges of a pixel selection as you make a pixel selection: 1 Select a bitmap selection tool from the Tools panel. 2 Select Feather from the Edge pop-up menu in the Property inspector. 3 Drag the slider to set the number of pixels you want to blur along the edge of the selection. 4 Make a selection. To feather the edges of a pixel selection from the menu bar: 1 Choose Select > Feather.
ADOBE FIREWORKS CS3 67 User Guide 3 Move to a different part of the image and drag the pointer. You will see two pointers. The first one, the source of the cloning, is in the shape of a cross hair. For more information, see “Editing preferences” on page 347. Depending upon the brush preferences you’ve selected, the second pointer is a rubber stamp, a cross hair, or a blue circle. As you drag the second pointer, pixels beneath the first pointer are copied and applied to the area beneath the second.
ADOBE FIREWORKS CS3 68 User Guide To smudge colors in an image: 1 Select the Smudge tool. 2 Set the tool options in the Property inspector: Size specifies the size of the brush tip. Shape sets a round or square brush tip shape. Edge specifies the softness of the brush tip. Pressure sets the intensity of the stroke. Smudge Color allows you to smudge using a specified color at the beginning of each stroke. If this option is deselected, the tool uses the color under the tool pointer.
ADOBE FIREWORKS CS3 69 User Guide Original photograph; after using the Red-eye Removal tool To correct the red-eye effect in a photograph: 1 Select the Red-eye Removal tool from its pop-up menu. 2 Set the attributes in the Property inspector: Tolerance determines the range of hues to replace (0 replaces only red; 100 replaces all hues that contain red). Strength sets the darkness of the grays used to replace reddish colors. 3 Click and drag the cross-hair pointer over the red pupils in the photograph.
ADOBE FIREWORKS CS3 70 User Guide 3 Click the From color box to select the color probe, and select a color from the pop-up menu to specify the color you want to replace. 4 Click the To color box in the Property inspector and select a color from the pop-up menu. 5 Set the other stroke attributes in the Property inspector: Size sets the size of the brush tip. Shape sets a round or square brush tip shape.
ADOBE FIREWORKS CS3 71 User Guide The crop handles appear around the entire selected bitmap or around the selection marquee, if you drew one in step 1. 3 Adjust the crop handles until the bounding box surrounds the area of the bitmap image that you want to keep. Note: To cancel a crop selection, press Escape. Bounding box 4 Double-click inside the bounding box or press Enter to crop the selection.
ADOBE FIREWORKS CS3 72 User Guide Fireworks applies the Live Filter only to the new bitmap object, simulating the application of a filter to a pixel selection. Note: Although Live Filters are more flexible, large numbers of Live Filters in a document can slow down Fireworks performance. For more information, see “Controlling document redraw” on page 34. Adjusting tonal range You can use the Levels and Curves features to adjust a bitmap’s tonal range.
ADOBE FIREWORKS CS3 73 User Guide To adjust highlights, midtones, and shadows: 1 Select the bitmap image. 2 Do one of the following to open the Levels dialog box: • In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Levels from the Filters pop-up menu. • Select Filters > Adjust Color > Levels. Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
ADOBE FIREWORKS CS3 74 User Guide To adjust highlights, midtones, and shadows automatically: 1 Select the image. 2 Do one of the following to select Auto Levels: • In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Auto Levels from the Filters pop-up menu. • Select Filters > Adjust Color > Auto Levels. Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
ADOBE FIREWORKS CS3 75 User Guide Curves dialog box 3 In the Channel pop-up menu, select whether you want to apply changes to individual color channels or to all colors. 4 Click a point on the grid’s diagonal line and drag it to a new position to adjust the curve. • Each point on the curve has its own Input and Output values. When you drag a point, the Input and Output values update automatically. • The curve displays brightness values of 0 to 255, with 0 representing the shadows.
ADOBE FIREWORKS CS3 76 User Guide 2 Select the appropriate eyedropper to reset the tonal values in the image: • Click the lightest pixel in the image with the Highlight eyedropper to reset the highlight value. • Click a pixel of neutral color in the image with the Midtone eyedropper to reset the midtone value. • Click the darkest pixel in the image with the Shadow eyedropper to reset the shadow value. 3 Click OK.
ADOBE FIREWORKS CS3 77 User Guide To add a Color Fill Live Filter to a selected object: 1 In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Color Fill from the Filters pop-up menu. 2 Select a blending mode. The default mode is Normal. For information about each blending mode, see “About blending modes” on page 179. 3 Select a fill color from the color box pop-up menu. 4 Select a percentage of opacity for the fill color and press Enter.
ADOBE FIREWORKS CS3 78 User Guide To change an RGB image to a two-tone image or to add color to a grayscale image: ❖ Select Colorize in the Hue/Saturation dialog box. Note: When you select Colorize, the value range of the Hue and Saturation sliders changes. Hue changes to 0 to 360. Saturation changes to 0 to 100. Inverting an image’s color values You can use Invert to change each color in an image to its inverse on the color wheel.
ADOBE FIREWORKS CS3 79 User Guide Blurring and sharpening bitmaps Fireworks has a set of blurring and sharpening options that you can apply as Live Filters or as irreversible, permanent filters. Blurring an image Blurring softens the look of a bitmap image. Fireworks has six blurring options: Blur softens the focus of selected pixels. Blur More blurs about three times as much as Blur. Gaussian Blur applies a weighted average of blur to each pixel to produce a hazy effect.
ADOBE FIREWORKS CS3 80 User Guide 3 Drag the Angle dial to set the direction of the blur effect. 4 Drag the Distance slider to set the strength of the blur effect. Values range from 1 to 100. An increase in distance results in a stronger blur effect. 5 Click OK. To blur an image using Radial Blur: 1 Select the image. 2 Do one of the following to open the Radial Blur dialog box: • In the Property inspector, click the Add Live Filters button, and select Blur > Radial Blur from the Filters pop-up menu.
ADOBE FIREWORKS CS3 81 User Guide Original; after applying Find Edges To apply the Find Edges filter to a selected area, do one of the following: • In the Property inspector, click the Add Live Filters button, and then select Other > Find Edges from the Filters pop-up menu. • Select Filters > Other > Find Edges. Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
ADOBE FIREWORKS CS3 82 User Guide Original; after sharpening To sharpen an image using a sharpen option: 1 Select the image. 2 Do one of the following to select a sharpen option: • In the Property inspector, click the Add Live Filters button, and then select Sharpen > Sharpen or Sharpen More from the Filters pop-up menu. • Select Filters > Sharpen > Sharpen or Sharpen More. Note: Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
ADOBE FIREWORKS CS3 83 User Guide Adding noise to an image When viewed at high magnification levels, most images obtained from digital cameras and scanners do not have perfectly uniform colors. Instead, the colors you see consist of pixels of many different colors. In image editing, “noise” refers to these random color variations in the pixels that make up an image.
84 Chapter 5: Working with Vector Objects A vector object is a computer graphic whose shape is defined by a path. The shape of a vector path is determined by points that are plotted along the path. A vector object’s stroke color follows the path. Its fill occupies the area inside the path. The stroke and fill typically determine how the graphic looks when published in print or on the web. Fireworks CS3 has many tools for drawing and editing vector objects using a variety of techniques.
ADOBE FIREWORKS CS3 85 User Guide For the Rectangle or Ellipse tool, Shift-drag to constrain shapes to squares or circles. To constrain a shape and draw from the center point: ❖ Position the pointer at the intended center point and Shift-Alt-drag (Windows) or Shift-Option-drag (Macintosh) the drawing tool. To adjust the position of a basic shape as you draw it: ❖ While holding down the mouse button, press and hold the Spacebar, then drag the object to another location on the canvas.
ADOBE FIREWORKS CS3 86 User Guide To draw a polygon: 1 In the Vector section of the Tools panel, select the Polygon tool, which is one of the basic shape drawing tools. 2 In the Property inspector, do one of the following to specify the number of sides for the polygon: • Use the Sides pop-up slider to select 3 to 25 sides. • Enter a number from 3 to 360 in the Sides text box. 3 Drag to draw the polygon. To constrain a polygon’s orientation to increments of 45°, hold down Shift as you draw.
ADOBE FIREWORKS CS3 87 User Guide Chamfer Rectangle draws object groups that appear as rectangles with chamfers, corners that are rounded to the inside of the rectangle. You can edit the chamfer radius of all corners together, or change the chamfer radius of individual corners. Connector Line draws object groups that appear as three-segment connector lines, such as those used to connect the elements of a flowchart or organizational chart.
ADOBE FIREWORKS CS3 88 User Guide • Control+Command-click the Direction control point to reset the x-axis only. • Double-click the Perspective control point to reset the width of the shadow only. For information about how to change the properties of an Auto Shape, see “Changing the properties of Auto Shapes” on page 88. Changing the properties of Auto Shapes The Auto Shape Properties panel gives you precise numeric control over your Auto Shapes.
ADOBE FIREWORKS CS3 89 User Guide To adjust the width of an arrow tail: ❖ Drag the body width control point of a selected arrow. Adjusting bent arrow Auto Shapes Bent arrows have five control points. There are control points for adjusting the flare of the arrowhead, the length of the arrowhead tip, the length of the arrow tail, the width of the arrow tail, and the roundness of the arrow’s bend.
ADOBE FIREWORKS CS3 90 User Guide Adjusting connector line Auto Shapes Connector lines have five control points. There are control points for placing the start and end points, for adjusting the position of the cross bar (the line that connects the start and end line segments), and for adjusting the roundness of the corners. To move the start or end point of a connector line: ❖ Drag the control point at the start or end of the connector line.
ADOBE FIREWORKS CS3 91 User Guide To resize a slice of a selected pie: ❖ Drag a drag-to-segment control point on the outer perimeter of the shape. To reset the a selected pie to one slice: ❖ Click the Reset control point. Adjusting L-shaped Auto Shapes L-shapes have four control points. There are control points for adjusting the length and width of each section of the L-shape, and for adjusting the roundness of the L-shape’s bend.
ADOBE FIREWORKS CS3 92 User Guide To adjust the number of turns in a selected spiral: ❖ Drag the spirals control point. To open or close a selected spiral: ❖ Click the open/close spiral control point. Adjusting star Auto Shapes Stars initially have five control points. There are control points for adding or removing points, for adjusting the inner and outer angles of the points, and for adjusting the roundness of the peaks and valleys.
ADOBE FIREWORKS CS3 93 User Guide Drawing freeform paths You can draw freeform vector paths with the Vector Path tool, much as you draw using a felt-tip marker or crayon. The Vector Path tool is located in the Pen tool pop-up menu. You can change the stroke and fill attributes of paths drawn with the Vector Path tool. See “Applying Color, Strokes, and Fills” on page 126.
ADOBE FIREWORKS CS3 94 User Guide Drawing paths by plotting points One way to draw and edit vector objects in Fireworks is to plot points as if drawing a connect-the-dots picture. When you click each point with the Pen tool, Fireworks automatically draws the path of the vector object from the last point you clicked. In addition to connecting the points with only straight segments, the Pen tool can draw smooth, mathematically derived curve segments known as Bezier curves.
ADOBE FIREWORKS CS3 95 User Guide • To close the path, click the first point you plotted. The beginning and end points of a closed path are the same. Note: Loops formed by a path overlapping itself are not closed paths. Only paths that begin and end on the same point are closed paths. Drawing curved path segments To draw curved path segments, you click and drag as you plot points. As you draw, the current point shows point handles.
ADOBE FIREWORKS CS3 96 User Guide 2 Click a point with the Subselection tool to select it. Selected corner points appear as solid blue squares. 3 Drag the point or use the arrow keys to move the point to a new location. Adjusting the shape of a curved path segment You can change the shape of a vector object by dragging its point handles with the Subselection tool. The point handles determine the degree of curvature between fixed points. These curves are known as Bezier curves.
ADOBE FIREWORKS CS3 97 User Guide Converting path segments to straight or curved Straight path segments are intersected by corner points. Curved path segments contain curve points. You can convert a straight segment to a curved segment and vice versa by converting its point. To convert a corner point to a curve point: 1 Select the Pen tool in the Tools panel. 2 Click a corner point on a selected path and drag away from it. The handles extend, curving the adjacent segments.
ADOBE FIREWORKS CS3 98 User Guide The handles retract, and the adjacent segments straighten. Selecting points The Subselection tool allows you to select multiple points. Before selecting a point with the Subselection tool, you must select the path using the Pointer or Subselection tool or by clicking its thumbnail in the Layers panel. To select specific points on a selected path: 1 Select the Subselection tool.
ADOBE FIREWORKS CS3 99 User Guide To change the shape of a path segment: ❖ Drag a point handle with the Subselection tool. Alt-drag (Windows) or Option-drag (Macintosh) to drag one handle at a time. To adjust the handle of a corner point: 1 Select the Subselection tool in the Tools panel. 2 Select a corner point. 3 Alt-drag (Windows) or Option-drag (Macintosh) the point to display its handle and bend the adjacent segment.
ADOBE FIREWORKS CS3 100 User Guide To merge two open paths: 1 Select the Pen tool in the Tools panel. 2 Click the end point of one of the paths. 3 Move the pointer to the end point of the other path and click. Auto-joining similar open paths You can easily join one open path with another that has similar stroke and fill characteristics. To auto-join two open paths: 1 Select an open path.
ADOBE FIREWORKS CS3 101 User Guide As you move the pointer over a selected path, it changes to the push or pull pointer, depending on its location relative to the selected path. Pointer Meaning The Freeform tool is in use. The Freeform tool is in use, and the pull pointer is in position to pull the selected path. The Freeform tool is in use, and the pull pointer is pulling the selected path. The Freeform tool is in use, and the push pointer is active.
ADOBE FIREWORKS CS3 102 User Guide Distorting paths You can use the Reshape Area tool to pull the area of all selected paths within the outer circle of the reshape area pointer. The pointer’s inner circle is the boundary of the tool at full strength. The area between the inner and outer circle reshapes paths at less than full strength. The pointer’s outer circle determines the gravitational pull of the pointer. You can set its strength.
ADOBE FIREWORKS CS3 103 User Guide 2 If desired, change the precision level of the Redraw Path tool by selecting a number from the pop-up menu in the Precision box of the Property inspector. The higher the number you select, the greater the number of points that appear on the path. 3 Move the pointer directly over the path. The pointer changes to the redraw path pointer. 4 Drag to redraw or extend a path segment. The portion of the path to be redrawn is highlighted in red. 5 Release the mouse button.
ADOBE FIREWORKS CS3 104 User Guide To create one continuous path from two open paths: 1 Select the Subselection tool in the Tools panel. 2 Select two end points on two open paths. 3 Select Modify > Combine Paths > Join. To create a composite path: 1 Select two or more open or closed paths. 2 Select Modify > Combine Paths > Join. To break apart a composite path: 1 Select the composite path. 2 Select Modify > Combine Paths > Split.
ADOBE FIREWORKS CS3 105 User Guide To create a closed path that encloses the area common to all selected closed paths: ❖ Select Modify > Combine Paths > Intersect. The resulting path assumes the stroke and fill attributes of the object that is placed farthest back. Removing portions of a path object You can remove portions of a selected path object as defined by the overlapping portions of another selected path object arranged in front of it.
ADOBE FIREWORKS CS3 106 User Guide You might want to use Simplify if you have a straight line that contains more than two points, for example. (Only two points are necessary to produce a straight line.) Or perhaps your path contains points that lie exactly on top of one another. Simplify removes points that are unnecessary to reproduce the path you’ve drawn. To simplify a selected path: 1 Select Modify > Alter Path > Simplify. The Simplify dialog box appears. 2 Enter a simplification amount and click OK.
ADOBE FIREWORKS CS3 107 User Guide 4 Specify a corner type: miter, round, or beveled. 5 If you chose miter, set the miter limit, the point at which a miter corner automatically becomes a beveled corner. The miter limit is the ratio of miter corner length to stroke width. 6 Click OK. A smaller or larger path object with the same stroke and fill attributes replaces the original path object. Editing paths using the Path panel The path panel provides quick access to a number of path related commands.
ADOBE FIREWORKS CS3 108 User Guide Icon Function Inset paths Invert paths Open/close paths Extrude paths Blend paths Point tools Straighten Smooth Round to whole positions Round to half positions Move points Scale points Rotate points Mirror points Fillet points Select entire contour Select all points Deselect all points Incrementally grow or shrink the selection
109 Chapter 6: Working with Text Fireworks CS3 has many text features typically reserved for sophisticated desktop publishing applications. You can create text in a variety of fonts and sizes and adjust kerning, spacing, color, leading, baseline shift, and more. Combining Fireworks text-editing features with the wide range of strokes, fills, filters, and styles makes text a lively element of your graphic designs. You can also use the Fireworks spell-checker to correct misspellings.
ADOBE FIREWORKS CS3 110 User Guide The Property inspector when the Text tool is selected Naming a text object As you add text to your Fireworks document, that text object is automatically saved under a name that matches the text you’ve typed. You can change the assigned name to a different name, if you prefer. To change the name of a text object 1 Select the text object.
ADOBE FIREWORKS CS3 111 User Guide 6 When you have finished entering text, do one of the following: • Click outside the text block. • Select another tool in the Tools panel. • Press Escape. Moving text blocks You can select a text block and move it anywhere in your document, as you would any other object. You can also move text blocks as you drag to create them. To move a text block: ❖ Drag it to the new location.
ADOBE FIREWORKS CS3 112 User Guide Formatting text Within a text block, you can vary all aspects of text, including size, font, spacing, leading, and baseline shift. When you edit text, Fireworks redraws its stroke, fill, and filter attributes accordingly. You can change a text block’s attributes using the Property inspector. If the Property inspector is minimized, click the expander arrow in the lower right corner to see all text properties.
ADOBE FIREWORKS CS3 113 User Guide Note: The fonts that were used most recently appear at the top of the Font pop-up menu. 2 To change the font size, drag the Font Size pop-up slider or enter a value in the text box. Font size is measured in points. 3 To apply bold, italic, or underline formatting, click the corresponding button.
ADOBE FIREWORKS CS3 114 User Guide A. Fill Color box • In the Tools panel, click the Fill Color box and select a color from the color pop-up window, or sample a color from anywhere on the screen using the eyedropper pointer while the Fill Color box pop-up window is open. • In the Tools panel, click the icon next to the Fill Color box, select the Eyedropper tool, and then click to sample a color anywhere in any open document.
ADOBE FIREWORKS CS3 115 User Guide To set kerning: 1 Do one of the following to select the text you want to kern: • Click between two characters with the Text tool. • Use the Text tool to highlight the characters you want to change. • Use the Pointer tool to select an entire text block. Shift-click to select multiple text blocks. 2 Do one of the following: • In the Property inspector, drag the Kerning pop-up slider or enter a percentage in the text box. A. Kerning pop-up slider B.
ADOBE FIREWORKS CS3 116 User Guide Setting text orientation A text block can be oriented horizontally or vertically. By default, text is oriented horizontally. Horizontal and vertical orientation Text can also flow right to left or left to right. Text flowing right to left and left to right In Fireworks, you set horizontal and vertical orientation as well as the direction of text flow in the Property inspector. These settings apply to entire text blocks only.
ADOBE FIREWORKS CS3 117 User Guide Vertical text can be aligned to the top or bottom of a text block, centered within the text block, or fully justified between both the top and bottom edges. To achieve a stretched filter, or to fit text into a specific space, you can set the alignment to stretch the text horizontally (for horizontally oriented text) or vertically (for vertically oriented text).
ADOBE FIREWORKS CS3 118 User Guide Smoothing text edges To smooth out a text edge, you “anti-alias” it. This makes the edges of the text blend into the background so that the text is cleaner and more readable when it is large. Original text; after smoothing You use the Property inspector to set anti-aliasing. If the Property inspector is minimized, click the expander arrow in the lower right corner to see all properties. Anti-aliasing applies to all characters in a given text block.
ADOBE FIREWORKS CS3 119 User Guide Setting baseline shift Baseline shift determines how closely text sits above or below its natural baseline. If there is no baseline shift, the text sits on the baseline. You can use baseline shift to create subscript and superscript characters. The baseline shift controls are in the Property inspector. Baseline shift is measured in pixels.
ADOBE FIREWORKS CS3 120 User Guide Attaching text to a path To free text from the restrictions of rectangular text blocks, you can draw a path and attach text to it. The text flows along the shape of the path and remains editable. A path to which you attach text temporarily loses its stroke, fill, and filter attributes. Any stroke, fill, and filter attributes you apply subsequently are applied to the text, not the path.
ADOBE FIREWORKS CS3 121 User Guide Changing text orientation and direction on a path The order in which you draw a path establishes the direction of the text attached to it. For example, if you draw a path from right to left, the attached text appears backward and upside down. Text attached to a path drawn right to left You can change the orientation or reverse the direction of the text attached to a path. You can also change the starting point of text on a path.
ADOBE FIREWORKS CS3 122 User Guide You can still edit the transformed text, although severe transformations may make the text difficult to read. When a text block transformation causes text to be resized or scaled, the resulting font size appears in the Property inspector when the text is selected. Converting text to paths You can convert text to paths and then edit the shapes of the letters as you would any vector object. All vector-editing tools are available after you convert text to paths.
ADOBE FIREWORKS CS3 123 User Guide Photoshop text You can open or import a Photoshop file containing text. You can also copy text from a Photoshop file and paste into the current Fireworks document or drag it from the Photoshop file to the current document. For more information, see “Opening graphics created in other applications” on page 16.
ADOBE FIREWORKS CS3 124 User Guide 4 Click OK. The next time you open a document with the same missing fonts, the Missing Fonts dialog box includes the font you chose. Checking spelling You can use the Check Spelling command in the Text menu to check spelling for specific text blocks or all text in a document. To spell-check text: 1 Select one or more text blocks. If no text blocks are selected, Fireworks checks spelling in the entire document. 2 Select Text > Check Spelling.
ADOBE FIREWORKS CS3 125 User Guide 2 Select the desired options in the Spelling Setup dialog box: • Select one or more language dictionaries. Note: The Macromedia.tlx option is always selected at the top of the dictionary list. This is the file that contains your custom spelling dictionary. • Browse for a custom dictionary by clicking the folder icon beside the Personal Dictionary Path text box.
126 Chapter 7: Applying Color, Strokes, and Fills Fireworks CS3 has a wide range of panels, tools, and options for organizing and selecting colors, and applying colors to bitmap images and vector objects. In the Swatches panel, you can select a preset swatch group such as Color Cubes, Continuous Tone, or Grayscale, or you can create custom swatch groups that include your favorite colors or colors approved by your client.
ADOBE FIREWORKS CS3 127 User Guide Note: The Paint Bucket tool fills pixel selections and vector objects with the color shown in the Fill Color box in the Tools panel. Color boxes in the Tools panel and the color pop-up window To reset colors to the default: ❖ Click the Default Colors button in the Tools panel or in the Color Mixer. To remove the stroke and fill from selected objects using the No Stroke or Fill button: 1 Click the No Stroke or Fill button in the Colors section of the Tools panel.
ADOBE FIREWORKS CS3 128 User Guide Changing swatch groups You can easily switch to another swatch group or create your own. The Swatches panel Options menu contains the following swatch groups: Color Cubes, Continuous Tone, Macintosh System, Windows System, and Grayscale. You can import custom swatches from color palette files saved as ACT or GIF files. To select a swatch group: ❖ Select a swatch group from the Swatches panel Options menu.
ADOBE FIREWORKS CS3 129 User Guide 4 Move the tip of the eyedropper pointer to the open space after the last swatch in the Swatches panel. The eyedropper pointer becomes the paint bucket pointer. 5 Click to add the swatch. When you select Snap to Web Safe in the Options menu of the color pop-up window, any non-websafe color you pick up with the eyedropper pointer is changed to the nearest websafe color. To replace a swatch with another color: 1 Select the Eyedropper tool from the Tools panel.
ADOBE FIREWORKS CS3 130 User Guide Although CMY is a color model option, graphics directly exported from Fireworks are not ideal for printing. To repurpose exported Fireworks graphics for print, you can import them into Adobe Illustrator, Adobe Photoshop, or Adobe FreeHand, which automatically perform CMYK conversion of RGB images when output to digital color separations. For more information, see the documentation for those programs.
ADOBE FIREWORKS CS3 131 User Guide To pick a color from the Color Mixer: 1 Deselect all objects before mixing a color to prevent unwanted object editing as you mix colors. 2 Click either the Stroke Color or Fill Color box to make it the destination for the new color. 3 Select a color model from the Color Mixer Options menu. 4 Do any of the following to specify color component values: • Enter values in the color component text boxes. • Use the pop-up sliders. • Pick a color from the color bar.
ADOBE FIREWORKS CS3 132 User Guide Note: By default, the color’s RGB values appear in the Info panel and the Color Mixer, and its hexadecimal value appears in the color pop-up window, as well as the color box tool tip in Windows. However, you can change the color model displayed in the Color Mixer or the Info panel anytime. To display color information for another color model: ❖ Select another color model from the Info panel Options menu or the Color Mixer Options menu.
ADOBE FIREWORKS CS3 133 User Guide When you view the graphic in a web browser, the web page background shows through every other pixel of the transparent web dither fill, creating the appearance of transparency. Note: Not all browsers support PNG files. Color management using the Color Palette panel The Color Palette panel gives you the ability to create and swap color palettes, export custom ACT color swatches, explore various color schemes and access commonly used controls for choosing colors.
ADOBE FIREWORKS CS3 134 User Guide To create and swap color palettes for your document: 1 Select the Mixers tab in the Color Palette panel. 2 Use the four fill color boxes at the bottom of the panel to set the four base colors for your document. A palette is automatically created. 3 If needed, use the HSB color wheel in the lower right corner of the panel to modify the hue, saturation, or brightness of your palette. Each change is automatically applied to the entire palette.
ADOBE FIREWORKS CS3 135 User Guide To create a color gradation series using the Blender tab: 1 Select the Blender tab in the Color Palette panel. 2 Use the fill color boxes at the bottom of the panel to select beginning and ending colors for the series. 3 Use the Steps pop-up slider to select the number of steps in the series. After you have created the gradation series, you can apply any of the colors within your document.
ADOBE FIREWORKS CS3 136 User Guide To display a different swatch group in the color pop-up window: ❖ Select a swatch group from the color pop-up window Options menu. Selecting a swatch group here does not affect the Swatches panel. Sampling colors from a color pop-up window When a color pop-up window is open, the pointer becomes a special eyedropper that can take up colors from almost anywhere on the screen. This is known as sampling.
ADOBE FIREWORKS CS3 137 User Guide Use the options in the Property inspector or the Stroke Options pop-up window to change the stroke applied to an object. To change the stroke color of a drawing tool: 1 Press Control+D (Windows) or Command+D (Macintosh) to deselect all objects. 2 Select a drawing tool in the Tools panel. 3 Click the Stroke Color box in the Tools panel or Property inspector to open the color pop-up window. 4 Select a color for the stroke from the set of swatches.
ADOBE FIREWORKS CS3 138 User Guide Creating custom strokes You can use the Edit Stroke dialog box to change specific stroke characteristics. The Edit Stroke dialog box has three tabs: Options, Shape, and Sensitivity. The stroke preview at the bottom of each tab shows the current brush with the current settings. The current pressureand speed-sensitivity settings are reflected in the preview by a stroke that tapers or fades or otherwise changes from left to right.
ADOBE FIREWORKS CS3 139 User Guide 6 To select a dotted or dashed line, select an option from the Dash pop-up menu. 7 To set the lengths of dashes and spaces for a dotted line, use the three sets of On and Off text input boxes to control the first, second, and third dashes, respectively. 8 Click Apply to apply the settings to selected strokes, then click OK. To modify the brush tip: 1 On the Shape tab of the Edit Stroke dialog box, select Square for a square tip, or deselect it for a round tip.
ADOBE FIREWORKS CS3 140 User Guide Creating stroke styles You can change specific stroke characteristics such as ink amount, tip shape, and tip sensitivity, and save the custom stroke as a style for reuse across many documents. To create custom strokes: 1 Do one of the following: • Click the Stroke Color box in the Tools panel and then click Stroke Options. • Select Stroke Options from the Stroke Options pop-up menu in the Property inspector. The Stroke Options pop-up window opens.
ADOBE FIREWORKS CS3 141 User Guide Editing solid fills A solid fill is a solid color that fills the interior of an object. You can change an object’s fill color in the Tools panel, Property inspector, or Color Mixer. To edit a selected vector object’s solid fill: 1 Click the Fill Color box in the Property inspector, Tools panel, or Color Mixer to open the color pop-up window. 2 Select a swatch from the color pop-up window. The fill appears in the selected object and becomes the active fill color.
ADOBE FIREWORKS CS3 142 User Guide Adding a custom pattern You can set a bitmap file as a new pattern fill. You can use files with these formats as patterns: PNG, GIF, JPEG, BMP, TIFF, and PICT (Macintosh only). When a pattern fill is a 32-bit transparent image, the transparency affects the fill when used in Fireworks. If an image is not 32-bit, it becomes opaque. When you add a new pattern, its name appears in the Pattern Name pop-up menu of the Fill Options pop-up window.
ADOBE FIREWORKS CS3 143 User Guide Edit Gradient pop-up window To open the Edit Gradient pop-up window: 1 Select an object that has a gradient fill or select a gradient fill from the Fill Options pop-up menu in the Property inspector. 2 Click the Fill Color box in the Property inspector or Tools panel to open the pop-up window. The Edit Gradient pop-up window opens with the current gradient in the color ramp and preview.
ADOBE FIREWORKS CS3 144 User Guide To use the Gradient tool: 1 Click the Paint Bucket tool in the Tools panel and select the Gradient tool from the pop-up menu. 2 Select from the following attributes in the Property inspector: Fill Options is a pop-up menu from which you can select a gradient type. Fill Color box when clicked, displays the Edit Gradient pop-up window, from which you can set a variety of color and transparency options.
ADOBE FIREWORKS CS3 145 User Guide 2 Select an edge option: Hard Edge, Anti-Alias, or Feather. 3 For a feathered edge, also select the number of pixels on each side of the edge that are to be feathered. The default is 10. You can select from 0 to 100. The higher the level, the more feathering occurs. About saving a custom gradient fill To save the current gradient settings as a custom gradient for use across many documents, you must create a style.
ADOBE FIREWORKS CS3 146 User Guide • Select a texture from the pop-up menu. • Select Other from the pop-up menu and navigate to a texture file to use an external texture. Note: You can apply textures from files with these formats: PNG, GIF, JPEG, BMP, TIFF, and PICT (Macintosh only). 3 Enter a percentage from 0 to 100 to control the depth of the texture. Increasing the percentage increases the texture intensity.
147 Chapter 8: Using Live Filters Fireworks CS3 Live Filters (formerly known as Live Effects) are enhancements that you can apply to vector objects, bitmap images, and text. Live Filters include bevels and embossing, solid shadows, drop shadows and glows, color correction, and blurring and sharpening. You can apply Live Filters to selected objects directly from the Property inspector. Fireworks automatically updates Live Filters when you edit objects that have them applied.
ADOBE FIREWORKS CS3 148 User Guide Note: A newly created fill assumes the current color displayed in the Fill Color box in the Tools panel. You can customize each Live Filter to get the look you want. When you select color correction filters, dialog boxes open containing controls to adjust color characteristics such as auto levels, brightness and contrast, hue and saturation, invert, curves, and color fill.
ADOBE FIREWORKS CS3 149 User Guide Applying beveled edges Applying a beveled edge to an object gives it a raised look. You can create an inner bevel or an outer bevel. A rectangle, with Inner Bevel, and with Outer Bevel To apply a beveled edge to a selected object: 1 Click the Add Live Filters button in the Property inspector, then select a bevel option from the pop-up menu: • Bevel and Emboss > Inner Bevel. • Bevel and Emboss > Outer Bevel. 2 Edit the filter settings in the pop-up window.
ADOBE FIREWORKS CS3 150 User Guide To apply a solid shadow: 1 In the Property inspector, click the Add Live Filters button, point to Shadow and Glow, and then click Solid Shadow. 2 In the Solid Shadow dialog box, adjust the filter settings: • Drag the Angle slider to set the direction of the shadow. • Drag the Distance slider to set the distance of the shadow from the object. • Select the Solid Color check box to apply solid color to the shadow.
ADOBE FIREWORKS CS3 151 User Guide Plug-ins from the Filters menu When you install an Adobe Photoshop plug-in in Fireworks, it is added to the Filters menu and to the Property inspector. You should use the Filters menu to apply filters and Photoshop plug-ins only when you are certain that you will not want to edit or remove the filter. You can remove a filter only if the Undo command is available.
ADOBE FIREWORKS CS3 152 User Guide Editing Live Filters When you click a Live Filter’s info button in the Property inspector, Fireworks opens a pop-up window with the current settings for the filter, which you can edit. To edit a Live Filter: 1 In the Property inspector, click the info button next to the filter you want to edit. The corresponding pop-up window or dialog box opens. 2 Adjust the filter settings. Note: If a filter is not editable, the info button is dimmed.
ADOBE FIREWORKS CS3 153 User Guide To create a custom Live Filter using the Property inspector: 1 Apply Live Filter settings to selected objects. For more information, see “Applying Live Filters” on page 147. 2 In the Property inspector, click the Add Live Filters button, then select Options > Save As Style. The New Style dialog box opens. 3 Type a name for the style and click OK.
ADOBE FIREWORKS CS3 154 User Guide A. Save button 5 Enter a command name and click OK to add the command to the Commands menu.
155 Chapter 9: Pages, Layers, Masking, and Blending Fireworks CS3 added the capability to create a single PNG file that contains multiple pages. Each page contains its own settings for canvas, size, color, image resolution, and guides. These settings can be set on a per-page basis, or globally across all pages in the document. You can also create a master page for common elements. Layers and pages can be used together if you have elements that you want to appear on more than one page.
ADOBE FIREWORKS CS3 156 User Guide Adding and removing pages Using the Pages panel, you can add new pages, delete unwanted pages, and duplicate existing pages. When you create a new page, a blank page is inserted at the end of the list of pages. The new page becomes the active page and is highlighted in the Pages panel. When you delete a page, the page above it becomes the active page.
ADOBE FIREWORKS CS3 157 User Guide Using a master page If you have some elements that you want to be common across all of your pages, you can use a master page. When you convert an ordinary page to a master page it moves to the top of the list in the Pages panel and it is colored gray. When a master page is created, a Master Page Layer is added at the bottom of the layer hierarchy for each page. This layer can be removed by selecting Remove Master Page Layer from the Options menu in the Layers panel.
ADOBE FIREWORKS CS3 158 User Guide Note: If you use the Quick Export button to export the file, only the currently selected page is exported. 2 Choose the location for the export files. 3 Select HTML and Images from the Export pop-up menu. 4 Click the Options button and select your HTML editor from the HTML Style pop-up menu on the General tab of the HTML Setup dialog box. If your HTML editor is not listed, select Generic. 5 Click OK to return to the Export dialog box.
ADOBE FIREWORKS CS3 159 User Guide Working with layers Each object in a document resides on a layer. You can either create layers before you draw or add layers as needed. The canvas is below all layers and is not itself a layer. For information on working with the canvas, see “Changing the canvas” on page 34. You can view the stacking order of layers, sub-layers, and objects in the Layers panel. This is the order in which they appear in the document.
ADOBE FIREWORKS CS3 160 User Guide To activate a layer, do one of the following: • Click the layer name in the Layers panel. • Select an object on that layer. Adding and removing layers Using the Layers panel, you can add new layers, add new sub-layers, delete unwanted layers, and duplicate existing layers and objects. When you create a new layer, a blank layer is inserted above the currently selected layer. The new layer becomes the active layer and is highlighted in the Layers panel.
ADOBE FIREWORKS CS3 161 User Guide Viewing layers The Layers panel displays objects and layers in a hierarchical structure. If a document contains many objects and layers, the Layers panel can become cluttered and difficult to navigate. Collapsing the display of layers helps eliminate clutter. When you need to view or select specific objects on a layer, you can expand that layer. You can also expand or collapse all layers at once.
ADOBE FIREWORKS CS3 162 User Guide Protecting layers and objects The Layers panel offers a number of options that let you control the accessibility of objects. You can protect objects in your document from inadvertent selection and editing. Locking an individual object prevents that object from being selected or edited. Locking a layer prevents all objects on that layer from being selected or edited.
ADOBE FIREWORKS CS3 163 User Guide Merging down causes all selected vector objects and bitmap objects to be flattened into the bitmap object that lies just beneath the bottommost selected object. The result is a single bitmap object. Vector objects and bitmap objects cannot be edited separately once merged, and editability for vector objects is lost. To merge objects: 1 Select the object or objects on the Layers panel that you want to merge with a bitmap object.
ADOBE FIREWORKS CS3 164 User Guide 2 Type the new name, and then click outside the window or press Enter. Note: When you rename a slice, that name is used when the slice is exported. About importing Photoshop grouped layers Photoshop files that contain layers are imported with each layer placed as a separate object on a single Fireworks layer. Grouped layers are imported as individual layers, as if the layers were ungrouped in Photoshop before being imported into Fireworks.
ADOBE FIREWORKS CS3 165 User Guide When a vector mask is selected, the Property inspector displays information about how the mask is applied. The bottom half of the Property inspector displays additional properties that allow you to edit the mask object’s stroke and fill. Vector mask properties in the Property inspector By default, vector masks are applied using their path outline, but you can also apply them in other ways. For more information, see “Changing the way masks are applied” on page 176.
ADOBE FIREWORKS CS3 166 User Guide Bitmap mask properties in the Property inspector when a bitmap tool is selected By default, most bitmap masks are applied using their grayscale appearance, but you can also apply them using their alpha channel. For more information, see “Changing the way masks are applied” on page 176. Creating a mask from an existing object You can create a mask from an existing object. When used as a mask, a vector object’s path outline can be used to clip or crop other objects.
ADOBE FIREWORKS CS3 167 User Guide If you are masking multiple objects, the objects must be grouped. For more information about grouping objects, see “Grouping objects” on page 58. 5 Do one of the following to paste the mask: • Select Edit > Paste as Mask. • Select Modify > Mask > Paste as Mask. A mask applied to an image with a black canvas Masking objects using the Paste Inside command If you are a FreeHand user, you may be familiar with the Paste Inside method of creating masks.
ADOBE FIREWORKS CS3 168 User Guide To create a mask using the Paste Inside command: 1 Select the object or objects to use as the paste inside contents. 2 Position the object or objects so that they overlap the object into which you want to paste the contents. Note: Stacking order is not important, as long as the objects you want to use as the paste inside contents remain selected. These objects can be above or below the mask object in the Layers panel.
ADOBE FIREWORKS CS3 169 User Guide Using text as a mask Text masks are a type of vector mask. You apply text masks just as you apply masks using existing objects: you simply use text as the mask object. The usual way to apply a text mask is to use its path outline, but you can apply a text mask using its grayscale appearance as well. A text mask applied using its path outline For more information, see “Creating a mask from an existing object” on page 166.
ADOBE FIREWORKS CS3 170 User Guide Image with mask applied The mask as it appears in the Layers panel Note: For more information about modifying a bitmap mask’s appearance by drawing on it, see “Modifying a mask’s appearance” on page 175. Masking objects using the Reveal and Hide commands The Modify > Mask submenu has several options for applying empty bitmap masks to objects: Reveal All applies an empty, transparent mask to an object, revealing the entire object.
ADOBE FIREWORKS CS3 171 User Guide 5 Draw on the empty mask. In the areas where you draw, the underlying masked object is either hidden or shown, depending on the type of mask you applied. Note: For more information about modifying a bitmap mask’s appearance by drawing on it, see “Modifying a mask’s appearance” on page 175. To use Reveal Selection and Hide Selection commands to create a mask: 1 Select the Magic Wand or any marquee or lasso tool from the Tools panel. 2 Select pixels in a bitmap.
ADOBE FIREWORKS CS3 172 User Guide Fireworks masks can also be exported to Photoshop. They are converted into Photoshop layer masks. If the masked objects include text and you want to maintain text editability in Photoshop, you must select Maintain Editability over Appearance when exporting. Note: If text is used as the mask object, it is converted to a bitmap and is no longer editable as text after it is imported into Photoshop.
ADOBE FIREWORKS CS3 173 User Guide Editing masks You can modify masks in many ways. By modifying a mask’s position, shape, and color, you can change the visibility of masked objects. You can also change a mask’s type and the way it is applied. In addition, masks can be replaced, disabled, or deleted. The results of editing a mask are immediately visible, even if the mask object itself is not visible on the canvas. The mask thumbnail in the Layers panel displays the edits you make to the mask.
ADOBE FIREWORKS CS3 174 User Guide When selected, masks have a green highlight and masked objects have a blue highlight. Moving masks and masked objects You can reposition masks and masked objects. They can be moved together or independently. To move a mask and its masked objects together: 1 Select the mask on the canvas using the Pointer tool. 2 Drag the mask to a new location, but don’t drag the move handle unless you want to move the masked object separately from the mask.
ADOBE FIREWORKS CS3 175 User Guide 2 Select the Subselection tool and drag the mask’s move handle to a new location. To move masked objects independently of the mask using the move handle: 1 Select the mask on the canvas using the Pointer tool. 2 Drag the move handle to a new location. The objects move without affecting the position of the mask. Note: If there is more than one masked object, all masked objects move together.
ADOBE FIREWORKS CS3 176 User Guide To modify a selected mask’s color, do one of the following: • For grayscale bitmap masks, use the bitmap tools to draw on the mask using various grayscale color values. • For grayscale vector masks, change the color of the mask object. Note: Use lighter colors to display the masked objects and darker colors to hide the masked objects. To modify a mask by adding more mask objects: 1 Select Edit > Cut to cut the selected object or objects you want to add.
ADOBE FIREWORKS CS3 177 User Guide A bitmap mask applied using its alpha channel Both vector and bitmap masks can be applied using their grayscale appearance. Bitmap masks are applied using their grayscale appearance by default. When a mask is applied using its grayscale appearance, the lightness of its pixels determines how much of the masked object is displayed. Light pixels display the masked object. Darker pixels in the mask knock out the image and show the background.
ADOBE FIREWORKS CS3 178 User Guide 2 Select Modify > Flatten Selection. Adding objects to a masked selection You can add more objects to an existing masked selection. To add masked objects to a masked selection: 1 Select Edit > Cut to cut the selected object or objects you want to add. 2 Select the thumbnail of the masked object in the Layers panel. 3 Select Edit > Paste Inside. The object or objects are added to the masked objects.
ADOBE FIREWORKS CS3 179 User Guide Blending and transparency Compositing is the process of varying the transparency or color interaction of two or more overlapping objects. In Fireworks, blending modes allow you to create composite images. Blending modes also add a dimension of control to the opacity of objects and images. About blending modes When you select a blending mode, Fireworks applies it to the selected objects in their entirety.
ADOBE FIREWORKS CS3 180 User Guide Pin Light replaces the color, depending on the blend color. If the blend color is lighter than 50% gray, pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change. If the blend color is darker than 50% gray, pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change. Hard Mix reduces the colors in an image to just eight pure colors.
ADOBE FIREWORKS CS3 181 User Guide Difference Hue Saturation Color Luminosity Invert Tint Erase Adjusting opacity and applying blends You can use the Property inspector or the Layers panel to adjust the opacity of selected objects and to apply blending modes. An Opacity setting of 100 renders an object completely opaque. A setting of 0 (zero) renders an object completely transparent. You can also specify a blending mode and opacity before you draw an object.
ADOBE FIREWORKS CS3 182 User Guide About the Color Fill Live Filter Fireworks also offers a Live Filter that allows you to adjust the color of an object by altering the object’s opacity and blend mode. This Live Filter, called Color Fill, produces the same effect as overlapping an object with one that has a different opacity and blend mode. For more details on using the Color Fill Live Filter, see “Using Live Filters” on page 147.
183 Chapter 10: Using Styles, Symbols, and URLs Fireworks provides three panels in which you can store and reuse styles, symbols, and URLs. Styles are stored in the Styles panel, symbols for the current document are stored in the Library panel, and URLs are stored in the URL panel. By default, all three panels are organized in the Assets panel group. The Styles panel contains a set of predefined Fireworks styles to select from.
ADOBE FIREWORKS CS3 184 User Guide Styles panel When you apply a style to an object, you can later update the style without affecting the original object. Fireworks does not keep track of which style you applied to an object. If you delete a custom style, you cannot recover it; however, any object currently using the style retains its attributes. If you delete a style supplied in Fireworks, you can recover it and all other deleted styles using the Reset Styles command in the Styles panel Options menu.
ADOBE FIREWORKS CS3 185 User Guide 4 Name the style if you want, and click OK. An icon depicting the style appears in the Styles panel. To base a new style on an existing style: 1 Apply the existing style to a selected object. 2 Edit the attributes of the object. 3 Save the attributes by creating a new style, as described in the previous procedure. To delete a style: 1 Select a style from the Styles panel.
ADOBE FIREWORKS CS3 186 User Guide Using style defaults If you want to delete all custom styles from the Styles panel and restore any deleted default styles, you can reset the Styles panel to its default state. You can also change the size of the icons displayed in the Styles panel. To reset the Styles panel to the default styles: ❖ Select Reset Styles from the Styles panel Options menu. Note: Resetting styles to the default removes any custom styles you may have saved.
ADOBE FIREWORKS CS3 187 User Guide 3 Select a symbol type: Graphic, Animation, or Button. 4 If you want to use 9-slice scaling guides to scale the symbol, select the Enable 9-slice scaling guides check box. For more information on the 9-slice scaling feature see “Using 9-slice scaling” on page 188. 5 To add the symbol to the Common Library panel so that it can be used in multiple documents, select the Save to Common Library check box. 6 Click OK to save the symbol.
ADOBE FIREWORKS CS3 188 User Guide • Select an instance and select Modify > Symbol > Edit Symbol. • Select a symbol in the Library panel and choose Edit Symbol from the Options menu. 2 Make changes to the symbol and close the window. The symbol and all instances reflect the modifications. Note: Use the 9-slice scaling guides in the symbol editor to make sure the symbol shape is not distorted when it is resized. For more information see “Using 9-slice scaling” on page 188.
ADOBE FIREWORKS CS3 189 User Guide The following figure shows how images are scaled using the 9-slice scaling feature. The 9-slice scaling guides are enabled in the Symbol Editor and Button Editor for all symbols by default. To scale a symbol using 9-slice scaling: 1 Double click the symbol or button to open the Symbol Editor or Button Editor. 2 Edit the 9-slice scaling guides as follows: a Enable or disable the guides by selecting or deselecting the Enable 9-slice scaling guides check box.
ADOBE FIREWORKS CS3 190 User Guide Creating and using rich graphic symbols Rich symbols are a type of graphic symbol that can be intelligently scaled and given specific attributes using a JavaScript (JSF) file. These attributes can then be controlled by using the Symbol Properties panel (Window > Symbol Properties).
ADOBE FIREWORKS CS3 191 User Guide 7 Click the browse button in the upper right corner of the panel and browse to the symbol PNG file. This is saved in the \Application Data\Adobe\Fireworks 9\Common Library\Custom Symbols (Windows), or /Application Support/Adobe/Fireworks9/Common Library/Custom Symbols (Macintosh) directory, by default. 8 Click the plus button to add an element name. 9 Add the name of the element that you want to customize.
ADOBE FIREWORKS CS3 192 User Guide The Create Symbol Script panel allows non-programmers to assign some simple symbol attributes and create the JavaScript file automatically. To open this panel, select Create Symbol Script from the Commands menu. The JavaScript file Two functions in the JavaScript file must be defined in order to add editable parameters to the symbol: • function setDefaultValues() –defines the parameters that can be edited and the default values of these parameters.
ADOBE FIREWORKS CS3 193 User Guide function applyCurrentValues() { var currValues = Widget.elem.customData["currentValues"]; //color_bg is the Layer name in the PNG that will change colors var color_bg = Widget.GetObjectByName("color_bg"); color_bg.pathAttributes.fillColor = currValues[0].value; } switch (Widget.opCode) { case 1: setDefaultValues(); break; case 2: applyCurrentValues(); break; default: break; } To better understand how the .
ADOBE FIREWORKS CS3 194 User Guide • Opacity • Filters • Width and height • x and y coordinates Note: Button instances have additional properties that can be edited without affecting the symbol. For more information about editing button instances, see “Editing button symbols” on page 224. To edit instance properties without affecting the symbol or breaking the symbol link: 1 Select the instance. 2 Modify instance properties in the Property inspector.
ADOBE FIREWORKS CS3 195 User Guide The imported symbols appear in the Library panel. You can also import and export individual symbols into and out of the Library panels of multiple documents by dragging and dropping or copying and pasting instances. To import a symbol by dragging and dropping or copying and pasting, do one of the following: • Drag a symbol instance from the document containing the symbol into the destination document.
ADOBE FIREWORKS CS3 196 User Guide 5 Select Update from the Library panel Options menu. Note: To update all imported symbols, select all the symbols in the Library panel and select Update. Working with URLs Assigning a URL to a web object creates a link to a file such as a web page. You can assign URLs to hotspots, buttons, and slice objects. When you intend to use the same URLs several times, you can create a URL library in the URL panel and store the URLs in the library.
ADOBE FIREWORKS CS3 197 User Guide Relative URLs are usually the simplest ones to use for links to files that will always remain in the same folder as the current document. Working with pages If your Fireworks document contains a number of pages, you can automatically create links between the pages by using the URLs for each page. The pop-up menu in the Link field in either the Property inspector or the URL panel contains a list of URLs for each page in your document.
ADOBE FIREWORKS CS3 198 User Guide To simultaneously add a URL to the library while assigning it to a web object: 1 Select the object. 2 Do one of the following to enter the URL: • Select Add URL from the URL panel Options menu, enter an absolute or relative URL, and click OK. • Enter a URL in the Link text box. Click the Plus (+) button. The URL appears in the URL preview pane. See “Assigning URLs” on page 212 and “Setting the URL for a button symbol or instance” on page 226.
ADOBE FIREWORKS CS3 199 User Guide 2 Select an HTML file and click Open. All URLs in this file are imported.
200 Chapter 11: Slices, Rollovers, and Hotspots Slices are the basic building blocks for creating interactivity in Fireworks. Slices are web objects—they exist not as images, but ultimately as HTML code. You can view, select, and rename them through the Web Layer in the Layers panel. This chapter discusses the concepts central to slicing and gives procedures for using slices to incorporate interactivity into your web pages.
ADOBE FIREWORKS CS3 201 User Guide Slicing allows you to easily update parts of a web page that change frequently. For example, your company’s web page might have an employee-of-the-month section that changes monthly. Slicing enables you to quickly change just the employee’s name and photo without replacing the entire page. Updating parts of a web page Creating slice objects You can create a slice object by drawing it with the Slice tool or by inserting a slice based on a selected object.
ADOBE FIREWORKS CS3 202 User Guide To create an HTML slice: 1 Draw a slice object and leave it selected. 2 In the Property inspector, select HTML from the Type pop-up menu. 3 Click Edit. 4 Type text in the Edit HTML Slice window, and format the text if desired by adding HTML text-formatting tags. Note: Alternatively, you can add HTML text-formatting tags to the HTML after it has been exported using a text editor or HTML editor such as Adobe Dreamweaver.
ADOBE FIREWORKS CS3 203 User Guide Viewing and displaying slices and slice guides You can control the visibility of slices and other web objects in your document using the Layers panel and the Tools panel. When you turn slice visibility off for the whole document, slice guides are hidden too. Using the Property inspector, you can organize slices by assigning a unique color to each slice object. You can also change the color of slice guides through the View menu.
ADOBE FIREWORKS CS3 204 User Guide To change the color of a selected slice object: ❖ In the Property inspector, select a new color from the color box. To change the color of slice guides: 1 Select View > Guides > Edit Guides. 2 Select a new color from the Slice Color section of the Guides dialog box and click OK. Editing slices In Fireworks you can work with a slice layout as if it were a table in a word-processing application.
ADOBE FIREWORKS CS3 205 User Guide The pointer changes to the guide movement pointer. 2 Drag the slice guide to the desired location. The slices are resized, and all adjacent slices are automatically resized as well. To reposition a slice guide to the far edge of the canvas, ❖ Use the Pointer or Subselection tool to drag the slice guide beyond the edge of the canvas. To move adjacent slice guides: 1 Shift-drag a slice guide across adjacent slices guides. 2 Release the slice guide in the desired location.
ADOBE FIREWORKS CS3 206 User Guide • The Behaviors panel allows you to create more complex interactivity. The Behaviors panel contains a variety of interactive behaviors you can attach to slices. By attaching multiple behaviors to a single slice, you can create interesting effects. You can also select from a variety of mouse events that trigger interactive behaviors. Behaviors in Fireworks are compatible with Dreamweaver behaviors.
ADOBE FIREWORKS CS3 207 User Guide The simplest rollover swaps an image in Frame 1 with an image directly below it in Frame 2. You can build more complicated rollovers as well. Swap-image rollovers can swap in images from any frame; disjoint rollovers swap in an image from a slice other than the trigger slice. In Fireworks, when you select a trigger web object created using a behavior handle or the Behaviors panel, all of its behavior relationships are displayed.
ADOBE FIREWORKS CS3 208 User Guide Note: You can select the slice while in any frame. 7 Click the behavior handle and select Simple Rollover from the menu. 8 Click the Preview tab and test the simple rollover, or press F12 to preview it in a browser. Creating a disjoint rollover A disjoint rollover swaps in an image under a web object when the pointer rolls over another web object. In response to a pointer rolling over or clicking a trigger image, an image appears in a different location on the web page.
ADOBE FIREWORKS CS3 209 User Guide A slice triggering a rollover behavior and a disjoint rollover behavior Note: You can also add multiple behaviors using the Behaviors panel. For more information, see “Using the Behaviors panel to add interactivity to slices” on page 209. To apply more than one rollover to a selected slice: 1 Drag a behavior handle from the selected slice to the edge of the same slice or onto another slice.
ADOBE FIREWORKS CS3 210 User Guide Set Nav Bar Image sets a slice to be a part of a Fireworks navigation bar. Each slice that is part of the navigation bar must have this behavior. The Set Nav Bar Image option is actually a behavior group containing the Nav Bar Over, Nav Bar Down, and Nav Bar Restore behaviors. This behavior is automatically set for you by default when you use the Button Editor to create a button that includes an Include Over While Down state or Show Down Image Upon Load state.
ADOBE FIREWORKS CS3 211 User Guide 3 Click the arrow beside the event and select a new event from the pop-up menu: onMouseOver triggers the behavior when the pointer rolls over the trigger area. onMouseOut triggers the behavior when the pointer leaves the trigger area. onClick triggers the behavior when the trigger object is clicked. onLoad triggers the behavior when the web page is loaded.
ADOBE FIREWORKS CS3 212 User Guide Using the Property inspector or the Layers panel, you can give slices unique names. Fireworks uses the name you specify to name the files that are generated from slicing upon export. If you don’t enter a slice name in the Property inspector or the Layers panel, Fireworks automatically names slices for you upon export. You can change the autonaming convention that Fireworks uses through the HTML Setup dialog box.
ADOBE FIREWORKS CS3 213 User Guide Export settings You can optimize a slice by selecting an option from the Export Settings pop-up menu in the Property inspector or Optimize panel. You can select from common export settings to quickly set a file format and apply several formatspecific settings. For more information on using and customizing these settings, see “Using optimization settings” on page 262. Naming slices Slicing cuts an image into pieces.
ADOBE FIREWORKS CS3 214 User Guide Option Description Slice # (1,2,3...) The element is labeled numerically or alphabetically, according to the style you select. Slice # (01,02,03...) Slice # (A,B,C...) Slice # (a,b,c...) row/column (r3_c2, r4_c7...) Row (r##) and Col (c##) designate the rows and columns of the table that web browsers use to reconstruct a sliced image. You can use this information in the naming convention.
ADOBE FIREWORKS CS3 215 User Guide Note: Use caution when selecting None as a menu option for slice auto-naming. If you select None as the option for any of the first three menus, Fireworks exports slice files that overwrite one another, resulting in a single exported graphic and a table that displays this graphic in every cell. Defining how HTML tables are exported Slicing defines how the HTML table structure appears when a Fireworks document is exported for use on the web.
ADOBE FIREWORKS CS3 216 User Guide Working with hotspots and image maps Web designers can use hotspots to make small parts of a larger graphic interactive, linking areas of web graphics to a URL. You can create an image map in Fireworks by exporting HTML from a document that contains hotspots. An image map with hotspots Hotspots and image maps are often less resource-intensive than sliced graphics.
ADOBE FIREWORKS CS3 217 User Guide 2 Drag the hotspot tool to draw a hotspot over an area of the graphic. Hold down Alt (Windows) or Option (Macintosh) to draw from a center point. Note: You can adjust the position of a hotspot as you drag to draw it. While holding down the mouse button, simply press and hold down the Spacebar, then drag the hotspot to another location on the canvas. Release the Spacebar to continue drawing the hotspot. To create an odd-shaped hotspot: 1 Select the Polygon Hotspot tool.
ADOBE FIREWORKS CS3 218 User Guide Creating image maps After you’ve inserted several hotspots on top of a desired graphic, you must export the graphic as an image map so it will function in a web browser. Exporting an image map generates the graphics and the HTML containing map information for hotspots and corresponding URL links. Note: Fireworks produces only client-side image maps when exporting.
ADOBE FIREWORKS CS3 219 User Guide Note: A hotspot can trigger only a disjoint rollover. It cannot be the target of a rollover coming from another hotspot or slice. After you create a disjoint rollover with a hotspot, the connecting blue line remains visible only while the hotspot is selected. Using hotspots on top of slices You can place a hotspot on top of a slice to trigger an action or behavior.
220 Chapter 12: Creating Buttons and Pop-up Menus In Fireworks you can create a variety of JavaScript buttons and Cascading Style Sheet (CSS) or JavaScript pop-up menus, even if you know nothing about JavaScript and CSS code. The Fireworks Button Editor leads you through the button-creation process, automating many button-making tasks. The result is a convenient button symbol. After you’ve created a button symbol, you can easily create instances of the symbol to make a navigation bar, or nav bar.
ADOBE FIREWORKS CS3 221 User Guide About button states A button can have up to four different states. Each state represents the button’s appearance in response to a mouse event: The Up state is the default or at-rest appearance of the button. The Over state is the way the button appears when the pointer is moved over it. This state alerts the user that clicking the mouse is likely to result in an action. The Down state represents the button after it is clicked.
ADOBE FIREWORKS CS3 222 User Guide • Click Copy Up Graphic to paste a copy of the Up state button into the Over window, and then edit it to change its appearance or text. • Drag and drop, import, or draw a graphic. Creating a three- or four-state button When creating a button, you may want to add a Down state and an Over While Down state in addition to the Up and Over states. These states give web page users additional visual cues.
ADOBE FIREWORKS CS3 223 User Guide 3 In the pop-up menu that appears, do one of the following: • Select Bevel and Emboss > Inner Bevel. • Select Bevel and Emboss > Outer Bevel. 4 In the pop-up window that appears, select a button preset filter. These are described below. Button preset filter Description Raised The bevel appears to rise from the underlying objects. Highlighted The button’s colors lighten. Inset The bevel appears to sink into the underlying objects.
ADOBE FIREWORKS CS3 224 User Guide To place instances of a button symbol in a document: 1 Open the Library panel. 2 Drag the button symbol to the document. To place additional instances of a button symbol in a document, do one of the following: • Select an instance, and then select Edit > Clone to place another instance directly in front of the selected instance. The new instance becomes the selected object.
ADOBE FIREWORKS CS3 225 User Guide • Size and position of the active area • Core button behavior • Optimization and export settings • URL link (also available as an instance-level property) • Target frame (also available as an instance-level property) To edit button properties at the symbol level: 1 Do one of the following to open the button in the Button Editor: • Double-click a button instance in the workspace.
ADOBE FIREWORKS CS3 226 User Guide Setting interactive button properties With Fireworks, you can control the interactive elements of a button, including the active area, URL, target, and alternative (alt) image description. Modifying the active area of a button symbol The active area of a button symbol triggers interactivity when a user moves the pointer over it or clicks it in a web browser. The active area of a button is a symbol-level property and is unique to button symbols.
ADOBE FIREWORKS CS3 227 User Guide • Select a URL from the URL panel. Note: Changing the URL for a button symbol won’t change the URL for existing button instances of that symbol that already have unique URLs assigned to them. This also applies to changes made to a button symbol’s target and alt text. To set the URL for a selected button instance in the workspace, do one of the following: • Enter the URL in the Link text box in the Property inspector, or select a page from the drop down list.
ADOBE FIREWORKS CS3 228 User Guide Setting the alternate (alt) text for a button symbol or instance Alternate (alt) text appears on or near an image placeholder while an image is downloading from the web or in place of an image if it fails to download. It also replaces graphics if the user has the browser set to refrain from displaying images. Alt text can be a symbol- or instance-level button property. You can set alternate text for a button symbol or instance in the Property inspector.
ADOBE FIREWORKS CS3 229 User Guide Creating pop-up menus Pop-up menus are displayed in a browser when the user moves a pointer over or clicks a triggering web object, such as a slice or hotspot. You can attach URL links to pop-up menu items for navigation. For example, you can use popup menus to organize several navigation options that are related to a button in a nav bar. You can create as many submenu levels as you like in pop-up menus.
ADOBE FIREWORKS CS3 230 User Guide Depending on the design of the pop-up menu, you may not use all the tabs or options in the Pop-up Menu Editor. You can edit settings in any tab anytime, but you must add at least one menu item in the Content tab to create a menu that you can preview in a browser. Creating a basic pop-up menu The Content tab of the Pop-up Menu Editor is where you determine the basic structure and content of the pop-up menu.
ADOBE FIREWORKS CS3 231 User Guide Creating submenus within a pop-up menu Using the Indent Menu and Outdent Menu buttons on the Content tab of the Pop-up Menu Editor, you can create submenus—pop-up menus that appear when the user moves the pointer over or clicks another pop-up menu item. You can create as many levels of submenus as you want. To create a pop-up submenu: 1 Open the Content tab of the Pop-up Menu Editor and create menu items.
ADOBE FIREWORKS CS3 232 User Guide 3 Click Done. Designing the appearance of a pop-up menu After you create a basic menu and optional submenus, you can format the text, apply graphic styles to the Over and Up states, and select vertical or horizontal orientation in the Appearance tab of the Pop-up Menu Editor. To set the orientation of a pop-up menu: 1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Appearance tab.
ADOBE FIREWORKS CS3 233 User Guide For information on opening an existing pop-up menu in the Pop-up Menu Editor, see “Editing pop-up menus” on page 236. 2 Select a preset size from the Size pop-up menu or enter a value in the Size text box. Note: When cell width and height are set to Automatic in the Advanced tab of the Pop-up Menu Editor, text size determines the size of graphics associated with the menu item. 3 Select a system font group from the Font pop-up menu or enter the name of a custom font.
ADOBE FIREWORKS CS3 234 User Guide Setting advanced pop-up menu properties The Advanced tab of the Pop-up Menu Editor offers additional settings to control cell size, padding, and spacing; text indention; menu disappearance delay; and border width, color, shadow, and highlight. To set advanced cell properties for the current pop-up menu: 1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Advanced tab.
ADOBE FIREWORKS CS3 235 User Guide 8 Do one of the following to complete the pop-up menu or continue building it: • Click Next to move to the Position tab or select another tab to continue building the pop-up menu. • Click Done to close the Pop-up Menu Editor. In the workspace, the hotspot or slice on which you built the popup menu displays a blue behavior line attached to an outline of the top level of the pop-up menu. Note: To view a pop-up menu, press F12 to preview it in a browser.
ADOBE FIREWORKS CS3 236 User Guide To set the position for a pop-up submenu using the Pop-up Menu Editor: 1 With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab. For information on opening an existing pop-up menu in the Pop-up Menu Editor, see “Editing pop-up menus” on page 236. 2 Do one of the following to define the submenu position: • Click a Submenu Position button to position the submenu relative to the pop-up menu item that triggers it. • Enter x and y coordinates.
ADOBE FIREWORKS CS3 237 User Guide To move an entry in the pop-up menu: 1 With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content tab. 2 Drag the menu item to a new location in the list. 3 Click Done. About exporting pop-up menus Fireworks generates all the CSS code or JavaScript (depending on which option you select) necessary to view popup menus in web browsers.
238 Chapter 13: Creating Animations Animated graphics add an exciting, sophisticated look to your website. In Fireworks, you can create animated graphics with banner ads, logos, and cartoons that move. For example, you can make your company mascot dance across a page while the logo fades in and out. One way to create animations in Fireworks is by creating symbols and changing their properties over time to produce the illusion of motion. A symbol is like an actor whose movements you choreograph.
ADOBE FIREWORKS CS3 239 User Guide Note: Degree and direction of movement options are found only in the Animate dialog box. 3 Use the Frame Delay controls in the Frames panel to set the speed of the animated motion. For more information, see “Setting the frame delay” on page 242. 4 Optimize the document as an animated GIF. For more information, see “Optimizing an animation” on page 248.
ADOBE FIREWORKS CS3 240 User Guide 2 Select Modify > Animation > Animate selection. 3 Enter the desired settings in the dialog box. For more information on settings, see “Editing animation symbols” on page 240. Animation controls appear on the object’s bounding box, and a copy of the symbol is added to the library. Editing animation symbols You can manipulate the properties of animation symbols to make your website come alive.
ADOBE FIREWORKS CS3 241 User Guide To change animation symbol properties: 1 Select an animation symbol. 2 Select Modify > Animation > Settings to open the Animate dialog box or Window > Properties to open the Property inspector if it is not already open. 3 Change the desired properties. 4 If you’re using the Animate dialog box, click OK to accept the changed properties.
ADOBE FIREWORKS CS3 242 User Guide You can change the direction of the motion by changing the angle of the path. To change movement or direction: ❖ Drag one of the symbol’s animation start or end handles to a new location. The green point indicates the starting point; the red indicates the ending point. Shift-drag to constrain the direction of movement to 45° increments. Working with frames You build animations by creating a number of frames.
ADOBE FIREWORKS CS3 243 User Guide 3 Enter a value for the frame delay. 4 Press Enter, or click outside the panel to close the pop-up window. Showing and hiding frames for playback You can show or hide frames for playback. If a frame is hidden, it is not displayed during playback and it is not exported. To show or hide a frame: 1 Do one of the following: • Select Properties from the Frames panel Options menu. • Double-click the frame delay column. The Frame Properties pop-up window appears.
ADOBE FIREWORKS CS3 244 User Guide To copy a selected frame and place it in a sequence: 1 Select Duplicate Frame from the Frames panel Options menu. 2 Enter the number of duplicates to create for the selected frame, select where the duplicate frames are to be inserted, and click OK. Duplicating a frame is useful when you want objects to reappear in another part of the animation. To reorder frames: ❖ Drag the frames one by one to a new location in the list.
ADOBE FIREWORKS CS3 245 User Guide To share a layer across frames: 1 Click the layer to select it. 2 Select Share Across Frames. Note: All the contents in a shared layer appear in every frame. To disable the sharing of a layer across frames: 1 Click the shared layer to select it. 2 Deselect Share Across Frames. 3 Select one of the following options for how to copy objects to frames: • Leave the contents of the shared layer in the current frame only. • Copy the contents of the shared layer to all frames.
ADOBE FIREWORKS CS3 246 User Guide No Onion Skinning turns off onion skinning and displays only the contents of the current frame. Show Next Frame displays the contents of the current frame and the next frame. Before and After displays the contents of the current and adjacent frames. Show All Frames displays the contents of all frames. Custom sets a custom number of frames and controls the opacity of onion skinning. Multi-Frame Editing lets you select and edit all visible objects.
ADOBE FIREWORKS CS3 247 User Guide • To set how long each frame appears in the Document window, enter frame delay settings in the Frames panel. • Frames excluded from the export do not appear in the preview. • Previewing the animation in the Original view displays the full-resolution source graphic, not the optimized preview used for the exported file. To preview an animation in Preview view: 1 Click the Preview button at the upper left of the Document window. 2 Use the frame controls.
ADOBE FIREWORKS CS3 248 User Guide 2 From the Transparency pop-up menu in the Optimize panel, select either Index Transparency or Alpha Transparency. For a description of these options, see “Making areas transparent” on page 271. 3 Use the transparency tools in the Optimize panel to select colors for transparency. Optimizing an animation Optimization compresses your file into the smallest package for fast loading and exporting, making downloading time much quicker on your website.
ADOBE FIREWORKS CS3 249 User Guide Imported GIFs lose their original frame delay settings and assume the frame delay of the current document. Because the imported file is an animation symbol, you can apply additional motion to it. For example, you can import an animation of a man walking in place and then apply direction and motion properties to have the man walk across the screen. When you open an animated GIF in Fireworks, a new file is created and each frame in the GIF is placed in a separate frame.
250 Chapter 14: Creating Slideshows Create Slideshow is a built-in Flash command that gives you the ability to generate Flash or HTML/SPRY-based slideshows by simply selecting a folder with images, and adding slideshow options.
ADOBE FIREWORKS CS3 251 User Guide If you are a Flash designer or developer, you can also build a custom album player in Flash to display the Fireworks Album Creator’s XML output. For more information, see “Creating a custom Fireworks album player” on page 254. To create a slideshow: 1 Select Commands > Create Slideshow. 2 Click the Add an album button (the plus sign) next to Albums. 3 Choose the image files to include in the slideshow. Then click OK.
ADOBE FIREWORKS CS3 252 User Guide To delete an album: 1 Select Commands > Create Slideshow. 2 In the Create Slideshow window, select Albums > Open an existing AlbumBook. 3 Browse to the folder that contains the existing slideshow XML file and click Open. 4 Select the album in the Albums lists, and then click the Remove an album button (the minus sign). To add additional images to an album: 1 Select Commands > Create Slideshow.
ADOBE FIREWORKS CS3 253 User Guide Auto-Start Slideshow: Starts the slideshow automatically when the player opens. Allow clicking images: Allows the viewer to click and open the image in a new browser window. This allows the viewer of the slideshow to save images, view them in new tab, or view the full-sized version of the image. First Album: Select which album in the AlbumBook is loaded when the player starts. Album Properties panel The following properties apply only to the individual selected album.
ADOBE FIREWORKS CS3 254 User Guide Slideshow Properties panel Use these options to customize the currently selected slideshow. Apply to all albums: Apply the specified options to all albums in the AlbumBook or only to the currently selected album. Interval: Number of seconds between each image. Use Transition: Select this option to use a specified transition effect between images in the slideshow. First image: Select the image number of the first image that the player displays in the slideshow.
ADOBE FIREWORKS CS3 255 User Guide
ADOBE FIREWORKS CS3 256 User Guide showThumbnails: whether or not to show thumbnails; or, whether or not thumbnails were exported thumbWidth: width of thumbnail thumbHeight: height of thumbnail autoStart: starts the slideshow automatically allowClick: whether or not to allow users to click the images clickAction: which action to take when an image is clicked (open it in new window, new tab, or let the player decide) Album node title: title of this particular album description: description for the album pa
257 Chapter 15: Optimizing and Exporting The ultimate goal in web graphic design is to create great-looking images that download as fast as possible. To do that, you must select a file format with the best compression for your image while maintaining as much quality as possible. This balancing act is optimization—finding the right mix of color, compression, and quality.
ADOBE FIREWORKS CS3 258 User Guide • Adjusting the colors in the graphic (for 8-bit file formats only). You can limit colors by confining the image to a specific set of colors called a color palette. Then you trim unused colors from the color palette. Fewer colors in the palette means fewer colors in the image, which results in a smaller file size for paletted image file types. You should experiment with all optimization controls to find the best balance of quality and size.
ADOBE FIREWORKS CS3 259 User Guide A. Saved set of options for the selected export B. File size and download time estimates C. Preview chosen export settings D. Save export settings in the active view You can use split views to compare various settings to find the smallest file size that maintains an acceptable level of quality. You can also constrain the file size using the Optimize to Size wizard.
ADOBE FIREWORKS CS3 260 User Guide Note: When you zoom or pan while multiple views are open, all views zoom and pan simultaneously. 5 Click Export when you have finished changing settings. 6 In the Export dialog box, type a name for the file, select a destination, set any other options if desired, and click Save. For more information about the options in the Export dialog box, see “Exporting from Fireworks” on page 276. To set optimization settings using Image Preview: 1 Click the Options tab.
ADOBE FIREWORKS CS3 261 User Guide • Enter pixel coordinates for the boundaries of the export area. To set animation settings using Image Preview: 1 Click the Animation tab. 2 Use the following techniques to preview animation frames: • To display a single frame, select the desired frame in the list on the left side of the dialog box, or use the frame controls in the lower right area of the dialog box. • To play the animation, click the Play/Stop control in the lower right area of the dialog box.
ADOBE FIREWORKS CS3 262 User Guide You don’t have to use the Export Wizard and Image Preview in Fireworks if you’re comfortable optimizing and exporting graphics. Fireworks has optimization and export features in the workspace that give you greater control over how files are exported: • The Optimize panel contains the key controls for optimizing. For 8-bit file formats, it also contains a color table that displays the colors in the current export color palette.
ADOBE FIREWORKS CS3 263 User Guide GIF Adaptive 256 is a color palette that contains only the actual colors used in the graphic. The color palette contains up to a maximum of 256 colors. JPEG – Better Quality sets quality to 80 and smoothing to 0, resulting in a high-quality but larger graphic. JPEG – Smaller File sets quality to 60 and smoothing to 2, resulting in a graphic less than half the size of a Better Quality JPEG but with reduced quality.
ADOBE FIREWORKS CS3 264 User Guide When you optimize a selected slice, the slices not being optimized are dimmed. To preview a graphic based on the current optimization settings: ❖ Click the Preview button in the upper left of the Document window. Note: Click Hide Slices in the Tools panel to hide slices and slice guides while previewing. To compare views with different optimization settings: 1 Click the 2-Up or 4-Up button in the upper left of the Document window.
ADOBE FIREWORKS CS3 265 User Guide Choosing a file type You should base your choice of file format upon the design and use of your graphic. A graphic’s appearance can vary from one format to another, especially when different types of compression are used. In addition, only certain graphic file types are accepted by most web browsers. Still other file types are ideal for print publishing or use in multimedia applications.
ADOBE FIREWORKS CS3 266 User Guide Choosing a color palette GIFs and other 8-bit image formats contain a color palette. A color palette is a list of up to 256 colors available to the file. Only colors defined in the color palette appear in the graphic; however, some color palettes contain colors that are not in the graphic. The following palettes are available in Fireworks: Adaptive is a custom palette derived from the actual colors in the document.
ADOBE FIREWORKS CS3 267 User Guide To select a color depth: ❖ Select an option from the Colors pop-up menu in the Optimize panel or type a value in the text box. You can select from 2 to 256 colors. Note: The actual colors in the image could be lower than the maximum number of colors you select. The number at the bottom of the color table indicates the actual number of colors visible in the image. If no number is visible, you’ll see a Rebuild button, which indicates you should rebuild the color palette.
ADOBE FIREWORKS CS3 268 User Guide Viewing colors in a palette The color table in the Optimize panel displays colors in the current preview when you are working in 8-bit color or less and lets you modify an image’s palette. The color table updates automatically when you are in Preview mode. It appears empty if you are optimizing more than one slice at a time or if you are not optimizing in an 8-bit format such as GIF.
ADOBE FIREWORKS CS3 269 User Guide To select a range of colors: 1 Click a color. 2 Hold Shift and click the last color in the range you want to select. To preview all the pixels in the document that contain a specific color: 1 Click the Preview button at the upper left of the Document window. 2 Click and hold on a swatch in the Optimize panel color table. The pixels that contain the selected swatch temporarily change to another highlight color until you release the mouse button.
ADOBE FIREWORKS CS3 270 User Guide Note: Right-click (Windows) or Control-click (Macintosh) a color in the palette to display a shortcut menu of edit options for the color. Using websafe colors Websafe colors are colors that are common to both Macintosh and Windows platforms. These colors are not dithered when viewed in a web browser on a computer display set to 256 colors. Fireworks has several methods of applying and using websafe colors.
ADOBE FIREWORKS CS3 271 User Guide To change a GIF’s compression: ❖ Enter a Loss setting in the Optimize panel. Making areas transparent You can set transparent areas for GIFs and 8-bit PNGs so that in a web browser the background of the web page is visible through those areas. In Fireworks, a gray-and-white checkerboard on document previews denotes transparent areas.
ADOBE FIREWORKS CS3 272 User Guide • Click a color in the document. To add or remove transparent colors: 1 Click the Preview, 2-Up, or 4-Up button at the upper left of the Document window. In 2-Up or 4-Up view, click a view other than the original. Note: You can add or remove transparent colors in Original view but won’t be able to see your results until you display a preview. 2 In the Optimize panel, click the Add Color to Transparency or Remove Color from Transparency button.
ADOBE FIREWORKS CS3 273 User Guide Adjusting JPEG quality JPEG is a lossy format, which means that some image data is discarded when it is compressed, reducing the quality of the final file. However, image data can sometimes be discarded with little or no noticeable difference in quality. Original image; quality setting of 50; quality setting of 20 To control how much quality is lost when compressing a JPEG file: ❖ Adjust the quality with the Quality slider pop-up menu in the Optimize panel.
ADOBE FIREWORKS CS3 274 User Guide 7 Select Preserve Text Quality. All text items will automatically be exported at a higher level, regardless of the Selective Quality value. 8 Select Preserve Button Quality. All button symbols will automatically be exported at a higher level. 9 Click OK. To modify the selective JPEG compression area: 1 Select Modify > Selective JPEG > Restore JPEG Mask as Selection. The selection is highlighted.
ADOBE FIREWORKS CS3 275 User Guide By setting the Matte option in the Optimize panel, you can anti-alias objects that lie directly above the canvas to the Matte color. This is useful when exporting or saving graphics for placement on web pages with colored backgrounds. To match a target background color: ❖ In the Optimize panel, select a color from the Matte pop-up menu. Match it as closely as possible to the target background color on which the graphic will be placed.
ADOBE FIREWORKS CS3 276 User Guide • File > Export Fireworks then applies these settings to new documents. Note: As in previous versions of Fireworks, new slices still get their default optimization settings from the parent document. You can also save custom optimization settings for future use in optimization or batch processing.
ADOBE FIREWORKS CS3 277 User Guide 2 The current export/save location, which is defined anytime you browse away from the default location presented in a Save, Save As, Save a Copy, or Export dialog box 3 The current file’s location 4 The default location where new documents or images are saved on your operating system In contrast, the default location where Fireworks saves a document is determined by a different set of criteria. For more information, see “Saving Fireworks files” on page 22.
ADOBE FIREWORKS CS3 278 User Guide 7 (Optional) Select Put Images in Subfolder. 8 Click Export. The files Fireworks exported appear on your hard disk. Images and an HTML file are generated in the location you specified in the Export dialog box. For more information about the options available in the Export dialog box when HTML and Images is selected as the file type, see “Exporting Fireworks HTML” on page 282. Exporting selected slices You can export selected slices in a Fireworks document.
ADOBE FIREWORKS CS3 279 User Guide If you retain the original filename for the updated slice and upload the slice to the same place on your website where the original came from, the new slice replaces the original slice in the HTML document. Note: Avoid resizing the slice beyond its original export size in Fireworks, or you could create unexpected results in the HTML document after the slice is updated. Exporting an animation After you create and optimize an animation, it is ready to export.
ADOBE FIREWORKS CS3 280 User Guide 2 Type a filename and select a destination folder. 3 In the Export pop-up menu, select one of the following: Frames to Files exports frames as multiple files. Layers to Files exports layers as multiple files. Note: This exports all layers on the current frame. 4 Select Trim Images to automatically crop the exported images to fit the objects on each frame. If you want to export frames or layers the same size as the document, deselect Trim Images. 5 Click Export.
ADOBE FIREWORKS CS3 281 User Guide • Export each page in a Fireworks file to a separate HTML file. • Copy HTML code to the Clipboard in Fireworks, and then paste that code directly into an existing HTML document. • Export an HTML file, open it in an HTML editor, manually copy sections of code from the file, and paste that code into another HTML document. • Use the Update HTML command to make changes to an HTML file you’ve previously created.
ADOBE FIREWORKS CS3 282 User Guide • The HTML code necessary to reassemble sliced images and any JavaScript code if the document contains interactive elements. Fireworks HTML contains links to the exported images and sets the web page background color to the canvas color. • One or more image files, depending on how many slices are in your document and how many states you include in buttons. • A file called spacer.gif, if necessary. Spacer.
ADOBE FIREWORKS CS3 283 User Guide 5 Click OK to return to the Export dialog box. 6 Select Export HTML file from the HTML pop-up menu. Choosing Export HTML generates an HTML file and the associated image files in the location you specify. 7 Select Export Slices from the Slices pop-up menu if your document contains slices. 8 Select Put Images in Subfolder if you want images stored in a separate folder. You can select a specific folder or use the Fireworks default, which is a folder named images.
ADOBE FIREWORKS CS3 284 User Guide To copy Fireworks HTML using the Export dialog box: 1 Select File > Export. Note: Optionally, if you are exporting to Dreamweaver, click the Quick Export button and select Copy HTML to Clipboard from the Dreamweaver submenu. 2 In the Export dialog box, specify a folder as the destination for the exported images. This must be the same location where your HTML file will reside.
ADOBE FIREWORKS CS3 285 User Guide 5 If your Fireworks document contains interactive elements, you’ll need to copy the JavaScript code as well. JavaScript code is surrounded by
