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!!

Great article!

Thanks! (Dugg!)

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

The Link [imasters.uol.com.br] is in portuguese, not spanish.
By the way, I’m in the group of the people who prefer Photoshop than Fireworks. Let’s see if this article is gonna change my mind. ;-)

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!

Well darndiggity…. I used to use fireworks, but that was 6 years ago… I then switched to photoshop and now i’m getting the feeling i should start switching back…. or at least step down from photoshop and start using illustrator for webdesign… argh…

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.

fireworks is definitely better for web layout ‘n design. i’ve been using it since it’s conception along with photoshop/illustrator.

photoshop/illustrator is better for focusing on achieving a more complex image/photo/illustration effect. it’s a good thing they’re so integrated. although everything can still be done in photoshop, fireworks is more efficient. this is a superb article.

another factor to consider: fireworks is so much cheaper than ps/il and it can do everything a site design needs(especially with clean web2.0 designs).

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 !!!!

Great article, but I still prefer working in photoshop to create a mockup for a website, send it to a client to review and when done: slice it up and convert it to CSS! I guess it just depends on your own taste…

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.

Great post! I’m also a Fireworks lover — it’s so much easier to use than PS. Just in case you needed yet more links, here are my Delicious Fireworks links.

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.

I always use Fireworks because it’s so much easier to use than Photoshop :D
Great Post!

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

I’ve used Fireworks almost exclusively for web design for the past 6 years. It’s just a hell of a lot more conducive to rapidly building a site than Photoshop in my own opinion. And the export options are brilliant.

good 1! :D

Finally Smashing Magazine recognises Fireworks. A far superior tool for web page mock-ups. Massively underrated and far easier to use than Photoshop. Great article. Thanks.

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.

I absolutely LOVE Fireworks, I do most of my work in it. for advanced photo-editing PS is king, but Fireworks makes it really easy to design for the web very fast and with high quality too. The pages feature is really great. Thanks for this awesome roundup!

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.

After 5 years of intense photoshop use, switching to Fireworks a year ago has been a refreshing event. I am more creative and the app leaves a much smaller footprint. My occasional visit back to the big PS has left me frustrated every time with clutter and obstacles around every corner to perform even the simplest tasks. A simple yet powerfull interface lets you focus on being creative!

If you are a web developer/designer then you should be using Fireworks. Make the effort and learn the app. You wont be disappointed.

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!

Thank you SM!
I’m in love with Fireworks since v.4.
This is definitely the best tool for web design!!

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 :)

You guys rock! Thanx for this great website. I found out about this site 6 months ago and I’m lovin it so far. I know Fireworks is good and it’s great you guys point it out!

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

Thank you for giving Fireworks its day in the sun. It is far better than PS for designing websites, and I hope it’s around for a long time.

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 !

Thanks! I really prefer fireworks over photoshop, fireworks works much easier with great results, especially for web usage.

Great article.

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

I’ve been using Fireworks since version 4 and use it for pretty much all my web graphics work.

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

“I could do all of these in Photoshop… What are the main advantage to use Fireworks vs Photoshop?”

- Read the post - maybe you’ll find out……

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

Thank you for the post!

I have been using Fireworks for about 1.5 years now and I find it more efficient than Photoshop when it comes to Web UI works.

I never took Fireworks seriously until about 2 years ago, when I went to an interview for UI Designer position, the hiring manager told me that she couldn’t hire me becase I didn’t know Fireworks. Imagine my shock! A manager decided not to hire me because of the software I chose to use, not because my design capability, critical thinking, attention to detail and team player quality.

Anyways, I turned my outrage into positive energy and picked up a copy of Fireworks and digged right in.

Now, I just can’t go back to Photoshop anymore for Web UI work. Fireworks is so much easier to use for creating UI. I don’t need to stop to create my design. I simply create it. :)

Highly recommended!

Its nice to see Fireworks getting some attention it deserves.

