Open Menu

soul of fine art

Adobe Fireworks CS4

User Interface Makeover / Improved Prototyping Tools / New School Screen Design

with Tutorial Recommendations / / adobe press


fireworks cs4 box shot


Eden Maxwell



I was first introduced to Fireworks in 2002 (this was prior to Adobe acquring the app from Macromedia) through the team; these forward thinking developers coded elegant CSS-based automated interfaces, extensions, and template packs for Dreamweaver; to create their onscreen magic for websites, they also chose Fireworks as their image-editing program.

Since then, Fireworks has earned a growing niche among both experienced and an upcoming new breed of designers, and for good reason. Fireworks has evolved into a solid screen graphics creation and editing tool with a distinct mission: to rapidly prototype and design websites, desktop apps, and other rich media applications.

Fireworks CS4 is a hybrid program, meaning it can seamlessly handle both bitmapped images (Photoshop) and vector shapes (Illustrator) inside the same document, which provides you with adaptability for streamlining the design process. While certain tools overlap a bit with Illustrator and even more so with Photoshop, Fireworks offers substantial differences that make it the optimum application for web designers, or anyone who wants to make short work of designing for the screen—from frameworking, web design tasks, rollovers and buttons, to efficiently slicing up and optimizing graphics, and much more.


The goal for most web designers is straightforward: set up a quick well conceived web page that looks and behaves, with some basic navigation, like a functional website for a simple yet effective clickthrough experience that communicates your ideas for the client. Once the client has signed off on the layout that you designed, you can then use all the assets and the development time you’ve already invested within Fireworks (that is, if you were smart enough to use it) toward converting the prototype into CSS or HTML for export into a web app such as Dreamweaver.

While many web developers still rely on Photoshop for their initial website mockups, that too is changing as increasing numbers of designers discover the merits of Fireworks. And, sure, in the past you could also use Photoshop to slice up your page and optimize images manually, but that was old school and a tedious task.


Fortunately, Fireworks CS4 jumpstarts the production process by taking up where Photoshop (which is primarily concerned with image editing and printing) falls short. After spending a short while with this new version of Fireworks, it soon becomes self-evident that this app is about automating tasks and easy prototyping (no throwaway work) when designing for the screen.

Workflow scenarios vary, often from wireframing and functional prototyping in Fireworks to the visual artist in Photoshop, back to Fireworks for export, and then to Dreamweaver for final coding. As Fireworks CS4 has been intelligently structured and intuitively developed to get your project up to speed, it is no surprise that developers are embracing it as the central hub in their design process.

As a hybrid app, Fireworks provides unparalleled flexibility that you will come to appreciate the more you use the software. Importing and exporting options within Fireworks CS4 in general have been improved. You can, for example, open and configure a Photoshop document in Fireworks via a variety of options, which includes adjusting image resolution. Layered Illustrator and Photoshop documents can be imported intact and restructured while maintaining full editability over both design and text in most cases. As a feature of import fidelity, you can make good use of ideas created outside of Fireworks; you’re not restricted to begin your design from scratch within Fireworks.


While Fireworks CS4 boasts an array of many new features plus an enhanced toolset, the most apparent improvement is its revamped user interface. The UI makeover now shares the same uncluttered look, continuity, and flexibility, including customizable workspaces, with other Adobe Creative Suite 4 Web and Design components, from Photoshop and Illustrator to Flash and Dreamweaver.

Despite the redesigned and improved interface, Fireworks CS4 remains intuitive for users of the previous version; they will have little trouble in getting the job done when making the switch: core tools, keystrokes, and the property inspector panel are essentially unchanged.

For anyone wondering whether Fireworks is here to stay, you can now ease any doubts. With the release of Fireworks CS4 and its integration with other Adobe apps, you can rest assured that this revitalized app is no stepchild in the pantheon of Adobe’s suite of creative products.


