11 Reasons Adobe Fireworks Is The Best Design Software You Never Use

by 14 01/17/2012

Here is a snapshot of a fully functional web page, a detailed infographic and a print-ready data sheet. Any guesses on what they all have in common?

All three of these pieces were created using just one piece of software: Adobe Fireworks.

Now some of you might already be familiar with Fireworks, others will know it’s the one with the yellow icon in the Adobe suite and a good majority will be completely unaware of how Fireworks can fit in their personal design toolkit.

This is not unexpected: most designers are accustomed to using core Adobe products like Photoshop for their work and view Fireworks skeptically as a half-baked design tool that serves no individual purpose.

But as I, and a growing number of Fireworks enthusiasts have discovered, not only is Fireworks the best possible launching pad for all manners of creative work but it’s also a consummate design tool in itself.

The what and why of Adobe Fireworks

 

Let’s start with the official purpose of Fireworks as outlined by the folks at Adobe. Fireworks is primarily a tool for creating graphics for the web, screen and a number of devices.

However, instead of pigeonholing it as a ‘web design’ application, Adobe brands it as a more inter-disciplinary ‘rapid prototyping’ tool. Here are some examples of what that means for you:

  • Create Mock-Ups – Want to show a client how the finished web page will look like and easily incorporate suggested changes? Fireworks lets you quickly create a working mock-up.
  • Get more organized – Need to create a layout for a publication and organize large numbers of text blocks and images? With Fireworks you can easily plan, and build, a splitting image.
  • Create Vector Art – Looking for quick vector creation without becoming a pro at Illustrator? Fireworks offers handy vector tools, right next to its bitmap tweakers.

I know what you are thinking

You are thinking…  ‘so what? I still have to create the actual artwork in Photoshop’.

However, this is where Fireworks really works its magic because anything you create within the application is WYSIWYG and ready to go.

In essence, you might not even need to launch any other program if you are happy with what you create in Fireworks. And there’s a lot to be happy about. Here are eleven great ways in which Fireworks helps you design more productively, whether you just need a prototype or the finished end product:

1 – Design with pixel-perfect accuracy

Everything you place on your Fireworks canvas is exactly how it will appear in your export. And Fireworks lets you control the appearance of all the objects down to the exact number of pixels and precise axis coordination.

Say you want a 200 X 300 ellipse. Using Firework’s vector tools, you draw the ellipse and input the exact dimensions and positioning you want with numeric values entered directly into the property inspector.

Or, you can just use the scale tool to resize it visually and then drag it anywhere you want to. Just point and click.  There is no browsing through layers required (and, yes, Fireworks lets you work with layers and slices that retain their properties when imported into Photoshop).

2 – Build fully functional websites

Fireworks has a powerful web layer. You can create buttons, navigation bars, hotspots and rollovers, all from within the program. With the pages panel it is possible to create and organize master and sub pages, and then export working HTML and CSS files. The exported files can be customized through slices and optimization settings.

It is quite possible to create an entire functional static web site using just Fireworks. The generated code isn’t very tidy but it works perfectly.  For prototypes, mock-ups and basic web design, it has everything you need.

Even if you don’t use Fireworks to generate final web pages, it makes for a powerful combination with Dreamweaver.

You can quickly create graphics like buttons and banners within Fireworks and import them into Dreamweaver. Since Dreamweaver actually has a command for importing Fireworks HTML, the two applications share a streamlined workflow. Whether you create the entire page in Fireworks or just one part of it, everything can become a part of your final web page.

My favorite aspect of using Fireworks and Dreamweaver in conjunction is how easily you can switch between the applications. For instance, suppose you created the logo within Fireworks but now that it’s a part of your webpage in Dreamweaver, you suddenly decide you want to change its colors.

No problem.

All you have to do is right click the logo within Dreamweaver and choose ‘Edit with Fireworks’.

You will then be taken to Fireworks where you can choose to work on the logo using the original source file or as a standalone graphic. Once you have made the changes, you can simply click on ‘Done editing’ and you will be taken back to Dreamweaver where the modified logo automatically appears in its original place. Adobe products often share a unified work flow, but the ease of working with Fireworks makes designing in Dreamweaver a breeze by comparison.

3 – Build quick and easy vectors

 

Fireworks offers a lot of ways for retouching bitmaps and doubles as a powerful vector editor.  It’s this unique blend that makes it so versatile. For most vector editing tasks, you will not need to use any other application as Fireworks has a built-in collection of frequently used vector-based objects like polygons and ellipses as well as editable shapes like speech bubbles and flow charts. You can modify any vector object any way you like by using the object control handles.

4 – Remarkably easy to use

 

‘Easy’- and synonyms of easy- are probably the most frequently mentioned words in this article and for good reason.

Fireworks is no MS Paint by any measure but it boasts the lowest learning curve of any of Adobe products.

Photoshop can be intimidating for beginners and can put off the weak hearted from ever considering a career in design. But with Fireworks, you can start creating useful work much more quickly and gradually discover its immense capabilities as you become more proficient. It’s quite unlike the overwhelming feeling of ‘where to start’ beginners get with Photoshop and Illustrator.

And that’s not all

Here are more reasons to start using Adobe Fireworks:

5 – Create Rich Internet Applications

In addition to web design, Fireworks is also a powerful tool for creating interfaces for Rich Internet Applications (RIAs). And thanks to its powerful vector capabilities and native PNG creation, it’s highly effective in development for the iPhone.

6 – Design quick gradients

Creating gradients in Fireworks is much easier than it is in Photoshop. And with the control handles, you can do much more with them than you are allowed to do in any other application.

7 – Use the CSS-like styles panel

The ‘Styles’ panel is like CSS for Fireworks and works as the universal controller across all the pages in a document. When you make changes to a style, all the elements formatted with it change accordingly regardless of where they are within your document.

8 – Collect design objects

You can use the ‘Symbols’ panel to collect design objects that you need to use repeatedly across pages- such as the company logo. When you want to place it some where, you can simply click, drag and drop.

9 – Superior image compression

Fireworks exports to a variety of formats- JPG, GIF, PNG8/24/32 etc. – and with compression techniques superior to Photoshop. Fireworks uses PNGs as its own source files but can import AND export PSDs and AIs with layers, states, blends and most effects still intact.

10 – Use it for print work

A ‘controversial’- but very much possible- use of Fireworks is designing for print. Now before print purists take out their stakes, I know Fireworks utilizes an RGB palette at 72 dpi. However, I also know from first hand experience that it’s possible to create 300 dpi graphics and layouts from within Fireworks that print beautifully. Besides, when you want to quickly print out an A4 flyer, it’s just too tempting to resist whipping it up in Fireworks within minutes. Again, the ease and sufficient capability Fireworks offers often makes it useful in areas where it doesn’t have any business of being!

11 – The price is right

For what it’s worth, you can get Fireworks for a price that’s less than half of what you would pay for Photoshop. So not only do you get a great piece of software, you also get to save a lot of money.

Fireworks is powerful, easy and versatile. It’s a Jack of All Trades but also surprisingly masterful. And even if it’s not a complete substitute for other Adobe products, there’s a lot you can do with it. No matter what your design specialty or favorite software, Fireworks is a powerful launching pad for your next project.

Dust off that yellow icon and click on it. You’re going to love it.

Print Friendly

About 

Babar Suleman is a visual storyteller and a communication planner. He is interested in the interplay of words and visuals in the communication process and uses his diverse experience as a writer and designer in creating meaningful user experiences and effective branding strategies.

You can contact Babar at his official website or on the social media channels below.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

14 COMMENTS

Lawrence

I have long been a Fireworks user and agree with the evangelism. It’s the only static graphics program I use and it has served me very well; however, I need to upgrade to a newer version as i am clearly missing out on some choice features.

January 17, 2012 Reply

    Babar Suleman

    The latest Fireworks version- CS5- is definitely worth the upgrade. Importing/Exporting between Fireworks and Illustrator is much more effective/efficient with the ‘FXG and images’ format. Even linear/radial gradients are preserved.

    January 17, 2012 Reply

Jeff

Good post subject–Fireworks is definitely a neglected step-child of the Adobe Creative Suite. However I still rarely find Fireworks a worthwhile step in between Photoshop and Dreamweaver. Most clients don’t need a “working mockup” and are happy with static PSD ones. Probably won’t pick up in use until the code FW spits out is exceptional.

January 17, 2012 Reply

    Babar Suleman

    Thanks Jeff. I agree that Fireworks would truly become a ‘heavyweight’ if the generated code becomes tighter/cleaner.

    Even ‘static mockups’ are much easier to create in Fireworks than they are in Photoshop though. You can make client-suggested changes with a few simple clicks and then its a breeze to recreate the approved design in Photoshop. Plus Fireworks is great at doing so many things- and so quickly- that it is really useful besides just creating working mockups.

    January 17, 2012 Reply

Blaine MIyakawa

If you need something that has been designed in the “raster” format and need it converted to vector for cheap and with an easy process, check out “www.copyartwork.com”. They are amazing!

January 18, 2012 Reply

Erik Kubitschek

Hands-down, my go-to platform for all website development. It’s being integrated with Photoshop, with Photoshop Live Effects etc…
Not as robust as PS or IL, but it rarely needs to be for web design and development.

January 19, 2012 Reply

Mike

I agree, FW is the way to go for quick mockups, the only problem I have, even in CS6 is the rendering engine is weak. Those jagged lines in the vector images and even fonts do not look very impressive to clients. I was disappointed they didn’t improve it in CS6 which just reiterates Adobe just doesn’t really care to keep supporting this product. They just keep it as a relic so they don’t make the FW diehards angry. I will continue to use Illustrator for this one and only reason. The future does not look good for FW. What a shame.

May 18, 2012 Reply

    Isabel

    Sorry Mike… but what are you talking about when you say “Those jagged lines in the vector images and even fonts do not look very impressive to clients.”
    My illustrations and UI’s are impressive with Adobe Fireworks. Probably cause I know how to use it… which by the way is dead easy if compared to PS or AI – ;)

    http://dribbble.com/shots/401993-Kawasaki-Vulcan-1700-Classic-LT-Metallic-Imperial/attachments/65063

    Think lots of ppl talk about this tool but they don’t really know what they have in hands.
    Agree though Adobe should take it seriously. But it is also up to the users too to really find out more about it, like some of us did. Never regreted it btw. Maybe this way Adobe starts doing something about it.
    Cheers

    October 8, 2012 Reply

Simon Hibbott

I’ve been a strong advocate of Fireworks since I first starting designing websites 10 years ago, and still use it today. Even now I fail to use the functionality it offers fully – hence the search which lead me to your article.
Looking at your website I see you’ve taken your own advice from #2 and built your own website using this technique. Well done on practicing what you preach!

May 4, 2013 Reply

    Kathryn Aragon

    Glad you f ound us, Simon. Yes, we do try to practice what we preach. :)

    May 4, 2013 Reply

Babar

Thanks Simon!

May 4, 2013 Reply

susanta kumar muduli

Yes, i’m using FW. This is very good tool for creating web sites with quick image edit.

June 2, 2013 Reply

KD

In mid 2014, Still Fireworks is the best graphics software.

June 3, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>