Adobe Fireworks Guide

How to create a prototype

In this guide, you learn how to use Fireworks to combine a design comp and a wireframe to create an interactive
prototype for a widget.
A prototype is a semi-functional interactive model that delivers a preview of the look, feel, and functionality of your
web project (Figure 1). Prototypes made in Fireworks can also be exported to formats that can be opened in
Dreamweaver and previewed in a web browser.

Figure 1 Fireworks prototype (left), as viewed in a web browser (right)

Prototyping workflow
By combining the Pages panel with other powerful Fireworks features, you can quickly create interactive web and
software prototypes. You can convert a finalized prototype to a functioning site by simply exporting it to HTML and
CSS files for use in Dreamweaver and a web browser. Use the following workflow to transform your previously
created design comp into a fully functioning interactive prototype.

1. Create the pages

In the Pages panel, create the desired number of pages or screens for your initial design. As the design evolves, you
can add or subtract pages as needed.

2. Lay out common design elements

On the canvas, lay out design elements you want to share across multiple pages, such as navigation bars and
background images.

3. Share common elements across multiple pages

When you share common elements, a single change automatically updates all affected pages. Use a master page to
share elements or share layers to copy subsets of elements.

© 2012 Adobe Systems Incorporated How to create a prototype 1

This document requires Adobe Fireworks CS6. Technical instructions may differ depending on your version.
 Guide Adobe Fireworks

4. Add unique elements to individual pages

On each page, add unique design, navigation, or form elements. In the Common Library panel, you’ll find many
buttons, text boxes, and pop-up menus that speed up the design process.

5. Simulate user navigation with links

From web objects such as slices, hotspots, and navigation buttons, link between the various pages of your prototype.

6. Export the finished interactive prototype

Fireworks offers multiple output formats for your prototype, all of which retain hypertext links for page navigation.

Workflow steps 1-3

In this section, you open your original design comp, create the number of pages required for the prototype, and use
guides to set page element alignment.
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.

To share common design elements across pages:

1. Start Fireworks and open a previously created design
comp that was saved as a PNG.
2. Open the Layers panel (Window > Layers) to display it
on the right side of the workspace.
3. Click the eye icon to turn off visibility in layers that will
not be shared across multiple layers. For example, any
logos, navigation, and footer elements will remain on all
prototype pages and should remain visible (Figure 2).
4. Click the Pages tab to display the Pages panel (Window >
Pages) (Figure 3).
5. Select the current page in the Pages panel, and choose Set
As Master Page from the panel Options menu.
Turn off
6. At the bottom of the Pages panel, click the Add Page visibility
button to a blank page. Add new pages until you have the
number of pages shown in your design comp.
The new pages display the master page in the Figure 2 Layers panel
background.
7. Double-click the new page names and rename them to
appropriately describe their functions.
8. Confirm that rulers and guides are visible. If they are not,
select View > Rulers and View > Guides > Show Guides.

Add Page Options menu

button
Figure 3 Pages panel

2 How to create a prototype © 2012 Adobe Systems Incorporated

This document requires Adobe Fireworks CS6. Technical instructions may differ depending on your version.
Adobe Fireworks Guide

9. Select the master page in the Pages panel (Figure 4).

10. Create a grid of guides that divide up the design comp
into logical sections such as page header, logo area,
navigation, main content areas, and footer (Figure 5).
Placing guides on the master page ensures they display
across any shared pages in the layout.
To create a horizontal or vertical guide, drag from the
corresponding ruler to the edge of an element in the
content area.
Note: You can change the guide color to be more visible
against different backgrounds. To change the guide color,
select Edit > Preferences (Windows) or Fireworks >
Preferences (Mac OS), and select the Guides And Grids
category.
Figure 4 Pages panel, active page selected
11. Confirm Smart Guides are visible and active by selecting
View > Smart Guides, and then select Show Smart
Guides and Snap To Smart Guides.
Note: Smart Guides are temporary snap-to guides that
help you create, align, edit, and transform objects relative
to other objects.
12. Select File > Save.