Very usefull links, this is another tutorial for how to make a vista button menu, and change the all style color in one click, very simple and easy Link [www.randallwebdeveloper.com]
Is in Spanish, but is step by step with images.
enjoy it.

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

I use Fireworks for all web related works.. Its easy.. and you can do it really faaaast.. Fireworks Rules..

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

Awesome article (as quite usual for Smashing Magazine!). I think Fireworks could be the -definitive- tool for prototyping and web design but … there are some inconsistencies and ingenuity in the UI that (sometimes) could drive you crazy!

Four examples:

- the slice-name field in the property inspector is waaaaay too short and not resizable. Try to write “headNav_item2_over_eng”!;

- the slice-name field is NOT CaseSensitive! Woah! In a certain way … let me explain it. Try to make a slice and name it “sliceoff”, then unselect it and reselect it, now rename it “sliceOff”. Unselect, reselect and … ta-daa! … the name is still “sliceoff”.

- you cannot find &rename slice-names (and it could be a great timesaver if you have to make a (for example) spanish version of the site and you would like to substitute alle the “_eng” occurency with “_esp”);

- create two slice areas in the same document; define them as “gif” and “index transparency”. If you set the Matte Color for one of these gif’s you have set it for ALL. The Matte Color attribute is document-related, not slice related! This could be a silly issue, but if you’re planning to do some icons that have to be “gif “AND simulate alpha trasparency over different backgorund (one dark and one light) you have to make them in separate documents.

I think that the serious web designer should make Adobe aknowledge of these (and others) small problems. If they could fix them FW would be perfect!

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.

Fireworks is just a great tool for web designers. I’ve been using it 4 years now and find it really simple and easy to use.

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

As inconsistencies there is one (big) annoying issue for me that it appeared in CS3 version, and wasn’t in the 8 ver:
- when you have more than one layer into a folder(layer), try to drag&drop any layer(object) to be on the top of the others. Ha-ha..you can only get it 2nd. to get it to be the 1st one you have to move the f1st layer to actually become 2nd… pretty lame!

FW has another issue when working on big files (size/resolution), but having to work on a file like that rarely happens :D Usually all things work smoothly on 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

?????
Confusing!
i think we should not mix concepts as IA is not equal to web design: Visio, OmniGraffle… are tools for information architects. Photoshop, Fireworks, etc… are tools for web designers.

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

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

If you don’t think your productivity will increase with Fireworks, just try it and see how many LESS STEPS it takes to create a simple button for your web design.

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
drawninblack

I’ve been a Fw user since v4. Love it. After Firefox and Outlook, Fw is my most used application. I was terrified when Adobe bought Macromedia, that they would rape, bloat, or abandon my beloved apps. Thankfully this didn’t happen.

A lot of peers I’ve spoken with look at me strangely when try to tell them you shouldn’t be using Ps to design, web or otherwise. Ps is graphics editor, not a design tool. Whenever i open Ps it surprises me how much of a pain things can be.

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.

One of the things I dislike about Fireworks 8 is that it will not save 32bit PNGs with Alpha transparecy correctly if the image has any white in it. Granted you should use 8bit Firework PNGs for the web, I prefer to use the 32bit ones for Flash.

The other thing is that Fireworks’ color palette is pretty weak compared to Photoshops, all they give you is the basic Windows color picker. And another thing is fonts, Fireworks is not great at styling fonts.

Fireworks CS3 is pretty sweet though, the new UI symbols built in make it even easier to make sample forms in your web design mockups.

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.

I like Xara Xtreme for a quick layout creation
I used FW once and it´s OK but I can leave without it :))

greetings

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.

I’m glad to see fireworks getting some recognition. When I started at my new job 6 months ago, my creative director turned me onto fireworks right off the bat. Ive been using it ever since and haven’t looked back. Dont get me wrong, I still use photoshop and illustrator when I need to, But I use Fireworks at all costs. “Paste Inside” is so damn cool. Great article - I hope to see more Fireworks related threads.

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.

