Smashing Magazine - we smash you with the information that will make your life easier. really.

In fact, it is the tool of choice for information architects and web designers that build large corporate websites.

Adobe Fireworks is rather unknown and unused.

A bit contradictory. Don’t get me wrong, I’m a fan of Fireworks, but it’s not the tool of choice for information architects and web designers that build large corporate websites. Those guys are using Visio for IA, not Fireworks. Unfortunately, Visio is the standard in large corporations and most IAs are not using Fireworks.

Finally, come on the fireworks!!!

Very underrated piece of software, i use exclusively for the mock stage of my sites. Photoshop and illustrator will always have a place in my heart, but for combining an all in one web design tool you cant beat fireworks!!

I’ve tried using Fireworks a few times, and I’m just not convinced that my productivity would be improved by it enough to effectively learn a whole new package and way of working. OK, so there are obviously instances where Fireworks is better than PhotoShop or Illustrator, but given that, like so many others, I’m much more comfortable using those packages, I’m inclined to think that my downtime/freetime would be better spent improving my skills in PhotoShop and Illustrator than trying to add yet another package to my arsenal

It’s about time FW got some love in the design community! :)

It is a phenomenal tool – really the best of both worlds from PS and AI. Great post!

Great post may even make me crack open fireworks again!

@wez: I think you wanted to say “bring on the fireworks”… the word choice you made creates an altogether different mental image.

I Love it, i use Fireworks since 4 years and i like his simpilcity, and the feautere range ist very big, it have the best of Photoshop and Illustrator but only for the Web. , something it´s better to too in Photoshop like Image Manipulation that´s true, but for Prototyping it´s the best for me. It´s really a phenomenal tool, and it´s my big favourite, PS or AI too but it´s a smaller love !

Thanks for the great Post !!!!

I’ve been an Fireworks user for ages, and I can advice other Fireworks users to use Photoshop tutorials also, because you can learn a lot from them and it’s not that hard to translate Photoshop to Fireworks.

Thanks for the post. As a big Fireworks fan, it’s nice to see it getting some publicity.

Fireworks has been my weapon of choice for a few years now, quickly, here’s why:

Photoshop was designed for… (get ready for this) Photos! Thus the name. For people editing and manipulating photos, nothing works better.

Illustrator was designed for… (you guessed it) Illustrating! For illustrating or working on vector graphics, I wouldn’t use anything else. It is really good.

When it comes to web graphics though, PS is too powerful and has too many unnecessary options. Illustrator isn’t optimal—graphics for the web, unless you’re using flash or SVG are always going to be displayed as bitmap images, Illustrator is designed for vector work. This fundamentally doesn’t mesh well.

Fireworks, on the other hand, allows you to use any mixture of vector and bitmap objects but it always displays them in pixels (like you’d see them on the web). You have complete control over sizing and positioning of things (illustrator when exporting will size your image to fit the paths in it, this gives undesired results often). Fireworks has web-appropriate filters, effects, and styles. Then, maybe, most importantly Fireworks gives you the most control over how images are optimized and exported.

Bottom line: Fireworks is completely designed for web graphic, PS and Illustrator are not.

At last ! Fireworks has finally got some recognition. Great article.

good 1! :D

Great post guys !!!
In the last few days I have been feeling a little disappointed with my skills in Fireworks, but now I just got a whole new world to explore.

Keep up the good work.

Awesome article, guys. Thanks for giving Fireworks some love, as it’s really the unsung hero of online design tools. Even more so, now that the Mac & Windows versions have parity in CS3.

I’ve always liked Fireworks. Back when Photoshop didn’t have vector tools (v5?), Fireworks was the best tool for web design. I should really start using it again now that all the good tools come packaged together. Thanks for the perfect jumping off point for getting re-acquainted, Smashing!

That’s great collection of resources collected here. I’ve been with Fireworks since MX release, and soon enough it became the tool of choise for me. I was pretty much unhappy when Adobe bought Macromedia since i didn’t know what will happen to Fireworks, but luckly enough Adobe didn’t stop the development on it and with CS3 there’s so much more possibilities than ever before :)

Fireworks is a simple to use application, to complete a simple task, unlike photoshop. I know that PS has more advanced options in some effect-generating area, but, for web-development, by working in FW you’ll be more productive ;)
It’s simple to learn software, so start using it :D

Wow,

