Fireworks Pro Series: Where Does Fireworks Fit Into Your Workflow?
Tutorial Details
- Program: Adobe Fireworks
- Version: CS4 or higher
- Time Required: 15 mins
Today we’re bringing you the first post in what will be a series of posts focused in on Fireworks for Web Designers. We’ll be taking a deep look at just what Fireworks has to offer to web designers, and why, when used properly, it’s the perfect companion to Photoshop. Get ready to take your understanding of Fireworks to the next level!
About the Author
Tom Green is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice. He is an Adobe Community Expert, Adobe Education Leader (Post Secondary), Community MX partner and was listed in Adobe’s Top Ten Most Influential Flash Designers.
Tom has written several books (9 in all!) and extended tutorials on the topic of Fireworks and web design over the last 7 years, so he’s a natural fit to guide us through this incredible program. After this introduction, Tom will be guiding us through the wonderful world of Fireworks with several video tutorials. Alright, now that you know a bit about Tom, let’s dig in!
Series Introduction
“Photoshop is a hammer and Fireworks is a screw driver…”
Let’s start this series by being straight with each other: I am not here to convince you that Fireworks is better than Photoshop for web design. If you are a confirmed Photoshop user and you use it to design web sites then don’t expect me to attempt to pry Photoshop from your fingers. All I expect from you is that the comments below don’t get populated with "Photoshop does this better because …." We have already had that discussion.
I have been asked by Brandon to do a series of articles around where Fireworks fits into the general scheme of things when it comes to digital workflow. To be honest I have been looking forward to this opportunity for a while because there is a real danger in this silly business to latch on to a tool and not give it up. To me, Photoshop is a hammer and Fireworks is a screw driver. Thus you can understand when I tell you I am tired of watching people waste their time driving in screws with a hammer or screwing in nails.
I have been using Fireworks since it first hit the market and I can tell you Macromedia didn’t have a clue at that time how big the web was going to become. It was trying to come out with an easy-to-use graphics editor that might be used in Flash or Dreamweaver. I got hooked on it because I was a Director user who found creating buttons in Photoshop – CHOPS anybody – was tedious and time consuming. When I discovered I could do the same button in Fireworks in five minutes that took me 10 minutes to create in Photoshop that was it and I haven’t looked back since. Just keep in mind I still use Photoshop when I need to do something that Fireworks can’t do such as "content aware" and several filters.
The other aspect of this series is that Adobe has done a rather lousy job in positioning Fireworks in the market. It wasn’t until about the CS4 release that they figured out something quite a few people already knew: Fireworks is a rapid prototyping tool.
That is one of the things I plan to stress in this series. As a prototyping tool, Fireworks gives you the opportunity to:
- Create web page/web site prototypes.
- Create Catalyst/RIA interface prototypes
- Create AIR application prototypes
- Create mobile interface prototypes
The problem is people see those four aspects and stop there because they lose attention before the word "prototype". They don’t go further and discover that each of those uses requires a "next step" which usually involves hand off to a pro charged with the task of actually putting the darn thing together.
The word ‘rapid" is there because, quite frankly, clients do ask such questions as : "What does this project/thing you are suggesting look like?" At that stage you don’t want to spend a lot of time and money answering the question. Fireworks offers you a rather efficient solution to answering that question.
Though I plan to dig deeper into these four aspects of the application in subsequent articles, let’s step back and take a broad view of Fireworks before we get specific. The areas I highlight are not a "favorite" list. They either dispel "myths" about Fireworks or highlight a major productivity feature you may … or may not … find useful. In no particular order they are:
Fireworks creates web pages.
No it doesn’t.
Fireworks exports HTML and/or CSS layouts that will need a lot of extra work by someone with web design or CSS design and code chops. The purpose of being able to export HTML or CSS is to give the client a look at what you are suggesting and to give the web crew a starting point for the project. I have yet to encounter any Fireworks project that went straight to web from the app.
In fact anyone who uses Fireworks to create final version web sites, should turn in their Fireworks CS5 license.
Fireworks optimizes web graphics
For several years now, Fireworks has contained an optimization panel that allows you to compare various optimization settings for jpg and gif images and do a 4-Up quality comparison with the original . This is not here to poke a stick in the Fireworks/Photoshop debate but to actually highlight a rather commonly overlooked productivity feature of the application. In fact , the jpg kicked out of Fireworks is actually smaller and better than the one kicked out from Photoshop. Don’t take my word for it. Greg Rewis, Adobe’s Worldwide Evangelist, has also discovered this and blogged about it.
Fireworks contains a symbol library
Actually it is formally known as the Common Library . This panel comes jam-packed with useful symbols that can be used in your prototypes and these symbols can be added to pages and, in the case of the Flex symbols, they can be swapped out for the real deal at a later date. Just keep in mind these symbols are nothing more than icons but they sure make life easy when you need to add a close box to some chrome.
At the same time Fireworks does contain the ability to create interactive buttion symbols, pop down menus, rollovers and a number of interactive features and effects we have become used to over the years. These sybols are kept in a Symbol library and can be reused as needed.
The Fireworks FXG format allows cross-application compatibility
Introduced in Fireworks CS4 the FXG format is what makes Fireworks an interface design powerhouse when it comes to creating Rich Internet Application prototypes. In fact you can export a multipage, multilayer design out of Fireworks as an FXG file and open it … complete with intact pages and layers … in Flash Catalyst CS5. One little-known fact about this format is you can save a Fireworks document as an FXG file and open it in Illustrator CS5. Also let’s not forget that “roundtripping” has been a feature of the apps for years, meaning you can, for example, place a Fireworks image in a Dreamweaver document and actually edit and change the Fireworks document from within Dreamweaver.
It’s a two-way street between Photoshop, Illustrator and Fireworks
Fireworks CS5 can open Illustrator and Photoshop documents and save documents in those two apps’ native formats.. Fireworks supports Photoshop layers, layer styles, layer comps, vector layer and blend modes common to Fireworks and Photoshop. Exceptions are adjustment layers and clipping groups. If you need these they can either be flattened or ignored.
You may notice in the Figure that you can only save files to Illustrator 8. If you are hard core this is most likely your excuse to give Fireworks a pass. That would be a huge mistake.
In the previous point I highlighted the FXG format. If you do that the supported vector fill effects are retained as vectors which means Fireworks designs, opened in Illustrator can be easily converted to hi res images for CMYK-based print jobs or simply opened in Illustrator for further manipulation.
Fireworks can be used for mobile interface design
The introduction of the CS5 collection of products also marked the debut of Fireworks in Device Central.
Choose your device and click Create to open Fireworks. When Fireworks opens, the canvas is sized to the screen size of the device. From there create your design and select File> Preview in Device Central to see your page in the device. I will admit the implementation is pretty lame compared to what you can do with other applications. At this point in time you simply get to see what the page looks like in the device. If you want to create a multipage design and scroll through the pages, don’t bother. You only get to see single page views.
Fireworks Symbols have “Drag-and-Drop” Integration with Flash.
Create a multi-state button in Fireworks, drag the symbol from the Fireworks canvas to the Flash stage and a fully functioning Flash button symbol will appear in the Flash library. I have also been using Fireworks to create practically every interface element I have ever used in my books, tutorials and classes for years. In fact I once used a fully functioning Flash video skin that was totally created in Fireworks in one of my Flash Video books just to prove that Fireworks should be invited to the party.
What designers also tend to overlook is that Fireworks does create GIF animations and these animations can be output as .swf files for use in Flash or, get set for it … After Effects CS5.
Batch processing in Fireworks is a workflow essential
This is one area where Fireworks is a time-saving behemoth over Photoshop. Though you can create Photoshop actions to resize,rename and reformat folders full of images … you need to create that action. Fireworks has Batch processing located at File>Batch Process . From there you simply identify the files to be processed, what you want done to them and where they go. I have processed folders containing a few dozen images taken on my Nikon D200 for subsequent upload to Flickr. From start to finish the process rarely takes more than three or four minutes.
Conclusion
As I said at the start the intention of the piece is not to fan the "Fireworks vs Photoshop" non-debate debate that has been going on since the app hit the street back in the Macromedia days. When Adobe purchased Macromedia there was some serious money riding on the fact the Fireworks was about to be tossed onto the same dust heap as Freehand. That didn’t happen and much of the reasoning behind that was because Adobe never saw Fireworks as being competition for Photoshop. Instead, over the years, Fireworks caught the attention of web designers, RIA designers and mobile designers as a way of quickly bringing their ideas to life for their clients. In certain respects, the evolution of Fireworks into a rapid prototyping tool was driven more by what users were doing with the app and telling Adobe about it than the other way around.
Over the coming weeks, I plan to to do just that – tell you what Fireworks users are doing with the app – and to show you how the app can fit into your day-to-day workflow. Whether you choose to to give Fireworks a whirl is up to you but as we move into the multiscreen environment that has suddenly cropped up Fireworks and photoshop will become even more complimentary products that competitive products.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Tom Green
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I like Fireworks (CS5)
But I think the text-rendering is very bad compared with Photohsop.
What do you think about this ?
You aren’t going to believe this, Benoit, but text rendering in this rev of Fireworks is a vast improvement over what we used to have to contend with. I agree, considering the fact Adobe is huge in the type and design fields, that this feature is sadly lacking.
I am hoping it gets addressed in the next rev but, if I need, fine typography, I’ll head over to Illustrator and bring it in from there or rasterize it and heave it into a Fireworks layer.
I’ll just pile on here and agree… the font rendering in Flash has always been the gold standard (with sliders to control aliasing)… I once heard that there was a good technological reason why we don’t get that level of control in PS and FW, but it doesn’t detur me from wanting it anyways ;)
I finally tried Fireworks and found out that as a prototyping tool, it is great, but as a designing tool, it is still not at the level of Photoshop. And actually, after having seen the power of Fireworks, I would really love to have the ability to design websites in Fireworks !
You can absolutely design websites in Fireworks! What’s missing in your opinion? I only need to bring Photoshop in for some complex graphics with loads of filters, textures and brushes or for retouching. Everything else can be done in FW, and much quicker at that. It can also be used instead of Illustrator – at least to the to the degree AI is used for web design.
Photoshop was the king in the years of effect-heavy, 3D styled, sliced designs. As designs became much lighter and created with CSS in mind, Fireworks is all you need 90% of the time.
My first point makes it clear you can “design” web sites in FW but you are going to need to coder or a solid CSS/HTML background to wrangle the “starter” code generated by Fireworks to an acceptable level.
I don’t remember why I quit trying to design with Fireworks, but I was confronted to a lot of problems.
So as I didin’t remember, I tried again for the past 4 hours. I imported a photoshop file (since I’ve already began to design things on the website i’m working on). And believe me, Fireworks is sooo buggy with photoshop groups that I’ve spent 4 times more working on Fireworks than on Photoshop ! For very simple things !
And at the end, as I wanted to save my work, Fireworks said “an error occured” !!!!! Impossible to save my work…. 4 hours lost !
Fortunately, that’s only 1 hour work on Photoshop.
And as a general feeling, it seems that Fireworks is really not stable. And I have the licence.
Honestly there is no point whatsoever in trying to learn Fireworks by importing Photoshop work. Start from scratch and use the advantage of object based design Fireworks has – the whole beauty of it is that you don’t need to copy Photoshop’s lengthy workflows.
Just open FW and start placing objects in your layout, then styling them.
Yes, I understand, but you don’t have one new webdesign project everyday, so I started with the one I was working on currently.
About the bug, I found why : it was because I copied one object from one Fireworks file to another. If you close the other file, it saves it…. Strange software….
Hello ! Me again…
So I’ve used Fireworks as a design tool for several projects now, and it is really interesting for many reasons (styles, symbols, pages,…).
BUT, and it is a real big “BUT”, when it comes to designing high-end interfaces, with high-end design, like for fashion, it is really not adapated.
The anti aliasing of fonts is really horrible…. The antialiasing in general (for round corners for example) is not good. It reminds me of Adobe Flash antialiasing, which is just not possible…. And you’ll tell me that who cares, because the fonts won’t appear as is in the HTML document. My client cares…
So after some good works on Fireworks, I must come back to Photoshop for some high-end clients.
I was excited to read this article but, sadly, I don’t feel like I learned anything that wasn’t already discussed in previous posts about Fireworks vs. Photoshop. I understand that the goal was not to say why Fireworks is better than Photoshop but I didn’t find anything in this post to give any examples of when I would want to be using Fireworks instead of Photoshop. Flash, mobile apps, etc. that were talked about don’t really have much relation to web design, in my opinion. This is not the the blog about Flash.
I’d like to see some real examples of where Fireworks makes sense to be used over Photoshop rather than how it’s useful in mobile interface design, AIR app design, and Flash.
re-read the conclusion. It sounds like your answers are coming.
Yep – this is actually just the introduction post for a massive series that we’re creating… check back next week to see the first big video of the series where we start to actually dig into the subjects that Tom introduced here ;)
As Brandon says I have been working on other installments … so stay tuned.
I do want to address the mobile issue, though. Whether you care to admit it or not, the day is not far off where mobile versions of web sites are going to have to be produced. Again, this is an area where Fireworks might find a niche as a prototyping tool. As it currently stands, being able to see one page at a time in Device Central is not exactly useful but it is a first step in the right direction.
The other point I think you are missing – and should become eminently clear in the series- is that Fireworks is a killer tool for creating stuff for projects destined for a multi-screen environment. Some of the stuff it can do for Catalyst and Flash is quite remarkable.
This is really awesome. I’m just new to the web design field, although as I have a computer science degree the coding side is not all that different. The point is I am not hung up on an editor (tried both and struggled to see the advantage for my small designs that I couldn’t do with GIMP), and having a really good starting point for an editor is great. Thanks and I look forward to reading more of your posts !! :P
That’s great – thanks for the comment Sam!
I have been using Fireworks since the Macromedia days as I appreciate the speed that designs can come together. I do use Photoshop for the more complex layer effects etc, but I keep it to that if possible. I think Fireworks could hold a stronger placement in the Adobe portfolio if it was marketed in a way that better explained it’s purpose and feature set.
I for one am really looking forward to this series, for all I have been using the application for years I am positive I (and many others) have a lot to learn. This is partly due to the massive focus on Photoshop within tutorials, and a distinct lack of anything for Fireworks.
I am also of the opinion that the more attention we can bring Fireworks, the more people will use it and the better the chance that Adobe will give it some extra development attention – hopefully adding the tools and features that would make it an even more comprehensive design tool.
I look forward to the next article…
Interesting, I’ve always used Photoshop for web design, I’ve put off Fireworks for years mainly through lazyness but it appears from this post there is a lot of time to be saved with the Fireworks workflow and a lot of awesome features to boot.
Now I just need a tutorial for ‘finding more hours in the day’ to learn Fireworks, or perhaps ‘how to live without sleep’?
Fireworks is indeed a true time saver. Here are an other 50 ways how to save time in screendesign. http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html
Thanks Andre! Really great article.
Thanks! that’s a great comparison. Most of my colleagues they use PS for web page design. I really don’t want to see them spending so much time on unnecessary work. FW can save 90% time of production. (except the font anti-alias problem though)
I’m glad that Fireworks is finally getting the exposure it deserves. I strongly agree with the quote “Photoshop is a hammer and Fireworks is a screw driver”. For me, UI = Fireworks, actual photo manipulation = Photoshop.
Fireworks is much easier for developers to work with too, you simply click on an object and it instantly tells you it’s position, size, colour and the filters applied you don’t need to measure it like, or hunt through layers.
But, like you’ve highlighted, it’s not easy prying people away from the tools and quirks they’re used to in order to get them to try something new (they may actually save them time!).
Mark
Thanks for the comment Mark – I agree that it’s about time that web designers started giving Fireworks a second glance. I’m a die-hard Photoshop user myself, but I’ve already started incorporating FW into my workflow after seeing some advanced parts of this series. I think the key point here is that FW doesn’t replace Photoshop, it compliments it. ;)
Cheers!
I’m going out right now but seeing this new series here on NetTuts makes me REALLY happy! I’ve always looked at Fireworks without actually understanding it and, as always, you provide me with the infos and tools to do what i need to.
Thanks a lot :)
I have been a web designer for close to 10 years now. I regularly meet people coming into the industry at meet up groups in London and I always tell them the same thing. Using Photoshop for prototyping is like using a Ferrari to pop down to the shops. Sure, Ferrari’s are great, as is Photoshop, but it wasn’t designed for prototyping, or any form of web design, it was designed as an image manipulation tool.
I do use Photoshop for building textures and backgrounds, things that Fireworks wasn’t designed for. But for buttons and other interface elements, Fireworks is so much faster and easier.
I’ve owned every version of Fireworks since the Macromedia days, and I keep trying to find a place for it in my workflow (especially since Adobe killed ImageReady!!!), but even as of CS4 it’s felt like a buggy, hamstrung hybrid of Illustrator and Photoshop. I think a more apt analogy than hammers and screwdrivers, is that Photoshop is a fork, Illustrator is a spoon, and Fireworks is a spork.
Yeah! I can’t wait for more Fireworks attention. I started in web design about 4 years ago coming from a print design background. I started right away with Fireworks and found the drawing tools and page layout MUCH easier than Photoshop. Just the master page and multiple page features alone make it awesome. There are so many great design elements that can be made quicker in Fireworks so I hope Adobe does a better job highlighting how useful Fireworks really is.
Tom, I’m looking forward to the remaining installment of tuts base on Fw.
Time to fire up that bad boy and take it for a spin!
Thankyou, I’ve used Fireworks for years and have always preferred it to Photoshop (although I also need to use it). Great post =)
I’m glad you could shed some light on to Fireworks for me. I haven’t used it at all because I do everything on PS. Hopefully I can get it into my workflow. Thanks!
I’m a firm believer that Fireworks is the better tool for web design. Though I prefer to design work “in browser” now, i would chose Fireworks over Photoshop every time! :)
Adobe Fireworks finally finds its place in WDTuts :D
Blimey, I feel like the boy who went to bed in B.C. quietly praying to the new God Fireworks and then woke up in A.D.! ;)
I love FIreworks CS5. I find it sooo much faster and more efficient than trying to do site design in PS.
I do however agree with the comments above about text rendering at smaller sizes. While it’s a lot better now than it used to be it seems that there’s still a little way to go. Come on Adobe – sort it out.
Keep the FW tuts coming!
Photoshop’s strength is that it can tackle “nearly” any task, regardless of whether it was designed for it or not. Otherwise it wouldn’t be so popular. Interfaces are regularly designed in PS on nettuts tutorials and there is little hassle from the people mimicking the tutorials or the creator.
I wouldn’t mind trying Fireworks, it sounds like a specialized but powerful application. Let’s not forget that Adobe charges a lot for their program, not everyone wants to spend a ton of money on software.
Just as people are told to get gimp if PS is too much, people should be able to use PS if they don’t want to fork out for another Adobe program.
That’s not to take away from Fireworks at all. If it was designed for prototyping, then it must do it very well. :)
Hello, nice series with Fireworks. I would like to know if it’s possible to create better printing with Fireworks? Is it possible to export to PDF with better text-resolution, it’s always pixelized…
This is an excellent article. Thank you for the information! Personally, I really like Fireworks.
Ok, I must admit, I nearly skipped this article, thinking “Why do I need fireworks? I didn’t like it in the past, doubt its better now.”
But after reading this, I have a whole new interest in the program. See when I looked into it last, I mostly saw tutorials on how to do super basic websites with sliced graphics, and I lost interest quickly.
I can’t wait to see what you guys have in store!
im a newbie web designer and Im learning the basix of PS (your tutorials help me a lot :) ) but, at the very first time I always thought: “developers are not idiots” and there must be a reason if they “created” a specific software for web. So, I think it was an extended marketing problem and thats why after PS (because is important for finding a job) I will learn FW or maybe I could learn both at the same time….Thanks
(sorry for my english)