Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
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!
"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.
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.