Adobe’s CS4 design applications not only share a similar look and feel, they work together better than before. Pages, States, and Layers panels in Fireworks are now easier to use, with handy right-click menu additions, including on any object, for accessing properties on the fly that were only available in the panel options menu in previous versions; also, all commands and command panels have been upgraded for greater ease of use.

For example, one of the many revised panels in Fireworks CS4 is the Path panel; this greatly enhanced vector-editing panel lets you do most anything you like with vector paths with more precision than ever before, including the new Fillet Points command to easily curve a hard corner point. Another creative tool in this panel is the Convert Path To Fill, which allows you to change a vector path to an object with a fill—excellent for adding gradients to organic shapes.

As Photoshop, Illustrator and Fireworks now share the same powerful text engine, import options allow for editable text that is typographically more accurate and predictable when sharing documents among these apps.


Web and application designers will appreciate the many refinements Adobe Fireworks CS4 has to offer. Here are a few new features and tweaks on existing tools guaranteed to boost both creativity and productivity.


Although Styles in Fireworks CS4 is not new, how they are implemented in this version has been greatly enhanced.

Improvements to styles includes the new Live Styles feature, which makes single-source changes a snap, regardless of the number of times you’ve applied the style. Change an existing style, hit the redefine styles button, and all objects linked to it are automatically updated. The Style Panel also boasts a number of new and useful default styles to spice up your design work.


In previous releases of Fireworks, Auto Vector Mask was called the Fade image command.

Auto Vector Mask in Fireworks CS4 now represents a real-time vector masking feature that is more descriptive, easier to use, plus an instant preview of the effect is displayed on the canvas, meaning you can instantly see your mask adjustments as you make them. You can choose from eight preset gradient masks, all of which are customizable.

Note: for Auto Vector Mask to work (at least on the Mac platform) the Pointer tool must be active.


Taking its new lead from how symbols editing is done in Flash and Illustrator, Fireworks CS4 symbols have taken a big step forward with more precise in-place editing. You can now modify a symbol (an object or multiple objects within one asset that you use over and over, or want to share with other members of your design team) without having to jump to a separate window, as was necessary in the previous version. Now, with the new in-place symbol editing, you can precisely refine your symbol while keeping an eye on the larger picture of your canvas.

Symbol properties are now also more robust with support of nested symbols (one symbol inside another) in Fireworks CS4. Also, a handy breadcrumb trail in the document bar lets you know where you are within the in-place symbol editing process—nice detail.


One of the most valuable features of symbol editing, 9-slice scaling (intelligently transforming an object in width or height without distortion, especially graphic components and rounded corners of objects), is now available for any type of object—pixel, vector, group, or text area. A new dedicated 9-slice scaling tool lets you perform this operation on any selection without first having to convert it to a symbol—which was the roundabout way of doing it with Fireworks CS3.


Fireworks CS4 introduces Smart Guides and Tooltips, two new layout devices that are worth the cost of the upgrade alone; by enabling Smart Guides and Tooltips, you can quickly and precisely place or align objects on the canvas with these visual cues in a more intuitive manner, which saves you time and is easier than having to use the Align panel.

Smart Guides provides you with dynamic snapping vertical and horizontal guides as you drag objects on the canvas—helping to align selected objects on the fly in relation to each other. 

In the past, if you needed to place objects at exact X and Y locations, you had to rely on the Property Inspector. Now meet Tooltips, your other new BFF. To see how Tooltips work, turn them on by choosing View > Tooltips. Next, choose View > Rulers, drag a couple of guides onto the canvas, then hold the Shift key down as you drag one of the guides to a different location. Fireworks will then dynamically display the distance between the guides and the distance of the selected guide from the edge of the canvas.


While Smart Guides and Tooltips are great features, the Align panel is far from being obsolete. For example, a new component in the Align panel provides more independent control and freedom over precise placement of your design elements. Instead of spacing objects evenly, you now have the option of entering a precise distance between two or more selected objects. If you have four objects selected and need them spaced 25 pixels apart in relation to themselves along the vertical or horizontal, simply enter the value in the new Space control section in the Align panel.


