Optimizing The Design Workflow With Extensions

I’ve been using Adobe Fireworks for over a decade now and I can recommend it to anyone searching for the optimal screen design workflow. Much has been said about Fireworks’ capabilities as a design application, but today I want to focus on one of its other biggest strengths — its extensibility.
As a platform, Fireworks gives its users a lot of freedom, when it comes to extending it. Because of that, Fireworks has a thriving ecosystem of add-ons (extensions) that add a lot of valuable functionality with newer options.
In this article, I’ll try to list some of my top extensions for Fireworks. These are not necessarily the most complex or powerful extensions, but rather those that have helped me be more productive with my Fireworks workflow over the years. Also, all of these are free to test and use, so you can even try them right away!

Working With Extensions In Fireworks

Fireworks can be easily extended, but the extensions are installed and maintained via the Adobe Extension Manager — a tool that must be run separatey from Fireworks.
Before we review in detail the extensions that I can personally recommend, I would like to share a few general tips and suggestions on how to work with extensions in Fireworks. Although these tips are mostly geared towards Fireworks CS5 and CS5.1, there are actually only a few minor differences if you are using version CS6.

Easy fix for issues with Windows Vista / Windows 7

If you are using Fireworks on Windows Vista or Windows 7, the Extension Manager may give you strange errors when you attempt to install an extension. The easiest solution to this problem is to run the Extension Manager as administrator. Simply right-click the “Extension Manager” shortcut and select “Run as administrator”.

Note: The reason why the EM needs to be run sometimes with administrator privileges in Windows Vista and Windows 7 is simple — some extensions specify installation locations in the Program Files folder, and Windows requires administrator approval to install anything in this area, for security reasons. Usually older extensions (that were not recently updated) are installed into the Program Files folder, while new extensions are installed into the User Application Data folder. Fireworks can run extensions from either the Program Files folder or from the “User Application Data” folders in order to maintain backward compatibility with older extensions.

Where are the installed extensions located?

If you are installing Fireworks extensions for the first time, keep in mind that:

• Commands will usually appear in the Fireworks Commands menu.
• If an extension also installs a panel, you will find it in the Window menu.
• If an extension installs an auto shape, it could be found in the Auto Shapes panel.

Extension descriptions

The best way to learn how an extension is supposed to work, or in which menu / submenu you’ll find it, is to look for the extension description in the Extension Manager. However, please note, that the Extension Manager lets extension developers link to descriptions online, which means that if you are not connected to the Internet, you will see empty description boxes in the Extension Manager. If you do come across these, know that a missing internet connection might be the cause.

Using shortcuts

If there are some commands that you find yourself using very often, you may want to assign keyboard shortcuts to them for gaining more productivity.
To do so, go to menu Edit → Keyboard Shortcuts, duplicate the default shortcuts set, then select your command from the list and add a shortcut combination of your choice. Fireworks will let you know if the shortcut you want to assign is already in use. Then, depending on what it already does, you can either choose to replace it with the new one, or select a different key combination.

Updating extensions

Updating extensions in Fireworks is pretty straightforward — you just have to open the Extension Manager every once in a while. If an extension has an update available, you’ll see a notification in the list of extensions. Then, simply select the extension and click “Update”.

Process of updating extensions.
Please note that not all Fireworks extensions have the “Automatically Check For Updates” option built-in. So alternatively, you can simply download a newer version (if there is one available, of course) from the website where the extension was originally posted, and then run the Extension Manager. The EM will ask you if you’d like to replace the old version with the new one — select “Yes”, and the process will complete automatically.
Now that we’ve covered the basics, let’s move on to the list of extensions!

1. Grids Panel

John Dunning is a legend in the Fireworks community, and his growing list of powerful extensions often compete with themselves for the top spots as valuable and useful. His grids extension is unquestionably the first one I reach out for every time I start a new project.
In a nutshell, the extension lets you set up a grid for your design. You set the parameters (the column width, gutter width, number of columns, etc.) and it then creates a locked layer with the columns, rows and guides spanning the height of your canvas. Since there are a couple of setups that I usually prefer to work with, I’ve saved them as presets, so it’s simply a matter of opening the panel and selecting an existing preset.
For responsive designs, what I typically do is create a few grid setups for different viewport sizes. Then I simply create a new page for each breakpoint and apply the appropriate grid before pasting the content in for realignment.

