Using Fireworks
Trademarks 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and WebHelp are eith
Contents Chapter 1: Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Installing Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 What’s new in Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Guide to instructional media. . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 5: Working with Vector Objects . . . . . . . . . . . . . . . . . . . . 111 Drawing vector objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 Editing paths. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Chapter 6: Using Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Entering text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 11: Slices, Rollovers, and Hotspots. . . . . . . . . . . . . . . . . 251 Creating and editing slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Making slices interactive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Preparing slices for export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Working with hotspots and image maps . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 16: Automating Repetitive Tasks . . . . . . . . . . . . . . . . . . 421 Finding and replacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .422 Batch processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .426 Extending Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 Flash SWF movies used as Fireworks panels . . . . . . . . . . . . . . . . . .
1 CHAPTER 1 Introduction Macromedia Fireworks 8 is the definitive solution for professional web graphics design and production. It is the first production environment to address and solve the special challenges facing web graphics designers and developers. You can use Fireworks to create, edit, and animate web graphics, add advanced interactivity, and optimize images in a professional environment. In Fireworks, you can create and edit bitmap and vector graphics in a single application.
Installing Fireworks This section explains how to install Fireworks. Be sure to read the release notes on the Macromedia website at www.macromedia.com/go/ fireworks_documentation for late-breaking information or instructions. To install Fireworks: 1. Insert the Fireworks CD into your computer’s CD-ROM drive. 2. Do one of the following: 3. ■ In Windows, the Fireworks installation program starts automatically. ■ On the Macintosh, double-click the Fireworks Installer icon.
Macintosh users should pay special attention to the format Fireworks uses to store the application and its default configuration files. For more information, see “Viewing package contents (Macintosh only)” on page 453. What’s new in Fireworks 8 Create and optimize images for the web with precise control in an intuitive, customizable environment. New support for ActionScript and CSS (Cascading Style Sheet) formats allow Fireworks to work even more efficiently with Dreamweaver and Flash.
Integrated workflow More slicing options Polygon slices are inserted automatically when a selected object is a polygon path. See “Creating nonrectangular slices” on page 255. Recognize ActionScript color values Fireworks recognizes ActionScript color values when copied from Flash and pasted into Fireworks color value fields. Use the "Save as" command to save bitmaps into different file types Choose single-file output formats such as gif, jpg, tiff, in the "Save As" dialog.
Create without complexity Special Characters panel Use this new panel to insert special characters directly into text blocks. Reshape text on a path Edit path points when text is attached. See “Editing paths and text attached to paths” on page 158. Save time and effort with the many refinements made to common tasks. Workflow Improvements Recent Fonts & Recently used fonts now appear at the top of font menus. Optimization remember last Optimization now defaults to the last settings used.
Guide to instructional media A variety of resources are available for learning Fireworks, including this manual, Fireworks Help, PDF versions of the Fireworks documentation components, and several web-based information sources. ■ Using Fireworks is the Fireworks user manual. You can access it at any time in Fireworks help (Help > Using Fireworks). The manual is also available in PDF format on the Macromedia website at www.macromedia.com/go/fireworks_documentation.
2 CHAPTER 2 Fireworks Basics Macromedia Fireworks 8 is an application for designing graphics for use on the web. 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 task-specific applications.
About working in Fireworks Fireworks is a versatile application for creating, editing, and optimizing web graphics. You can create and edit both bitmap and vector images, design web effects such as rollovers and popup menus, crop and optimize graphics to reduce their file size, and save time by automating repetitive tasks.
Slices and hotspots have drag-and-drop rollover handles that let you quickly assign swap image and rollover behaviors to graphics directly in the workspace. The Button Editor and Pop-up Menu Editor are convenient Fireworks features that help you build special interactive graphics for navigating websites. About optimizing and exporting graphics Fireworks has powerful optimization features to help you find the balance between file size and acceptable visual quality as you prepare to export graphics.
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. The color of the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the fill) When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape.
When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, often making the edges of the image appear ragged. Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the image’s quality.
4. Select white, transparent, or a custom color for the canvas. N OT E 5. Use the Custom color box pop-up window to select a custom canvas color. Click OK to create the new document. To create a new document the same size as an object on the Clipboard: 1. 2. Copy an object to the Clipboard from any of the following: ■ Another Fireworks document ■ A web browser ■ Any of the applications listed in “Pasting into Fireworks” on page 22 Select File > New.
Opening recently closed documents The File menu lists up to 10 recently closed documents in the Open Recent submenu. The Start Page also lists recently closed documents. To open a recently closed file: 1. Select File > Open Recent. 2. Select a file from the submenu. To open a recently closed file when no files are open: 1. Click the file name on the Start page.
■ You can open an animated GIF as you would open a normal GIF file. Each element of the GIF is placed as a separate image in its own Fireworks frame. You can convert the graphic to an animation symbol in Fireworks. EPS files Fireworks opens most EPS files, such as Photoshop EPS files, as flattened bitmap images, in which all objects are combined on a single layer. Some EPS files exported from Illustrator, however, retain their vector information.
Because Fireworks exports HTML content in the form of an HTML table, it also determines the document layout for imported HTML based on HTML tables. An HTML file must contain at least one table for Fireworks to be able to reconstruct it. For more about HTML, see “Exporting HTML” on page 357. 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.
Dragging images into Fireworks You can drag vector objects, bitmap images, or text into Fireworks from any application that supports dragging: ■ FreeHand 7 or later ■ Flash 3 or later ■ Photoshop 4 or later ■ Illustrator 7 or later ■ Microsoft Office 97 or later ■ Microsoft Internet Explorer 3 or later ■ Netscape Navigator 3 or later ■ CorelDRAW 7 or later To drag an image or text into Fireworks: ■ From the other application, drag the object or text into Fireworks.
Location of pasted objects When you paste an object into Fireworks, the placement of the pasted object depends on what is selected: ■ If at least one object on a single layer is selected, the pasted object is placed in front of—or stacked directly above—the selected object on the same layer. ■ If the layer itself is selected and either no objects or all objects are selected, the pasted object is placed in front of—or stacked directly above—the topmost object on the same layer.
Importing PNG files You can import Fireworks PNG files into the current layer of the active Fireworks document. Any hotspot objects and slice objects are placed on the document’s Web Layer. For more information about slices and web objects, see “Viewing and displaying slices and slice guides” on page 256. For more information about layers, see “Working with layers” on page 204. To import a PNG file into a Fireworks document layer: 1.
To direct Fireworks to Photoshop Acquire plug-ins: 1. In Fireworks, select Edit > Preferences. NO T E On Mac OS X, select Fireworks > Preferences. 2. Click the Folders tab. 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 (Macintosh): 1. Connect the camera to your computer.
To import an image from a scanner (Macintosh): 1. Connect the scanner to your computer. 2. Install the software that accompanies the scanner if you have not already done so. 3. In Fireworks, select File > Acquire, and then select either Twain Acquire or Twain Select. N OT E 4. For most T WAIN modules or Photoshop Acquire plug-ins, additional dialog boxes prompt you to set other options. Follow the instructions to apply the desired settings. The imported image is opened as a new Fireworks document.
Saving Fireworks PNG files When you create a new document or open an existing Fireworks PNG file, the document’s filename has the extension .png. The file displayed in the Fireworks document window is your source file, or working file. Using a Fireworks PNG file as your source file has the following advantages: ■ The source PNG file is always editable. You can go back and make additional changes even after you export the file for use on the web.
To save in an existing GIF, JPEG, TIF, BMP, or other file format listed above: 1. Select File > Save. 2. If you made modifications to the document that aren’t editable in the file’s original format, a notification appears in the Save dialog box. Noneditable modifications include adding new objects, masks, and Live Filters, as well as adjusting opacity, applying blend modes, and saving pixel selections.
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.
To disable the Start page: 1. Run Fireworks without opening a document. The Start page is displayed. 2. Click Don’t Show Again. 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.
To display tool options in the Property inspector for a tool that you are already using: ■ Select Select > Deselect to deselect all objects. For information about specific tool options, see the sections that introduce the various tools throughout Using Fireworks or Fireworks Help. 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.
The Property inspector can be open at half height, displaying two rows of properties, or at full height, displaying four rows. You can also fully collapse the Property inspector while leaving it in the workspace. NO TE Most procedures in Using Fireworks assume that the Property inspector is displayed at full height. To undock the Property inspector: ■ Drag the gripper at the upper left corner to another part of the workspace.
Using panels Panels are floating controls that help you edit aspects of a selected object or elements of the document. Panels let you work on frames, layers, symbols, color swatches, and more. Each panel is draggable, so you can group panels together in custom arrangements. Some panels may be grouped together by default, while others are not.
The URL panel lets you create libraries containing frequently used URLs. 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.
To dock a panel in a panel group: ■ Select the name of a panel group from the Group With submenu of the panel group’s Options menu. (The Group With command’s name changes depending on the name of the active panel.) To rename a panel group: 1. Click the icon in the upper right of the panel group and select Rename Panel Group from the Options menu. 2. Enter the new name.
■ Click the small arrow that separates the docked panel area from the rest of the application window. Click to show or hide docked panel area 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.
Saving panel layouts You can save the layout of panels by using the Commands menu. Then the next time you open Fireworks, the panels are arranged in the same position in the workspace. To save a workspace layout: 1. Select Window > Workspace Layouts > Save Current. 2. Name the workspace layout and click OK. To open a saved workspace layout: ■ Select Window > Workspace Layouts and select a workspace layout from the submenu.
To dock a toolbar: ■ Drag the toolbar onto a docking area at the top, bottom, left, or right of the application window until the placement preview rectangle appears. Navigating and viewing a document You can control your document’s magnification, its number of views, and its display mode. In addition, you can easily pan the view of a document, which is helpful if you zoom in and can no longer see the entire canvas.
Zooming and panning Fireworks lets you zoom in or out at a preset or user-defined magnification percentage. Zoom tool Zoom pop-up menu Hand tool 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.
To zoom out using preset increments, do one of the following: ■ Select the Zoom tool and Alt-click (Windows) or Option-click (Macintosh) inside the document window. Each click reduces the view to the next preset percentage. ■ Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window. ■ Select Zoom Out or a preset magnification from the View menu. To zoom in on a specific area without being constrained by preset zoom increments: 1. Select the Zoom tool. 2.
Full Screen mode is a maximized document window view set against a black background with no menus, toolbars, or title bars visible. To change view modes, do one of the following: ■ To change to Full Screen with Menus mode, click the Full Screen with Menus Mode button in the Tools panel. ■ To change to Full Screen Mode, click the Full Screen Mode button in the Tools panel.
To control document redraw: ■ Select View > Full Display. When Full Display is selected, Fireworks displays the document in all available colors with full detail. When Full Display is deselected, Fireworks displays paths as 1 pixel wide with no fill and displays images with an X through them. Display and draft modes To display a document as it would appear on a different platform: ■ In Windows, select View > Macintosh Gamma. ■ On the Macintosh, select View > Windows Gamma.
3. Click an Anchor button to specify which sides of the canvas Fireworks will add to or delete from, and click OK. NO T E By default, the center anchor is selected, indicating that changes to the size of the canvas are made on all sides. 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.
2. In the Pixel Dimensions text boxes, enter new horizontal and vertical dimensions. You can change the units of measure. If Resample Image is deselected, you can change the resolution or print size but not pixel dimensions. 3. In the Print Size text boxes, enter horizontal and vertical dimensions for the printed image. 4. In the Resolution text box, enter a new resolution for the image. You can select between pixels/inch and pixels/cm as the units, or select Resample Image.
Resampling up, or adding pixels to make the image larger, may result in quality loss because the pixels being added do not always correspond to the original image. Downsampling, or removing pixels to make the image smaller, always causes quality loss because pixels are discarded to resize the image. Data loss in the image is another side effect of downsampling. Rotating the canvas Rotating the canvas is helpful when an image is imported upside down or sideways.
Cropping a document By cropping, you can delete unwanted portions of a document. The canvas is resized to fit an area that you define. By default, cropping deletes objects that extend beyond the canvas boundaries. You can retain objects outside the canvas by changing a preference before cropping. To crop a document: 1. Select the Crop tool from the Tools panel or select Edit > Crop Document. 2. Drag a bounding box on the canvas.
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.
Using guides Guides are lines that you drag onto the document canvas from the rulers. They serve as drawing aids to help you place and align objects. You can use guides to mark important parts of your document, such as the margins, the document center point, and areas where you want to work precisely. To help you align objects, Fireworks lets you snap objects to guides. You can lock guides to prevent them from being accidentally moved.
Using the grid The Fireworks grid displays a system of horizontal and vertical lines on the canvas. The grid is useful for placing objects precisely. In addition, you can view, edit, resize, and change the color of the grid. NO TE The grid does not reside on a layer, nor is it exported with a document. It is merely a design tool. To show and hide the grid: ■ Select View > Grid > Show Grid. To snap objects to the grid: ■ Select View > Grid > Snap to Grid. To change the grid color: 1.
To undo and redo actions: 1. Select Window > History to open the History panel. 2. Drag the Undo marker up or down. To repeat actions: 1. Perform the actions. 2. Do one of the following to highlight the actions to be repeated in the History panel: ■ ■ ■ 3. Click an action to highlight it. Control-click (Windows) or Command-click (Macintosh) to highlight multiple individual actions. Shift-click to highlight a continuous range of actions. Click the Replay button at the bottom of the History panel.
CHAPTER 3 3 Selecting and Transforming Objects As you work in Macromedia Fireworks 8, 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. This chapter contains the following topics: Selecting objects . . . . . . . . . . . . . . . . . . . . . . . .
For information about selecting specific areas of pixels in a bitmap image, see “Selecting pixels” on page 55. Using the Pointer tool The Pointer tool selects objects when you click them or when you drag a selection area around all or part of the objects. To select an object by clicking, do one of the following: ■ Move the Pointer tool over the object’s path or bounding box and click. ■ Click the object’s stroke or fill. ■ Select the object in the Layers panel.
3. Do one of the following: To modify an object, drag one of its points or selection handles. ■ To move the entire object, drag anywhere in the object except a point or selection handle. ■ Using the Select Behind tool When working with graphics that contain multiple objects, you can use the Select Behind tool to select an object that is hidden or obscured by other objects.
Modifying a selection After you select a single object, you can add objects to the selection and deselect objects that are selected. Using a single command, you can select or deselect everything on every layer in a document. You can also hide the selection path so that you can edit a selected object while viewing it as it will appear on the web or in print. To add to a selection: ■ Hold down Shift while clicking additional objects with the Pointer, Subselection, or Select Behind tool.
To show all objects: ■ Select View > Show All. N OT E 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.
When using a selection tool, you can set the Feather option before creating a selection, or you can feather existing selections by selecting the Live marquee box. You can also feather existing selections using the Feather command in the Select menu. For more information, see “Feathering a pixel selection” on page 62.
Plotting points to create a marquee selection The Polygon Lasso tool allows you to select specific pixels in a bitmap image by clicking repeatedly around the perimeter of the pixel area you want to select. To select a polygonal area of pixels: 1. Select the Polygon Lasso tool. 2. Select an Edge option in the Property inspector. For more information, see “Bitmap selection tool options” on page 55. 3. Click to plot points around the perimeter of the object or area to outline the selection.
4. Click the area of color you want to select. A marquee appears around the selected range of pixels. Pixels selected with a lower tolerance (above), then a higher tolerance (below) To select similar colors throughout the document: 1. Select an area of color with a marquee or lasso tool, or with the Magic Wand tool. 2. Select Select > Select Similar.
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. ■ Select 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.
Adding to a pixel selection After drawing a selection marquee with any bitmap selection tool, you can add to the selection with the same tool or another bitmap selection tool. To add to an existing pixel selection: 1. Select any bitmap selection tool. 2. Hold down Shift and draw additional selection marquees. 3. Repeat steps 1 and 2 with any bitmap selection tool to continue adding to the selection. Overlapping marquees join to form a contiguous marquee.
To create or replace a pixel selection on a selected bitmap using the opacity of an object: 1. In the Layers panel, position the pointer over the thumbnail of the object you want to use to create the pixel selection. 2. Hold down Control (Windows) or Command (Macintosh). The pointer changes to indicate you are about to select the alpha channel, or the opaque area, of the object. 3. Click the thumbnail. A new pixel selection is created on the selected bitmap.
Creating an inverse pixel selection Starting with a current pixel selection, you can create another pixel selection that selects all the pixels that are not currently selected. You can use this method to select and then erase all pixels surrounding the original selection, for example. To create an inverse pixel selection: 1. Make a pixel selection using any bitmap selection tool. 2. Select Select > Inverse Selection. All pixels that were not in the original selection are now selected.
To contract the border of a marquee: 1. After drawing the marquee, select Select > Contract Marquee. 2. Enter the number of pixels by which you want to contract the border of the marquee, and click OK. 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.
To convert a marquee to a path ■ After drawing a marquee, select Select > Convert Marquee to Path. The document’s current stroke and fill attributes are applied to the new path. Transferring a marquee selection You can transfer a marquee selection from one bitmap to another bitmap object on the same layer or one on a different layer. You can also transfer the marquee selection to a mask. To transfer a marquee selection to another bitmap object: 1. Make a selection by drawing the marquee. 2.
5. If the Selection box displays the word New, the New selection will be enabled in the Operation section of the Save Selection dialog box. If a previously saved selection is selected in the Selection box, then all of the following options will be enabled in the Operation section. ■ ■ ■ ■ 6. “Replace selection” replaces the active selection in the active document with the one specified in the Selection box.
■ ■ 6. “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. 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. Deleting marquee selections You can delete a marquee selection that you have previously named and saved.
To move a floating selection, do one of the following: ■ Drag the floating selection with the Pointer tool or any bitmap selection tool. ■ If a nonselection bitmap tool is active, hold down Control (Windows) or Command (Macintosh) and drag the floating selection. ■ Use the arrow keys or Shift+arrow keys. When you deselect the floating pixel selection or select any vector or web tool, the floating selection becomes part of the current bitmap object.
Editing selected objects Fireworks gives you a number of ways to edit selected objects: you can move objects on the canvas or from application to application, you can replicate objects with the Clone and Duplicate commands, or you can remove objects from the workspace altogether. To move a selection, do one of the following: ■ Drag it with the Pointer, Subselection, or Select Behind tool. ■ Press any arrow key to move the selection in 1-pixel increments.
To clone a selection: ■ Select Edit > Clone. The clone of the selection is stacked precisely in front of the original and becomes the selected object. NO T E To move a selected clone away from the original with pixel-by-pixel precision, use the arrow keys or Shift+arrow keys. This is a convenient way to maintain a specific distance between clones or maintain the vertical or horizontal alignment of the clones. To delete selected objects, do one of the following: ■ Press Delete or Backspace.
When you select any transformation tool or Transform menu command, Fireworks displays transform handles around selected objects. Transform handles Center point Original object 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. 3.
Resizing (scaling) objects Scaling an object enlarges or reduces it horizontally, vertically, or in both directions. To scale a selected object: 1. 2. Do one of the following to display the transform handles: ■ Select the Scale tool. ■ Select Modify > Transform > Scale. Drag the transform handles: To scale the object both horizontally and vertically, drag a corner handle. Proportions are constrained if you press the Shift key as you scale.
3. Drag to rotate the object. TIP 4. To constrain rotation to 15° increments relative to the horizon, Shift-drag the pointer. Double-click inside the window or press Enter to apply your changes. To relocate the axis of rotation: ■ Drag the center point away from the center. To reset the axis of rotation to the center of the selection, do one of the following: ■ Double-click the center point ■ Press Escape to deselect the object, then select it again.
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.
Viewing transformation information in the Info panel The Info panel lets you view numerical transformation information for the currently selected object. The information updates as you edit the object. ■ For scaling and free transformations, the Info panel shows the width (W) and height (H) of the original object before transformation and the percentage of increase or decrease in width and height during the transformation.
Selecting objects within groups To work with individual objects within a group, you can either ungroup the objects or use the Subselection tool to select individual objects while leaving the group intact. Subselection tool Modifying the attributes of a subselected object changes only the subselected object, not the entire group. Moving a subselected object to another layer removes the object from the group.
Layers also affect the stacking order. For example, suppose a document has two layers named Layer 1 and Layer 2. If Layer 1 is listed below Layer 2 on the Layers panel, then everything on Layer 2 appears in front of everything on Layer 1. You can change the order of layers by dragging the layer in the Layers panel to a new position. For more information, see “Organizing layers” on page 207.
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. You can move selected objects from one layer to another by dragging the object thumbnail or the blue selection indicator in the Layers panel to another layer. For more information, see “Organizing layers” on page 207.
Chapter 3: Selecting and Transforming Objects
4 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. Macromedia Fireworks 8 combines the functionality of photo-editing, vector-drawing, and painting applications.
Working with bitmaps The Bitmap section of the Tools panel contains bitmap selection and editing tools. To edit the pixels of a bitmap in your document, you can select a tool from the Bitmap section. Unlike in previous versions of Fireworks, you do not need to deliberately switch between bitmap mode and vector mode, but you can still work with bitmaps, vector objects, and text. Switching to the appropriate mode is as simple as selecting a vector or bitmap tool from the Tools panel.
To create an empty bitmap object, do one of the following: ■ Click the New Bitmap Image button in the Layers panel. ■ Select Edit > Insert > Empty Bitmap. ■ Draw a selection marquee, starting in a blank area of the canvas, and fill it. For more information, see “Creating pixel selection marquees” on page 56. An empty bitmap is added to the current layer in the Layers panel.
Accessing common photo editing tools all in one place To make it easy for you 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: Red-eye Removal, Crop, Rotate, Blur, Sharpen, Dodge, and Burn.
Drawing, painting, and editing bitmap objects The Bitmap section of the Tools panel contains tools for selecting, drawing, painting, and editing pixels in a bitmap image. Drawing bitmap objects You can use the Pencil tool to draw 1-pixel lines, either freehand lines or constrained, straight lines, much as you use a real pencil, with or without a ruler, to draw hard-edged lines. You can also zoom in on a bitmap and use the Pencil tool to edit individual pixels. To draw an object with the Pencil tool: 1.
To change the color of pixels to the color in the Fill Color box: 1. Select the Paint Bucket tool. 2. Select a color in the Fill Color box. 3. Set the tolerance value in the Property inspector. N OT E 4. The tolerance determines how similar in color pixels must be to be filled. A low tolerance value fills pixels with color values similar to the pixel you click. A high tolerance fills pixels with a broader range of color values. Click the image.
3. Select the Eyedropper tool from the Colors section of the Tools panel. Set the Color Averaging Sample setting in the Property inspector: 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. 5x5 pixels creates a stroke or fill color from the average of color values in a 5-by-5-pixel area. 4. Click the Eyedropper tool anywhere in the document.
Feathering pixel selections Feathering blurs the edges of a pixel selection and helps the selected area blend with the surrounding pixels. Feathering is useful when you copy a selection and paste it onto another background. 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.
The Sharpen tool sharpens areas in an image. The Dodge tool lightens parts of an image. The Burn tool darkens parts of an image. The Red-eye Removal tool reduces the appearance of red eye in photos The Replace Color tool paints over one color with another color Cloning pixels The Rubber Stamp tool clones an area of a bitmap image so that you can stamp it elsewhere in the image.
To set Rubber Stamp tool options: 1. Select the Rubber Stamp tool. 2. Select from among the following options in the Property inspector: Size determines the size of the stamp. Edge determines the softness of the stroke (100% is hard; 0% is soft). Source Aligned affects the sampling operation. When Source Aligned is selected, the sampling pointer moves vertically and horizontally in alignment with the second.
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 Edge sets a round or square brush tip shape. 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.
Removing red-eye from photos In some photographs, the subjects’ pupils are an unnatural shade of red. You can use the Redeye Removal tool to correct this red-eye effect. The Red-eye Removal tool quickly paints red areas of a photograph only, replacing reddish colors with grays and blacks. 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.
Replacing colors The Replace Color tool lets you select a color and paint over that color with a different color. Original photograph; after using the Replace Color tool Fireworks provides two different ways to replace one color with another. You can replace a color that you’ve specified in the color swatch, or you can replace a color by using the Replace Color tool directly on the image. To replace one color with another using the color swatch: 1. Select the Replace Color tool from its pop-up menu. 2.
To replace one color with another by selecting a color on the image: 1. Select the Replace Color tool from its pop-up menu. 2. In the From box in the Property inspector, click Image. 3. Click the To color well in the Property inspector to select the color probe, then select a color from the pop-up menu. 4. 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.
3. Adjust the crop handles until the bounding box surrounds the area of the bitmap image that you want to keep. NO T E To cancel a crop selection, press Escape. Bounding box 4. Double-click inside the bounding box or press Enter to crop the selection. Every pixel in the selected bitmap outside the bounding box is removed, but other objects in the document remain.
If you apply a filter to a selected vector object using the Filters menu, Fireworks converts the selection to a bitmap. To apply a Live Filter to an area defined by a bitmap selection marquee: 1. Select a bitmap selection tool and draw a selection marquee. 2. Select Edit > Cut. 3. Select Edit > Paste. Fireworks pastes the selection exactly where the pixels were originally located, but the selection is now a separate bitmap object. 4.
The Levels feature sets the darkest pixels as black and the lightest pixels as white, then redistributes the midtones proportionally. This produces an image with the sharpest detail in all of its pixels. Original with pixels concentrated in the highlights; after adjusting with Levels You can use the Histogram in the Levels dialog box to view the pixel distribution of a bitmap. The Histogram is a graphical representation of the distribution of pixels in the highlights, midtones, and shadows.
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. N OT E Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
5. Drag the Output Levels sliders to adjust the contrast values in the image: ■ The right slider adjusts the highlights using values from 255 to 0. ■ The left slider adjusts the shadows using values from 0 to 255. As you move the sliders, the values are automatically entered in the Output Levels boxes. Using Auto Levels You can use Auto Levels to have Fireworks make tonal range adjustments for you. To adjust highlights, midtones, and shadows automatically: 1. Select the image. 2.
To adjust a specific point in the tonal range: 1. Select the image. 2. Do one of the following to open the Curves dialog box: ■ In the Property inspector, click the Plus (+) button beside the Filters label, and then select Adjust Color > Curves from the Filters pop-up menu. N OT E ■ If the Property inspector is partially minimized, click the Add Filters button instead of the Plus button. Select Filters > Adjust Color > Curves.
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. Curve after dragging a point to adjust T IP You can also adjust highlights, midtones, and shadows automatically by clicking the Auto button in the Curves dialog box.
Adjusting brightness and contrast The Brightness/Contrast feature modifies the contrast or brightness of pixels in an image. This affects the highlights, shadows, and midtones of an image. You typically use Brightness/ Contrast when correcting images that are too dark or too light. Original; after adjusting brightness To adjust the brightness or contrast: 1. Select the image. 2. Do one of the following to open the Brightness/Contrast dialog box: ■ ■ NO T E 3.
Applying the Color Fill Live Filter You can use the Color Fill Live Filter to change the color of objects quickly, either by replacing the pixels entirely with a given color or by blending a color into an existing object. When you blend colors, the color is added on top of the object. Blending a color into an existing object is much like using Hue/Saturation; however, blending lets you apply a specific color from a color swatch panel quickly. To add a Color Fill Live Filter to a selected object: 1.
To adjust the hue or saturation: 1. Select the image. 2. Do one of the following to open the Hue/Saturation dialog box: In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Hue/Saturation from the Filters pop-up menu. ■ Select Filters > Adjust Color > Hue/Saturation. ■ N OT E 3. Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
Inverting an image’s color values You can use Invert to change each color in an image to its inverse on the color wheel. For example, applying the filter to a red object (R=255, G=0, B=0) changes the color to light blue (R=0, G=255, B=255).
To invert colors: 1. Select the image. 2. Do one of the following: In the Property inspector, click the Add Live Filters button, and then select Adjust Color > Invert from the Filters pop-up menu. ■ Select Filters > Adjust Color > Invert. ■ N OT E Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
To blur an image using Gaussian Blur: 1. Select the image. 2. Do one of the following to open the Gaussian Blur dialog box: ■ ■ 3. In the Property inspector, click the Add Live Filters button, and then select Blur > Gaussian Blur from the Filters pop-up menu. Select Filters > Blur > Gaussian Blur. Drag the Blur Radius slider to set the strength of the blur effect. Values range from 0.1 to 250. An increase in radius results in a stronger blur effect. 4. Click OK.
To blur an image using Zoom Blur: 1. Select the image. 2. Do one of the following to open the Zoom Blur dialog box: ■ ■ 3. In the Property inspector, click the Add Live Filters button, and select Blur > Zoom Blur from the Filters pop-up menu. Select Filters > Blur > Zoom Blur. Drag the Amount slider to set the strength of the blur effect. Values range from 1 to 100. An increase in amount results in a stronger blur effect. 4. Drag the Quality slider to set the smoothness of the blur effect.
■ Select Filters > Other > Find Edges. NO TE Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option. To maintain the ability to adjust, turn off, or remove this filter, apply it as a Live Filter, as described in the first bulleted option in this step. For more information, see Chapter 8, “Using Live Filters,” on page 193.
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. N OT E Applying a filter from the Filters menu is destructive; that is, it cannot be undone except when Edit > Undo is an option.
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.
3. Drag the Amount slider to set the amount of noise. Values range from 1 to 400. An increase in amount results in an image with more randomly placed pixels. 4. Select the Color check box to apply color noise. Leave the check box unchecked to apply monochrome noise only. 5. Click OK.
5 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. Macromedia Fireworks 8 has many tools for drawing and editing vector objects using a variety of techniques.
Drawing vector objects Fireworks has many tools for drawing vector objects. With these you can draw basic shapes, freeform paths, and complex shapes by plotting points one by one. You can also draw Auto Shapes, which are vector object groups that have special controls for adjusting their attributes. Drawing basic lines, rectangles, and ellipses You can use the Line, Rectangle, or Ellipse tool to draw basic shapes quickly. The Rectangle tool draws rectangles as grouped objects.
To resize a selected line, rectangle, or ellipse, do one of the following: ■ Enter new width (W) or height (H) values in the Property inspector or the Info panel. ■ In the Select section of the Tools panel, select the Scale tool and drag a corner transform handle. This resizes the object proportionally.
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: 3. ■ Use the Sides pop-up slider to select 3 to 25 sides. ■ Enter a number from 3 to 360 in the Sides text box. Drag to draw the polygon. To constrain a polygon’s orientation to increments of 45°, hold down Shift as you draw.
Auto Shape tools create shapes in preset orientations. For example, the Arrow tool draws arrows horizontally. You can transform Auto Shapes to change their orientation. For more information, see “Transforming and distorting selected objects and selections” on page 69. Although each Auto Shape tool in the Tools panel uses the same easy drawing method, the editable attributes for each Auto Shape are different. Arrow draws object groups that appear as simple arrows of any proportions.
Add Shadow adds a shadow beneath the selected object based on the dimensions of that object. The shadow is actually an Auto Shape and, like all Auto Shapes, contains control points that you can use to manipulate its appearance. For example, you can Shift-drag the Direction control point to constrain its movement to a 45-degree angle. Clicking the Direction control point resets the shadow to the original shape. NO T E The Add Shadow command will automatically send the new shadow shape back by one level.
You can also insert another Auto Shape into your document directly from the Auto Shape Properties panel. NO T E This panel only supports Auto Shapes that appear in the Tools panel. It does not support third-party Auto Shapes or those in the Shapes panel (Window > Auto Shapes). To change properties for your Auto Shape: 1. Insert an Auto Shape into your document. 2. Select Window > Auto Shape Properties. The Auto Shape Properties panel appears, displaying the properties for the selected Auto Shape. 3.
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. To adjust the flare of the arrowhead of a bent arrow: ■ Drag the arrowhead control point of a selected bent arrow.
To adjust a single corner of a beveled, chamfered, or rounded rectangle Auto Shape: ■ Alt-drag (Windows) or Option-drag (Macintosh) a corner control point of a selected shape. To resize a beveled, chamfered, or rounded rectangle Auto Shape without affecting the corners: ■ Drag the drag-to-resize control point. To convert the corners of a rectangle to a different type: ■ Alt-click (Windows) or Option-click (Macintosh) any corner control point.
To add sections to a selected doughnut: ■ Alt-drag (Windows) or Option-drag (Macintosh) an add/divide sector control point on the outer perimeter of the shape. To remove a section from a selected doughnut: ■ Drag the add/divide sector control point on the outer perimeter of the shape to define the portion of the shape that you want to remain on the canvas. To resize the inner radius of a selected doughnut: ■ Drag the inner radius control point.
Adjusting smart polygon Auto Shapes Smart Polygons initially appear as pentagons with four control points. There are control points for resizing and rotating, adding or removing polygon segments, increasing or decreasing the number of polygon sides, and adding an inner polygon to the shape to create a ring. To resize or rotate a selected smart polygon, do one of the following: ■ Drag the scale/rotate 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. To change the number of sides on a selected star: ■ Drag the Points control point. To adjust the valleys of a selected star: ■ Drag the valley control point. To adjust the points of a selected star: ■ Drag the peak control point.
To add new Auto Shapes to Fireworks: 1. Select Window > Auto Shapes to display the Shapes panel, if it’s not already visible. 2. From the Shapes panel’s Options menu, select Get More Auto Shapes. Fireworks connects to the web and navigates to the Fireworks Exchange website. 3. Follow the onscreen instructions to select new Auto Shapes and add them to Fireworks. Drawing freeform paths You can draw freeform vector paths with the Vector Path tool, much as you draw using a felttip marker or crayon.
You can also modify existing brush strokes and add fills to selected objects you have drawn with the Vector Path tool. The new stroke and fill settings are retained for subsequent use of the Vector Path tool in the current document. To draw a freeform vector path: 1. From the Pen tool pop-up menu, select the Vector Path tool. 2. If desired, set stroke attributes and Vector Path tool options in the Property inspector. See Chapter 7, “Applying Color, Strokes, and Fills,” on page 167. 3.
Drawing straight path segments Drawing straight line segments with the Pen tool is a simple matter of clicking to place the points. Each click with the Pen tool plots a corner point. To draw a path with straight line segments: 1. Select the Pen tool in the Tools panel. 2. If desired, select Edit > Preferences and enable any of the following options on the Editing tab of the Preferences dialog box, then click OK: Show Pen Preview previews the line segment that would result from the next click.
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. Whether drawn with the Pen tool or with another Fireworks drawing tool, all points on all vector objects have point handles. These handles are visible only on curve points, however. To draw an object with curved segments: 1. Select the Pen tool in the Tools panel. 2. Click to place the first corner point. 3.
Adjusting the shape of a straight path segment You can lengthen, shorten, or change the position of a straight path segment by moving its points. To change a straight path segment: 1. Select the path with the Pointer or Subselection tool. 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.
For example, if you drag the left point handle downward, the right point handle goes up. Alt-drag a handle to move it independently 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. N OT E To edit the point’s handles, select the Subselection tool or press Control (Windows) or Command (Mac) while the Pen tool is active. To convert a curve point to a corner point: 1. Select the Pen tool in the Tools panel. 2. Click a curve point on a selected path.
To select specific points on a selected path: 1. Select the Subselection tool. 2. Do one of the following: ■ Click a point, or hold down Shift and click multiple points one by one. ■ Drag around the points to be selected. To display a curve point’s handles: ■ Click the point with the Subselection tool. If either point nearest the clicked point is a curve point, the near handle is also displayed.
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. Dragging a corner point handle with the Subselection tool to edit the adjacent path segment Inserting and deleting points on a path You can add points to a path and delete points from a path. Adding points to a path gives you control over a specific segment within the path.
Merging two open paths You can connect two open paths to form one continuous path. When you connect two paths, the topmost path’s stroke, fill, and filter attributes become the attributes of the newly merged path. 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.
Bending and reshaping vector objects The Freeform tool allows you to bend and reshape vector objects directly instead of manipulating points. You can push or pull any part of a path, regardless of where the points are located. Fireworks automatically adds, moves, or deletes points along the path as you change the vector object’s shape.
When the pointer is directly over the path, you can pull the path. When the pointer is not directly over the path, you can push the path. You can change the size of the push or pull pointer. NO TE The Freeform tool also responds to pressure from a Wacom or other compatible tablet. To pull a selected path: 1. Select the Freeform tool in the Tools panel. 2. Move the pointer directly over the selected path. The pointer changes to the pull pointer. 3. Drag the path. To push a selected path: 1.
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. NO TE The Reshape Area tool also responds to pressure from a Wacom or other compatible tablet.
Redrawing paths You can use the Redraw Path tool to redraw or extend a segment of a selected path while retaining the path’s stroke, fill, and effect characteristics. To redraw or extend a segment of a selected path: 1. From the Pen tool pop-up menu, select the Redraw Path tool. 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.
To cut a selected path: 1. Select the Knife tool in the Tools panel. NO T E 2. 3. Using the eraser on Wacom pens automatically selects the Knife tool. Do one of the following: ■ Drag the pointer across the path. ■ Click on the path. Deselect the path. Editing with path operations You can use path operations in the Modify menu to create new shapes by combining or altering existing paths. For some path operations, the stacking order of selected path objects defines how the operation works.
To combine selected closed paths as one path enclosing the entire area of the original paths: ■ Select Modify > Combine Paths > Union. The resulting path assumes the stroke and fill attributes of the object that is placed farthest back. Converting a path to a marquee selection You can convert a vector shape to a bitmap selection, and then use the bitmap tools to edit the new bitmap. To convert a path to a marquee selection: 1. Select a path. 2. Select Modify > Convert Path to Marquee. 3.
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. To remove portions of a path object: 1. Select the path object that defines the area to be removed. 2. Select Modify > Arrange > Bring to Front. 3. Hold down Shift and add to the selection the path object from which the portions are to be removed. 4. Select Modify > Combine Paths > Punch.
Simplifying a path You can remove points from a path while maintaining its overall shape. The Simplify command removes redundant points on your path by an amount you specify. 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.
4. 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. 5. Select an end cap option: butt, square, or round. Then click OK. A closed path in the shape of the original and with the same stroke and fill attributes replaces the original path. Contracting or expanding a path You can contract or expand the path of a selected object by a specific number of pixels.
Chapter 5: Working with Vector Objects
6 CHAPTER 6 Using Text Macromedia Fireworks 8 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.
Entering text You can enter, format, and edit text in your graphics using the Text tool and the options in the Property inspector. Text tool NO TE If the Property inspector is minimized, click the expander arrow in the lower right corner to see all text properties. 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.
Creating text blocks All text in a Fireworks document appears inside a rectangle with handles called a text block. To enter text: 1. Select the Text tool. The Property inspector displays options for the Text tool. 2. Select color, font, size, spacing, and other text characteristics. 3. Do one of the following: ■ ■ Click in your document where you want the text block to begin. This creates an autosizing text block. Drag to draw a text block. This creates a fixed-width text block.
To move a text block while you drag to create it: 1. While holding down the mouse button, press and hold down the Spacebar, then drag the text block to another location on the canvas. 2. Release the Spacebar to continue drawing the text block. Using auto-sizing and fixed-width text blocks Fireworks has both auto-sizing text blocks and fixed-width text blocks. An auto-sizing text block expands horizontally as you type.
Editing 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.
3. Do one of the following to apply your changes: ■ Click outside the text block. ■ Select another tool in the Tools panel. ■ Press Escape. Choosing a font, size, and text style You use the Property inspector to change the font, size, and style attributes of the text in a text block. To change the font, size, and style of selected text using the Property inspector: 1. To change the font, select a font from the Font pop-up menu.
The Text tool retains the current text color independently of the fill color of other tools. When you use another tool after using the Text tool, the fill and stroke settings revert to the most recent settings from before the Text tool was used. Likewise, when you return to the Text tool, the fill color reverts to the most recent Text tool setting, and the stroke is reset to None. Fireworks retains the current Text tool color as you switch from document to document or close and reopen Fireworks.
■ 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.
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. ■ 2. Use the Pointer tool to select an entire text block. Shift-click to select multiple text blocks. Do one of the following: ■ In the Property inspector, drag the Kerning pop-up slider or enter a percentage in the text box. Kerning percentage Kerning pop-up slider Zero represents normal kerning.
To set the leading of selected text in the Property inspector: 1. In the Property inspector, drag the Leading pop-up slider or enter a value in the text box. The default is 100%. 2. To change the leading unit type, select % or px (pixels) from the Leading Units pop-up menu. To set the leading of selected text using the keyboard: ■ Hold down Control (Windows) or Command (Macintosh) while pressing the Up Arrow or Down Arrow keys.
To set the orientation of a selected text block: 1. Click the Text Orientation button in the Property inspector. 2. Select an orientation option from the pop-up menu: Horizontal Left to Right is the default setting for text in Fireworks for most languages. It orients text horizontally and displays characters from left to right. Horizontal Right to Left orients text horizontally and displays characters from right to left.
The alignment controls appear in the Property inspector when text is highlighted or a text block is selected. Text alignment options in the Property inspector To set text alignment: 1. Select the text. 2. Click an alignment button in the Property inspector. Indenting text You can indent the first line of a paragraph using the Property inspector. Indention is measured in pixels.
To set the space after selected paragraphs: ■ In the Property inspector, drag the Space After Paragraph pop-up slider or enter a value in the text box. 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.
Expanding and contracting character width You can expand or contract the character width of horizontal text using the Horizontal Scale option in the Property inspector. Horizontal scale is measured in percentage values. 100% is the default. Horizontal Scale option in the Property inspector If the Property inspector is minimized, click the expander arrow in the lower right corner to see all properties.
Applying strokes, fills, and filters to text You can apply strokes, fills, and filters to text in a selected text block as you would to any other object. You can apply any style in the Styles panel to text, even if it is not a text style. You can also create a new style by saving text attributes. After you create text, it remains editable in Fireworks. Strokes, fills, filters, and styles are updated automatically as you edit the text.
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. If you then detach the text from the path, the path regains its stroke, fill, and filter attributes.
To edit the shape of the path: 1. Using the Subselection tool, select the text-on-a-path object. The path points are now subselected and ready to be edited. 2. Drag the points to reshape the path. N OT E You can also use the Beizer Pen tool to edit the path. The text will automatically flow correctly around the path as points are edited. 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.
To change the orientation of text on a selected path: ■ Select Text > Orientation and select an orientation. Text rotated around a path Text oriented vertically on a path Text skewed vertically around a path Text skewed horizontally around a path To reverse the direction of text on a selected path: ■ Select Text > Reverse Direction. To move the starting point of text attached to a path: 1. Select the text-on-a-path object. 2. In the Property inspector, enter a value in the Text Offset text box.
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. However, you can no longer edit it as text. To convert selected text to paths: ■ Select Text > Convert to Paths. Text converted to paths retains all of its visual attributes, but you can edit it only as paths. You can edit the converted text as a group or edit the converted characters individually.
To open or import a text file: 1. Select File > Open or File > Import. 2. Navigate to the folder containing the file. 3. Select the file and click OK. 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 19.
Choosing Maintain Appearance replaces the text with a bitmap image that represents the appearance of the text in its original font. You can still edit the text, but when you do so, Fireworks replaces the bitmap image with a font that’s installed on your system. This can cause the appearance of the text to change. You can select fonts to replace the missing fonts. After you replace fonts, the document opens and you can edit and save the text.
4. The Check Spelling dialog box opens. For each word found, select the appropriate option: Add to Personal Ignore adds the unrecognized word to your personal dictionary. skips the current instance of the unrecognized word. Ignore All skips all instances of the unrecognized word during the current spell-check session. The next time you spell-check, Fireworks once again identifies the word as unrecognized.
Using the Text Editor In Fireworks 4 and previous versions, the Text Editor was used to create and edit text. All textediting and formatting options found in the Text Editor are now located in the Property inspector. However, you still have access to the Text Editor through the Text menu. The Text Editor is useful for working with text that might be difficult to edit onscreen, such as large text blocks, text attached to a path, or text with hard-to-read fonts and sizes.
Chapter 6: Using Text
CHAPTER 7 7 Applying Color, Strokes, and Fills Macromedia Fireworks 8 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.
Using the Colors section of the Tools panel The Colors section of the Tools panel contains controls for activating the Stroke Color and Fill Color boxes, which in turn determine whether the strokes or fills of selected objects are affected by color choices. Also, the Colors section has controls for quickly resetting colors to the default, setting the stroke and fill color settings to None, and swapping fill and stroke colors.
Organizing swatch groups and color models The Swatches panel and Color Mixer combine to form the Colors panel group. In the Swatches panel you can view, change, create, and edit swatch groups, as well as select stroke and fill colors. You can use the Color Mixer to select a color model, mix stroke and fill colors by dragging color value sliders or entering color values, and select stroke and fill colors directly from the color bar.
3. Click Open. The color swatches in the swatch file replace the previous swatches. N OT E For information on creating a custom swatch group, see “Customizing the Swatches panel” on page 170 and “Saving palettes” on page 343. To add swatches from an external color palette to the current swatches: 1. Select Add Swatches from the Swatches panel Options menu. 2. Navigate to the desired folder and select a color palette file. NO TE 3.
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. TI P 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. 2.
Creating colors in the Color Mixer In the Color Mixer, you can create colors by dragging sliders or entering values for each component of a color model such as RGB, Hexadecimal, or CMY. The color you create is applied to the active Stroke Color or Fill Color box. The Color Mixer also has a color bar displaying the range of colors in the current color model. You can click anywhere in the color bar to apply a color.
Color model Mode of color expression CMY Values of Cyan, Magenta, and Yellow, where each component has a value from 0 to 255. 0-0-0 is white and 255-255-255 is black. Grayscale A percentage of black. The single Black (K) component has a value from 0 to 100%, where 0 is white, 100 is black, and values in between are shades of gray. You can select alternative color models from the Color Mixer Options menu. The current color’s component values change with each new color model.
Creating colors using the system color pickers You can create colors using the Windows System or the Macintosh System dialog boxes, instead of using the Color Mixer and Swatches panel. To pick a color from the system color picker: 1. Click any color box. 2. Select Windows OS or Mac OS from any color pop-up window Options menu. The system color swatches are displayed in the pop-up window. 3. Select a color from the system color picker. The color becomes the new stroke or fill color.
Dithering with websafe colors Sometimes you might need to use a color that is not a websafe color. For example, your company logo may use a color that is not websafe. To approximate a websafe color that doesn’t shift or dither when exported with a websafe palette, you use a web dither fill. NO TE Web dithering can increase the size of the file. Two websafe colors create a web dither fill. To use the web dither fill: 1. Select an object containing a non-websafe color. 2.
5. Click outside the pop-up window to close it. 6. Export the object as a GIF or PNG file with Index Transparency or Alpha Channel Transparency set. For more information on exporting files with transparency, see “Making areas transparent” on page 344. 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. NO TE Not all browsers support PNG files.
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. To sample a color from anywhere on the screen for the current color box: 1. Click any color box.
To change stroke attributes of selected objects, do one of the following: ■ Select from among the stroke attributes in the Property inspector. TIP ■ Select Stroke Options from the Stroke Options pop-up menu for more attributes. Click the Stroke Color box in the Tools panel and click Stroke Options. Select from among the stroke attributes in the Stroke Options pop-up window. Use the options in the Property inspector or the Stroke Options pop-up window to change the stroke applied to an object.
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 pressure- and speed-sensitivity settings are reflected in the preview by a stroke that tapers or fades or otherwise changes from left to right. To open the Edit Stroke dialog box: 1.
To set general brush stroke options: 1. On the Options tab of the Edit Stroke dialog box, set the ink amount, spacing, and flow rate. Higher flow rates create brush strokes that flow over time, as with an airbrush. 2. To overlap brush strokes for dense strokes, select Build-up. 3. To set the stroke texture, change the Texture option. The higher the number, the more apparent the texture becomes. 4.
Placing strokes on paths By default, an object’s brush stroke is centered on a path. You have the option of placing the brush stroke completely inside or outside the path. This allows you to control the overall size of stroked objects and to create effects such as strokes on the edges of beveled buttons. Centered stroke, stroke inside, and stroke outside You can use the Stroke pop-up menu in the Stroke Options window to reorient brush strokes. To move a brush stroke inside or outside the selected path: 1.
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. 2. Edit the desired brush stroke attributes. 3.
To change the solid fill color of applicable vector drawing tools and the Paint Bucket tool: 1. Select a vector drawing tool or the Paint Bucket tool. 2. Do one of the following: ■ ■ Press Control+D (Windows) or Command+D (Macintosh) to deselect all objects, and then click the Fill Color box in the Property inspector to open the Fill Color pop-up window. Click the Fill Color box in the Tools panel or Color Mixer to open the color pop-up window. 3.
Applying gradient and pattern fills You can change fills to display a variety of solid, dithered, pattern, or gradient characteristics that range from solid colors to gradients. These characteristics resemble satin, ripples, folds, or gradients that conform to the contour of the object to which you apply them. Additionally, you can change various attributes of a fill, such as color, edge, texture, and transparency.
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. To create a new pattern from an external file: 1.
Editing a gradient fill You can edit the current gradient fill by clicking any Fill Color box and then using the Edit Gradient pop-up window. Color ramp Preview 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 popup menu in the Property inspector. 2. Click the Fill Color box in the Property inspector or Tools panel to open the pop-up window.
To set or change the transparency of an opacity swatch: 1. Click the opacity swatch. 2. Do one of the following: ■ ■ N OT E 3. Drag the slider to the percentage of transparency, where 0 is completely transparent and 100 is completely opaque. Enter a numeric value from 0 to 100 to set the opacity value. The transparency checkerboard shows through the gradient in transparent areas. When you have finished editing the gradient, press Enter or click outside the Edit Gradient pop-up window.
Transforming and distorting fills You can move, rotate, skew, and change the width of an object’s pattern or gradient fill. When you use the Pointer or Gradient tools to select an object with a pattern or gradient fill, a set of handles appears on or near the object. You can drag these handles to adjust the object’s fill. Use the fill handles to interactively adjust a pattern or gradient fill.
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. For more information, see “Creating and deleting styles” on page 237. Removing a fill You can easily remove fill attributes from selected objects.
Adding texture to strokes and fills You can add three-dimensional effects to both strokes and fills by adding texture. Fireworks provides several textures, or you can use external textures. Adding texture to a stroke Textures modify the brightness of the stroke, but not the hue, and give strokes a less mechanical, more organic look, as if you were applying paint to a textured surface. Textures are more effective when used with wide strokes. You can add a texture to any stroke.
Adding texture to a fill Textures modify the brightness of a fill, but not the hue, and give fills a less mechanical, more organic look. You can add a texture to any fill. Fireworks ships with several textures from which to select, such as Chiffon, Oilslick, and Sandpaper. You can also use bitmap files as textures.This allows you to create almost any type of custom texture. To add texture to the fill of a selected object: 1. Do one of the following to open the Fill Texture pop-up menu: ■ ■ 2.
Chapter 7: Applying Color, Strokes, and Fills
8 CHAPTER 8 Using Live Filters Macromedia Fireworks 8 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.
Applying Live Filters You can apply one or more Live Filters to selected objects using the Property inspector. Each time you add a new Live Filter to the object, it is added to the list in the Add Filters pop-up menu in the Property inspector. You can turn each Live Filter on or off.
Experiment with the settings until you get the look you want. If you want to change the filter settings later, see “Editing Live Filters” on page 200. Width of bevel Contrast Softness Angle of bevel Button bevel preset Inner Bevel pop-up window To apply a Live Filter to selected objects: 1. Click the Add Live Filters button in the Property inspector, then select a filter from the Add Filters pop-up menu. The filter is added to the Filters list for the selected object. TIP 2. 3.
To enable or disable all Live Filters applied to an object: ■ Click the Add Live Filters button in the Property inspector, then select Options > All On or Options > All Off from the pop-up menu. For information on permanently removing Live Filters, see “Removing Live Filters” on page 200. 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.
To apply an Emboss filter: 1. 2. Click the Add Live Filters button in the Property inspector, then select an emboss option from the pop-up menu: ■ Bevel and Emboss > Inset Emboss. ■ Bevel and Emboss > Raised Emboss. Edit the filter settings in the pop-up window. If you want the original object to appear in the embossed area, select Show Object. 3. When you finish, click outside the window or press Enter to close it.
To apply a drop shadow or inner shadow: 1. 2. 3. Click the Add Live Filters button in the Property inspector, then select a shadow option from the pop-up menu: ■ Shadow and Glow > Drop Shadow. ■ Shadow and Glow > Inner Shadow. Edit the filter settings in the pop-up window: ■ Drag the Distance slider to set the distance of the shadow from the object. ■ Select the color box to open the color pop-up window and set the shadow color.
Plug-ins from the Filters menu When you install a 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. Installing Photoshop plug-ins You can use the Property inspector to apply some Photoshop plug-ins as Live Filters.
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. NO TE 3. If an filter is not editable, the info button is dimmed. For example, you cannot edit Auto Levels.
Creating custom Live Filters You can save a particular combination of settings for Live Filters by creating a custom Live Filter. All custom Live Filters appear in the Add Filters pop-up menu in the Property inspector and in the Styles panel. Custom Live Filters are actually styles with all property options deselected except for the Filter option. ■ You can create a custom Live Filter using the Property inspector or Styles panel.
You can rename or delete a custom Live Filter as you would any other style in the Styles panel. For more information, see “Creating and deleting styles” on page 237 and “Editing styles” on page 238. NO TE You cannot rename or delete a standard Fireworks filter. Saving Live Filters as commands You can save and reuse a filter by creating a command based on it. Using the History panel, you can automate all the Live Filters applied to an object by creating a command available from the Commands menu.
CHAPTER 9 9 Layers, Masking, and Blending Layers divide a Macromedia Fireworks 8 document into discrete planes, as though the components of the illustration were drawn on separate tracing paper overlays. A document can be made up of many layers, and each layer can contain many objects. In Fireworks, the Layers panel lists layers and the objects contained in each layer. Fireworks layers are similar to layer sets in Photoshop. Photoshop layers are similar to individual Fireworks objects.
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 42. You can view the stacking order of layers and objects in the Layers panel. This is the order in which they appear in the document.
Opacity and blend mode controls are at the top of the Layers panel. For more information, see “Adjusting opacity and applying blends” on page 233. Expand/Collapse Layer Show/Hide Layer Lock/Unlock Layer Active Layer Delete Layer New Bitmap Image Add Mask New/Duplicate Layer Activating layers When you click a layer or an object on a layer, that layer becomes the active layer. Objects that you subsequently draw, paste, or import reside initially at the top of the active layer.
To add a layer, do one of the following: ■ Click the New/Duplicate Layer button with no layer selected. ■ Select Edit > Insert > Layer. ■ Select New Layer from the Layers panel Options menu, and click OK. To delete a layer, do one of the following: ■ Drag the layer to the trash can icon in the Layers panel. ■ Select the layer and click the trash can icon in the Layers panel. To duplicate a layer, do one of the following: ■ Drag a layer to the New/Duplicate Layer button.
Organizing layers You can organize layers and objects in a document by naming them and rearranging them in the Layers panel. Objects can be moved within a layer or between layers. Moving layers and objects in the Layers panel changes the order in which objects appear on the canvas. Objects at the top of a layer appear above other objects in that layer on the canvas. Objects on the topmost layer appear in front of objects on lower layers.
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. The Single Layer Editing feature protects objects on all but the active layer from unwanted selection or changes. You can also use the Layers panel to control the visibility of objects and layers on the canvas.
Merging objects in the Layers panel If you work with bitmap objects, you may find that the Layers panel easily becomes cluttered. You can merge objects in the Layers panel, if the bottommost selected object is immediately above a bitmap object. Objects and bitmaps to be merged do not have to be adjacent in the Layers panel or reside on the same layer.
Using the Web Layer The Web Layer is a special layer that appears as the top layer in each document. The Web Layer contains web objects, such as slices and hotspots, used for assigning interactivity to exported Fireworks documents. For more information on web objects, see Chapter 11, “Slices, Rollovers, and Hotspots,” on page 251. You cannot unshare, delete, duplicate, move, or rename the Web Layer. You also cannot merge objects that reside on the Web Layer.
About masks You can create a mask object from either a vector object (a vector mask) or a bitmap object (a bitmap mask). You can also use multiple objects or grouped objects to create a mask. About vector masks If you have used other vector-illustration applications such as Macromedia FreeHand, you may be familiar with vector masks, which are sometimes called clipping paths or paste insides.
About bitmap masks If you’re a Photoshop user, you may be familiar with layer masks. Fireworks bitmap masks are similar to layer masks in that the pixels of a mask object affect the visibility of underlying objects. However, Fireworks bitmap masks are much more versatile: you can easily change how they are applied, whether using their grayscale appearance or their own transparency.
When you create a bitmap mask, the Property inspector displays information about how the mask is applied. If you select a bitmap tool when a bitmap mask is selected, the Property inspector displays the mask’s properties and options for the selected tool, simplifying the mask-editing process. 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.
To create a mask with the Paste as Mask command: 1. Select the object you want to use as the mask. Shift-click to select multiple objects. NO T E 2. If you use multiple objects as the mask, Fireworks always creates a vector mask, even if both objects are bitmaps. Position the selection so that it overlaps the object or group of objects to be masked. The object or objects you want to use as the mask can be either in front of or behind the objects or group to be masked. 3.
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 The mask in the Layers panel Masking objects using the Paste Inside command If you are a Macromedia FreeHand user, you may be familiar with the Paste Inside method of creating masks. Paste Inside creates either a vector mask or a bitmap mask, depending on the type of mask object you use.
■ With vector masks, Paste Inside shows the fill and stroke of the mask object itself. A vector mask object’s fill and stroke are not visible by default with Paste as Mask. You can turn a vector mask’s fill and stroke on or off, however, using the Property inspector. For more information, see “Changing the way masks are applied” on page 227. To create a mask using the Paste Inside command: 1. Select the object or objects to use as the paste inside contents. 2.
5. Select Edit > Paste Inside. The objects you pasted appear to be inside or clipped by the mask object. 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.
To create a bitmap mask using the Layers panel: 1. Select the object you want to mask. 2. Click the Add Mask button at the bottom of the Layers panel. Fireworks applies an empty mask to the selected object. The Layers panel displays a mask thumbnail representing the empty mask. 3. Optionally, if the masked object is a bitmap, use one of the marquee or lasso tools to create a pixel selection. 4.
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. To achieve the same effect, click the Add Mask button in the Layers panel. Hide All applies an empty, opaque mask to an object, which hides the entire object. Reveal Selection can be used only with pixel selections.
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. Original image; pixels selected with the Magic Wand 3. Do one of the following to create the mask: ■ ■ Select Modify > Mask > Reveal Selection to show the area defined by the pixel selection. Select Modify > Mask > Hide Selection to hide the area defined by the pixel selection.
About importing and exporting Photoshop layer masks In Photoshop, you can mask images using layer masks or grouped layers. Fireworks lets you successfully import images that employ layer masks without losing the ability to edit them. Layer masks are imported as bitmap masks. Fireworks masks can also be exported to Photoshop. They are converted into Photoshop layer masks.
To group objects to form a mask: 1. Shift-click two or more overlapping objects. You can select objects from different layers. 2. Select Modify > Mask > Group as Mask. 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.
Selecting masks and masked objects using mask thumbnails Masks and masked objects can be easily identified and selected using the thumbnails in the Layers panel. Thumbnails allow you to easily select and edit just the mask or the masked objects, without affecting the other objects. When you select the mask thumbnail, the mask icon appears beside it in the Layers panel, and the mask’s properties show in the Property inspector, where they can be changed if desired.
To select a mask or masked object independently: ■ Click the object on the canvas with the Subselection tool. When selected, masks have a yellow 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.
4. Click between the mask thumbnails in the Layers panel. This relinks the masked objects to the mask. To move a mask independently using its move handle: 1. Select the mask on the canvas using the Pointer tool. 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.
Modifying a mask’s appearance By modifying a mask’s shape and color, you can change the visibility of masked objects. You change the shape of a bitmap mask by drawing on it with the bitmap tools. You change the shape of a vector mask by moving the mask object’s points. If a mask is applied using its grayscale appearance, you can modify its colors to affect the opacity of the underlying masked objects. Using midtone colors on a grayscale mask gives masked objects a translucent appearance.
Changing the way masks are applied You can use the Property inspector to ensure that you are editing a mask and to identify the type of mask you are working on. When a mask is selected, the Property inspector lets you change the way the mask is applied. If the Property inspector is minimized, click the expander arrow to see all properties. Vector masks are applied using their path outline by default. The outline of the path or text is used as the mask. Optionally, you can show the mask’s fill and stroke.
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.
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.
2. Choose whether you want to apply or discard the effect of the mask on the masked objects before deleting the mask: Apply keeps the changes you have made to the object, but the mask is no longer editable. If the object being masked is a vector object, the mask and vector object are converted into a single bitmap image. Discard Cancel gets rid of the changes you have made and restores the object to its original form. stops the delete operation and leaves the mask intact.
Darken selects the darker of the blend color and base color to use as the result color. This replaces only pixels that are lighter than the blend color. Lighten selects the lighter of the blend color and base color to use as the result color. This replaces only pixels that are darker than the blend color. Difference subtracts the blend color from the base color or the base color from the blend color. The color with less brightness is subtracted from the color with more brightness.
Blending mode examples Here are examples of some of the blending modes in Fireworks. For additional examples, see the following web site at www.pegtop.net/delphi/blendmodes/.
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.
Chapter 9: Layers, Masking, and Blending
CHAPTER 10 10 Using Styles, Symbols, and URLs Macromedia Fireworks 8 provides three panels in which you can store and reuse styles, symbols, and URLs. Styles are stored in the Styles panel, symbols 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.
Using styles You can save and reapply a set of predefined fill, stroke, filter, and text attributes by creating a style. When you apply a style to an object, that object takes on the style’s characteristics. Fireworks has many predefined styles. You can add, change, and remove styles. The Fireworks CD-ROM and the Macromedia web site have many more predefined styles that you can import into Fireworks.
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.
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. Shift-click to select multiple styles; Control-click (Windows) or Command-click (Macintosh) to select multiple noncontiguous styles. 2. Click the Delete Style button in the Styles panel.
To import styles: 1. Select Import Styles from the Styles panel Options menu. 2. Select a styles document to import. All styles in the styles document are imported and placed directly after the selected style in the Styles panel. 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.
Using symbols Fireworks has three types of symbols: graphic, animation, and button. Each has unique characteristics for its specific use. Instances are representations of a Fireworks symbol. When the symbol object (the original) is edited, the instances (copies) automatically change to reflect the modifications to the symbol. Symbols are useful whenever you want to reuse a graphic element. You can place instances in multiple Fireworks documents and retain the association with the symbol.
Placing instances You can place instances of a symbol in the current document. To place an instance: ■ Drag a symbol from the Library panel to the current document. An instance of a symbol on the canvas Editing symbols You can modify a symbol in the Symbol Editor, which automatically updates all associated instances when you finish editing. N OT E For most types of edits, modifying an instance affects the symbol and all other instances. There are some exceptions, however.
To select all unused symbols in the Library panel: ■ Choose Select Unused Items from the Library panel Options menu. To delete a symbol: 1. In the Library panel, select the symbol. 2. Select Delete from the Library panel Options menu. 3. Click Delete. The symbol and all its instances are deleted. Editing instances When you double-click an instance to edit it, you’re actually editing the symbol itself in the Symbol Editor or Button Editor.
Editing instance properties These instance properties can be modified in the Property inspector without affecting the symbol or other instances: ■ Blending mode ■ Opacity ■ Filters ■ Width and height ■ x and y coordinates NO T E 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 287.
To import one or more prepared symbols from a Fireworks symbol library: 1. Open a Fireworks document. 2. Select Edit > Libraries and select a library: Animations Bullets opens a collection of animated symbols. opens a collection of graphic symbols resembling various list bullets. Buttons opens a collection of 2-, 3-, and 4-state Fireworks button symbols.
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. ■ Copy a symbol instance in the document containing the symbol, then paste it into the destination document. The symbol is imported into the Library panel of the destination document and retains a relationship to the symbol in the original document.
4. In the document into which the symbol was imported, select the symbol in the Library panel. 5. Select Update from the Library panel Options menu. NO TE 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.
Assigning a URL to a web object To assign a URL to a web object: 1. Enter the URL in the Link text box. 2. Click the Plus (+) button to add the URL. 3. Select a web object. 4. Select the URL from the URL preview pane. Creating a URL library You can group URLs in libraries. This keeps related URLs together, making them easier to access. You can save URLs in the default URL library, URLs.htm, or in new URL libraries that you create.
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 269 and “Setting the URL for a button symbol or instance” on page 290. To add used URLs to a URL library: 1.
Absolute URLs are complete URLs that include the server protocol, which is usually http:// for web pages. For example, http://www.macromedia.com/support/fireworks is the absolute URL for the Macromedia Fireworks Support web page. Absolute URLs remain accurate regardless of the location of the source document, but they do not link correctly if the target document is moved. Relative URLs are relative to the folder containing the source document.
Chapter 10: Using Styles, Symbols, and URLs
CHAPTER 11 11 Slices, Rollovers, and Hotspots Slices are the basic building blocks for creating interactivity in Macromedia Fireworks 8. 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.
Creating and editing slices Slicing cuts up a Fireworks document into smaller pieces and exports each piece as a separate file. Upon export, Fireworks also creates an HTML file containing table code to reassemble the graphic in a browser. Slicing cuts a document into multiple pieces, which are exported as separate files. Slicing an image has at least three major advantages: Optimizing One challenge of web graphic design is ensuring that images download quickly without sacrificing quality.
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. The lines extending from the slice object are slice guides, which determine the boundaries of the separate image files into which the document is split on export. These guides are red by default. To insert a rectangular slice based on a selected object: 1. Select Edit > Insert > Slice.
Creating HTML slices An HTML slice designates an area where ordinary HTML text appears in the browser. An HTML slice does not export an image; it exports HTML text that appears in the table cell defined by the slice. HTML slices are useful if you want to quickly update text that appears on your website without having to create new graphics. 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.
Creating nonrectangular slices Rectangular slices may not be sufficient when you’re trying to attach interactivity to a nonrectangular image. If you plan to attach a rollover behavior to a slice, for example, and your slice objects overlap or have irregular shapes, then a rectangular slice may swap unwanted background graphics along with the swap image. Fireworks solves this problem by allowing you to draw slices in any polygonal shape using the Polygon Slice tool.
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.
To hide or show slice guides in any document view: ■ Select View > Slice Guides. Changing slice and slice guide color If the colors used in a document are similar to the slice color, it can be difficult to see slices against the objects in the document. For ease of viewing, you can assign a new color to selected slices. Assigning unique colors to individual slices also helps you organize them. You can alter slice guide color as well.
Moving slice guides to edit slices Slice guides define the perimeter and position of slices. Slice guides extending beyond slice objects define how the rest of the document is sliced upon export. You can change the shape of a rectangular slice object by dragging the slice guides that surround it. Nonrectangular slice objects cannot be resized by moving slice guides.
To resize one or more slices: 1. Position the Pointer or Subselection tool over a slice 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.
About using the Property inspector or Info panel to edit slice objects You can also change a slice object’s position and size numerically using the Property inspector. For more information about changing an object’s dimensions numerically, see “Transforming objects numerically” on page 73. For more information about changing an object’s position numerically, see “Editing selected objects” on page 68.
When a slice is selected, a round circle with cross hairs appears in the center of the slice. This is called a behavior handle. Slice name Behavior handle Selection handle By dragging the behavior handle from a triggering slice and dropping it onto a target slice, you can easily create rollover and swap-image effects. The trigger and target can be the same slice. Hotspots also have behavior handles for incorporating rollover effects. For more information, see “Creating hotspots” on page 276.
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. By default, a rollover interaction is represented by a blue behavior line. Creating a simple rollover A simple rollover swaps in the frame directly under the top frame and involves only one slice. To attach a simple rollover to a slice: 1. Ensure that the trigger object is not on a shared layer. For more information, see “Sharing layers” on page 209.
6. Select the slice and place the pointer over the behavior handle. The pointer changes to a hand. N OT E 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.
To attach a disjoint rollover to a selected image: 1. Select Edit > Insert > Slice or Hotspot to attach a slice or hotspot to the trigger image. NO T E This step is not necessary if the selected object is a button or if a slice or hotspot already covers the image. 2. Create a new frame by clicking the New/Duplicate Frame button in the Frames panel. 3. Place a second image, to be used as the target, in the new frame in the desired location on the canvas.
Applying multiple rollovers to a slice You can drag more than one behavior handle from a single slice to create multiple swap behaviors. For example, you can trigger a rollover and a disjoint rollover from the same slice. A slice triggering a rollover behavior and a disjoint rollover behavior NO T E 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 266.
Using the Behaviors panel to add interactivity to slices In addition to rollovers, you can attach other types of interactivity to slices using the Behaviors panel. You can create custom interactions by editing existing behaviors. N OT E Although you can create simple, disjoint, and complex rollovers with the Behaviors panel, the drag-and-drop rollover method is recommended. For more information, see “Adding simple interactivity to slices” on page 260.
Attaching behaviors Using the Behaviors panel, you can attach a behavior to a slice. You can also attach more than one behavior. To attach a behavior to a selected slice using the Behaviors panel: 1. Click the Add Behavior button (the Plus button) in the Behaviors panel. Add Behavior button Remove Behavior button 2. Select a behavior from the Add Behavior button. For an explanation of each behavior, see “Using the Behaviors panel to add interactivity to slices” on page 266.
Using external image files for swap image You can use an image outside the current Fireworks document as the source for a swap image. Source images can be in GIF, animated GIF, JPEG, or PNG format. When you select an external file as the image source, Fireworks swaps that file with the target slice when the swap image is triggered in a web browser. The file must have the same width and height as the slice it is swapping into. If it does not, the browser resizes the file to fit within the slice object.
Preparing slices for export Using the Property inspector, you can make slices interactive by assigning links and targets to the slices. You can also specify alternate text to be displayed in a browser while an image is loading. In addition, you can select an export file format to optimize a selected slice. If the Property inspector is minimized, click the expander arrow in the lower-right corner to see all slice properties.
Entering brief, meaningful alternate text has become increasingly important in web design. A growing number of visually impaired people are using screen-reading applications, which read alternate text in a computer-generated voice as the pointer passes over graphics on a web page. To specify alt text for a selected slice or hotspot: ■ In the Property inspector, type the text in the Alt Text box.
Custom-naming slice files You can assign names to slices so that you can easily identify slice files in your website file structure. For example, if you have a button on a navigation bar that returns to the home page, you could name the slice Home. To enter a custom slice name, do one of the following: ■ Select the slice on the canvas, enter a name in the Object Name box in the Property inspector, and press Enter. ■ Double-click the name of the slice in the Web Layer, enter a new name, and press Enter.
Option Description 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. Underscore Period Space Hyphen The element uses any of these characters typically as separators between other elements. For example, if the document name is mydoc, the naming convention doc.name + “slice” + Slice # (A,B,C...) results in a slice called mydocsliceA.
4. (Optional) To set this information as the default for all new Fireworks documents, click Set Defaults. NO T E 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.
4. Select a cell color for HTML slices: ■ ■ NO TE 5. To give cells the same background color as the document canvas, select Use Canvas Color. To select a different color, deselect Use Canvas Color and select a color from the color pop-up window. If you select a color from the color pop-up window, it applies only to HTML slices; image slices continue to use the canvas color. Select what to place in empty cells from the Contents pop-up menu: None causes empty cells to remain blank.
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.
Creating hotspots After you identify areas on a source graphic that would make good navigation points, you create the hotspots and then assign URL links, pop-up menus, status bar messages, and alt text to them. There are two ways to create hotspots: ■ You can draw the hotspot around a target area in the graphic using the Rectangle, Circle, or Polygon (odd-shaped) Hotspot tools. ■ You can select an object and insert the hotspot over it. A hotspot need not always be a rectangle or a circle.
Editing hotspots Hotspots are web objects, and like many other objects, they can be edited using the Pointer, Subselection, and Transform tools. For more information on using these tools to edit a web object, see “Using tools to edit slice objects” on page 259. You can change a hotspot’s position and size numerically using the Property inspector or the Info panel. For more information about changing an object’s dimensions numerically, see “Transforming objects numerically” on page 73.
As an alternative to exporting, you can copy your image map to the Clipboard and paste it into Dreamweaver or another HTML editor. To export an image map or copy it to the Clipboard: 1. Optimize the graphic to prepare it for export. For more information, see “About optimizing” on page 326. 2. Select File > Export. 3. If you are exporting your image (as opposed to copying it to the Clipboard), navigate to the folder where you want to place the HTML file, and name the file.
Creating rollovers with hotspots Using the drag-and-drop rollover method of creating interactivity, you can easily attach a disjoint rollover effect to a hotspot if the target area is defined by a slice. Rollover effects are applied to hotspots the same way that they are to slices. For more information, see “Adding simple interactivity to slices” on page 260. N OT E A hotspot can trigger only a disjoint rollover. It cannot be the target of a rollover coming from another hotspot or slice.
Using hotspots on top of slices You can place a hotspot on top of a slice to trigger an action or behavior. You may want to do this if you have a large graphic and you want only a small portion of it to act as the trigger for an action. For example, perhaps you have a large graphic with text on it, and you want just the text to trigger an action or behavior, such as a rollover effect. You could place a slice on top of the graphic, and then a hotspot on top of the text.
CHAPTER 12 12 Creating Buttons and Pop-up Menus In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and 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.
Creating button symbols Buttons are navigation elements for a web page. Buttons created in the Button Editor have the following characteristics: ■ You can make almost any graphic or text object into a button. ■ You can create a button from scratch, convert an existing object into a button, or import already created buttons. ■ A button is a special type of symbol. You can drag instances of it from the symbol library into your document.
Using the Button Editor The Button Editor is where you create and edit a JavaScript button symbol in Fireworks. The tabs along the top of the Button Editor correspond to the four button states and the active area. The tips on each option in the Button Editor help you make design decisions for all four button states. Creating a simple two-state button With the Button Editor, you can create custom buttons by drawing shapes, importing graphic images, or dragging objects from the Document window.
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. You can create a nav bar using two-state or three-state buttons, but only a button with all four states qualifies as a real nav bar button in Fireworks. Fireworks has several Nav Bar behaviors that make buttons act as though they are related to each other.
Using bevel filters to draw button states As you create graphics for each button state, you can apply preset Live Filters to create common appearances for each state. For example, if you are creating a four-state button, you can apply the Raised filter to the Up state graphic, the Highlighted filter to the Down state graphic, and so on. To apply preset Live Filters to a button symbol: 1. With the desired button symbol open in the Button Editor, select the graphic to which you want to add a Live Filter. 2.
To convert a Fireworks rollover into a button: 1. Delete the slice or hotspot covering the rollover images. 2. Select Show All Frames from the Onion Skinning pop-up menu in the Frames panel. 3. Select all the objects to be included in the button. TIP 4. Use the Select Behind tool to select objects that are hidden behind others. For more information, see “Using the Select Behind tool” on page 53. Select Modify > Symbol > Convert to Symbol. The Symbol Properties dialog box opens. 5.
Importing button symbols Button symbols in the Library panel are document-specific. If you have an open document with symbols in the Library panel and then create a new document, the Library panel in the new document will be empty. However, there are several ways to import button symbols into a document’s Library panel, either from a library or from another Fireworks document.
■ 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: ■ ■ 2. Double-click a button instance in the workspace. In the Library panel, double-click the button preview or the symbol icon beside the button symbol. Make changes to the button’s characteristics, and click Done.
■ The Show Down State on Load option in the Property inspector for instances in a nav bar NO TE In Fireworks 8, you need not select the Show Down State on Load option for every button instance in a nav bar. The Document Specific section of the HTML Setup dialog box contains an option called Export Multiple Files. When you select this option and then export a nav bar, Fireworks 8 exports each HTML page with the corresponding button’s Down state.
To edit a slice or hotspot in a button symbol’s active area: 1. Do one of the following to open the button symbol in the Button Editor: Double-click a button instance in the workspace. ■ In the Library panel, double-click the button preview or the symbol icon beside the button symbol. ■ 2. Click the Active Area tab. 3. Do one of the following: ■ Use the Pointer tool to move or reshape the slice or move a slice guide. ■ Use any of the slice or hotspot tools to draw a new active area.
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. ■ Select a URL from the URL panel. Setting the target for a button The target is the window or frame in which the destination web page appears when a button instance is clicked. If you don’t enter a target in the Property inspector, the web page appears in the same frame or window as the link that called it.
To set the target for a button instance in the workspace: 1. Select the button instance in the workspace. 2. Do one of the following in the Property inspector: Select a preset target from the Target pop-up menu: ■ None or _self loads the web page into the same frame or window as the link. _blank loads the web page into a new, unnamed browser window. _parent loads the web page into the parent frameset or window of the frame that contains the link.
Creating navigation bars A navigation bar, or nav bar, is a group of buttons that provide links to different areas of a website. It generally remains consistent throughout the site, providing a constant method of navigation, no matter where the user is within the site. The nav bar looks the same from web page to web page, but in some cases, the links may be specific to the function of each page.
About the Pop-up Menu Editor The Pop-up Menu Editor is a tabbed dialog box that guides you through the creation of a pop-up menu. Its many options for controlling the characteristics of a pop-up menu are organized in four tabs: Content has options for determining the basic menu structure, as well as the text, URL link, and target for each menu item.
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. The current or default settings for the options on the other Popup Menu Editor tabs are applied to the menu when you create it. To create a simple pop-up menu: 1. Select a hotspot or slice that will be the trigger area for the pop-up menu. 2. Do one of the following to open the Pop-up Menu Editor: ■ Select Modify > Pop-up Menu > Add Pop-up Menu.
N O TE To view a pop-up menu, you must press F12 to preview it in a browser. The previews in the Fireworks workspace do not display pop-up menus. 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.
To move a menu item into a higher-ranking submenu or into the main pop-up menu: 1. Highlight the menu item in the Content tab of the Pop-up Menu Editor. 2. Click the Outdent Menu button. For more information about positioning submenus, see “Positioning pop-up menus and submenus” on page 303. 3. Do one of the following to complete the pop-up menu or continue building it: ■ ■ Click Next to move to the Appearance tab or select another tab to continue building the pop-up menu.
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.
To set whether a pop-up menu is HTML- or image-based: 1. With the desired pop-up menu open in the Pop-up Menu Editor, click the Appearance tab. For information on opening an existing pop-up menu in the Pop-up Menu Editor, see “Editing pop-up menus” on page 304. 2. Select a Cells option: HTML sets the menu’s appearance using HTML code only. This setting produces pages with smaller file sizes. Image gives you a selection of graphic image styles to use as the cell background.
4. Do one of the following: ■ ■ Click Next to move to the Advanced 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 pop-up menu displays a blue behavior line attached to an outline of the top level of the pop-up menu. NO TE To view a pop-up menu, press F12 to preview it in a browser. The previews in the Fireworks workspace do not display pop-up menus.
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. For information on opening an existing pop-up menu in the Pop-up Menu Editor, see “Editing pop-up menus” on page 304.
5. Enter a value in the Text Indent text box to set the amount of indention for pop-up menu text. 6. Enter a value in the Menu Delay text box to set the amount of time in milliseconds that the menu remains visible after the pointer is moved away from it. 7. Set pop-up border properties: Show Borders allows you to show or hide pop-up menu borders. If this option is not selected, the following options are disabled. Border Width sets the width of the pop-up menu border.
Positioning pop-up menus and submenus The Position tab of the Pop-up Menu Editor lets you specify a pop-up menu’s position. You can also position a top-level pop-up menu by dragging its outline in the workspace when the Web Layer is visible. To set the position for a pop-up menu using the Pop-up Menu Editor: 1. With the desired pop-up menu open in the Pop-up Menu Editor, click the Position tab.
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 304. 2. Do one of the following to define the submenu position: ■ ■ 3. Enter x and y coordinates.
3. Double-click the pop-up menu’s blue outline in the workspace. The Pop-up Menu Editor opens with your pop-up menu entries displayed. 4. Make the desired modifications on any of the four tabs and click Done. To change a pop-up menu entry: 1. With the desired pop-up menu displayed in the Pop-up Menu Editor, click the Content tab. 2. Double-click the Text, Link, or Target text boxes and edit the menu text. 3. Click outside the entry list to apply the change. 4. Click Done.
When you include submenus, Fireworks generates an image file called arrows.gif. This image is the tiny arrow that appears next to a menu entry that tells users a submenu exists. No matter how many submenus a document contains, Fireworks always uses the same arrows.gif file. For more information about exporting HTML, see “Exporting HTML” on page 357.
13 CHAPTER 13 Creating Animation Animated graphics add an exciting, sophisticated look to your website. In Macromedia Fireworks 8, 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.
Building animation In Fireworks, you can create animation by assigning properties to objects called animation symbols. The animation of a symbol is broken down into frames, which contain the images and objects that make up each step of the animation. You can have more than one symbol in an animation, and each symbol can have a different action. Different symbols can contain differing numbers of frames. The animation ends when all the action of all the symbols is complete.
You do not need to use symbols for every aspect of your animation. However, using symbols and instances for graphics that appear in multiple frames keeps your animation file size smaller, in addition to the other advantages discussed in this chapter. You can change animation symbol properties at any time using the Animate dialog box or the Property inspector. You can also edit symbol artwork in the Symbol Editor. The Symbol Editor lets you edit your symbol without affecting the rest of the document.
Editing animation symbols You can manipulate the properties of animation symbols to make your website come alive. You can change a variety of properties in a symbol, from the animation speed to the opacity and rotation. By manipulating these properties, you can make a symbol appear to rotate, speed up, fade in and out, or any combination of these. A key property for any animation symbol is number of frames. This property determines how many steps it takes the symbol to complete its animation.
Opacity is the degree of fading in or out from start to finish. Values range from 0 to 100, and the default is 100%. Creating a fade in/fade out requires two instances of the same symbol— one to play the fade in, and the other to play the fade out. Rotation is the amount, in degrees, that the symbol rotates from start to finish. Values range from 0 to 360º. You can enter higher values for more than one rotation. The default is 0º. CW and CCW indicate the direction in which the object rotates.
To change a selected symbol’s graphic attributes: 1. Do one of the following to open the Symbol Editor: ■ Double-click the symbol object. ■ Select Modify > Symbol > Edit Symbol. ■ Click the Edit button in the Animate dialog box. 2. Modify the animation symbol and change any text, strokes, fills, and effects as appropriate. 3. Close the Symbol Editor.
Working with frames You build animations by creating a number of frames. You can see the contents of each frame using the Frames panel. The Frames panel is where you create and organize frames. You can name the frames, reorganize them, manually set the timing of the animation, and move objects from one frame to another. Onion Skinning column Frame name Frame Delay column Onion Skinning options Delete Frame New/Duplicate Frame Distribute to Frames Each frame also has a number of associated properties.
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. 2. Deselect Include when Exporting.
To add frames to a specific place in the sequence: 1. Select Add Frames from the Frames panel Options menu. 2. Enter the number of frames to add. 3. Select where to insert the frames: before the current frame, after it, or at the beginning or end. Then click OK. To make a copy of a frame: ■ Drag an existing frame to the New/Duplicate Frame button at the bottom of the Frames panel. To copy a selected frame and place it in a sequence: 1. Select Duplicate Frame from the Frames panel Options menu. 2.
Sharing layers across frames Layers divide a Fireworks document into discrete planes, like separate tracing paper overlays. With animations, you can use layers to organize objects that are part of the scenery or backdrop for the animation. This gives you the convenience of being able to edit objects on one layer so that they don’t affect the rest of your animation. For more information, see “Working with layers” on page 204.
Viewing objects in a specific frame You can easily view objects in a specific frame using the Frame pop-up menu in the Layers panel. To view objects in a specific frame: ■ Select the desired frame from the Frame pop-up menu at the bottom of the Layers panel. All objects in the selected frame are listed in the Layers panel and displayed on the canvas. Using onion skinning Onion skinning lets you view the contents of frames preceding and following the currently selected frame.
To adjust the number of frames visible before and after the current frame: 1. In the Frames panel, click the Onion Skinning button. 2. Select a display option: 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.
Previewing an animation You can preview an animation while you are working on it to check its progress. You can also preview an animation after optimization to see how it will look in a web browser. To preview an animation in the workspace: ■ Use the frame controls that appear at the bottom of the Document window. Frame controls Keep the following in mind when previewing animations: ■ To set how long each frame appears in the Document window, enter frame delay settings in the Frames panel.
Exporting your animation After you set up the symbols and frames that make up your animation, you are ready to export the file as an animation. Before you export the files, you need to enter a few settings to make your animation load more easily and play more smoothly. You can set playback settings like looping and transparency and then use optimization to make your exported file smaller and easier to download.
Optimizing an animation Optimization compresses your file into the smallest package for fast loading and exporting, making downloading time much quicker on your website. To optimize an animation: 1. If you plan to export your animation as an animated GIF, select Animated GIF as the Export file format in the Optimize panel. If the panel is not visible, select Window > Optimize. 2. Set the Palette, Dither, or Transparency options.
Working with existing animations You can use an existing animated GIF file as part of your Fireworks animation. There are two ways of using the file: you can import the GIF into an existing Fireworks file, or you can open the GIF as a new file. When you import an animated GIF, Fireworks converts it to an animation symbol and places it in the currently selected frame. If the animation has more frames than the current movie does, you can choose to automatically add more frames.
Using multiple files as one animation Fireworks can create an animation based on a group of image files. For example, you can create a banner ad based on several existing graphics by opening each graphic and placing it in a separate frame in the same document. To open multiple files as an animation: 1. Select File > Open. 2. Shift-click to select multiple files. 3. Select Open as Animation and click OK.
Chapter 13: Creating Animation
14 CHAPTER 14 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.
Exporting from Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .352 Sending a Fireworks document as an e-mail attachment . . . . . . . . . . . . . . . . . . . . .370 Using the File Management button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 About optimizing Optimizing graphics in Fireworks involves doing the following: ■ Choosing the best file format.
Once you are more comfortable with optimizing and exporting, you’ll want to use the Optimize panel and the preview buttons in the Document window to optimize graphics. They are more convenient than the Export Wizard and offer more optimization control for users who are familiar with the optimization process. After you optimize graphics in this manner, you must perform an additional step to export (or in some cases, save) the graphics.
The preview area of the Image Preview displays the document or graphic exactly as it will be exported and estimates file size and download time with the current export settings. File size and download time estimates Save export settings in the active view Preview chosen export settings Saved set of options for the selected export You can use split views to compare various settings to find the smallest file size that maintains an acceptable level of quality.
2. Use the Zoom button at the bottom of the dialog box to zoom in or out in the preview. Click this button to activate the Zoom magnification tool and then click in the preview to magnify the preview. Alt-click (Windows) or Option-click (Macintosh) the button in the preview to zoom out. 3. Do one of the following to pan the preview area: 4. ■ Click the Pointer button at the bottom of the dialog box and drag in the preview.
To set exported image dimensions using Image Preview: 1. Click the File tab. 2. Specify a scale percentage or enter the desired width and height in pixels. Select Constrain to scale the width and height proportionally. To define only a portion of an image for export using Image Preview: 1. Click the File tab. 2. Select the Export Area option and do one of the following to specify the export area: ■ ■ Drag the dotted border that appears around the preview until it encloses the desired export area.
3. Make edits to the animation: ■ ■ ■ ■ ■ To specify the frame disposal method, select the desired frame in the list and select an option from the pop-up menu (indicated by the trash can icon). To set the frame delay, select the desired frame in the list and enter the delay time in hundredths of a second in the Frame Delay field. To set the animation to play repeatedly, click the Looping button and select the desired number of repetitions from the pop-up menu.
■ When a slice is selected, the Property inspector has a Slice Export Settings pop-up menu from which you can select preset or saved optimization settings. ■ The preview buttons in the Document window show how the exported graphic would appear with the current optimization settings. You can optimize the whole document the same way, or select individual slices or selected areas of a JPEG and assign different optimization settings for each.
GIF WebSnap 128 converts non-websafe colors to their closest websafe color. The color palette contains up to 128 colors. 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.
Previewing and comparing optimization settings The document preview buttons display the graphic as it would appear in a web browser, based on optimization settings. You can preview rollover and navigation behaviors, as well as animation. The Original button and the document preview buttons The document preview buttons display a document’s total size, estimated download time, and file format.
To preview a graphic based on the current optimization settings: ■ Click the Preview button in the upper left of the Document window. N OT E 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. 2. Click one of the split-view previews to select it. 3. Enter settings in the Optimize panel. 4.
The following file types are available: GIF, or Graphics Interchange Format, is a popular web graphic format. GIFs contain a maximum of 256 colors. GIFs can also contain a transparent area and multiple frames for animation. Images with areas of solid color compress best when exported as GIFs. A GIF is usually ideal for cartoons, logos, graphics with transparent areas, and animations. JPEG was developed by the Joint Photographic Experts Group specifically for photographic or high-color images.
You can optimize 8-bit file types by adjusting their color palettes. Fewer colors in the palette means fewer colors in the image, resulting in a smaller file size. The drawback to reducing colors is that it can also diminish image quality. As you experiment with different optimization settings, you can use the 2-Up and 4-Up buttons to test and compare a graphic’s appearance and estimated file size.
Custom is a palette that has been modified or loaded from an external palette (ACT file) or a GIF file. Adjusting the color palette during optimization affects the colors in the image. You can optimize and customize color palettes using the color table in the Optimize panel. To select a color palette: ■ Select an option from the Indexed Palette pop-up menu in the Optimize panel. To import a custom palette: 1. 2. Do one of the following: ■ Select Load Palette from the Optimize panel Options menu.
To select a color depth beyond 256 colors: ■ Select a 24- or 32-bit file format from the Export File Format pop-up menu in the Optimize panel. NO T E Higher color depths create larger files and are typically not ideal for web graphics. Use only 24- or 32-bit color depths when exporting or saving photographic images with continuous tones or complex gradient blends of colors. For high-color-depth graphics on the web, use JPEG files. For more information, see “Optimizing JPEGs” on page 346.
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.
To rebuild the color table to reflect edits in the document: ■ Click Rebuild at the bottom of the Optimize panel. When the table is rebuilt, the Rebuild button disappears, and the actual number of colors used in the image is displayed in its place. To select a color: ■ Click the color in the Optimize panel color table. To select multiple colors: ■ Control-click (Windows) or Command-click (Macintosh) the colors. To select a range of colors: 1. Click a color. 2.
To unlock all colors: ■ Select Unlock All Colors from the Optimize panel Options menu. Editing colors in a palette You can change a color in the current palette by editing it in the Optimize panel color table. Editing a color replaces all instances of that color in the image to be exported or to be saved as a bitmap.
Saving palettes You can save custom palettes as external palette files. You can use saved palettes with other Fireworks documents or in other applications that support external palette files, such as Macromedia FreeHand, Macromedia Flash, and Adobe Photoshop. Saved palette files have the .act extension. To save a custom color palette: 1. Select Save Palette from the Optimize panel Options menu. 2. Type a name for the palette and select a destination folder. 3. Click Save.
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.
To select a color for transparency: 1. Click the Preview, 2-Up, or 4-Up button at the upper left of the Document window. In 2Up or 4-Up view, click a view other than the original. 2. In the Optimize panel, select Index Transparency from the Transparency pop-up menu at the bottom of the panel. The canvas color is made transparent in the preview. 3. To select a different color, click the Select Transparency Color button. The pointer changes to an eyedropper. 4.
Interlacing: Downloading gradually When viewed in a web browser, interlaced images appear gradually while they are downloading. They display at a low resolution first and then transition to full resolution by the time the download is complete. NO TE This option is available only for GIF and PNG file formats. You can get similar results with a JPEG by making it progressive. For more information, see “Optimizing JPEGs” on page 346.
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.
To compress selected areas of a JPEG: 1. In Original view, select an area of the graphic for compression using one of the Marquee tools. 2. Select Modify > Selective JPEG > Save Selection as JPEG Mask. 3. Select JPEG from the Export File Format pop-up menu in the Optimize panel, if it’s not already selected. 4. Click the Edit Selective Quality Options button in the Optimize panel. The Selective JPEG Settings dialog box opens. 5. Select Enable Selective Quality and enter a value in the text box.
To help preserve fine edges between two colors: ■ Select Sharpen JPEG Edges from the Optimize panel Options menu. Use Sharpen JPEG Edges when exporting or saving JPEGs with text or fine detail to preserve the sharpness of these areas. Choosing Sharpen JPEG Edges increases file size. Using progressive JPEGs Progressive JPEGs, such as interlaced GIFs and PNGs, are displayed at a low resolution initially and then increase in quality as they download.
Removing halos When you make the canvas color transparent on an image that was previously anti-aliased, the pixels from the anti-aliasing remain. Then when you export (or in some cases, save) the graphic and place it on a web page with a different background color, the perimeter pixels of the anti-aliased object may be apparent on the web page’s background. These form a halo, which is especially noticeable on a dark background.
Saving and reusing optimization settings Fireworks remembers the last optimization settings you used after you perform any of the following actions: ■ File > Save ■ File > Save As ■ File > Save As/Save as a Copy ■ File > Export Fireworks then applies these settings to new documents. N OT E As in previous versions of Fireworks, new slices still get their default optimization settings from the parent document.
Exporting from Fireworks Exporting from Fireworks is a two-step process. First you must prepare your graphic or document for export by optimizing it. After your graphic or document has been optimized, you can export it (or save it, depending on its originating file type). For more information on optimizing, see “About optimizing” on page 326. For more information on saving, see “Saving documents in other formats” on page 27. You can export Fireworks graphics in a number of ways.
3. Select a location to export the image file to. For web graphics, the best location is typically a folder within your local website. 4. Enter a filename. You do not need to enter a file extension; Fireworks does that for you upon export using the file type you specified in your optimization settings. For more information on optimizing, see “About optimizing” on page 326. 5. Select Images Only from the Export pop-up menu. 6. Click Export.
Exporting selected slices You can export selected slices in a Fireworks document. Shift-click to select multiple slices. N OT E For more information on slicing, see “Creating and editing slices” on page 252. To export selected slices: 1. Do one of the following: ■ ■ 2. Select File > Export. To export an individual slice, right-click (Windows) or Control-click (Macintosh) the slice and select Export Selected Slice. Select a location in which to store the exported files.
4. Click Export to export the slice into the same folder as the original slice using the same base name. 5. Click OK when asked to replace the existing file. 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.
4. Select each slice individually and use the Frames panel to set different animation settings for each. For more information about animation settings, see Chapter 13, “Creating Animation,” on page 307. 5. Select all the slices you would like to animate, and select Animated GIF as the file format in the Optimize panel. For more information on optimizing, see “Optimizing GIF, PNG, TIFF, BMP, and PICT files” on page 336. 6.
Exporting an area You can use the Export Area tool to export a portion of a Fireworks document. To export a portion of a document: 1. Select the Export Area tool from the Tools panel. 2. Drag a marquee defining the portion of the document to export. N OT E You can adjust the position of the marquee as you drag. While holding down the mouse button, press and hold down the Spacebar, then drag the marquee to another location on the canvas. Release the Spacebar to continue drawing the marquee.
■ 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. NO T E Macromedia Dreamweaver shares a tight integration with Fireworks. Fireworks handles the export of HTML to Dreamweaver differently than it handles export to other HTML editors.
To include comments in exported HTML: ■ Before exporting, select the Include HTML Comments option on the General tab of the HTML Setup dialog box. Results of exporting When you export or copy HTML from Fireworks, the following is generated so that your Fireworks image can be re-created on a web page: ■ The HTML code necessary to reassemble sliced images and any JavaScript code if the document contains interactive elements.
You can set up global HTML export preferences using the HTML Setup dialog box. For more information, see “Setting HTML export options” on page 367. NO T E Macromedia Dreamweaver shares a tight integration with Fireworks. Fireworks handles the export of HTML Dreamweaver differently than that of other HTML editors. If you are exporting Fireworks HTML to Dreamweaver, follow these instructions, but for additional application-specific notes, also see “Working with Macromedia Dreamweaver” on page 374.
Copying HTML to the Clipboard A fast way to export Fireworks-generated HTML is to copy it to the Clipboard. You can copy HTML code in Fireworks in either of two ways. You can use the Copy HTML Code command, or you can select Copy to Clipboard as an option in the Export dialog box. Doing so will copy the Fireworks HTML to the Clipboard and generate the associated image files in the location you specify. You’ll later paste this HTML into a document in your preferred HTML editor.
To copy Fireworks HTML using the Export dialog box: 1. Select File > Export. NO T E 2. Optionally, if you are exporting to Dreamweaver, click the Quick Export button and select Copy HTML to Clipboard from the Dreamweaver submenu. 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.
3. Paste the HTML code. Refer to the help system within your specific HTML editor for instructions on pasting contents from the Clipboard. When pasting code into HTML editors, it is important to keep images and HTML files in the correct location, or links could be broken. If possible when you copy to the Clipboard, make sure images are exported to the final location where they will reside on the website. Fireworks uses document-relative URLs, so if the HTML or images are moved, the URL links are broken.
Updating exported HTML The Update HTML command allows you to make changes to a Fireworks HTML document you’ve previously exported. This feature is useful if you want to update only a portion of a document. NO TE Update HTML works differently with Macromedia Dreamweaver documents than it does with other HTML documents. For more information, see “Working with Macromedia Dreamweaver” on page 374.
To export a graphic in CSS layers: 1. Select File > Export. 2. In the Export dialog box, type a filename and select a destination folder. 3. Select CSS Layers from the Export pop-up menu. 4. In the Source pop-up menu, select one of the following: Fireworks Layers exports all layers as CSS layers. Fireworks Frames Fireworks Slices exports all frames as CSS layers. exports the slices in the document as CSS layers. 5.
To export XHTML from Fireworks: 1. Select File > HTML Setup, select an XHTML style from the HTML Style pop-up menu on the General tab, and click OK. 2. Export your document using any of the methods available for exporting or copying HTML. For more information about the various ways you can export and copy HTML from Fireworks, see “Exporting HTML” on page 357. NO TE Fireworks uses UTF-8 encoding when exporting to XHTML.
Setting HTML export options The HTML Setup dialog box allows you to define how Fireworks exports HTML. These settings can be document-specific or can be used as your default setting for all HTML exports. Changes made in the Document Specific tab affect the current document only, but you can use these settings as defaults for new documents if you click the Set Defaults button before closing the HTML Setup dialog box. General and Table settings are global preferences and affect all new documents.
■ Select Write CSS to an External File if you want to have the CSS code written to an external .css file that is exported to the same location as the HTML file. The name of the .css file matches the name of the HTML file (except for the file extension). Choosing this option also exports a file named mm_css_menu.js to the same location as the HTML file. N OT E ■ The Write CSS to an external file option is only available if you have chosen the Use CSS for Popup Menus option.
Using the Quick Export button The Quick Export button, located in the upper right corner of the Document window, offers easy access to common options for exporting Fireworks files to other applications. Using the Quick Export button, you can export to a variety of formats, including Macromedia applications and other applications, such as Microsoft FrontPage and Adobe GoLive®.
Customizing the Quick Export pop-up menu You can add additional options to the Quick Export pop-up menu if you know JavaScript and XML. To add options to the Quick Export pop-up menu: 1. Create your own JSF files and drop them into the Quick Export Menu folder on your hard disk. NO T E 2. The exact location of this folder varies depending on your operating system. The Quick Export Menu folder is located in the English subfolder of the Fireworks application folder on Windows systems.
Using the File Management button The File Management button, located at the top of the Document window next to the Quick Export button, offers easy access to file-transport commands. You can use the File Management button if your document lives in a Studio 8 site folder and if the site has access to a remote server.
Chapter 14: Optimizing and Exporting
CHAPTER 15 15 Using Fireworks with Other Applications Whether you’re creating web content or multimedia content, Macromedia Fireworks 8 is an essential component of any designer’s toolbox. Fireworks works well with other applications, offering a variety of integration features that streamline the design process. You can export Fireworks graphics to many applications, including other Macromedia products.
Working with Macromedia Director MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Working with Macromedia HomeSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 Working with Adobe Photoshop. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 About working with Adobe GoLive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 About working with HTML editors . . . . . . . . . . .
To insert a Fireworks image into a Dreamweaver document using the Files panel: 1. Export your image from Fireworks to the local site folder as defined in Dreamweaver. 2. Open the Dreamweaver document and make sure you are in Design view. 3. Drag the image from the Files panel into the Dreamweaver document. To insert a Fireworks image into a Dreamweaver document using the Insert menu: 1. Place the insertion point where you want the image to appear in the Dreamweaver Document window. 2.
To create a Fireworks image from an image placeholder in Dreamweaver: 1. In Dreamweaver, save the desired HTML document to a location inside your Dreamweaver site folder. 2. Position the insertion point in the desired position in your document, and do one of the following: ■ ■ Select Insert > Image Objects > Image Placeholder. Click the Images: Image pop-up menu in the Common category of the Insert bar and choose Image Placeholder. The Image Placeholder dialog box appears. 3.
Fireworks is opened with an empty canvas that is exactly the same size as the placeholder image. The Document window indicates that you are editing an image from Dreamweaver. 5. Create an image in Fireworks and click Done when you are finished. 6. Specify a name and location for the source PNG file in the Save As dialog box, and click Save. NO T E If you entered a name for the image placeholder from the Property inspector in Dreamweaver, that name is used as the default filename in Fireworks.
Placing Fireworks HTML code in Dreamweaver There are several ways to place Fireworks-generated HTML code into Dreamweaver. You can export HTML, or you can copy Fireworks HTML code to the Clipboard. You can also open an exported Fireworks HTML file in Dreamweaver and copy and paste selected sections of code. You can easily update code you’ve exported to Dreamweaver using the Update HTML command in Fireworks. You can even export HTML as a Dreamweaver library item.
5. Select Delete File After Insertion to move the HTML file to the Recycle Bin (Windows) or to permanently delete it (Macintosh) when the operation is complete. Use this option if you no longer need the Fireworks HTML file after inserting it. This option does not affect the source PNG file associated with the HTML file. NO TE 6. If the HTML file is on a network drive, it is permanently deleted, not moved to the Recycle Bin (Windows).
Copying code from an exported Fireworks file and pasting it into Dreamweaver You can open an exported Fireworks HTML file in Dreamweaver and then manually copy and paste only the desired sections into another Dreamweaver document. N OT E Before exporting from Fireworks, make sure to choose Dreamweaver as the HTML type in the HTML Setup dialog box. For more information, see Fireworks Help.
4. Navigate to the folder destination where you want to place the updated image files, and click Open. Fireworks updates the HTML and JavaScript code in the Dreamweaver document. Fireworks also exports updated images associated with the HTML and places the images in the specified destination folder. If Fireworks cannot find matching HTML code to update, it gives you the option of inserting new HTML code into the Dreamweaver document.
To export a Fireworks document as a Dreamweaver library item: 1. Select File > Export. 2. Select Dreamweaver Library from the Save as Type pop-up menu. Select the Library folder in your Dreamweaver site as the location in which to place the files. If this folder does not exist, use the Select Folder dialog box to create or locate the folder. The folder must be named Library; the case is important, because Dreamweaver is case-sensitive.
Editing Fireworks files from Dreamweaver Roundtrip HTML is a powerful feature that tightly integrates Fireworks and Dreamweaver. It allows you to make changes in one application and have those changes seamlessly reflected in the other. With Roundtrip HTML, you use launch-and-edit integration to edit Fireworksgenerated images and tables placed in a Dreamweaver document. Dreamweaver automatically opens the Fireworks source PNG file for the placed image or table, letting you make desired edits in Fireworks.
To open and edit a Fireworks image placed in Dreamweaver: 1. In Dreamweaver, choose Window > Properties to open the Property inspector, if it is not already open. 2. Do one of the following: ■ ■ ■ Select the desired image. (The Property inspector identifies the selection as a Fireworks image and displays the name of the known PNG source file for the image.) Then click Edit in the Property inspector. Control-double-click (Windows) or Command-double-click (Macintosh) the image you want to edit.
Editing Fireworks tables When you open and edit an image slice that is part of a placed Fireworks table, Dreamweaver automatically opens the source PNG file for the entire table. Before editing Fireworks tables from Dreamweaver, you should perform some preliminary tasks. For more information, see “Setting launch-and-edit options” on page 388.
About Dreamweaver behaviors If a single, unsliced Fireworks graphic is inserted into a Dreamweaver document and a Dreamweaver behavior is applied, that graphic will have a slice on top of it when it is opened and edited in Fireworks. The slice is not visible initially, because slices are automatically turned off when you open and edit single, unsliced graphics to which Dreamweaver behaviors are applied. You can view the slice by turning on its visibility from the Web Layer of the Layers panel.
To change optimization settings for a Fireworks image placed in Dreamweaver: 1. In Dreamweaver, select the desired image and do one of the following: ■ Select Commands > Optimize Image in Fireworks. ■ Click the Optimize in Fireworks button in the Property inspector. ■ 2. Right-click (Windows) or Control-click (Macintosh) and choose Optimize in Fireworks from the pop-up menu. If prompted, specify whether to open a Fireworks source file for the placed image. A dialog box opens.
4. When you have finished editing the image, click Update. The image is exported using the new optimization settings, the GIF or JPEG placed in Dreamweaver is updated, and the PNG source file is saved if a source file was selected. If you changed the format of the image, the Dreamweaver link checker prompts you to update references to the image. For example, if you changed the format of an image called my_image from GIF to JPEG, clicking OK at this prompt changes all references to my_image.
Although you can use earlier versions of Fireworks as external image editors, these versions offer limited launch-and-edit capabilities. When you work with Roundtrip HTML, Fireworks MX and Fireworks 4 do not fully support edits made to cell properties in Dreamweaver tables, nor does it support behaviors applied in Dreamweaver.
4. Click Make Primary. 5. Repeat steps 2 through 4 to set Fireworks as the primary editor for other web image file types. About Design Notes and source files Whenever you export a Fireworks file from a saved source PNG file to a Dreamweaver site, Fireworks writes a Design Note that contains information about the file. For example, when you export a Fireworks table, Fireworks writes a Design Note for each exported image.
3. Specify the options to use when editing or optimizing Fireworks images placed in an external application: Always Use Source PNG automatically opens the Fireworks PNG file that is defined in the Design Note as the source for the placed image. Updates are made to both the source PNG and its corresponding placed image. Never Use Source PNG automatically opens the placed Fireworks image, whether or not a source PNG file exists. Updates are made to the placed image only.
Undo Check Out undoes Check Out of the local file and checks it in, overwriting the local file with the remote copy. Undo Check Out is enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in Dreamweaver for the site in which the document resides. N OT E File Management commands are enabled in Fireworks only if your document resides in a Dreamweaver site folder with a remote server defined.
When you import a Fireworks PNG file into Flash, you can choose from a variety of import options. You can import all layers and objects as a library symbol, or you can import all content onto a single, new layer. With vector and text objects, you can maintain their editability completely, or you can choose to maintain appearance only when objects have effects applied or other properties that aren’t available in Flash.
7. Select the way you’d like vector objects and text imported: Rasterize if Necessary to Maintain Appearance preserves the editability of vector objects, unless they have special fills, strokes, or effects that Flash does not support. To preserve the appearance of such objects, Flash converts them to non-editable bitmap images. Keep All Paths Editable preserves the editability of all vector objects.
To copy and paste graphics from Fireworks into a Flash document: 1. In Fireworks, select the object or objects to copy. 2. Select Edit > Copy or click the Quick Export button and choose Copy from the Macromedia Flash pop-up menu. 3. In Flash, create a new document and choose Edit > Paste. NO T E You may have to ungroup the objects using Modify > Ungroup so that they will be editable as separate vector objects in Flash.
To export a Fireworks graphic or animation as a SWF file: 1. Select File > Export or click the Quick Export button and choose Export SWF from the Macromedia Flash pop-up menu. 2. In the Export dialog box, type a filename and choose a destination folder. 3. Select Macromedia Flash SWF from the Save As pop-up menu. 4. Click the Options button. The Flash SWF Export Options dialog box appears. 5.
Exporting PNG files with transparency The PNG format supports transparency with 32-bit color images. You can import Fireworks PNG source files directly into Flash. You can also create transparency with an 8-bit PNG file. With an 8-bit PNG file, you get excellent transparency results and better file compression than with the GIF file format. You can export Fireworks 8-bit PNG graphics with transparency for insertion into Flash. To export an 8-bit PNG file with transparency: 1.
Using Fireworks to edit graphics imported into Flash With launch-and-edit integration, you can use Fireworks to make changes to a graphic that you previously imported into Flash. You can edit any imported graphic this way, even if the graphic wasn’t exported from Fireworks. NO TE Fireworks native PNG files imported into Flash are an exception, unless you imported the PNG file as a flattened bitmap image.
Working with Macromedia FreeHand MX Because both applications support vectors, vector graphics can be easily shared between Fireworks and Macromedia FreeHand MX. The appearance of objects may differ between applications, however, because Fireworks and FreeHand do not share all the same features. For more information, see “Working with other vector graphics applications” on page 405.
Include Invisible Layers imports objects on layers that have been hidden. Otherwise, invisible layers are ignored. Include Background Layers imports objects from the document’s background layer. Otherwise, the background layer is ignored. Render as Images rasterizes complex groups, blends, or tiled fills and places each as a single bitmap object in a Fireworks document.
To copy and paste a selected FreeHand graphic into Fireworks: 1. In FreeHand, choose Edit > Copy. 2. Create a new document in Fireworks or open an existing one. 3. Select Edit > Paste. To drag a FreeHand graphic into Fireworks: ■ Drag the graphic from FreeHand into an open document in Fireworks. TIP In Windows, if your FreeHand and Fireworks applications are maximized, drag the FreeHand graphic to the Fireworks button in the taskbar.
4. Locate and select the desired PNG file from the Import dialog box, and click Open. The Fireworks PNG Import Settings dialog box appears. 5. Select a File Conversion Option: Open Frames as Pages imports Fireworks frames onto separate FreeHand pages. If you want, select Remember Layers to convert Fireworks layers to FreeHand layers. Deselecting this option causes the content of all Fireworks layers to be combined onto a single layer. Open Frames as Layers 6.
9. Select the Import as a Single Flattened Bitmap option if you want to preserve the look of the entire Fireworks document. When this option is selected, the rest of the options in the Fireworks PNG Import Settings dialog box are dimmed. Select this option only if editability is not important to you. 10. Click 11. OK. Click in the FreeHand Document window where you want the Fireworks PNG file to appear.
To copy selected Fireworks paths: 1. Select Edit > Copy Path Outlines, or click the Quick Export button and choose Copy Path Outlines from the FreeHand pop-up menu. 2. Switch to an open document in FreeHand. 3. Select Edit > Paste to paste the paths. Exporting Fireworks graphics to FreeHand You can export Fireworks graphics in a FreeHand-compatible format and import the graphics into FreeHand. To export a vector graphic to FreeHand: 1.
Working with other vector graphics applications Fireworks can share vector graphics with other vector graphics applications, such as Adobe Illustrator. In Fireworks, you export and import vector graphics from these applications in the same way that you export and import graphics from Macromedia FreeHand. For more information, see “Working with Macromedia FreeHand MX” on page 399.
Placing Fireworks files in Director Director can import flattened images from Fireworks, such as JPEG and GIF images. It can also import 32-bit PNG images with transparency. For sliced, interactive, and animated content, Director can import Fireworks HTML. For information on exporting flattened Fireworks images such as JPEG and GIF images, see Fireworks Help. Exporting graphics with transparency In Director, transparency can be achieved by importing 32-bit PNG images.
5. Select Trim Images to automatically crop the exported images to fit the objects on each frame. 6. Select Put Images in Subfolder to choose a folder for images. 7. Click Save. Importing Fireworks files into Director In Director, you can import flattened images that you have exported from Fireworks, such as JPEG, GIF, and 32-bit PNG images. Or you can import Fireworks layers, slices, and interactive elements by inserting Fireworks HTML. To import a flattened Fireworks image: 1.
To import layered, sliced, or interactive Fireworks content: 1. In Director, choose Insert > Fireworks > Images from Fireworks HTML. NO T E 2. The location and name of this menu command may be different depending on your version of Director. Locate the Fireworks HTML file you exported for use in Director. The Open Fireworks HTML dialog box appears. 3. Change options if desired: Color allows you to specify a color depth for the imported graphics. If they contain transparency, choose 32-bit color.
Editing Director cast members in Fireworks Using launch-and-edit integration, you can make changes to Director cast members by starting Fireworks to edit them from inside Director. You can also start Fireworks from inside Director to optimize cast members. To start Fireworks to edit a Director cast member: 1. In Director, right-click (Windows) or Control-click (Macintosh) the graphic in the Cast window. 2. Select Launch External Editor from the pop-up menu.
Optimizing cast members in Director You can start Fireworks from Director to preview optimization changes for selected cast members. To start Fireworks to preview optimization settings for a Director cast member: 1. In Director, select the cast member in the Cast window and click Optimize in Fireworks on the Bitmap tab of the Property inspector. 2. In Fireworks, change the optimization settings as desired. 3. Click Update when finished. Click Done if the MIX Editing dialog box appears.
A link to the Fireworks image is created in the HTML code. Click the Browse tab to preview your image within the HomeSite document. Placing Fireworks HTML in HomeSite There are a few ways to place Fireworks HTML into HomeSite. You can export Fireworks HTML, or you can copy HTML to the Clipboard. You can also open an exported Fireworks HTML file in HomeSite and copy and paste selected sections of code.
Copying code from an exported Fireworks file and pasting it into HomeSite You can open an exported Fireworks HTML file in HomeSite and then manually copy and paste only the desired sections into another HomeSite document. N OT E Before exporting, make sure to set the HTML type to Generic in the HTML Setup dialog box. For more information, see Fireworks Help.
3. Select Edit in Macromedia Fireworks from the pop-up menu. HomeSite starts Fireworks, if it is not already open. 4. If prompted, specify whether to locate a Fireworks source file for the placed image. For more information on Fireworks source PNG files, see Fireworks Help. 5. In Fireworks, edit the image. The Document window indicates that you are editing a Fireworks image from another application. 6. When you are finished making edits, click Done in the Document window.
Importing Photoshop files into Fireworks When you import or open a Photoshop file in Fireworks, the Photoshop file is imported into a PNG file using the import preferences that you have specified. In addition to preserving layers and text as specified by the import options, Fireworks preserves and converts the following Photoshop features: ■ Layer masks convert to Fireworks object masks. ■ Layer effects convert to Fireworks Live Filters, if a corresponding Live Filter exists.
About importing text from Photoshop You can open or import a Photoshop file containing text. When opening Photoshop files that contain text, Fireworks checks if you have the necessary fonts on your system. If you don’t, Fireworks asks if you want to replace the fonts or maintain their appearance. For more information, see Fireworks Help. If the text in your Photoshop file has effects applied to it that Fireworks supports, the effects are still applied when brought into Fireworks.
3. Specify import options: Layers: Convert to Fireworks Objects imports each layer in the Photoshop file as a separate object on a single layer in Fireworks. Layers: Share Layer Between Frames makes the imported layers visible across all frames in the Fireworks file. Layers: Convert to Frames imports each layer in the Photoshop file as an object on a separate frame in Fireworks. This option is useful for importing files that you want to use as animations.
To use Photoshop and other third-party filters and plug-ins using the Preferences dialog box: 1. Select Edit > Preferences. N OT E On Mac OS X, choose Fireworks > Preferences. 2. Click the Folders tab (Windows) or choose Folders from the pop-up menu (Macintosh). 3. Select the Photoshop Plug-ins option. The Select a Folder (Windows) or Choose a Folder (Macintosh) dialog box opens. N OT E If the dialog box doesn’t automatically open, click Browse. 4.
Placing Fireworks graphics in Photoshop Fireworks provides extensive support for exporting files in Photoshop (PSD) format. Export settings let you control which elements in the file remain editable when you reopen it in Photoshop. A Fireworks image exported into Photoshop maintains the same editability when reopened in Fireworks as other Photoshop graphics. Export options for editability, appearance, and file size let you determine the best possible export procedure for your particular graphic.
Customizing files for export to Photoshop When you export a file to Photoshop, you can choose customized settings for exporting objects, effects, and text. To customize settings for export to Photoshop: 1. In the Export dialog box, with Photoshop PSD selected as the export file type, choose Custom from the Settings pop-up menu. 2.
About working with HTML editors Fireworks generates pure HTML that can be read by all HTML editors. For general information on placing Fireworks HTML into HTML editors, see Fireworks Help. Fireworks can also import HTML content. This is a powerful feature, allowing you to open and edit most any HTML document within Fireworks. For more information, see Fireworks Help.
16 CHAPTER 16 Automating Repetitive Tasks Web designers often spend lots of time doing repetitive tasks, such as optimizing images or converting images to fit within certain constraints. Part of the power of Macromedia Fireworks 8 is its capability to automate and simplify many tedious drawing, editing, and fileconversion tasks. To speed up your editing process, you can use Find and Replace to search for and replace elements within a file or elements from multiple files.
Finding and replacing The Find and Replace feature helps you search for and replace elements, such as text, URLs, fonts, and colors. Find and Replace can search the current document or multiple files. Find and Replace works only in Fireworks PNG files or in files containing vector objects, such as FreeHand, uncompressed CorelDraw, and Illustrator files. Search option Find option Find panel To select the source for the search: 1. Open the document. 2.
Search Files finds and replaces elements across multiple files. If this option is not already selected in the Search pop-up menu, selecting it opens a dialog box in which you can select which files to search. If Search Files is already selected in the Search pop-up menu, you have the option to select which files to search after you begin the search operation by clicking Find, Replace, or Replace All. 4. From the Find pop-up menu, select an attribute to search for.
3. Select one of the following from the Backups pop-up menu: No Backups finds and replaces without backing up original files. The changed files replace the original files. Overwrite Existing Backups creates and stores only one backup copy of each file changed during a find and replace. If you perform additional find-and-replace operations, the previous original file always replaces the backup copy. The backup copies are stored in a subfolder called Original Files.
Finding and replacing fonts You can also quickly find and replace fonts in your Fireworks documents. To search for and replace fonts in one or more Fireworks documents: 1. Select Find Font from the Find pop-up menu of the Find panel. 2. Select the font and font style to find. TIP 3. You can restrict your search by minimum and maximum point sizes. Specify the font, font style, and point size to use as a replacement in the Change To area.
4. If you want, select options to further define the search: Whole Word finds the text only in the same form in which it appears in the Find option, not as part of any other word. Match Case distinguishes between uppercase and lowercase letters during the search. Regular Expressions matches parts of words or numbers conditionally during a search. Finding and replacing non-websafe colors A non-websafe color is a color not included in the Web216 color palette.
You also have the option of not selecting any files at all while using the wizard if you only want to save the batch-process script for later use.
N O TE 2. If the files you select are locked or checked in from a Dreamweaver site, you are prompted to unlock them or check them out before proceeding. Click one of the following in the Batch (Windows) or Batch Process (Macintosh) dialog box: Add adds selected files and folders to the list of files to batch-process. If a folder is selected, all valid, readable files in the folder are added to the batch process. N OT E Valid files are files that have been created, named, and saved.
4. Click Next, then do one or both of the following: ■ ■ To add a task to the batch, select it in the Batch Options list and click Add. Each task can be added only once. For more information on the Scale option, see “Scaling graphics with a batch process” on page 431. For more information on the Rename option, see “Changing filenames with a batch process” on page 433. For more information on adding commands, see “Performing commands with a batch process” on page 434.
6. Select settings for each option as required. To remove a task from the batch, select the task in the Include in Batch list and click Remove. 7. Click Next. 8. Select options for saving processed files: Same Location as Original File saves the file in the same location as its source file and overwrites the source file if the filenames are the same and in the same format. Custom Location 9. lets you select a location in which to save the processed files.
Changing optimization settings with a batch process You can change file optimization settings using the Export option in the Batch Process dialog box. To set export settings for a batch process: 1. Select Export from the Batch Options list and click Add. 2. From the Settings pop-up menu, select from the following options and click OK: ■ ■ ■ 3. Select Use Settings from Each File to keep each file’s previous export settings during the batch process.
To set scaling options for batch-processed files: 1. Select Scale from the Batch Options list and click Add. 2. In the Scale pop-up menu, select an option: No Scaling exports files unaltered. Scale to Size scales images to the exact width and height you specify. Scale to Fit Area makes images fit proportionally with the maximum width and height range you specify. TIP Use Scale to Fit Area to convert a group of images to uniformly sized thumbnail images.
To select attributes to find and replace during a batch process: 1. Select Find and Replace from the Batch Options list and click Add. 2. Click Edit. 3. Select the type of attribute to find and replace from the Find pop-up menu: text, font, color, URL, or Non-Web216. 4. Enter or select the specific element to find in the Find box. 5. Enter or select the specific element to replace in the Change To box. 6. Click OK to store Find and Replace settings. 7. Click Next to continue the batch process.
Add Suffix lets you enter text to add to the end of the filename before the file extension. For example, if you enter “_day”, then the file Sunset.gif is renamed Sunset_day.gif when it is batch-processed. NO T E 3. For each changed filename, you can do any combination of Replace, Replace blanks, Add Prefix, and Add Suffix. For example, you could replace “Temp” with “Party,” remove all blanks, and add a prefix and a suffix, all at the same time. Click Next to continue the batch process.
Specifying the batch process output location After you select all batch options in the Batch Process dialog box, you must select options for saving your files. You can save backup copies of the original files from a batch process. Backup copies of files are placed in an Original Files subfolder in the same folder as each original file. To back up batch-processed files: 1. Select a location for the batch output. 2. Select Backups to set your backup options. 3.
Saving batch processes as scripts You can save batch process settings as a script or command to re-create the batch process easily in the future. After you select all batch options in the Batch dialog box, you are given options for saving your files. To create a batch script: 1. Click Save Script to create a batch script. 2. Enter a name and destination for the script. 3. Click Save. Saving your script into the Commands folder on your hard disk adds it to the Commands menu in Fireworks.
Running scripts by dragging and dropping If you have a batch process that you repeat frequently, save it as a script, then drag that script from your hard drive to the Fireworks icon on your desktop to run the batch process. The Fireworks application launches and runs that script. To run a script by dragging and dropping: 1. Save a script. 2. Do one of the following: ■ Drag the script file icon onto the Fireworks desktop icon. ■ Drag the script file icon into an open Fireworks document.
Using the Macromedia Extension Manager An extension is a command script, command panel, library, filter, pattern, texture, or Auto Shape that can be added to Fireworks to enhance its capabilities. Fireworks ships with the Macromedia Extension Manager, which allows you to easily install, manage, and delete extensions. Upon installation, Fireworks includes a collection of default extensions in the Commands menu.
To save steps as a command: 1. Select the steps to save as a command: Click a step, then Shift-click another to select a range of steps to save as a command. ■ Control-click (Windows) or Command-click (Macintosh) to select noncontiguous steps. ■ 2. Click the Save Steps as Command button at the bottom of the History panel. 3. Enter a name for the command and click OK. The command appears on the Commands menu.
To replay a selection of steps: 1. Select one or more objects. 2. Select the steps in the History panel. 3. Click the Replay button at the bottom of the History panel. Steps marked with an X are nonrepeatable and cannot be played back. Separator lines indicate that a different object has become selected. Commands created from steps that cross a separator line can produce unpredictable results. To apply selected steps to objects in many documents: 1. Select a range of steps. 2.
SWF movies that are used as commands are stored in the Commands folder on your hard disk, and SWF movies that are used as panels are stored in the Command Panels folder. NO T E The exact location of these folders varies from system to system and depends on whether you want the command or panel to be available just to your user profile or to all users.
Editing or customizing a command script Command scripts are saved as JavaScript. If you know JavaScript, you can open and edit commands in any text editor, such as Notepad (Windows) or TextEdit (Macintosh). To edit a command using JavaScript: 1. From your desktop, navigate to the appropriate Commands or Command Panels folder on your hard disk.
Flash SWF movies used as Fireworks panels Some panels in Fireworks, such as the Align panel, are actually Flash SWF movies. If you know JavaScript or ActionScript, you can create your own Fireworks panel by designing and coding it in Flash and exporting it as a SWF movie. If dropped into the Command Panels folder on your hard disk, the movie will appear as a panel in the Fireworks Window menu.
Chapter 16: Automating Repetitive Tasks
CHAPTER 17 17 Preferences and Keyboard Shortcuts Macromedia Fireworks 8 preference settings let you control the general appearance of the user interface, as well as editing and folder aspects. In addition, Fireworks allows you to customize your keyboard shortcuts. This means that you can customize your shortcuts and standardize them among your favorite software programs. This chapter covers the following topics: Setting preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
General preferences The following options are on the General preferences tab: Undo Steps sets undo/redo steps to a number between 0 and 1009. This setting applies to both the Edit > Undo command and the History panel. A large number of undos can increase the amount of memory Fireworks requires. You must restart Fireworks for the change in this setting to take effect. Color Defaults sets the default colors for brush strokes, fills, and highlight paths.
Brush Size Painting Cursors sets the size and shape of the Brush, Eraser, Blur, Sharpen, Dodge, Burn, and Smudge tool pointers to accurately reflect what you are about to draw or erase. For certain large multi-tipped brushes, the cross-hair pointer is used by default. When this option and Precise Cursors are turned off, tool icon pointers are displayed. Display Striped Border places the familiar striped border around the entire canvas when you are working with bitmap objects (bitmap mode).
For more information on working with Fireworks graphics in Director, see “Working with Macromedia Director MX” on page 405. NO T E Macromedia Dreamweaver handles launch-and-edit settings differently. Dreamweaver always opens the source PNG, even if you set launch-and-edit preferences differently in Fireworks. If no Design Note exists or if the path to the source PNG is broken, Dreamweaver always prompts you to locate the source PNG file.
Restoring preferences You can restore preferences to their original settings by deleting the preferences file. The first time Fireworks is launched after the preferences file has been deleted, a new preferences file is created, restoring Fireworks to its original configuration. To restore default preferences: 1. Quit Fireworks. 2. Locate the Fireworks 8 Preferences file on your hard disk and delete it. The exact location of this file varies from system to system.
To create a custom or secondary shortcut for a menu command, tool, or miscellaneous action: 1. Select Edit > Keyboard Shortcuts to open the Keyboard Shortcuts dialog box. 2. Click the Duplicate Set button. 3. Enter a name for the custom set in the Duplicate Set dialog box and click OK. The name of the new custom menu appears in the Current Set text box. 4.
To delete a custom shortcut: 1. Select the command in the Commands list. 2. Select the custom shortcut from the Shortcuts list. 3. Click the Delete a Selected Shortcut (-) button. Creating a reference sheet for the current shortcut set A reference sheet is a record of the current shortcut set stored in HTML table format. You can view the reference sheet in a web browser or print it. NO T E Reference sheets exported from Fireworks are UTF-8 encoded. To create a reference sheet: 1.
About user configuration files Fireworks user configuration files are stored in the Macromedia/Fireworks 8 folder in your user-specific Application Data folder (Windows) or Application Support folder (Macintosh). The location of this folder varies depending on what operating system you use and on whether your system is a multiuser system or a single-user system. For information on locating this folder, see your operating system documentation.
■ On the Macintosh, preferences are in the Library/Preferences folder in your user folder. For information about locating your Macintosh user folder, see Apple Help. N OT E On the Macintosh, most Fireworks user-specific configuration files are stored in a different folder, your user-specific Application Support folder. The Fireworks 8 Preferences file is an exception.
Chapter 17: Preferences and Keyboard Shortcuts
Index Numerics 24-bit color 339 32-bit color 339 A absolute URLs, entering 248 ACT file format, swatches 169 Add Filters pop-up menu 194 Add Noise filter 109 Add Preview Icons preference 446 adding frames 314 styles 237 adjusting hue or saturation 101 tonal range using eyedropper 99 Adobe GoLive 369 Align panel 34 aligning objects 76 alpha channel of an object, selecting 61 alpha, converting images to 107 alt (alternate) text 269 assigning to buttons or instances 292 animation 308 adding frames 314 creatin
B backing up during Find and Replace 424 baseline shift 156 Batch Process dialog box 427 batch processing 426 backing up files 435 commands 434 export settings 431 filenames 433 Find and Replace 432 optimization settings 431 saving as scripts 436 saving files 430 scaling graphics 431 batch scripts 436 dragging and dropping 437 running 436 behaviors Behaviors panel 266 Macromedia Dreamweaver 4 260 Nav Bar Down 266 Nav Bar Over 266 Nav Bar Restore 266 Set Nav Bar Image 266 Set Pop-up Menu 266 Set Text of Stat
button symbols editing 287 inserting in a document 286 buttons active area 289 Button Editor 282 creating 282 defined 282 Live Filters 285 navigation bars 293 overview 281 setting a target 291 C canvas modifying characteristics 42 modifying resolution 43 rotating 45 trimming 45 cell border properties 302 cellular phone graphics. See WBMP files center point and axis of rotation 72 Chamfer Rectangle tool 115 character spacing.
color table 340 edited swatch in 340 locked swatch in 340 selecting colors in 341 swatch with multiple attributes in 340 transparent swatch in 340 updating 341 websafe swatch in 340 colorizing images 101 command scripts, editing 442 commands batch processing 434 creating 439 deleting custom 441 editing 442 renaming custom 441 renaming or deleting Fireworks commands 441 Commands menu 439 managing saved commands 441 commands, saving 50 composite paths 137, 138 compositing 230 compression adjusting 343 and opt
documents creating new 17 default mode 112 multiple views 41 opening 18 recent 19 saving 26 switching 38 tiling views 41 Dodge tool 87 Doughnut tool 115 Down button state 282 downsampling 45 drag-and-drop behaviors blue line 262 definition 261 deleting 264, 265 dragging and dropping 22 drawing 115, 116 arrows 115 bending adjacent segments 131 beveled rectangles 115 chamfer rectangles 115 changing adjacent segments 130 connector lines 115 converting straight paths to curved 129 distorting objects 73 doughnut
animations 320, 355 batch process settings 431 CSS layers 364 customizing files for Photoshop 419 default location for 352 Fireworks files to Dreamweaver 411 frames as multiple files 356 hotspots 277 HTML 357 images 352 layers as multiple files 356 results 359 slices 269, 354 styles 238 symbols 245 to Illustrator 401 to Macromedia Director 406 to Macromedia Dreamweaver 381 to Macromedia Flash 392, 395 to Macromedia FreeHand 401 to Photoshop 418 to WBMP files 336 UTF-8 366 XHTML 365 exporting graphics 15 ext
fonts 425 multiple files 423 non-websafe colors 426 selecting source for search 422 text 424 URLs 425 uses 422 Fireworks Help 12 Fit to Canvas 45 Flash SWF movies 443 Flatten Selection command 81 flipping objects 72 floating pixel selections creating 66 moving 66 fonts finding and replacing 425 handling missing 162 styles 148 type sizes 148 frame delay animations 313 frame delay, default setting 19 frames adding 314 custom viewing 318 deleting 315 disabling layer sharing 316 exporting 356 inserting 314 mana
Histogram 95 History panel 33, 49 changing the number of steps in 439 clearing all steps from 439 editing actions with 442 replaying steps 440 HomeSite placing Fireworks HTML in 411 placing Fireworks images in 410 hotspots 15 applying drag-and-drop rollovers 279 assigning URLs 269 creating 275, 276 editing shape 277 irregular 276 on top of slices 280 HSB color model 172 HTML 358 copying and pasting from Fireworks to Dreamweaver 361, 362 exporting 357, 360 inserting from Fireworks into Dreamweaver 378 replac
K kerning 150 keyboard shortcuts 449 changing current set 449 custom shortcut sets 449 deleting custom shortcut sets 450 reference sheet for current set 451 secondary shortcuts 449 UTF-8 encoded reference sheets 451 Knife tool 136 creating 201 editing 200 enabling or disabling 195 Fill Color 233 in buttons 285 Photoshop plug-ins 198 removing 200 renaming 201 reordering 200 locked files 371, 391 locking layers 208 L M L-shape tool 115 Launch and Edit preferences 391 layers activating 205 adding and remov
expanding 62 moving 59 removing 59 saving and restoring 64, 65 selecting area around 63 selecting pixels by intersecting 60 smoothing 63 transferring to another object 64 masks 210 adding objects to a masked selection 229 bitmap 212 creating empty 219 deleting 229 disabling 229 enabling 229 grouping objects to form a mask 221 modifying 226 moving with masked objects 224 replacing 229 text as a mask 217 using an existing object as 215, 217 vector 211 merging paths 132, 137 midtones 95 mirroring.
optimizing 327 animations 321 basics 326 Fireworks images from Dreamweaver 387 using Export Wizard 327 optimizing graphics 15 Options menu in panels 36 outlines 177 See also strokes Over button state 282 Over While Down button state 282 overlapping slices 259 P package contents, viewing 453 panels 33 Align 34 Behaviors 34, 266 docking 34 Find 34 Find and Replace 422, 424 Frames 33, 313 hiding 35 History 33, 49 Info 34 Layers 33 Library 240 moving 34 opening custom layouts 37 Optimize 33 Options menu in 36
pixels 16 adjusting tonal range using eyedropper 99 cloning 87 contracting selection border 63 copying 55 cutting 55 expanding selection border 62 feathering 86 moving 55 painting 83 selecting 55 selecting area around a marquee 63 selecting freeform area 56 selecting polygonal area 57 selecting similar colors 57 smoothing a marquee border 63 tonal range 95 playing animations 319 macros 439 saved commands 439 plotting points 124 plug-ins 416 PNG file format choosing 336 choosing a color palette 337 transpare
Redraw Path tool 136 redrawing paths 136 reducing points 140 reinstalling Fireworks 453 relative URLs, entering 248 removing effects 200 parts of a path 139 renaming symbols 241 repeating actions 50 Replace color tool 87, 91, 92 replacing elements 422 replaying animations 319 resampling 23 bitmap objects 44 described 44 downsampling 45 resampling up 45 vector objects 44 reshaping vector objects 135 resources for learning Fireworks 12 Reveal All command 219 Reveal Selection command 219 RGB color model 172 ro
Set Text of Status Bar behavior 266 shadows 95, 197, 198 shapes 16 Shapes panel 33 sharing layers 209 Sharpen filter 107 Sharpen More filter 107 Sharpen tool 87 sharpening 107 bitmap areas 87 images 88 shortcut sets 451 See also keyboard shortcuts Show Pen Preview preference 447 Show Solid Points preference 447 Show Tab Icons preference 446 Show/Hide hotspots and slices 256 showing panels 35 rulers 47 toolbars 37 showing edges 54 Simple Rollover behavior 266 simple rollovers 262 creating 266 Simplify comman
importing 239 new 237 resetting to defaults 239 Styles panel 33, 236 Subselection tool auto-joining paths with 132 selecting masks with 223 Swap Image behavior 266 swap image rollovers creating disjoint rollovers 263 with single slice 262 swap image, external images for 268 swatch group, choosing custom 169 Swatches panel 34, 169 appending swatches 170 deleting a color 171 replacing a color 171 saving custom 171 Windows system colors 169 swatches, choosing custom 169 SWF movies 443 symbol library 240 Symbol
tools Blur 86 Brush 83 Burn 87 changing options 30 changing stroke color 178 Colors section in Tools panel 168 Distort 73 Dodge 87 Eraser 85 Eyedropper 84 Lasso 55 Magic Wand 55 Marquee 55 Oval Marquee 55 Pencil 83 Pointer 52, 55 Polygon Lasso 55 Red-eye Removal 87, 90 Replace Color 87, 91, 92 Rubber Stamp 86 Scale 71 Sharpen 87 Skew 72 Smudge 86 Subselection 132, 223 Text 144 tool group pop-up menus 31 Transform 69 Zoom 39 Tools panel 30 transformation tools Distort 73 Scale 71 Skew 72 transforming by drag
vector objects, reshaping 133 view modes 40 W WAP graphics 20 See also WBMP files WBMP files 20 exporting to 336 opening from Fireworks 20 saving 28 Web Layer 210 websafe colors 342 Windows system colors as a swatch group 169 work environment 29 workflow in Fireworks 14 X XHTML 365 Z Zoom Blur filter 106 Zoom tool 39 zooming 38 into a specific area 40 using preset increments 39 Index 471
Index