Here are a few of my essential Adobe Fireworks’ extensions. As much as I love Fireworks and work with it almost everyday, I find that its native creative toolset still has some gaping holes when compared to other vector based design application like Illustrator for example. On the other hand, Fireworks has a very dedicated and inventive user community and several of its members have create extensions to patch those holes or simply improve Fireworks’ workflow.
The Extensions
The 5 extensions below are some of those I use the most in my own work. Most of their creators have many others that might be more suited to helping you in your own work so take the time to explore their Web sites to find the other gems they have to offer.
1– Trevor McCauley’s “Transform Panel”
Information and download: http://www.senocular.com/fireworks/extensions/?entry=572
Transform Panel
This extension is probably the one I use the most often during a Fireworks design or editing session. Unlike Fireworks’ native Properties Inspector, the Transform panel lets you do 2 things that I find essential in my work. One (A) is to enter decimal numbers for location and size fields (W/H/X/Y). If you are working with a troublesome objet where a 1 px stroke is not rendering cleanly, use the Transform panel to move or resize the object by half a pixel (or smaller increments).
Secondly (B), the Transform panel offers something called the “Reference Point Selector” (or 9 points proxy) which is native in the control panels of apps like Illustrator and InDesign (as well as a partial implementation in Flash). What this does is let you read and set position values from anywhere around an object’s bounding box. Here’s the explanation from the panel’s Help document: “The selected point in this grid is the point within the selection that the panel determines the values presented in the X and Y fields. It also determines from which point your selection is transformed. By default, when using the Property Inspector or the Info panel in Fireworks, the reference point is always at the top left of the selection. Using the Reference Point Grid in the Transform panel, you can select any of 9 different reference points by which to locate or transform a selection based on the bounding box of that selection.”
When I first came to Fireworks, I’d been using Illustrator for a while and the lack of this single seemingly small feature is one of the things I missed most in Fireworks. You have to start using it to realize how useful it really is.
As you can see from the image, the panel also offers a bunch of other useful features that Fireworks lacks natively including moving objects by a set number of pixels from its current position (relative) as well as resizing multiple objects at once individually (equivalent to Illustrator’s Transform Each). All in all, this is one fantastic extension and, by far, the one I use most day in and day out in Fireworks.
2– Grant Hinkson’s “Gradient Panel”
Information and download: http://www.adobe.com/devnet/fireworks/articles/gradient_panel.html
Gradient Panel
Another little gem that brings some needed precision to Fireworks’ creative tool set. Without this panel, it is impossible to set the position of gradient stops with numerical precision in Fireworks. This panels lets you do just that for both the color and opacity gradient stops and lets you set the gradient direction to either vertical or horizontal (with perfect accuracy. Without the panel you’d need to “redraw” the gradient on the object requiring several extra clicks. The panel also lets you set an obect’s fill to a linear or radial gradient to solid with the click of a button.
This panel is a great time saver when working with gradients. It just lacks the ability to set the gradient’s angle numerically to anything other than perfectly horizontal or vertical. Hopefully, Fireworks will eventually improve its native tool set to include this very basic functionality.
3– Eugene M. Jude’s “Guides Panel”
Information and download: http://www.adobe.com/devnet/fireworks/articles/guides_panel.html
Guides Panel
Now here’s a panel that has no equivalent in any other application I know of. In addition to letting you set up guides for a given layout very quickly, it enables you to save and reload the “guides sets” you may use often without the need to recreate them every time.
In the General tab you can set guide rows and columns with specific “gutters” in addition to regular vertical and horizontal guides. In the Selection tab, you can also create guides from selected objects (including rows and columns) if you are adding guides to an exisiting design.
The Store tab lets you save and reuse guide sets across pages within the same document if you don’t need to save them externally for reuse in other documents.
The Guides panel is an extremely powerful and useful panel that will save you a lot of time when working on wireframes or finished Web site graphical mockups. It will also help with layout consistency across pages and documents. You need it in your arsenal!
4– John Dunning’s “Export as Favicon”
Information and download: http://johndunning.com/fireworks/about/ExportAsFavicon
John Dunning is one of those extensions developers that has produced some amazing Fireworks extensions throught the years. I’m singling out his “Export as Favicon” here because, when I was still active in the Adobe user forums, how to export Favicons out of Fireworks was one of the most asked questions. Strangely for a Web focused design application, Fireworks doesn’t offer this ability natively, even in Fireworks CS5, so John has created this extension which excels at this very task. You create 16×16 and/or 32×32 pixels pages (or use the commands installked by the extension to do so) and export directly in the .ico format. Read the complete instructions on the page above for details.
For best results, I usually create pages with a transparent background. Fireworks creates new pages and documents with a white background by default so check this out when working on your favicons.
More Fireworks Resources
I’ve recently come across an article on Noupe.com that litterally lists “An Explosion of Adobe Fireworks Resources”. The author wasn’t kidding when she came up with that title.
From extensions, styles, auto shapes and templates to stencils, textures and other Fireworks goodies, this lenghty article lists a huge number of Fireworks resources with links to more at the end. It is well worth the bookmark and taking the time to explore those resources.
Conclusion
Whether you are new to Fireworks or have been using it for years, you should explore extensions because they will open up a world of new creative possibilities within Fireworks, or at the very least, they will help and speed up your workflow. Extensions usually keep working in Fireworks long after their release if the author stops updating them (which is sadly the case for many great extensions). So you don’t need to fear the an extension you’ve come to rely upon will suddenly stop working.
If you have any questions or have a couple of amazing extensions I don’t mention here that you use all the time, please leave a comment!
Enjoy!
I use Fireworks everyday and had no idea these existed. Thank you so much!
My pleasure Rodrigo! I will post again with any other gems I find worthy. The Fireworks community has many creative extensions makers!
Wow! “Guides Panel” es una gran extensión que no conocía hasta ahora. Muchas gracias por compartir
!
I have been designing wireframes and user interfaces in Visio (yes, I know) and am looking at giving Fireworks a go. What is the best way to get up to speed with Fireworks, which tutorials, youtube channels, books etc do you recommend?
Hello Geert,
Beyond what you can find yourself on Google, I’m not sure! I’ve been using Fireworks so long I rarely look for tutorials for it now. I recently came accross this Smashing mag article that has some Fireworks tutorial and ressources:
http://www.smashingmagazine.com/2009/07/27/tutorials-and-resources-for-adobe-fireworks/
The Noupe.com article I link to in this article also has a Fireworks tutorials section so it’s worth looking at.
As for resources and tutorials dedicated specifically to wireframming in Fireworks, I really don’t know. I mostly use fireworks for full graphical (final) mockups. For wireframes, prototypes, site maps and flows I’ve been using Axure RP for a while now as it’s dedicated to that kind of work (even more so than Visio) and I can iterate faster there at that stage of the process. It also offers far more sophisticated interactivity for high functional fidelity prototyping.
But for simpler projects I myself was thinking of using Fireworks earlier in the process and reusing these assets so, when I do, so I’ll post about it here!
Hi, Geert.
Not to toot my own horn too much, but for wireframing specifically, you might find a couple of my extensions useful:
The Greeked Text auto shape lets you easily create a stand-in for a text block, without having to use actual text: http://johndunning.com/fireworks/about/GreekedText
The Placeholder auto shape can stand in for an image. When you resize it, it automatically displays its current size, so it’s sort of self-documenting: http://johndunning.com/fireworks/about/Placeholder
Anyway, hope those help.
@john
You can toot your own horn as much as you want here my friend!
I didn’t know about your wireframming extensions as I switched to Axure for that part. I may switch back to FW for simpler projects so they’ll come in handy. Thank you for commenting and for your outstanding work for Fireworks!
I’ve used Fireworks for years but this post has really opened my eyes to using extensions. Here’s to productivity!
Thanks for your comment Josh! Indeed, here’s to productivity!
Thanks Stéphane — these are goodies
btw: Nice guitar
– even if it does have a locking nut (:
hehehe yeah… That locking nut is helping it stay in tune. Floyd Rose tremolos were all the rage in the ‘80s. Mine made my guitar sound better than the original (really). I really love that guitar!
Thanks for your comment!
Wow! These are just amazing..these are required especially when you are working on a lot of UI stuff
Indeed! I spend less time in Fireworks nowadays but these extensions still come in handy every time I do!
Thanks for your comment!