Insert Grid Panel: Typical setup for a 12-column grid. Large preview.
The features of the grid panel are evident from the screenshot, and make it easy to control columns, gutters, and baselines as wells the appearance of the overlay (and whether or not guides should be created). If you have ever tried to set up a grid in Fireworks without this extension, you’ve wasted a whole lot of time!

2. Guides Panel

As awesome as the grid panel is, it’s probably not suitable for every situation. Sometimes you may need to just create a set of guides without all of the other grid structures (e.g., if you are creating individual assets such as banner ads, rather than entire pages — grids are great for entire pages and screens, but they can be an overkill for specific components).
Also, for those of you who work extensively with guides, it often seems much easier to quickly set up the grid precisely with guides. If you are like me, and addicted to the fine control that guides offer in Fireworks (or any other design application for that matter), you most certainly would like to check out the Guides panel by Eugene Jude.
The panel gives you several options to add guides to the canvas with precise numerical control: you can set margins on either (or all) four sides, create columns and rows, or add individual guides at specific coordinates.

Guides Panel (with the “General” tab selected in it).
You can copy entire collections of guides and paste them into another page or document, or even save sets to retrieve later (this feature is pure gold if you have a setup that you work with often, and want to reuse).
But where this panel really shines is in its ability to work with selected objects. Lets say you need guides all around and through the middle of that image you just placed in your design, so you can align objects around it. Simply select the object, go to the “Selection” tab in the Guides Panel and select the appropriate boxes. You can even set an offset value between the object and the guides.

Adding guides through the center of a selected object.
Finally, there’s the ability to delete all guides, or at least only the vertical or horizontal ones (oh, how I wish I had this panel a little earlier — this would have easily saved me a couple of precious weeks every year!).

3. Smart Resize Auto Shape

Since Adobe Fireworks is used extensively for UI design, a very common use case is to create an interface element by grouping a few objects together — rectangles, text fields, buttons, etc.
Fireworks’ object-based workflow makes this an easy task (compared to Photoshop’s predominantly layer-based structure). The problem though is that once you have created such a group, resizing it can be difficult. You can’t just select the group and change its width or height, since Fireworks will simply stretch everything in the direction specified, and deformations to the individual objects will occur.
That’s where John Dunning’s Smart Resize comes into play.
Once you’ve selected a group that you need to resize, use menu Commands → Smart Resize → Attach, and the command will convert your group into a special smart object with the typical yellow resize handles.

Smart Resize: Saving Time When Resizing Groups of UI Objects.
You can use these handles to resize the group in any direction and witness the magic in action. The extension will resize only elements that extend across more than 50% of the group’s size — which is typically your background boxes — and retain the rest of the elements in position relative to the closest edge of the group.

Smart Resize in action.
For extra control over how elements in your Smart Resize group scale or are being repositioned, you can set anchor points for each individual object. For example, elements that have their X anchor set to the left will only scale on the right side; the left edge will stay fixed in proportion with the rest of the group.

In this example, the X anchor was set to the left, then the group was resized.
Text boxes will be resized while maintaining their text properties intact — the height and width of the text box will change, but not the text itself. John demonstrates the extension’s usefulness when working with a mock-up of a dialog box on his website. But of course, there are many more cases where you can save time with this extension. Personally having used it for a couple of months now, I’ve found my workflow immensely optimized, especially when creating wireframes where quick changes to try out variations become the “need of the day”.

4. Tables Panel

If there is one extension in this list that I would award as the “Most Underrated”, it would have to be the Tables Panel from John Dunning.
It does something that seems very simple but is actually much more complex and tedious: building and editing tables (painlessly!) in Fireworks. It can also be an indispensable tool for editing many other design elements, including buttons, styled boxes, and placeholders.
We’ve all been there, haven’t we? Every designer knows that often the task of mocking-up a table inside a Web design (or a Web design prototype) can come up. Unfortunately, it is rare for a graphics editor to provide a decent level of support for building tables, and Fireworks is no exception. Everything from deciding whether to use rectangles for rows or individual cells, or aligning things manually every time there’s a change in the design, tables in Fireworks can be a pain.
But things change a lot with the introduction of the “Tables” extension!

