After a graphic or document has been optimized, you can export it (or save it, depending on its originating file type).

You can export (or in some cases, save) a document as a single image in GIF, JPEG, or another graphic file format. You can also export the entire document as an HTML file and associated image files, only selected slices, or a specified area. In addition, you can export Fireworks states and layers as separate image files.

The default location to which Fireworks exports files is determined by the following, in this order:

  1. The current export preference of the document, which is defined if you've ever exported the document and then saved the PNG

  2. The current export/save location, which is defined anytime you browse away from the default location presented in a Save, Save As, or Export dialog box

  3. The location of the current file

  4. The default location where new documents or images are saved on your operating system

    In contrast, the default location where Fireworks saves a document is determined by a different set of criteria. For more information, see Saving Fireworks files.

Export pages as image files

  1. Select File > Export.

  2. Choose the location for the export files.

  3. Do one of the following:

    • Select Images Only from the Export pop-up menu, and select or deselect the Current Page Only check box. The pages are exported to the image format set on the Optimize panel.

    • Select Pages To Files in the Export pop-up menu, and select Images in the Export As pop-up menu. The pages are exported to the image format set on the Optimize panel

    • Select Pages to Files in the Export pop-up menu, and select Fireworks PNG in the Export As pop-up menu. Each page is exported as a separate PNG file that is backward compatible with Fireworks 8.

    Note:

    If you want to export all the pages in the selected format, select all the pages, and then optimize the settings.

Export a single image

If you are working with an existing image that you opened in Fireworks, you can save it rather than export it. For more information, see Save documents in other formats.

Note:

To export only certain images in a document, you must first slice your document and then export only the desired slices.

  1. In the Optimize panel, select a file format and set format-specific options.

  2. Select File > Export.

  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 with no extension. An extension is added during export based on the file type.

  5. From the Export pop-up menu, select Images Only.

  6. Click Save.

Export a sliced document

By default, when you export a sliced Fireworks document, an HTML file and associated images are exported. The exported HTML file can be viewed in a web browser or imported into other applications for further editing.

Before export, be sure you have the appropriate HTML style selected in the HTML Setup dialog box. See Set HTML export options.

Export all slices

  1. Select File > Export.

  2. Navigate to a folder on your hard drive in which to export.

  3. From the Export pop-up menu, select HTML and Images.

  4. Type a filename in the File Name box (Windows) or Save As box (Mac OS).

  5. From the HTML pop-up menu, select Export HTML File.

  6. From the Slices pop-up menu, select Export Slices.

  7. (Optional) Select Put Images In Subfolder.

  8. Click Save.

Export selected slices

  1. Shift-click to select multiple slices.

  2. Select File > Export.

  3. Select a location in which to store the exported files, such as a folder within your local website.

  4. From the Export pop-up menu, select HTML and Images.

  5. Enter a filename with no extension. An extension is added during export based on the file type.

    If you are exporting multiple slices, Fireworks uses the name you enter as the root name for all exported graphics, excluding those you have custom-named using the Layers panel or the Property inspector.

  6. From the Slices pop-up menu, select Export Slices.

  7. To export only the slices you selected before export, choose Selected Slices Only, and ensure that the Include Areas Without Slices option is not selected.

  8. Click Save.

Update a slice

If you've already exported a sliced document and have subsequently made changes to the original document in Fireworks, you can update just the image or slice that changed. To make it easy to locate the replacement slice, custom-name slices.

  1. Hide the slice and edit the area underneath.

  2. Show the slice again.

  3. Right-click (Windows) or Control-click (Mac OS) the slice and select Export Selected Slice.

  4. Select the same folder as the original slice using the same base name and click Save.

  5. Click OK when asked to replace the existing file.

    Note:

    Avoid resizing the slice beyond its original export size in Fireworks, or you could create unexpected results in the HTML document after the slice is updated.

Export an animation