Great post once again! I learn so much things here! It’s amazing! I do not use fireworks for mock-up stage, I use photoshop… I could do all of these in Photoshop… What are the main advantage to use Fireworks vs Photoshop?

Thanks !

Wow! I love lists giving me more information. Great work!

happy to find good stuff about fireworks, thanks all for efforts

Just last night I was looking for some cool stuff for Fireworks…As always, you keep reading minds! Thanks!

Its nice to see Fireworks getting some attention it deserves.

I am great fan of Fireworks from last 4 years. I was in hunt of tutorials and best practices like given in that post. So a lot of thanx to smashing

very helpful links. thanks! i’ve been learning a lot from smashingmagazine. keep it up :)

After using Photoshop almost a decade, few years ago I’ve tried Fireworks because my colleagues used it and I was amazed, since than I’m using just Fireworks for designing websites or flash elements because is fast, reliable, stable, uses vector graphic much better than Photoshop and it’s really some cross-product between Photoshop & Illustrator. Of course for working with photos, printing materials etc. Photoshop is No.1, but for web it’s the best tool ever.

Too bad that even in version CS3 it still cannot open Photoshop PSD files well, meaning it opens it but have problems with masked layers, hope Adobe will fix this issue in next version.

Great post! Glad to hear that I am not the only one who loves Fireworks :)

I was almost almost going to switch to PS after using FF for 7 years as I could not find articles supporting it and was thinking Adobe is going to kill it. …this article restores my confidence in it. I am reinvigorated to learn more of it’s advanced features by studying the tutorials.

BTW Do you know where I can find a tutorial on designing an ebook cover in FF?

Thanks

Awesome post and resource section. Fireworks is great and is commonly underrated!

Hi, thanks for this concise overview of what Fireworks actually is, as well as all the useful resources. The timing of this article could not be better, as I am currently in the early phases of redesigning my website from the ground up to replace the WordPress template I’m currently using (and did not create). I will definitely give Fireworks a go now.

One questions I have is whether or not Fireworks has smart color management, specifically being able to re-color multiple elements at once. For example, right now using Photoshop, if I have various elements that all use the same color, and I want to change the color, I have to change the color of each element individually. I’d like to the be able to tag an element color with a “reference color,” so when I go to change my reference color all the elements change color as well. Maybe I’m dense and this is already possible, I just don’t know!

Again, thanks for the post,
- Lee

Thanks for coming out with the Fw article! We need to see more of these.

A lot of good articles there, it’s going to help my refine my Fw skill even more.

I’ve been a user since Fireworks 3, ages ago.. and love the program… it’s simply the best. Don’t be fooled by it’s dull and unattractive appearance, which I hope they will update finally in CS4.

This post is bulging with functional quality resources. In fact, it is rare when I make a written record of a resource. It must have earned its worth for that to happen. I noted several of these resources in my personal reference library.

I commend you for the obvious time and effort you dedicated to this post.

Continue to produce quality work.

Awesome, you guys make wanna go and buy this software now even when i know it and i dont use it. Im gonna give it another try, maybe i end up buying this.

I’ve been using Fw since v4 waaaay back, like many have commented here, and though using Ps and Ai when required, I can only praise Fw for web design and UI prototyping.

My wife uses Ps for her photography, which is it’s main intented use, and she gets great results with it, likewise with Ai when she’s doing illustrations. But I’m a web designer, and Fw is my primary design and creative tool. Now with CS3 including more features and workflow enhancements, plus the Ps LiveEffects, I’m set for a while.

Thanks for the top article Smashers. Keep it up!

such good effect you have taken and given us a good teaching on this adobe design it is simply appreciating very good work

Fireworks should be THE tool for Web Design but as stated here by many people it’s not still appreciated as much. Personally speaking I’ve used FW for many projects and of course in conjunction with PS & AI. It proved (FW) to be very fast an reliable and GTD like app for creating mockups. Another great aspect of FW is that it allows fast and accurate preview of the Web site layout and behavior which is crucial when dealing with clients wishes and inputs. This article motivated me to use FW for my current project so thanks SM for bringing that great piece of software back in the spotlight.

Thank for your tutorials.

Add me in the list of Fireworks users. I’ve been using it for exactly 10 years now and love it. I learnt how to make websites with fireworks, right when i gave up page Pagemill for dreamweaver. At the time photoshop (4) couldn’t do much for you anyway in the field of web design.

I actually started using photoshop for web designing only in the last couple years, but mostly because the company i started working at did not have fireworks…

