Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling

Completely revamped for inclusion in Adobe Creative Suite 4, Adobe Fireworks CS4 is positioned to be an integral part of the Adobe web workflow. Designed for web design graphics and developing rapid web prototypes, Fireworks lets web designers go from scribbled concept to online framework.

Adobe Fireworks CS4 How-Tos: 100 Essential Techniques gives you quick access to the key features and fundamental techniques to help you come up to speed in Fireworks CS4. Each technique is presented in a self-contained unit of one or two pages so you can dive in and start working right away, unencumbered by lengthy descriptions or technical detail. Jump in wherever you want among the following tips excerpted from the published book.

Besides reading the chapters provided, be sure to watch my three presentations. They cover some of the book's topics in greater detail: importing Adobe Photoshop artwork into Fireworks, building symbols that you can repurpose in your work easily, and copying and pasting between Fireworks and Adobe Dreamweaver—a great workflow tip.

Excerpted from Adobe Fireworks CS4 How-Tos: 100 Essential Techniques by Jim Babbage. Copyright © 2009. Used with permission of Pearson Education, Inc. and Adobe Press. For more information about thisbook, visit Adobe Press.

Going to graphics boot camp

Everyone knows the standard File > Open command, but Fireworks CS4 offers many more methods for opening images. You can open files created in other applications or file formats, including Adobe Photoshop, Adobe Illustrator, Macromedia FreeHand, uncompressed CorelDRAW, WBMP, EPS, JPEG, GIF, and animated GIF files.

The tips in this chapter explore the ways in which you can get images into and out of Fireworks, including new and updated options. Knowing these techniques will help you choose the best method for your workflow:

• Importing files
• Opening Photoshop files
• Opening Illustrator files
• Zen and the art of saving files
• Exporting a single file
• Using the Export Area tool
• Creating PDF files
• Saving Photoshop files

Download the chapter excerpt:

• Chapter 2: Graphics Boot Camp (PDF, 930K)

Watch the presentation:

In the following video, I show you how to import a Photoshop file into Fireworks. You'll see how Fireworks retains the high degree of fidelity when importing a Photoshop native file that contains vector shapes, layer hierarchy, object visibility, and Photoshop Live Effects.

(Running time: 15:40)

Staying on the (vector) path

Computer drawing tools use mathematical equations to draw lines and fills on the screen, known as vectors. A vector is simply the path between two defined points on the screen with properties applied to them, such as color and thickness. The tip in this chapter discusses distortion-free scaling using the 9-Slice Scaling tool.

Download the chapter excerpt:

• Chapter 4: Staying on the (Vector) Path (PDF, 930K)

Working with symbols

Symbols are one of the great timesaving features in Fireworks. They are a way to contain multiple objects within a single asset but still provide quick access to editing those objects. A symbol is a master version of a graphic. When you place a symbol on the canvas, you're actually placing a copy of the symbol, known as an instance. When you edit the original symbol object, the linked instances on the canvas automatically change to reflect the edited symbol.

The tips in this chapter cover the three main types of symbols available in Fireworks: graphic, button, animation, and component symbols:

• Creating graphic symbols
• Creating button symbols
• Editing symbols
• Importing and exporting symbols
• Adding component symbols to a design
• Editing a component symbol

Download the chapter excerpt:

• Chapter 9: Working with Symbols (PDF, 930K)

Watch the presentation:

In the following video, I discuss the nature of symbols and show you how to add a bit of consistency to your designs by building a variety of symbols that you can repurpose easily.

(Running time: 37:24)

Improving production workflow

Working faster and smarter may be a cliché, but in the real world of web design, it's also a goal. Don't mistake this work ethic with "cutting corners," which you do at your own risk. Working faster and smarter means taking advantage of the tools you have at hand to reduce time spent on repetitious tasks or just knowing your software well enough to produce quality work quickly.

The tips in this chapter are about the following tasks:

• Adding structure to your documents
• Site prototyping—the basics

Download the chapter excerpt:

• Chapter 11: Improving Production Workflow (PDF, 930K)

Fitting Fireworks into the design workflow

Nobody designs in a vacuum. For screen-based graphics, Fireworks is an ideal main application, but it can also act as a "hub," accepting files from several different sources and also outputting files in a variety of formats.

The tips in this chapter are about the following tasks:

• Integrating Fireworks with Photoshop
• Round-trip editing between Dreamweaver and Fireworks
• Copy and paste to Dreamweaver

Download the chapter excerpt:

• Chapter 13: Fitting Fireworks into the Design Workflow (PDF, 930K)

Watch the presentation:

In the following video, I show you a little-known integration feature between Fireworks and Dreamweaver—namely, copying and pasting (without re-exporting files). It's a great workflow tip that I think you'll enjoy learning about.

(Running time: 5:16)