Tables Panel: Easily build and modify tables in Fireworks.
To create a table, you simply lay out the content of the table roughly on the canvas, in the sequence you want. Select all objects, and hit the “Create” button in the Tables Panel. The extension will add individual boxes for each element and lay them out with the height and width of the biggest element that appears in a row or column. You can change the padding, decide whether you want to see the table outlines (or not), and so on — and what’s better, everything always remains editable. Lets say you changed some text in the table, and now it’s too long for the cell that contains it? Simply press the “Update” button and the table will auto-adjust accordingly!
Apart from the obvious goal of creating tables and grids, one can use the extension in a few other scenarios. For example, you could use it in adding a background and border to text boxes for pull-quotes, so that the box always adapts to the size of text.
I often find myself using it for buttons when creating wireframes. It has always been very annoying to me that I have to keep managing a rectangle and a text field every time I need a button. With this extension it’s all taken care of, and I never have to manually change the width of a new button to fit the text inside it! Besides, you can even have borders of different widths around the button by changing the border widths in the Tables Panel.

Tables Panel: Creating dynamically-sized buttons quickly.
The Tables Panel is pretty flexible and has many other options. You can even insert a table from a text file (tab-delimited or comma-separated text file — .txt or .csv). After you select the file, the contents of the table will be inserted at the upper-left corner of the document (you can later drag the table around and position and style it in any way that you want). You can also import a table from a Web page — you’ll just need to first convert it to tab-delimited or CSV format.

Tables Panel: it provides you with a high level of customization and with various options.
As you can see, the possibilities for working with tables are almost unlimited. All of this is possible again thanks to the power of Fireworks and the talented extension developers that give so much to the community!

5. Placeholder Auto Shape

If you use Fireworks extensively for wireframing, you are no doubt aware of the frustration of maintaining placeholder boxes and the necessary information contained within. I usually draw gray boxes for my images and include a descriptive label, the height and width co-ordinates within the box. The problem is, this metadata often needs to change with the size and position of the placeholder. Updating this information manually and re-aligning the text so that it is always in the center can be a pain.
John Dunning to the rescue again, with his Placeholder auto shape extension.
To create an image placeholder, pick this auto shape from the Tools panel (instead of the standard Rectangle tool), and it will draw a box with the necessary data already filled in. Every time you resize and reposition the placeholder, the coordinates will automatically update as necessary.

Placeholder auto shape: Dynamic placeholders that always stay up-to-date.
It’s interesting to mention that the Placeholder tool can be found in the Tools panel. But also, this extension installs a Placeholder auto shape, which can be found in the Auto Shapes panel. Both the tool and the auto shape do the same thing, and the difference between their use is very minor (you can select the Placeholder tool and drag it to any size on the canvas, while the Placeholder auto shape should be first dragged and dropped to the canvas, and then resized).
As you can see in the screenshot above, you can decide what information gets displayed in the placeholder. The choice is between showing a custom label for the placeholder (like “logo”, “screenshot”, “banner”, etc.), and the coordinate of the image (height, width, x & y coordinates). Clicking the crosshairs in the middle of the placeholder opens up a dialog box where you can turn these details on or off. You can also change the size and position of the paceholder precisely right from within this dialog box and change (or remove) the fill color.

Placeholder auto shape: choose what content you want on the placeholder.
Useful tip: If you have multiple placeholder shapes in your file, you can select them and resize them all at the same time. Neat!

6. Orange Commands

If there’s anything I would call a Swiss Army Knife for Fireworks, it would have to be Orange Commands by Ale Muñoz.
Unlike every other extension in this roundup that focuses on a single task or a group of tasks, Orange Commands aim to bring efficiency to tasks across your entire Fireworks workflow. From aligning objects, to setting guides around selected objects, to combining two text objects into one — Orange Commands are a collection of small tasks that you would typically perform through a series of steps. And what’s more, they’re not only free, but are also open-source, letting anyone with enough know-how to tweak and extend them even further!
Here are a few of my favorite commands from the 100+ that this extension comes with:

• Most designers don’t know this, but there is a way to change the alpha / opacity of a stroke in Fireworks CS5.1 as well as earlier versions. Unfortunately, to change it you will need to go into the “Edit Stroke” panel and then inside “Advanced” to get to this control — the feature is pretty much buried. Orange Commands bring this ability right up to a single click with the Stroke Alpha set of commands under Alpha. (Using Fireworks CS6? You’re lucky! A few new options were added in the Properties panel, which include independent control over the opacity of both stroke and fill!)
  