After you create and optimize an animation, it is ready to export. You can export an animation as any of the following file types:

Animated GIFs

These give the best results for clip art and cartoon-like graphics.

Flash SWF or Fireworks PNG (no export needed)

Export an animation as a SWF file for import into Flash. Or, skip the export step by importing a Fireworks PNG source file directly into Flash. Using this direct method, you can import all layers and states of your animation and then further edit them within Flash. See Working with Flash.

Multiple files

Exporting animation states or layers as multiple files is useful when you have many symbols on different layers for the same object. For example, you can export a banner ad as multiple files if each letter of a company name is animated in a graphic. See Export states or layers as multiple files.

If your document contains more than one animation, you can insert slices to export each animation using different animation settings, such as looping and state delay.

Export an animated GIF

  1. Choose Select > Deselect to deselect all slices and objects, and select Animated GIF as the file format in the Optimize panel.

  2. Select File > Export.

  3. Type a name for the file and select the destination.

  4. Click Save.

Export multiple animated GIFs with different animation settings

  1. Shift-click the animations to select them all.

  2. Select Edit > Insert > Rectangular Slice or Polygon Slice.

  3. In the message box, click Multiple.

  4. Select each slice individually and use the States panel to set different animation settings for each.

  5. Select all the slices you want to animate, and select Animated GIF as the file format in the Optimize panel.

  6. Right-click (Windows) or Control-click (Mac OS) each slice and select Export Selected Slice to export each slice individually. In the Export dialog box, type a name for each file, select the destination, and click Save.

Export states or layers as multiple files

Fireworks can export each layer or state in a document as a separate image file and use the optimization settings specified in the Optimize panel. The name of the layer or state determines the filename of each exported file. This export method is sometimes used to export animations.

  1. Select File > Export.

  2. Type a filename and select a destination folder.

  3. In the Export pop-up menu, select an option:

    States to Files

    Exports states as multiple files.

    Layers to Files

    Exports layers as multiple files.

    Note: This exports all layers on the current state.

  4. To automatically crop each exported image to include only the objects on each state, select Trim Images. To instead include the entire canvas (including blank areas beyond objects), deselect this option.

  5. Click Save.

Export an area from a document

  1. From the Tools panel, select the Export Area tool .

  2. Drag a marquee defining the portion of the document to export.

    Note:

    You can adjust the position of the marquee as you drag. While holding down the mouse button, press and hold down the spacebar, and then drag the marquee to another location on the canvas. Release the Spacebar to continue drawing the marquee.

    When you release the mouse button, the export area remains selected.

  3. Resize the export area if necessary:

    • To resize the export area marquee proportionally, Shift-drag a handle.

    • To resize the marquee from the center, Alt-drag (Windows) or Option-drag (Mac OS) a handle.

    • To constrain the proportions and resize from the center, Alt-Shift-drag (Windows) or Option-Shift-drag (Mac OS) a handle.

  4. Double-click inside the export area marquee  to go to Image Preview.

  5. Adjust settings in the Image Preview, and click Export.

  6. Type a filename and select a destination folder.

  7. In the Export pop-up menu, select Images Only.

  8. Click Save.

    Note:

    To cancel without exporting, double-click outside the export area marquee, press Escape, or select another tool.

Export HTML

Unless you specify otherwise, when you export a sliced Fireworks document, you export an HTML file and its images. To define how Fireworks exports HTML, you use the HTML Setup dialog box.

Fireworks generates pure HTML that can be read by most web browsers and HTML editors. By default, the export specifies UTF-8 encoding.