Finally, the much-anticipated Text in Path feature allows you to float text inside a vector path to quickly simulate text floating around an image or other graphic element in CSS layouts. 

Up to now, many web designers, web developers, and visual designers have been more comfortable doing their image editing within Photoshop rather than rummaging about Fireworks to see if the right image-editing tool was available. To address this past shortcoming, Fireworks CS4 introduces a new Image Editing panel that includes all its image manipulation tools under one roof. This arrangement gives you the option of remaining in Fireworks to work on an image instead of switching apps—a very handy consolidation tweak. 


After designing your web pages in the flexible graphic environment of Fireworks, you can then export web-standards compliant, CSS-based layouts (complete with external style sheets) all in one step. Note that your exported text will be live and editable. You can then get your production going by leveraging the automatically generated CSS building blocks and images export toward coding your final web page.

For many designers, this new superb time saving CSS export feature in Fireworks CS4 is worth the price of the update alone.


When it comes to creative options for delivering your design comps to your clients, Fireworks CS4 has that handled, too. Another requested feature has been implemented in this release: you can now export a Fireworks document directly to a PDF.

With the new Export To PDF feature, you can, with a single command, export interactive comps as a PDF, allowing clients to view a ‘live demo’ of their website in progress. Sending a PDF also protects the code you’ve been working on. Note, however, that certain actions won’t work; rollovers, for example, don’t function since the PDF is presenting flat pages.

After reviewing your PDF comp, clients can leave comments for you regarding the design through the collaborative features available with Adobe Reader or Acrobat—this means that the client doesn’t need Fireworks to view or comment on your work.

You can also further safeguard your designs with optional password protection—separate passwords are definable for viewing and for other tasks such as copying, commenting, and printing.


As design is most often a collaborative effort, there are situations when you may need more real time feedback from your design team (they may be in various locations) or client than email or a PDF comp can provide.

Adobe has an innovative solution for your consideration: the Adobe ConnectNow online service provided through Free for up to three online participants (Flash Player is the only app required for guests), this unique service allows for more spontaneity through ‘live’ meetings over the web (including a webcam feature) to share your screen, present creative concepts and proto­types, and brainstorm with a variety of tools available to all online for a productive session. See for yourself by clicking here.


The enhanced typographical capabilities familiar to users of Photoshop and Illustrator are now implemented in the text engine of Fireworks CS4. This allows you to set type easily and intuitively while getting the same elegant and predictable results whether you start from scratch or import text. You can even import or copy and paste double-byte characters (ligatures) from Adobe InDesign, Illustrator, or Photoshop without loss of fidelity. The Adobe text engine improvements also let you bring Photoshop native PSD files into Fireworks CS4 with fully editable text.

Note: Opening documents from earlier versions of Fireworks might result in some alterations of text spacing, which would require adjustments in formatting.


Need some inspiration when it comes to creating color schemes? Fireworks CS4 offers an integrated solution via the Kuler Panel. Adobe Kuler is a popular web-hosted application and online color community where designers can create and store color sets to share or keep handy for their own use. With the Kuler panel in Fireworks CS4, you can find, sample, and apply the latest color themes from Adobe Kuler.

Having Adobe Kuler accessible in Fireworks CS4 gives you the opportunity to craft color harmonies for your own use or to upload to Adobe Kuler, without leaving your design space. Adobe Kuler is also available as an Adobe AIR app.


In addition to being a web prototyping powerhouse, Fireworks CS4 has also been upgraded to help designers develop applications for the screen, including those nifty AIR apps that float about on your desktop.