• If you like to number your pages so they appear in a specific sequence after being exported, just set them in the right order in the Pages panel. Then hit Numberize under Pages, which adds a number in front of the name for each page. Need to change the order? Reorganize the pages and hit the command again. There is also a De-Numberize command that will let you get rid of those numbers, if needed.
• Need to swap the position of two objects in your design? Select them and hit the Swap command under Position. Easy!
• Fireworks has shortcuts for aligning multiple objects to each other, but you still need the Align panel if you want to align something in reference to the canvas. That’s where the Center on canvas set of commands under Align comes into play.
• You can use the Space horizontal and Space vertical commands under Align to distribute selected objects with a specified distance between them.

This is just a small part of what Orange Commands can do. You can check out the detailed documentation for more details on what’s available.
Since Fireworks lets you assign keyboard shortcuts to all menu items, you can assign them also to your favorite commands, converting any series of steps into single, keyboard-driven actions. Although I have a few favorite ones, virtually every one of the commands has contributed to “shaving” precious seconds off my workflow, which amount to hours saved every month.
Useful tip: Did you know that Orange Commands come with their own keyboard shortcut sets that pair perfectly with the commands themselves? If you’d like to use one of them, simply copy the shortcut XML files to the “Keyboard Shortcuts” folder (see “Installation” for reference), restart Fireworks, and then select one of the “+ Extras” sets. Of course, you can can further customize these shortcut sets, as well.

7. QuickFire Command

With the large number of useful extensions available for Fireworks, it doesn’t take very long before your “Commands” menu becomes overcrowded with items. At this point it could be really difficult to get to the command you need right at that moment. On the other hand, remembering countless shortcuts for quick access of all the commands, panels and menu items in Fireworks can also be difficult.
And that’s where QuickFire comes into play. This extension is again from John Dunning, and it is a fitting tribute to the power and flexibility of Fireworks. QuickFire is similar to Quicksilver on Mac OS and Launchy or Colibri on Windows. It is a super simple, keyboard-driven interface for getting to the Fireworks command you need, without all the slow digging through various menus and sub-menus.
Once you’ve installed QuickFire, assign a keyboard shortcut to it and restart Fireworks. Then, when you hit the QuickFire key combination, you can start typing what you need. It will instantly list everything that matches what you are typing, with various icons to easily differentiate between panels, commands, auto shapes, pages and more! The most relevant item will be at the top of the list and ready to be run once you press Enter. The icing on the cake is that QuickFire works with everything in Fireworks, and not only the custom commands that you have installed.

QuickFire: access any command, panel and auto shape in your Fireworks set-up with a few keystrokes.
Let me take a real-life example to demonstrate how I use the QuickFire panel to increase my productivity in Fireworks on a day-to-day basis. Let’s say I need three lines that I need to align to each other, position them with even spaces from one another and add vertical shadows to each one. Here’s how I do it (without ever touching the mouse) once I’ve drawn and selected one of the lines:

QuickFire: lightning fast editing workflow.
Useful tip: When you open QuickFire and search for a specific command in the list, pressing Enter normally executes the selected command and closes the dialog, while pressing Shift + Enter runs the selected command but keeps QuickFire open — this will allow you to run several commands in a row (and save a few more keystrokes).
QuickFire offers many more productivity enhancements. It will let you:

• Open panels quickly.
• Insert Symbols from the Common Library.
• Insert Auto Shapes.
• Access standard Fireworks menu commands.
• Apply textures and patterns to selected objects.
• Open recent files or create new files from templates.
• Select layers and pages, and also move or copy selected objects across layers and pages.

Again, you can check the detailed description of QuickFire and its common uses on John’s website.

Conclusion

As you have probably already guessed, I’m a huge fan of extensions and use them quite regularly in my design workflow with Adobe Fireworks. The list of extensions I use on a daily basis is much longer than what I can include in just one article — what’s covered here are just a few of them that address critical areas in Fireworks, to make a designer’s life a bit easier. And please note: in a possible follow-up to this article, I’ll try to review in detail a few more extensions that address several more specific areas within Fireworks.
Also, with the sheer number of extensions available for Fireworks, I’ve only scratched the surface of what’s possible. If you feel I missed any important ones, do let me know in the comments — I would love to learn about those and try experimenting with them myself.