There are a variety of ways to export Fireworks HTML:

  • Export an HTML file, which you can later open for editing in an HTML editor.

  • Export each page in a Fireworks file to a separate HTML file.

  • Copy HTML code to the Clipboard in Fireworks, and then paste that code directly into an existing HTML document.

  • Export an HTML file, open it in an HTML editor, manually copy sections of code from the file, and paste that code into another HTML document.

  • Export HTML as Cascading Style Sheet (CSS) layers and XHTML.

  • Use the Update HTML command to make changes to an HTML file you've previously created.

    Fireworks lets you export HTML in Generic, Dreamweaver, Microsoft® FrontPage®, and Adobe GoLive® formats.

    Note:  Adobe Dreamweaver shares a tight integration with Fireworks. Fireworks handles the export of HTML to Dreamweaver differently than it handles export to other HTML editors. If you are exporting Fireworks HTML to Dreamweaver, see Working with Dreamweaver.

    The export method of getting Fireworks HTML into other applications is ideal if you are working in a team environment. This method divides the workflow into segments so that one person can perform a task in one application, and another can take over at a later time using another application.

Include comments in exported HTML

Fireworks HTML comments begin with <!-- and end with -->. Anything between these two markers is not interpreted as HTML or JavaScript code.

  • 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:

  • The HTML code necessary to reassemble sliced images and any JavaScript code if the document contains interactive elements. Fireworks HTML contains links to the exported images and sets the web page background color to the canvas color.

  • One or more image files, depending on how many slices are in your document and how many states you include in buttons.

  • A file called spacer.gif, if necessary. Spacer.gif is a transparent, 1-pixel-by-1-pixel GIF that Fireworks uses to fix spacing problems when sliced images are reassembled in an HTML table. You can choose whether Fireworks exports a spacer.

  • If you export any pop-up menus, the following files are exported: mm_css_menu.js and a .css file containing the CSS pop-up menu code. If your pop-up menus contain submenus, an arrows.gif file is also exported.

  • If you export or copy HTML to Dreamweaver, notes files are created that facilitate the integration between Fireworks and Dreamweaver. These files have an .mno extension.

Export Fireworks HTML

  1. Select File > Export.

  2. Navigate to a folder on your hard drive in which to export.

  3. From the Export pop-up menu, select HTML and Images.

  4. Click the Options button and select your HTML editor from the HTML Style pop-up menu on the General tab of the HTML Setup dialog box. If your HTML editor is not listed, select Generic.

    Note:

    It's important that you select your HTML editor as the HTML style so that interactive elements such as buttons and rollovers function correctly when imported into your HTML editor.

  5. Click OK.

  6. From the HTML pop-up menu, select Export HTML File.

  7. If your document contains slices, select Export Slices from the Slices pop-up menu.

  8. To store images in a separate folder, select Put Images In Subfolder. You can select a specific folder or use the Fireworks default Images folder.

  9. If you are exporting a multi-page Fireworks document, deselect the Current Page Only check box to export all of the pages into separate HTML documents.

  10. Click Save.

    After export, you'll see the files Fireworks exported on your hard drive. Images and an HTML file are generated in the location you specified in the Export dialog box.

Copy HTML code to the Clipboard

You can copy HTML code to the Clipboard in Fireworks in either of two ways. Use the Copy HTML Code command, or select Copy To Clipboard as an option in the Export dialog box. You'll later paste this HTML into a document in your preferred HTML editor.

When determining how to put Fireworks HTML into other applications, consider the following disadvantages of copying HTML code to the Clipboard:

  • You don't have the option to save images into a subfolder. They must reside in the same folder as the HTML file where you paste the copied HTML. An exception is HTML copied to Dreamweaver.

  • Any links or paths used in Fireworks pop-up menus will map to your hard drive. HTML copied to Dreamweaver is an exception.

  • If you use an HTML editor other than Dreamweaver or Microsoft FrontPage, JavaScript code associated with buttons, behaviors, and rollover images is copied but may not function correctly.

    If these issues pose a problem for you, use the Export HTML option instead of copying HTML to the Clipboard.

    Note:  Before you copy HTML code, be sure that you've selected the appropriate HTML style and chosen Include HTML Comments from the General tab of the HTML Setup dialog box.

