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

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

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

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.

A blank page is inserted at the end of the list of pages and becomes the active 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.

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

The page above the deleted one becomes the active page.

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

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.

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.

A change in visibility is reflected across all pages.

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.

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.

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

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.

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.

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