Developing A Design Workflow In Adobe Fireworks

Every designer has their own workflow when starting a new project, even if it’s only loosely defined in their head. A typical Web project goes through a variety of steps from inception to launch, with a lot of moving parts throughout the cycle. Photoshop, Illustrator, Fireworks and even Web browsers themselves are available to aid us in our work. But with so many choices, how do we determine the right tool to move from concept to functional design?

Over the years, I have come to rely on Adobe Fireworks as the main workhorse among my design applications. It’s built from the ground up to create screen-ready graphics; it’s object-oriented by design; and it’s lightning fast for creating UI elements. While Photoshop has made great strides lately by adding some vector support, it simply has not been able to match the speed and reusability of Fireworks for production work. Read on to get a glimpse of my project workflow (sketches → wireframes → graphic comps → export) and to see how Fireworks fits into these different stages.

Sketches

Sketching is arguably the most valuable part of my design process. In terms of workflow, this step isn’t specific to Fireworks, but it’s still a crucial part of getting my ideas flowing.

Sketched icons

“Quest” (another sketch on paper)
Sketched designs can be done simply with paper and pen or created directly in Fireworks, and they can end up being works of art in and of themselves. I start most projects with sketching in some shape or form, and I use a few different techniques depending on the time and materials available.

High-Fidelity Sketching

Hi-fi sketching is a great option. It allows the designer to forgo the digital tools and break out the pencil, pens and paper.In previous posts outlines this in far greater detail than we can here, so check it out. Because high-fidelity sketches exist on paper, they have permanence; and collaborating on sketches is easy by passing them around, drawing on them and making notes about necessary changes. But by all means, make copies of your work; I wouldn’t want to get angry emails saying that I told you to let others draw all over your beautiful illustrations!
Hi-fi sketches of mobile screens and interactions
“But why should we start with sketching?” you might ask. The reason is because getting caught up in pixel-precision this early on in a project by going straight to digital is just too easy, and it’ll cost a bit of time in the long run. Remember, Fireworks is all about speed and production, and dropping back to pencil and paper is both a fast and easy way to get your ideas out so that you can start iterating. For those of you who truly enjoy the old-school ways of pencil and paper, here’s a selection of templates built specifically for that purpose. I’ve used these for both mobile and desktop website designs, and they can really help keep your UI consistent and speed your sketching along.

Don’t be afraid to explore many concepts and iterations.

Sharpie and a Big Pad of Paper

Using a simple Sharpie or other marker and a big pad of paper is quick, inexpensive and fairly low-fi (meaning there doesn’t need to be as much detail). This lets you capture big ideas and quickly define broad concepts in the design. You can pick up a Sharpie and a huge pad of paper at a local office-supply shop. Throwing away or recycling these drawings is not a problem either — they’re not exactly pages in a sketchbook.
Quick aside: When David Gray interviewed Jason Fried of 37signals, they spoke about exactly this type of low-fi sketching. Gray drew the notes of their conversation, and this fascinating sketched conversation can be seen on Gray’s website. The “big pads of paper” mentioned by Fried in the video can be found on Edward Tufte’s website.

Jason Fried on design
Pro tip: Sketches can help define site maps and user flows in the absence of a project brief. Are you making a brochure website, a CMS, or a single-page design with tiered layers driven by JavaScript scrolling? Sketching your designs can help cultivate your ideas and reduce design time.

Whiteboard and a Camera

This is the option I usually default to, because a whiteboard offers the same speed as a Sharpie and paper but making changes is easier, and you’re not wedded to particular ideas. A whiteboard is impermanent, and it makes for a great projection surface, with collaborators being able to suggest changes in a meeting room. Large whiteboards can be expensive, but you should be able to find smaller whiteboards at your local office-supply retailer for prices that won’t break the bank. I keep a poster-sized whiteboard (24 × 36 inches) at home for just such occasions.

Your concepts don’t have to carry heavy detail — just capture the big ideas.

Sketch in Adobe Fireworks