Figure 5 Creating a guides grid in the master page

Workflow step 4
In the next few steps, you add unique design elements to individual pages.
You can use the HTML elements available in the HTML folder in the Common Library. The HTML folder contains
HTML elements such as buttons, drop-down list objects, and text fields. You can edit the properties of these elements
in the Symbol Properties panel. The HTML components include headings1-6 and link elements.

To add HTML elements to individual pages:

1. In the Pages panel, select a page (not the master page) to
which you want to add unique elements.
2. Open the Common Library panel (Window > Common
Library) (Figure 6).
3. Double-click the HTML folder (Windows) or click the
HTML disclosure triangle (Mac OS) to display the
selection of available components.

Figure 6 Common Library panel

© 2012 Adobe Systems Incorporated How to create a prototype 3

This document requires Adobe Fireworks CS6. Technical instructions may differ depending on your version.
 Guide Adobe Fireworks

4. To use an HTML element, drag the component from the

Common Library panel to the Fireworks canvas.
For example, you can drag the Heading 1 component
from the Common Library and place it in the Heading
area you defined by using guides in the previous section
(Figure 7).
5. On the canvas, select the component.
6. In the Symbol Properties panel (Window > Symbol
Properties), adjust parameters such as text, color, font,
size, and other settings (Figure 8).
For example, you might format the Heading 1 component
using the same parameters you set in the original design
comp.
7. Continue adding HTML elements, text blocks, graphics, Figure 7 Drag a component from the Common
and images to the individual pages as needed. Use the Library
Pages panel to navigate between pages. You can also
copy and paste elements between pages.
The object here is to build out each of the individual
pages to simulate the content of your fully functioning
website.
8. Select File > Save when you have completed laying out
the page-level content of your prototype.

Figure 8 Symbol Properties panel

Workflow steps 5 and 6

You can design CSS-based layouts in a Fireworks document and then convert them to HTML pages with CSS rules
that replicate your layouts. CSS-based layouts provide a standards-based approach and give a cross-browser friendly
code. In this final section you export your finished interactive prototype as CSS-based HTML and images files.

4 How to create a prototype © 2012 Adobe Systems Incorporated

This document requires Adobe Fireworks CS6. Technical instructions may differ depending on your version.
Adobe Fireworks Guide

Slices are the basic building blocks for creating interactivity in Fireworks. Slices are web objects that ultimately exist
as HTML code. You can view, select, and rename them through the Web Layer in the Layers panel. Slicing cuts up a
Fireworks document into smaller pieces and exports each piece as a separate file (Figure 9). When you select CSS
and Images in the export step, Fireworks converts the layout into HTML and CSS code by using an export engine that
analyzes the placement of the objects.

Figure 9 Slicing cuts a document into multiple pieces, which are exported as separate files

Slicing an image provides three major advantages:

• Optimizes images for fastest downloading.
• Adds interactivity so images can respond to mouse events.
• Eases updates for parts of web pages that frequently change (for example, photos and names on an
employee-of-the-month page).
Observe a few rules while creating slices for CSS-based layouts to get expected results:
Rule 1: Use rectangles to export text and slices to export images. The export engine exports text placed in rectangles.
Because only images that are covered by rectangular slices are exported, place slices on the images you want to
export. These slices tell the export engine where the images are.
Rule 2: Avoid overlapping of objects. The export engine treats text, images, and rectangles as rectangular blocks. It
examines the size and position of these objects to determine the logical rows and columns to place them in the layout.
Carefully place the objects so their boundaries do not overlap.
Rule 3: Plan the layout for rows and columns. The export engine looks for logical partitions where a clear line of
sight can be placed between objects or groups of objects. Enclose your column layouts in a rectangle to prevent the
export engine from inserting a logical row that breaks the column layout.
Rule 4: Treat the document as two-dimensional. When you design your page, use rectangles to enclose objects that
you want to treat as children of the rectangle. The export engine detects such export relationships. The export engine
scans the child elements for logical rows and columns as in Rule 3.
In addition to these rules, observe the following:
• The export engine exports only primitive rectangles. To export the rounded corners of rectangles, place
rectangular slices over them.
• To export the strokes of rectangles, place rectangular slices over rectangles that have them.
• To export symbols, place a rectangular slice over them.
• To export filters you have applied to text or rectangles, place rectangular slices over them.

