Fireworks CS4 Tips and Tricks

This month, C2 Instructor Jake Stroh is sharing some great tips and tricks for Adobe Fireworks. Read up on this exciting addition to any designer's arsenal.

The key to profitability in web design and development is to build great prototypes for your clients, arrive together at a sign off point on the interface and then begin the build-out process.

This process can be further aided by demonstrating your prototype as a clickable PDF, where the navigation actually takes the user to the corresponding page of the prototype, or by exporting your Fireworks page layouts as a “demo” which produces a clickable flash slide show as a way to sell your design ideas to your clients.

Exporting a clickable PDF:

Once you have designed a navigation system that you like, it would be a good idea in an effort to save time, to create a Master page of this. To set your current page as a Master page, goto the PAGES palette and by using the palette pulldown menu, select “Set as master page”. Now when you create a new page all of your master page items will already be on the page.

Once all of your pages are prototyped you can then return to your master page, select the “Rectangle Hotspot tool” in the WEB section of the Tools palette. Drag a rectangular box across each navigation button. Once created you can select the cyan colored box and go to the inspector and select from the LINK pull down menu. This link menu will give you options to the names of each of your pages. If you took the time to name them (by clicking on the default names “01 PAGE” and typing in your own name), then it should not be all that hard to associate the named link with the proper Hotspot area.

With all of the hot spots LINKED to the proper pages, select FILE, EXPORT, Export as PDF. This will generate a multi-paged PDF that will jump to the proper page when the user clicks on the hotspot area.

Demo current document:

Another way to create an interactive slide show of your prototyped website, is to simply select COMMANDS, DEMO CURRENT DOCUMENT at any point during your design process. This will bring up a prompt that will give you the ability to CHECK which pages you wish to include in your presentation.

The benefits to this approach are: The presentation is viewed in a web browser and can be uploaded to a staging area for presentation on the we. A clickable thumbnail navigation appears when mousing over the bottom portion of your web browser and disappears when mousing off of the thumbnail navigation, which is a great non-intrusive way to present and navigate your designs.

Be mindful that this approach produces many files in order to work: Thumbnail and presentation images, HTML, XML, SWF and JS files produce this simply elegant way to present your ideas.