One of the most beautiful features of Fireworks is that it allows you to create vector objects but also offers full-featured bitmap editing. Fireworks supports Wacom tablets and pressure sensitivity to a degree, but it’s not nearly as fluid as what’s available in Photoshop. That being said, Fireworks does allow you to “paint” vector strokes, and I’ve done this with varying degrees of success. The advantage here is that, while it may not be quite as free-form as traditional media, you don’t have to jump through additional hoops, and your sketches will already be on a digital canvas.
Pro tip: When using a Wacom tablet for sketching, use a large canvas size, such as 2500 × 2500 pixels. Because tablets are sensitive, drawing on a small canvas accurately can be difficult. With a large canvas, you get better control and can zoom in to add fine detail.
In my typical workflow, I toss my initial ideas onto a whiteboard, snap a photo of the board with my iPhone, and email it to myself (or save it to Dropbox). At that point, it’s easy to pull the sketch into Fireworks to start building a wireframe in layers on top of the photo.

Snap a quick picture of your sketch with your mobile phone, and email it to yourself.

Photos of sketches work well if you don’t have a scanner.

Wireframing

Thinking in Patterns

When building a wireframe in Fireworks, one of the most important things is to think in patterns. This doesn’t mean using the design patterns or common interface conventions that users often look for in a design, such a text box for site-wide search. Rather, it means thinking about whether certain elements should share similar formatting throughout the design? Items in a sidebar, content lists, user profiles and photos are all good candidates. Fireworks can already help by creating these content blocks as reusable UI elements in your document library. You can select a group of objects and convert them into a single symbol (we’ll talk about creating symbols soon), and then simply drag it from the document library onto the design as needed. If changes are needed, simply update the library symbol, which will update all other instances throughout the document.
Pro tip: 960.gs is a popular CSS framework for creating fixed-width designs. A Fireworks extension for 960.gs is available that automatically creates guides spaced out for the framework. If you’ve already made the jump to responsive design, check out Matt Stow’s Export Responsive Prototype, which exports your Fireworks slices to simulate a responsive layout when you create reflowed designs as separate pages. And if you have no idea what the difference is between fixed-width and responsive design, we’ve got that covered, too.

Creating Pages

I’ll typically start with the header, along with other UI elements that repeat through the website, such as the search box and sidebars. I can then take these elements and define them in my “master” page in the Pages panel. By doing this, any new pages I create will share these elements. They remain locked and on their own layer, so I can design more freely and save time by not having to reconstruct them for each new section that I add to the website. To create a master page, right-click on an existing page in the Pages panel and choose “Set as Master Page” in the pop-up menu.

Creating a master page
This is really where pattern-based thinking helps. Will your sidebar have its own background colors and texture? If so, you might want to define this on the master page. However, if some pages will expand to the full width of the design, then defining a sidebar here might not be the best solution. Pages have their own unique properties, including canvas width and height, resolution and exporting options, which we’ll discuss later. Hopefully, these ideas will help you identify good candidates for master pages. Webdesign Tuts+ offers a great video tutorial by Connor Turnbull titled “Getting Started With Fireworks: Using Master Pages, Pages and Web Layers.” Remember that pages can have unique dimensions, which is a huge advantage in Fireworks. Adding your header to the master page is fine, because it is anchored at the top of the browser window, but the page’s length can vary. The footer is probably not something to include on the master page, but it can be used very powerfully as a library symbol, so let’s look at symbols next.

All new pages now include repeatable elements defined on the master page — headers, footers and sidebars that are easy to update.

Creating and Using Symbols

Returning to the concept of reusability, the document library in Fireworks can be an indispensable tool for items you intend to reuse. Library symbols can contain groups of objects, enabling you to quickly replicate blocks for a CMS. Need a log-in form in the form of a modal dialog to appear on multiple pages? Create that as a library symbol, complete with the background overlay in the size of your canvas, and drag it from the library to your canvas to illustrate the effect. If you need to make changes to the log-in modal dialog at that point, those changes will be reflected in every instance of the symbol, on every page, on every layer!
To create a symbol, select the objects that you’d like to include (for example, in the footer), and choose “Convert to Symbol” (Modify → Symbols → Convert to Symbol, or press F8 on your keyboard). The text, shapes and anything else you had selected are now available from the Document Library panel, and you can drag the symbol onto the pages as needed. Later, if you decide to make changes to the footer symbol, just make the changes once and they will propagate to every page on which the symbol appears!

You’ll find any symbols that you have created in the Document Library panel.
Noupe has a great collection of reusable Fireworks library objects that can be used for prototyping and design. Also worth mentioning is the fantastic Fireworks Wireframing Kit website by Hannah Milan, another great place for UI components.