You can now preview, package, and test the usability of your Adobe AIR interactive prototype directly from within Fireworks CS4, ready to be delivered to HTML and CSS, Flex, or Flash. Pages and states in Fireworks CS4 map precisely to an interactive Adobe AIR application experience, so you can quickly convert your click-through front-end graphic mock-up, complete with hot spots, to a fully designed prototype; you can then distribute the refined prototype to clients or colleagues for approval and move it into application development and programming more rapidly.


New features and enhancements in Fireworks CS4 are many; here a few more worth noting:


As many of us have learned, it’s essential to save our documents in progress, often and regularly. When working with Fireworks, you will most likely have to manage numerous open documents—now greatly simplified through the Save All open documents command. As the command implies, this feature (under the command menu) allows you to save all open documents even while working on them and you can specify filenames for any as yet unnamed documents.

Documents that have changed since the last save appear with an asterisk (*) against the filename on the document tab.

Fireworks CS4 also introduces asynchronous saving; this feature allows you to save a large document while you continue working on that document or a different document with negligible performance decline—even as the large document is still saving.

Note: You can use the Fireworks Auto Backup utility to automatically back up all open Fireworks documents. Download this utility from Adobe AIR Marketplace here.


If you’re a Mac user, you can now also work with a tabbed documents view. Instead of having a slew of floating multiple open documents, this workspace feature presents an easier to navigate uncluttered and coherent view of open documents (as you see, for example, with the tabbed feature view in Safari and Firefox) that was only previously available on the Windows platform of Fireworks.

Mac users can now also choose to opt for Application Frame, which provides you with a single integrated window, as you would see on a Windows-based PC. Application Frame is another new feature that allows you to neatly organize panels and open documents within a single cohesive area. Application Frame is the superior way to manage your Fireworks screen; however, Mac users can disable this feature and revert to the classic floating panels and documents windows look if so desired.         


Fireworks CS4 is also fully integrated into Adobe Bridge, a visual file browser, included with Adobe Fireworks CS4, that helps you search, view, and sort through many assets to quickly find the ones you want. Instead of having to drill down through the Finder or Internet Explorer in search of your files, you can use Adobe Bridge to quickly preview and access your files within Fireworks CS4 more easily; note that Fireworks CS4 does not yet recognize camera raw files.


The Preferences dialog panel has been updated in Fireworks CS4, offering more options consistent across new documents; Master Pages makes continuity and structure among common elements across your pages a breeze (as InDesign users will attest to); and since Fireworks supports many file formats, you are in control regardless of the format.


In website design, the challenge has always been this: how to transition smoothly and quickly from initial composition to a standards-based web page—while maintaining efficiency, but not at the expense of design and creativity.

Professionals use the best tools that they can get there hands on. To this end, Adobe ups the ante with Fireworks CS4, the most comprehensive toolset available for rapidly prototyping websites, application interfaces, and interactive designs. This amazingly versatile app lets you spend more time on frameworking (the information architecture) and design while it handles many of the production details, reducing the number of repetitive tasks, saving you time and making you money. 