Copy Fireworks HTML using the Copy HTML Code option

  1. Select Edit > Copy HTML Code.

  2. Follow the wizard. When prompted, specify a folder as the destination for the exported images. This must be the location where your HTML file will reside.

    Note:

    If you plan to paste the HTML code into Dreamweaver, it does not matter where you export the images, as long as they reside in the same Dreamweaver site as the HTML file into which you will paste your code.

Copy Fireworks HTML using the Export dialog box

  1. Select File > Export.

  2. In the Export dialog box, specify a folder as the destination for the exported images. This must be the same location where your HTML file will reside.

    Note:

    If you plan to paste the HTML code into Dreamweaver, it does not matter where you export the images, as long as they reside in the same Dreamweaver site as the HTML file into which you will paste your code.

  3. From the Export pop-up menu, select HTML and Images.

  4. From the HTML pop-up menu, select Copy to Clipboard.

  5. If your document contains slices, select Export Slices from the Slices pop-up menu.

  6. Click the Options button, select your HTML editor from the HTML Setup dialog box, and then click OK.

  7. Click Save.

Paste HTML copied from Fireworks into an HTML document

  1. In your HTML editor, open an existing HTML document or create a new one. Save the document to the same location in which you exported your images.

    Note:

    Saving the HTML file to the same location as the exported images is not necessary if you use Dreamweaver. As long as you export the images from Fireworks to a Dreamweaver site, and save the HTML file to a location somewhere within that site, Dreamweaver resolves the paths to the associated images.

  2. View the HTML code, and place the insertion point between the <BODY> tags.

    Note:

    HTML code copied from Fireworks does not include the opening or closing <HTML> and <BODY> tags.

  3. Paste the HTML code.

    If possible when you copy to the Clipboard, export images to the 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.

Copy code from an exported Fireworks file and paste it into another HTML document

  1. Open the Fireworks HTML file you exported in an HTML editor.

  2. Highlight the necessary code and copy it to the Clipboard.

  3. Open an existing HTML document or create a new one.

  4. Paste the code into the new HTML file. You do not have to copy the <HTML> and <BODY> tags, because these should already be included in the destination HTML document.

    If you chose Include HTML Comments in the HTML Setup dialog box in Fireworks, follow the instructions in the comments to copy and paste the code into the appropriate location.

  5. If your Fireworks document contains interactive elements, copy the JavaScript code.

    JavaScript code is surrounded by <SCRIPT> tags and is located in the <HEAD> section of the document. Copy and paste the entire <SCRIPT> section, unless your destination document already has a <SCRIPT> section. In this case you should copy and paste only the contents of the <SCRIPT> section into the existing <SCRIPT> section, being careful not to overwrite the contents of the existing section. Also ensure there are no duplicate JavaScript functions in the <SCRIPT> section after you paste the code.

Update exported HTML

Updating allows you to make changes to a Fireworks HTML document you've previously exported and is useful if you want to update only a portion of a document.

Note:

Update HTML works differently with Dreamweaver documents than it does with other HTML documents. For more information, see Working with Dreamweaver.

When updating, you can choose to replace just the images that changed, or overwrite all code and images. If you choose to replace only the images that changed, any changes you made to the HTML file outside of Fireworks are preserved.

Note:

For considerable changes to document layout, make your changes in Fireworks and re-export the HTML file.

  1. Select File > Update HTML.

  2. Select the file to update.

  3. Click Open.

  4. Do one of the following:

    • If no Fireworks-generated HTML is found, click OK to insert new HTML at the end of the document.

    • If Fireworks-generated HTML is found, select one of the following and click OK:

      Replace Images and Their HTML

      Replaces the previous Fireworks HTML

      Update Images Only

      Overwrites only the images

  5. If the Select Images Folder dialog box appears, select a folder and click Open.

Export CSS layers