Graphic Comps

Once the client has approved the wireframes, we can jump into enhancing the website’s underlying skeleton with high-fidelity design. Fireworks allows us to make this transition without ever leaving the application — we enjoy the same functionality of multiple pages and library objects, but now we can add gorgeous photography, beautiful typography and striking color enhancements, all in this one program.

Vectors and Bitmaps

Now that we’ve created the wireframes, we’re ready to get the color and typography flowing. As mentioned, Fireworks combines both bitmap editing and vector object creation in a single powerful package. I usually create as much as possible in vector format because the files are scalable and can be reused for Web and print. The vector editing tools in Fireworks are easy to use, and many of the features you’ll find in Illustrator for manipulating vector objects are available here, too. Editing tools for bitmap and vector can be found in the Tools toolbar, and there is a separate panel for combining and editing vectors (the Path panel).

Fireworks offers both bitmap and vector editing tools.

A vector drawing created in Fireworks

Layers, Sub-layers, Groups

In Fireworks, layers work more like they do in Illustrator than in Photoshop, so keep this in mind. Both layers and individual objects can be named, which helps dramatically with exporting if you need to send the graphic files to another designer or developer. I usually name my main layers according to the overall sections of the comp, and then place objects into sublayers to keep them organized. Layer names such as “header” and “twitter block” clearly communicate to other designers which elements of the UI are where in the layout. In addition to layers, Fireworks also supports the grouping of objects and arranging of individual objects and symbols from front to back. This provides an additional level of control when you’re overlapping objects and effects.

Property Inspector Panel

Arguably the single-most powerful UI component in Fireworks is the Property Inspector (PI) panel. The PI panel can be normally found at the bottom of the screen when you first open a new document in Fireworks. Fills, strokes, gradients, patterns, object position, scale and opacity, blending modes, live filters, text properties and much more can all be defined quickly and easily from the PI panel. It’s a convenient place to quickly inspect and change the properties of all kinds of objects! And let’s not forget about Live Filters, which are the secret sauce for making Fireworks a fast tool for production.
Many people ask where the true power of Fireworks lies relative to Photoshop. The answer is the features and behavior of the PI panel. It is your one-stop shop for a vast amount of tweaking. If you’ve ever used Dreamweaver, you’ll be familiar with the panel floating at the bottom of the screen and the myriad of controls it offers.

The PI panel provides controls for text, bitmap and vector objects, live filters, compound shapes, the document canvas and more.

Applying (Live) Filters

Just as we apply adjustment layers and effects in Photoshop, we can apply live filters to objects in Fireworks, and these are all assigned in the PI panel. When you use filters in library symbols, such as glows and drop shadows, they are considered a part of the object and can cause the x and y positions of that element to fluctuate. Live filters can also be applied to symbol instances so that their positions better line up with your grid. It really depends on whether you need the filter to appear in every instance of the symbol or not.
Live filters can also be combined and stacked on top of one another, and they’re multiplicative, which means you can apply more than one instance of the same filter to an object. For example, you can create a very thin, heavy glow around an object, and then apply a secondary glow of another color that’s lighter and more diffused, making for an entirely new treatment. Live filters can be edited at any time simply by double-clicking the filter that you’ve applied and changing its settings. Additionally, live filters can be rearranged by dragging them into a new order, giving you substantial control over applied effects.

The live filters magic happens in the PI panel.
Keep in mind that using live filters is different than applying filters via Fireworks’ top menu. Live filters remain editable, whereas “regular” filters do not, so I’d recommend using live filters by default. That being said, live filters can affect how much memory Fireworks uses. If your design becomes too complex, you can branch a single UI component or section of the page into its own file to maintain editability, then flatten the layers and bring that object back into your primary comp as a bitmap.

Iconography created in Fireworks

Exporting

Now that we’ve converted the wireframe into a high-fidelity full-color design, it’s time for the transition to a fully functional website using HTML and CSS. We’ll use Fireworks’ superior compression and exporting abilities to pick apart different parts of the design to be used as background images for headings, buttons and even tiled backgrounds.

Defining Slices