© 2012 Adobe Systems Incorporated How to create a prototype 5

This document requires Adobe Fireworks CS6. Technical instructions may differ depending on your version.
 Guide Adobe Fireworks

To add navigation links and export a CSS layout:

1. Select the master page in the Pages panel.
2. From the Tools panel, select the Slice tool and confirm Slice tool
the Show Slices And Hotspots button is selected
(Figure 10). Show Slices And Hotspots

3. Using the guides for reference, draw a slice over a Figure 10 Tools panel
navigation element on the master page (Figure 11).
4. Select the slice with the Pointer tool.
5. In the Properties panel, set the Link to a page you
previously defined by using the Pages panel.
For example, a slice has been drawn over the Shop shape,
and the link set to Shop.htm (Figure 12). Because this Figure 11 Draw a slice object
slice is located on the master page, every page inherits
the linked slice when the interactive prototype is
exported.
6. Continue adding slices and links to navigation elements
as needed.
7. Add slices to the areas between the navigation elements
and around the outside of the main body content areas
(Figure 13).
You add page-level content slices in the next steps.
8. Navigate to an individual page by selecting it in the Figure 12 Set Link in the Properties panel
Pages panel.
9. Use the Slice tool and guides to create slices inside the
main body content area not otherwise sliced up as part of
the master page.
You may need to apply several slices to cover an entire
layout. Take care not to overlap slices as you draw on the
canvas.
10. Use the Pointer tool to select any slices in the layout that
contain text you want to convert to HTML text.

Figure 13 Slice up the master page.

6 How to create a prototype © 2012 Adobe Systems Incorporated

This document requires Adobe Fireworks CS6. Technical instructions may differ depending on your version.
Adobe Fireworks Guide

11. With the slice object selected, select HTML from the
Type pop-up menu in the Properties panel (Figure 14).
An HTML slice designates an area where ordinary
HTML text appears in the browser that you may want to
edit later in Dreamweaver (Figure 15).
12. Continue adding slices until all the content areas of all Figure 14 Properties panel
the individual pages are covered.
13. Choose File > Export.
The Export dialog box appears (Figure 16).
14. From the Export pop-up menu, choose CSS and Images
(.htm).
15. From the Pages pop-up menu, choose All Pages.
16. Select the Put Images In Subfolder option in the Export
dialog box.
17. Click Options to set the HTML page properties.
The HTML Setup dialog box appears (Figure 17).
HTML slices
18. If you have a background image, click Browse to specify
a background and set the tiling: Figure 15 Layout slices

• 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 Repeat-y to tile the image vertically.
19. Select the page alignment on the browser as left, center,
or right.
20. Select the attachment scrolling as either fixed or scroll.
21. Click OK to close the HTML Setup dialog box.
22. Click Save (Windows) or Export (Mac OS).
The layout is exported to CSS and images HTML format.

Figure 16 Export dialog box

Figure 17 HTML Setup dialog box

© 2012 Adobe Systems Incorporated How to create a prototype 7

This document requires Adobe Fireworks CS6. Technical instructions may differ depending on your version.
 Guide Adobe Fireworks

23. Navigate to the location of the saved files. Click on one of the HTML files and test that the prototype links work
as expected (Figure 18).

Figure 18 Fireworks prototype viewed in a web browser

8 How to create a prototype © 2012 Adobe Systems Incorporated

This document requires Adobe Fireworks CS6. Technical instructions may differ depending on your version.