Exciting new features and productivity enhancements make this release of Fireworks a must have for current users (especially as it's already included in one of the design suites you most likely use); and for those still on the web design fence working only with Photoshop and Illustrator, it’s time to hop over and discover the benefits of including Fireworks—the requisite app for a whole new generation of Web designers—in your creative process.»


Estimated standalone street price: US$299

Fireworks CS4 is also available as a component of Adobe Creative Suite 4 Web Premium, Adobe Creative Suite 4 Web Standard software, Adobe Creative Suite 4 Design Premium, and the Adobe Creative Suite 4 Master Collection.

For more pricing and details about Adobe Fireworks CS4, visit

Adobe TV offers a variety of programming, including how-to tech talk, personality-driven shows and profiles of cutting edge Adobe customers and Adobe employees working with our latest technologies. Try this one for starters:

Everyday Timesavers: Web




Fireworks CS4 Essential Training presented by


Fireworks tutorials


with uber Fireworks maven:

Jim Babbage


Fireworks CS4 is a hybrid imaging and rapid-prototyping application with an enhanced toolset that includes a greater variety of options than ever before.

It’s a great app. New users might need someone to hold their hand on how to work the tools, or, if you already use the app, you might be interested in new techniques made possible by this new version. If you want an instructor who knows the material and can communicate it clearly, concisely, and in-depth that only comes from years of experience and teaching, then this well thought out and presented video course by Jim Babbage is for you.

In a series of 11 major topics broken down into numerous lessons that runs the gamut—from creating graphic symbols to using the Slice tool to PDF prototyping—Babbage does an incredible job of infusing his love of Fireworks with well honed tips and intuitive insights that will give you an edge on the learning curve from the get go.

In Fireworks CS4 Essential Training, Babbage demonstrates how to navigate and customize the workspace in this design and production hub. He then provides a primer on the array of graphics that can be created and combined in Fireworks, including bitmap and vector art, layered Photoshop and Illustrator files, and files in the native Fireworks format, enhanced PNG.

Babbage demonstrates creative uses of text, animation, and effects. He also discusses how to generate optimized web graphics as well as entire interactive prototypes based on CSS, HTML, PDF, and AIR. Exercise files accompany the course with a premium subscription.

Online members can also make good use of two other video courses by Babbage: Fireworks CS4 Getting Started and Fireworks CS4 New Features. Another online feature I like was Creative Inspirations that feature intriguing documentaries on creative pros from various backgrounds.

There was no doubt. I did have a cursory understanding of Fireworks. But, after completing the training, I knew that I had gone onto the next level with this screen design app; I had a deeper appreciation of what I could now accomplish with Fireworks CS4. While reading is good, nothing is as immediate and informative as watching Jim Babbage—a master at work.

Technical note: while I don’t have the fastest DSL connection (under 1.5 Mbps) because of my remote location, the QuickTime tutorial movies played flawlessly—no buffering. Also, there was never an issue logging onto online.  The site was always up and running».

Fireworks CS4 Essential Training
with: Jim Babbage
Running Time: 7.25 hours: DVD: Price: 149.95

Another option is the Online Training Library (highly recommended), which is available 24/7, starting at $25/month; for $375, you get a 1-year Premium Subscription that includes access to all courses in the Online Training Library and access to all exercise files.

Fireworks tutorials

More Babbage, All the Time, On Fireworks CS4

Adobe Fireworks CS4 How-Tos: 100 Essential Techniques

from Adobe Press

Pages: 224

By Jim Babbage

Okay, sure, well-done training videos are great, but I find that having a hard copy as a reference is still indispensable. Adobe Fireworks CS4 How-Tos: 100 Essential Techniques by Jim Babbage from Peachpit Press is an ideal companion piece to his Fireworks CS4 training courses on

Coming a long way from its roots as a screen graphics editor, Adobe Fireworks CS4 is back and better than ever. Completely revamped for inclusion in the Adobe Creative Suite, Fireworks is now positioned to be an integral part of Adobe's Web workflow. Designed for manipulating images destined for the Web and developing rapid Web prototypes, Fireworks lets Web designers go from scribbled concept to online framework.

Babbage’s book gives readers quick access to the key features and fundamental techniques to help them come up to speed. Each of the 100 techniques is presented in a self-contained easy to comprehend unit of one or two pages with supporting screenshots so you can dive in and immediately start working, unencumbered by lengthy descriptions or technical detail. A comprehensive index makes looking up topics a breeze.

Adobe Fireworks CS4 How-Tos is one the first and best books available on this design app for the screen. Jim Babbage knows his stuff. Get his book and so will you.

Adobe Fireworks CS4 How-Tos: 100 Essential Techniques

By Jim Babbage      

Adobe Press
Note: Adobe Press books are published, marketed, and distributed by Peachpit Press.

List Price: $29.99 (click on the book's cover in the siderbar to order)




eden at work
Home Page
email me