Now i tend to choose one over the other, depending on the final design idea i have in mind, and the importance of photography in the layout. But still FIreworks is by far the best, fastest, friendly way to create and export web layouts. That’s what it was madd for and you can’t beat that.
peace.

Yup! When it comes to Web Graphics PS, ILL, FW can do the job but in Software Simplicity and Layout FIREWORKS is the first option. In fact the new creative suite of Adobe, interface was based on fireworks and flash.

This is what i observed! Love FIREWORKS

Great to see FW getting some props – aside from coding I spend 70% of my day using FW. After getting nervous that FW was about to bite the dust with Adobe ousting Macromedia, I was gearing up for an upgrade in my knowledge of PS, but FW goes form strength to strength.

My colleague a once avid PS user has even come round to my way of thinking : keep PS for photo manipulation and web stuff for FW. There’s nothing better.

Awesome post and resource section. Fireworks is great and is commonly underrated!

Excellent list, I have to check out some of these links.

Fireworks has always been my primary tool of choice for web design.

Yes, FireWorks rocks. I have been using it since 2005 and I am happy with the results.

Nice post by the way.

Tom.

comment 53:
> Using Photoshop for web design is like using an aircraft
> carrier to go get the weekly groceries.

Not exactly. To me it’s not the size of the app but its nature and workflow. A better methaphor for me would be that using Photoshop for Web design (or any kind of layout work) is like using a hammer to drive in a screw. It will achieve the intended result but it’s completely the wrong tool for the job and once the job is done, changes and editing are far less flexible.

Whether this is for the Web or for print, Photoshop is a terrible layout application IMO. If Fireworks didn’t exist, I’d create Web sites in Illustrator, not Photoshop.

Any vector based apps makes for a far more efficion design and layout app than a pure raster based app like Photoshop. Object/vector based apps offer a lot more flexibility and precision.

Like Paul says iun comment #24, Photoshop “offers obstacles around every corner to perform even the simplest tasks”. For example, just create a rounded corner rectangle with a stroke and a gradient fill at a specific pixel dimension. Creating it will be a similar job in both apps but, if you need to edit its corner roundness, give it just 1 rounded corner or modifiy the gradient, these are just a matter of modifying the existing object settings in any vector based app like Fireworks. In Photoshop, you have to re-do it from scratch. That is just a tiny example of where any vector based app is better suited to layout and design work…

i love fireworks so much cos u can go to internet and click google and type wallpaper after you do that click on image and then search up and then click on your flavourite image and then copy onto fireworks and then pasta and then you go to file and import click on your flavourite pictures and then click open and it will open up

I used Firework a few time, but no have much plugin and element of design is developed for it. But Firework CS3 have “Photoshop live” filter, that’s great :)

@lee (comment 53) – the simplest way to achieve this is through the search & replace dialogue where you can replace any instances of a colour with a different colour throughout the entire document.

This is a great ressource. Thank you! I have been using Fireworks for maybe a year or two now, and keep loving it for its simplicity and flexibility. I was wondering if there were sorts of extensions, a bit like the Photoshop brushes, that allow you have more shapes to choose from: like undulate lines, hearts and what not in addition to the straight line, squares, circles…

Also, is there a good ressrouce for free/affordable Fireworks filters of decent to good quality ?

Just installed Fireworks CS4 and found it does not use the monitor profile to display colors correctly!

Bizarre. Monitor is profiled to use colors correctly, photoshop is fine, but Fireworks doesn’t show clients’ palette of colors correctly since it doesn’t use the monitor’s ICC profile.

How can Adobe do this with an app for design professionals? I need my clients’ colors to be correct and use the monitor profile. Come on Adobe!

thanks.. very nice

I would like smashing magazine to post ornament tutorials in 2009. I could not find on the web. Thanks!

Great sharing , thanks.

Dude whats next, Only ppl using it will be totally out of sync of blogging.

best help

@ Mr Locke

Pity that I am not allowed to view streaming videos from work and my internet connection at home is messed. Do you by any chance have a text tutorial on designing a website in Fireworx?

I’m definately interested.

I’ve been trying to move to photoshop but fireworks packs so mush punch that I’ve had to reconsider my decisions so many times. I use fireworks for my web design mock-ups and love it. This article will help me supercharge my skills because all I know about fireworks I learned mostly from trial and error. Thanks big!

Who can beat FireWorks when you want to do anything in Design :)