Prototyping websites and interfaces using Fireworks pages

A single Fireworks PNG file can contain multiple pages, providing a perfect way to prototype web and application interfaces. Each page contains unique settings for canvas size and color, image resolution, and guides. You set these options either on a per-page basis, or globally across all pages in a document. Other than the Web layer, each page also contains a unique set of layers. For common elements, however, you can use a master page or share layers across pages. (See Share layers.)

Note:

If you don’t create any pages, all of the elements of your document reside on a single page.

You view pages in the Pages panel, where the objects on each page are displayed in a thumbnail next to the page name. The active page is highlighted in the panel and shown in the pages pop-up menu above the active document.

For information about exporting pages, see Export from the workspace

Video

Create hi-fidelity prototypes with Fireworks or Photoshop (00:01:17)

Get a short overview of how you can use Fireworks or Photoshop to create hi-fidelity prototypes.

By Jim Babbage

Add, delete, and navigate pages

Using the Pages panel, you can add new pages, delete unwanted pages, and duplicate existing pages. When you add, delete, or move pages, Fireworks automatically updates the number to the left of page titles. These auto-numbers help you quickly navigate to specific pages in large, multipage designs.

Add a page

A blank page is inserted at the end of the list of pages and becomes the active page.

  1. Do one of the following:

    • In the Pages panel, click the New/Duplicate Page button .

    • Right-click the panel, and choose New Page from the pop-up menu.

    • Select Edit > Insert > Page.

  1. Do one of the following:

    • In the Pages panel, select a page.

    • On the keyboard, use the Page Up and Page Down buttons.

    • Choose the page from the pages pop-up menu at the top of the document window or bottom right of the Pages panel.

    Note:

    An asterisk next to the page name in the pages pop-up menu indicates the master page.

Duplicate a page

Duplicating adds a new page that contains the same objects and layer hierarchy as the currently selected one. Duplicated objects retain the opacity and blending mode of the original objects. You can change the duplicated objects without affecting the originals.

  1. Do one of the following:

    • Drag a page to the New/Duplicate Page button.

    • Right-click the page, and select Duplicate Page from the pop-up menu.

Move one or more pages

In the Pages panel, move pages to place related designs closer together and speed up the layout process.

  1. (Optional) If you’re moving multiple pages, do either of the following:

    • Shift-click them to select a contiguous group.

    • Ctrl-click (Windows) or Command-click (Mac OS) them to select a discontiguous group.

  2. Drag selected pages up or down in the panel. Above and below other pages, darkened borders appear where you can release the mouse to move the selected pages.

Delete a page

The page above the deleted one becomes the active page.

  1. Do one of the following:

    • In the Pages panel, drag the page to the trash can icon .

    • Right-click the page, and choose Delete Page from the pop-up menu.

Edit a page canvas

Each page has a unique canvas, with independent canvas size, color, and image resolution.

  1. Select a page from the Pages panel or the pages pop-up menu at the top of the document window.

  2. Select Modify > Canvas > Image Size, Modify > Canvas > Canvas Color, or Modify > Canvas > Canvas Size.

  3. Make the changes. These changes can also be made using the Properties panel when the canvas for a page is selected.

  4. To apply the changes to only the selected page, leave the Current Page Only option selected. To apply the changes to all pages, deselect the option.

Use a master page

To use a set of elements across all of your pages, use a master page. When you convert an ordinary page to a master page, the page moves to the top of the list in the Pages panel. When a master page is created, a Master Page Layer is added at the bottom of the layer hierarchy for each page.

Create a master page

  1. In the Pages panel, right-click an existing page, and choose Set As Master Page from the pop-up menu.

Any layers shared across pages become ordinary (non-shared) layers. However, layers shared across frames remain. To display master page frames in a linked page, see View objects in a state.

After you create a master page, any newly created pages automatically inherit the master page settings. Existing pages don’t inherit these settings unless you link them to the master page. If you later change the master page, all linked pages update automatically.