CSS layers can overlap and be stacked on top of one another. In Fireworks, normal HTML output does not overlap.

  1. Select File > Export.

  2. Type a filename and select a destination folder.

  3. From the Export pop-up menu, select CSS And Images.

    • To export only the current state, select Current State Only.

    • To export only the current page, select Current Page Only.

    • To choose a folder for images, select Put Images In Subfolder.

  4. Click Options to set the HTML page properties.

  5. Click Browse to specify a background image and set the background image tiling:

    • Select No Repeat to display the image only once.

    • Select Repeat to repeat, or tile, the image both horizontally and vertically.

    • Select Repeat-x to tile the image horizontally.

    • Select the Repeat-y option to tile the image vertically.

  6. Select the page alignment on the browser as left, center, or right.

  7. Click OK, and then click Save.

Export XHTML

XHTML is a combination of HTML, the current standard for formatting and displaying web pages, and XML (Extensible Markup Language). XHTML is backward-compatible—meaning that most current web browsers can view it—and it can be read by any device that displays XML content, such as PDAs, mobile phones, and other handheld devices.

Fireworks can also import XHTML. See Create Fireworks PNG files from HTML files.

For more information on XHTML, visit the World Wide Web Consortium (W3C) XHTML specification at www.w3.org.

  1. Select File > HTML Setup, select an XHTML style from the HTML Style pop-up menu on the General tab, and then click OK.

  2. Export your document using any of the methods available for exporting or copying HTML. See Export HTML.

    Note:

    Fireworks uses UTF-8 encoding when exporting to XHTML.

Export files with and without UTF-8 encoding

UTF-8, which stands for Universal Character Set Transformation Format-8, is a text-encoding method that allows web browsers to display different character sets (for example, Chinese text and English text) on the same HTML page. UTF-8 encoding is turned on by default.

Fireworks can also import documents that use UTF-8 encoding. See Create Fireworks PNG files from HTML files.

Export documents without UTF-8 encoding

  1. Select File > HTML Setup.

  2. On the Document Specific tab, clear the UTF-8 Encoding check box and click OK.

  3. Export the document using any of the methods available for exporting or copying HTML.

Set HTML export options

The HTML Setup dialog box allows you to define how Fireworks exports HTML. Changes made in the Document Specific tab affect the current document only. General and Table settings are global preferences and affect all new documents.

  1. Do one of the following:

    • Select File > HTML Setup.

    • Click the Options button in the Export dialog box.

  2. In the General tab, select the options you prefer.

    HTML Style

    Select the style for exported HTML.

    Generic HTML works in any HTML editor. However, if your document contains behaviors or other interactive content, select your specific editor if it appears in the list.

    To export your document using the XHTML standard, select the appropriate XHTML style from the pop-up menu.

    Extension

    Select a file extension from the pop-up menu or enter a new one.

    Include HTML Comments

    Select to include comments regarding where to copy and paste in the HTML. Recommended if your document contains interactive elements such as buttons, behaviors, or rollover images.

    Lowercase File Name

    Select to make the name of the HTML file and the associated image files lowercase on export.

    Note: This option won't change the HTML file's extension to lowercase if an uppercase extension was selected in the Extension pop-up menu.

    Use CSS For Popup Menus

    Select to use CSS rather than JavaScript for your pop-up menu code. You can use Dreamweaver to index the menus, as well as update the links within the code.

    Write CSS To An External File

    Select 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.

    Note: This option is available only if you have chosen the Use CSS For Popup Menus option.

    File Creator (Mac OS)

    Select an associated application from the pop-up menu. When you double-click the exported HTML file on your hard disk, it automatically opens in the selected application.

  3. In the Table tab, select settings for your HTML tables. For information, see Define how HTML tables are exported.

  4. In the Document Specific tab, select from the following options:

    Slice File Names

    Select a formula for auto-naming slices in the pop-up menus. You can use the default settings, or choose your own options.

    Note: If None is selected 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.

    Default Alt Tag

    Enter text to appear in place of all images while they are downloading from the web and in place of any images that fail to download. In some browsers, it may also appear as a tool tip when the pointer passes over the image. This is also an aid for vision-impaired web users.

    Export Multiple Nav Bar HTML Pages (For Use Without Frame Sets)

    Select when exporting a navigation bar that links several pages together. Fireworks exports additional pages for each button in the navigation bar.

    Include Areas Without Slice Objects

    Select to include areas of the canvas that are not covered with slices.

    UTF-8 Encoding

    Turned on by default. Lets your exported document display characters from multiple character sets. To turn off this option, deselect the check box.

  5. To save these settings as your global default settings, click Set Defaults.