When the design comp is completed, it’s time to export the image files for use in the browser. Slices work similar to those in Photoshop; they allow you to define a section of the graphic comp as a flat bitmap image to use on the website or in the CSS. But Fireworks has the additional benefit of allowing us to define specific optimizations and file formats in different slices of the same document. GIF, JPG and PNG images can all exist in the same Fireworks document, and you don’t have to leave the app or go through multiple passes of file exporting, as you might in Photoshop or Illustrator.
Slices exist on their own Web layer above the rest of the design, so they’re easily toggled on and off with the number 2 on your keyboard (or using the eye icon next to the Web layer).

Slices can quickly be toggled on and off in their own layer.
You could manually draw slices with the Slice tool from the default toolbar, but because Fireworks is object-oriented, you can simply select your object or group and choose “Create slice” (Edit → Insert → Rectangular Slice). The slice will be created automatically and set to the size of your object, including any live filters that you’ve applied.
Pro tip: Use the Slice tool to quickly determine the size of an object or icon to ensure that live filters such as glows and drop-shadow filters are not inadvertently cropped out of the final image.
Fireworks slices also enable us to define different parts of the overall comp using unique optimization, naming and file formats, and it gives us one-click exporting options, saving all of these parts in a single location on our computer. No need to get creative with cropping or creating separate files — it’s all done within Fireworks. Simply select your objects and choose Edit → Insert → Rectangular Slice (Alt/Option + Shift + U), then go to the Optimize panel and either select from the presets provided by Fireworks or define your own settings for each slice.

Slices are the secret power of Fireworks, enabling you to quickly define elements in the design for exporting.
Keep in mind that backgrounds are part of the slice, but these items can easily be placed on their own background layer with the visibility toggled off, giving your buttons and other UI elements full alpha transparency, thus maximizing their versatility.
Pro tip: You can quickly export slice objects after having made minor adjustments. Simply right-click the slice and choose “Export selected slice” to send the image out with your pre-defined settings. This also works when selecting multiple slices, each with their own optimization options. Keep in mind when using this technique that if you’ve changed the image “scale” in the exporting options (say, to create a thumbnail or a website preview for a WordPress theme), then you’ll need to go back into the export preview and reset the size to 100%, or else your sliced exports might look squished.

Exporting Defaults

Slices can either inherit the default exporting option for the file format (set in the Optimize panel) or be unique; meaning you can set a single slice to export as a JPG, while the rest of the image exports as PNG or GIF. This affords tremendous control for different parts of your graphic comp. Many times I’ve also created a separate page in my file titled “Exports” for background sprites and toolbars, which keeps my original image intact — very helpful in the event that the client wants to see the proposed changes. Simply select the relevant UI elements from the design, create a new page, and paste your objects into this new canvas. Once you have the UI elements for the sprite, you will easily have the exact pixel locations to plug into the CSS.
Pro tip: Fireworks saves natively in PNG format (with added meta data), which is easily viewable in a browser. I’ve used this feature in a pinch to quickly show graphic comps to clients and coworkers. But beware: multi-page layouts can get pretty big, which affects downloading time. Also note that the first page in a Fireworks document is what’s shown as the default view of the Fireworks PNG.

Exporting Options

Once you’ve created your slices, or if you’re simply exporting the entire comp to show a client, you’ll be taken to the exporting window in Fireworks. This works similar to the “Save for Web and Devices…” preview in Photoshop and Illustrator. Here you can once again change the level of compression, as well as see a live preview of the image in different file formats.

Export Preview gives us a quick look at the size and quality of the exported image.
You can also control the scale of the graphic — very helpful when you’re designing an icon for multiple devices and platforms (the standard and Retina-sized images for the iPhone display come to mind). You can also export HTML along with the images; export with or without slices; and save the file for use in other applications such as Photoshop or Illustrator.
Pro tip: Use the “Constrain proportion” options and scaling in the “File” tab to quickly export snippets of the design for posting to websites such as Dribbble or for promotional images for a feature area.

Try It Out

There you have it: a super-short synopsis of how to take your sketched ideas to wireframes and all the way to full-color graphic comps using Adobe Fireworks. The power of vector and bitmap editing, the easy and fast control over reusable objects, the excellent live filters and the very good compression and exporting options all make Fireworks a powerful tool for any (screen) designer.
Many of you already own a copy of Fireworks, having bought Adobe Creative Suite, but have simply never opened it up. It doesn’t cost anything to fire up this dormant app and see whether it provides some enhancements to your workflow. Why not give it a try? A streamlined workflow awaits!