The following limitations apply to inheritance of objects and behaviors from master pages to other pages:

  • Pages inherit only the current state of all objects in a master page. To inherit all states of all objects, on each page, add equal or more states to the object with the highest number of states. All objects in that page inherit all states from the master page.

  • Changes to the canvas size or image size on a page affect all pages, including pages that are not linked to the master page. To limit the changes to only the current page, select Current Page Only.

  • Only the linked pages inherit changes to the canvas color of the master page.

  1. Do one of the following:

    • In the Pages panel, right-click a page, and choose Link To Master Page from the pop-up menu.

    • Click in the column to the left of the page thumbnail in the Pages panel. A link icon shows that the page is linked to the master page.

      Note:  When you change a setting on a page linked to the master page, the new setting prevails but breaks the link to the master page.

Show or hide the master page layer

A change in visibility is reflected across all pages.

  1. In the Layers panel, click the eye icon to the left of the master page layer.

Remove master page layers

  1. Right-click the Layers panel, and select Remove Master Page Layer from the pop-up menu.

To add the master page layer back to the page, right-click the Layers panel and select Add Master Page Layer from the pop-up menu.

Change a master page back into a normal page

  1. Right-click the Pages panel, and choose Reset Master Page from the pop-up menu.

Export selected pages

You can export multiple pages in a single step. Only the selected pages are exported. When you export pages, the optimization settings specified for the individual pages are used for exporting the files.

  1. In the Pages panel, select the pages that you want to export.

  2. Right-click, and select Export Selected Page(s).

  3. In the Export dialog box, select one of the options from the Export menu:

    Layers To Files

    Exports layers in the selected pages as individual files.

    States To Files

    Exports states in the selected pages as individual files.

    Pages To Files

    Exports selected pages as individual files.

Customize filenames when exporting pages

  1. In the Pages panel, select the pages that you want to export.

  2. Right-click, and select Export Selected Page(s).

  3. In the Export dialog box, click Options. The Options button is enabled based on the selected option in the Export menu.

  4. In the Export Options dialog box, select Add Prefix, or Add Suffix, and select an option from the menu. You can name the files using any of the following options:

    doc.name

    The name of the source file is added as a prefix or suffix. For example, if you are exporting a page with the name Index from the source file sites.png using the Add Prefix option, a file with the name Sites_Index.gif is generated.

    Numerical (1, 2, 3...or 01, 02, 03...)

    The files are generated in a numerical sequence with the numbers being added to the prefix or suffix. All the exported page files are numbered in the order of their appearance in pages panel. When you are exporting many pages, use the double digit sequence.

  5. Use the options in the File Type menu to optimize the settings for the exported file.

Export slices in selected pages

Slices in the source file are ignored when exporting a file. To export the slices, use the following settings in the Export dialog.

  1. In the Export menu, select HTML and Images, or Images Only.

  2. In the HTML menu, select Export HTML File.

  3. In the Slices menu, select Export Slices.

  4. Select one of the following options:

    Selected Slices Only

    Areas that are marked as slices are exported.

    Include Areas Without Slices

    Areas that are not marked as slices are also exported.

Multi-page preview

Preview all pages, except the master page, when importing or opening files. The page selected during preview is brought to focus when the file is opened.

When you insert a page containing objects from the master layer, the master page is converted to an ordinary layer, and imported.

Enable multi-page preview

Preview all the pages in a file when importing or opening it. The multi-page preview option is enabled by default in the Preferences dialog box.

To enable multi-page preview for files created in previous versions, open them in the current version, and save them.

  1. In the Preferences dialog box, select General.

  2. Select Save Per Page Thumbnails to enable multi-page preview. If this option is disabled, page names are stored but thumbnails are not generated for those files.

Preview pages before opening or importing them

  • In Windows, the preview is displayed in the Import or Open dialog box when you import or open a file.

  • In Mac, click Preview in the Open or Import dialog box. Alternatively, you can double-click the file in the Import dialog box to enter the Preview mode.

    When importing files, select Insert After Current Page to add imported pages after the page currently selected in the document.

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online