Thanks for all the comments everybody. I’m glad the resources are helpful. And I appreciate the debate and counterpoints as well. Its great to read all the opinions and further resources brought up in the comments. Thx.

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!

Thanks a lot, Smashing Magazine ! Checking your site everyday for months now (maybe years actually, time runs fast), I was waiting for THIS article for ages. I use Fireworks for most of my web design and rarely face the needs to open Photoshop or Illustrator.
Big big thanks again, you’re still gonna be one of my start pages for a long time.

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

Thanks for pointing out the usefulness of Fireworks!

Muchas gracias por los tutoriales, por todos!

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.

I’m a huge fan of FW and use it daily for my mainstream work as well it being the subject of most of my articles for Adobe and Community MX.

Thanks for the mention in your article, btw. Just a point though, Community MX has many free articles and tutorials.

Thank for your tutorials.

FINALLY!!!!! Fireworks gets some recognition!!!!!! This app is by far the greatest app for web graphics there is on the market. If you like PS and AI, just imagine both of those in 1 much more simple application to use. I used to use Photoshop until a friend of mine told me about Fireworks, like most uneducated designers, i dismissed it immediately. One day I decided to pick it up, and I have never put it down ever since. Just for those who may think, Fireworks is for amateurs, many of the top design firms in the world use it as their primary web design tool, collaborating with PS for their nice Brush system. Don’t be fooled, you can easily create almost anything in Fireworks as another designer can in PS and in much less steps and time. What a gem this application is. It’s to bad it’s so underrated and only now getting attention from the community. I HIGHLY RECOMMEND this tool to anyone from a novice to an expert, the learning curve is extremely short and its a fun application to fiddle with.

One more thing, for those hardcore PS users that don’t like to reach outside their “bubble”. I was one of you a few years ago, until I opened my eyes and realized PS isnt the only tool out there and picked up Fireworks. Never will i go back!

Good job Smashing Mag, thanks for getting this up!

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.

thanks for the roundup fireworks is awesome, i always fire it up before photoshop

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

Brilliant article guys. I’ve been using Fireworks for rapid prototyping for some time now, and I absolutely love it!

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.

Adobe Fireworks is really amazing. A web designer should use Fireworks in the Link [] projects. I think it is easy to learn specially when we have fireworks tutorials.

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

awesome resource.
long live fireworks, it’s easier than photoshop

thx

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

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

Just!! AWESOME! thanksss!! from..Colombia

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

Nice post by the way.

Tom.
Link [www.KPrints.com]

Hi,

can u make something like this in photoshop

Link [img225.imageshack.us]

thanks

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…

@ Lee (comment 54)
> 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!

Unfortunately, no it is not yet possible and this is a request that has been made to the FW dev team repeatedly for years. Please join your voice to the choir and request it as well here:

Link [www.adobe.com]

Despite all its strenghts, color management is really one of Fireworks’ weakest areas. To me it is actually downright primitive when dealing with colors. Apps like Illustrator and InDesign (FreehAnd, Quark, etc, etc) have had sophisticated color management features, including global color swatches (what would permit you to do what you want) for many years now. Why this area of Fireworks still has not been improved is beyond me. Maybe for the next version…

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

thanks for the great article and awesome tutorials - very useful! I love working with fireworks cause it is so handy and not too complicated.

thanks for the great article
i like to share with you this styles for fireworks
Link [www.icxdesign.com]

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 :)

This is such a great spot for designing… Thank you. You are such a big help to me… Hope you’ll post more effects…. God Bless!!!

@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.

Wheres the download… ?

hola !!! muchisimas gracias por los ejercicios, pero cuesta mucho ya que tengo que traducir hasta poder realizar el ejercicio !! pero son muy buenos !! ojala pronto salgan versiones en español !!! thank you !!!!

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 ?

Nice article!
Now CS4 is available I have my a post regarding the new features of Fireworks.
Link [keithics.com]

wow, two of my works are featured, my logos and my nightscene tutorial , great !

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!

thks.It’s very good
very butifulllllll .
Hero!