Export Adobe PDF files

When you want to print a Fireworks design or distribute it for review, export to Adobe PDF. Reviewers can add comments and reply to comments of others in Adobe Reader® or Acrobat®. For information about setting up PDF reviews, see Acrobat Help.

Exported PDF files retain all pages and hypertext links, letting reviewers navigate just as they would on the web. Unlike HTML prototypes, however, Adobe PDF provides security settings that prevent reviewers from editing or copying your designs.

  1. Choose File > Export.

  2. From the Export pop-up menu, choose Adobe PDF.

  3. Choose the pages to export, and select View PDF After Export to automatically open the PDF in Adobe Reader or Acrobat.

  4. To customize the PDF, click Options, and then adjust the following settings:

    Compatibility

    Determines which Adobe PDF applications can open the exported file.

    Compression

    Determines the type of image compression, reducing file size. In general, JPEG and JPEG2000 compression give better results on images like photographs with gradual transitions from color to color. ZIP is the better choice for illustrations with large areas of solid, flat colors.

    Quality

    For JPEG or JPEG2000 compression, offers image quality settings. Selecting High quality produces a large file size with good image quality.

    Convert To Grayscale

    Converts all images to grayscale, reducing file size.

    Enable Text Selection

    Lets reviewers copy text from the exported file. Deselect this option to greatly reduce file size.

    Bleed Value

    Determines the pixel width of the blank border that surrounds the image on each page. A value of 20, for example, surrounds each image with a 20-pixel border.

    Use Password to Open Document

    Requires the Open Password to open the exported file.

    Use Password to Restrict Tasks

    Requires the Secure Password to perform these selected functions: Printing, Editing, Copying, and Commenting.

  5. Click OK to close the Options dialog box.

  6. Specify a filename and location, and then click Save.

    Note:

    If pages in your Fireworks document have transparent canvas, objects with any applied transparencies lose their transparent characteristics when you export to PDF. To avoid this, set the canvas to a non-transparent background before exporting to PDF.

Video

Create client proofs as PDF or HTML files using Fireworks (00:05:32)

Learn how to use the Fireworks Export menu to prepare a PDF or an HTML document for client approval or team review.

By Tom Green

When you view exported PDF files in Adobe Acrobat or Adobe Reader, use the following settings:

  1. In Adobe Acrobat, or Adobe Reader select Edit > Preferences.

  2. Select Page Display on the left panel.

  3. Set Custom Resolution to 72 pixels per inch.

  4. Set the Zoom value to 100%.

Export FXG files

FXG is a file format supported by Flash Catalyst, Fireworks, Illustrator, and Photoshop. When you export a file containing vector and bitmap images using FXG export, a separate folder with the name <filename.assets> is created. The folder contains the bitmap images associated with the file.

The import operation fails if any of the associated files is deleted from this folder.

Note:

Elements, filters, Blend Modes, gradients, and masks for which there is no corresponding mapping tag in FXG are exported as bitmap graphics.

  1. Select File > Export, and navigate to the location where you want to save the files.

  2. Enter a filename for the FXG file.

  3. In the Export dialog box, select FXG And Images from the Export menu.

  4. Click Save.

Note:

Objects that extend beyond the canvas in Fireworks are displayed completely when the exported FXG file is opened in Flash Catalyst.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy