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.
