Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Useful Fireworks Techniques And Features For Large Design Teams

While Fireworks can be a useful and powerful tool for any screen designer, several aspects of it make it really shine in an enterprise environment when used by both small and large design teams.

What do I mean by “enterprise”? For the purpose of this article, enterprise can be defined as any environment where multiple designers, developers and other stakeholders collaborate on a project. In this situation, Fireworks excels for a variety of reasons.

I’ll share the top five reasons why our user experience (UX) team at Citrix1 (which consists of about 20 designers, researchers and editors, working on Web, desktop and mobile applications) uses Fireworks. I’ll illustrate my points with a few practical examples, as well as examples from other design firms.

1. The (Smart) Fireworks PNG File Format Link

A huge benefit of Fireworks is that it saves images in the PNG2 file format. PNG files are viewable in any browser or image viewer. And Windows Explorer and Mac’s Finder will display thumbnail previews of your Fireworks PNG files when you browse them locally.

Fireworks efficiently embeds all of the vector layer data into the meta data section of the PNG. This means you can view a Fireworks PNG file in any image viewer or directly in a Web browser, and if you open the same PNG in Fireworks, you have full editing capability of the vector paths, layers, pages, live filters, embedded bitmaps, symbols, etc.

The PNG format is also very efficient. In our experience, even complex multi-page documents rarely reach over 5 MB.

What does this mean in the enterprise? Quite a lot, actually!

On our company’s internal network, we have a shared drive that everyone stores files on. When we want to share mockups with stakeholders in the company, we just point them right at the files. For instance, if a PNG file is located at X:/UXGroup/Project/Design.png, we can send a link to anyone in the company (i.e. http://shared/uxgroup/project/Design.png), and they can view the file in their Web browser — no need to export the Fireworks PNG to any other format!

This saves us the additional steps of exporting JPGs (or PNGs) of our design files whenever we want to share them with stakeholders or with anyone who doesn’t have a copy of Fireworks.

I can even edit a file in Fireworks while on the phone with a stakeholder (or fellow designer), and as soon as I hit “Save” in Fireworks, the person on the other end of the line can simply refresh their browser and see the changes I just made! Excellent for quick copy revisions and brainstorming.

Nathan Smith3 describes a similar process in his article “Fireworks in Enterprise IT204”:

“Working as an interface designer at a Fortune 500 company, I used to save my work on a shared network drive. The user experience team had full access to our Adobe Fireworks PNG files, whereas all other stakeholders in the company (of which there were many) had read-only rights. This setup allowed my team to go about working in a typical fashion. When it was time to get sign-off for our mockup designs, rather than performing a batch export of hundreds of PSD files to JPG (or other) image format, we would just send a quick email: “Here are the project comps: http://10.10.10.xx/uxd/project/.”

The approval team could then peruse the interface mockups at their leisure, without us having to do anything extra special to allow them to see our designs. Even better: being on a conference call with the primary stakeholders reviewing my PNG file in their browsers, I could edit the design in real time, based on their feedback. I cannot even begin to estimate the amount of time I saved.”

This can also work beautifully with any FTP client or with synchronization software such as Dropbox. Just place your PNGs in your Dropbox folder and send the public URL to your stakeholders or share the folder with them. Now, whenever you hit “Save” in Fireworks, your changes will be instantly synced to everyone you have shared them with.

One caveat to this approach is that browsers display only the first page of a Fireworks file. So, if your document has multiple pages, you will need to export each page to its own PNG file. On the positive side, Fireworks has fairly robust page-exporting options that make the process very easy, allowing you to export multiple pages at once.

2. Layer Management Link

If you are a Photoshop user, then you are probably very familiar with “layer management.” You have read articles on PSD etiquette and, heck, you might even be a Layer Mayor. While I can appreciate organization, managing layers and layer groups doesn’t sound like fun.

Fireworks Manifesto
(Illustration sources: Dan Rose5, Tymn Armstrong6, Michel Bozgounov7, PhotosPublicDomain.com8)

In Fireworks, I hardly ever glance at the Layers panel. Alan Musselman, designer and developer of Android games, sums it up9 nicely:

“By the time you organized your layers in Photoshop I’m outside enjoying the weather because I’m finished with the project [in Fireworks].”

How is this possible?

Fireworks’ interaction methodology is similar to Illustrator’s: when you hover your mouse over each object on the canvas, the object is highlighted (its outline changes to red), and then you can simply select it by clicking on it (the outline will change to blue). You can also select several objects by clicking on each while holding Shift or simply by dragging the mouse across them all.

Selecting objects on the canvas that are placed underneath other objects is possible, too, as Trevor Kay explains in “Interactive Prototypes and Time-Savers With Adobe Fireworks10”:

“The Select Behind tool enables you to select a top-most object and, with repeated clicking, select each of the elements directly beneath it in turn. This is yet another feature that helps you work more efficiently by not requiring you to awkwardly navigate the Layers panel, searching for an object either by name or tiny thumbnail.”

In practice, this means you don’t need to bounce back and forth between the Layers panel and the canvas to find and select objects — you just work directly with them. I find it a much more intuitive way to work.

What’s more, after selecting one or more objects, you can easily change many of their properties all at once:

  • Resize, skew, rotate and use the 9-Slice Scaling11 tool;
  • Change the fill or stroke (edit colors, work with gradient fills, change the size and type of stroke, etc.);
  • Add or remove Fireworks live filters (and edit their properties);
  • Apply styles;
  • Change the objects’ blending mode;
  • Add or remove textures and patterns;
  • Change the roundness of rectangle corners;
  • And much more.

In short, what can be done with one object selected on the canvas can be done with multiple objects simultaneously. This really is a big time-saver, freeing you from having to hunt through the Layers panel!

Besides being a much faster and more intuitive way to work, it also makes the process of multiple designers collaborating on the same file or project much easier.

Finally, let me add that while naming layers and objects in Fireworks is often not necessary, it is still a good practice, especially when working on more complex projects. If you foresee opening an archived file years later or frequently sharing files with collaborators, then naming layers and objects will make file organization more efficient.

3. Did I Mention Pages And Master Pages? Link

Pages are a feature that illustrate a key difference between Fireworks and Photoshop. When working on complex interactions (a shopping-cart check-out flow, for example), showing how interactions unfold over time is essential. Having the ability to create multiple pages allows you to easily do this.

It also helps to keep the number of separate design files low, which, combined with the fact that each page can have its own settings (canvas size, canvas color, export settings, etc.), gives you a ton of flexibility.

And if you are using Pages in Fireworks, you can easily jump from a static design to an interactive prototype, which brings even more benefits (more on that later).

If you use pages, you can also create master pages. Master pages allow you to define common elements that appear across multiple pages. For instance, on the master page, you might put the website’s logo and header. As you create new pages, those elements will automatically appear on them, and if you make a change to any element on the master page, it will appear throughout the document. If you need to modify the header or any other recurring element, this method is far quicker than having to open multiple files and individually edit the given element in each one or having to manually tweak the same elements on multiple pages (or multiple layers).

Let me quickly illustrate this feature. For an example, we’ll use the UI wireframe sketches of Chris Stevens12.

Suppose we have a design in which several elements — the header, logo, navigation and footer — will be the same on all pages. Let’s move them to the master page. All of the other pages will display these elements just as they appear on the master page:

Master Page Elements On All Pages
Elements on the master page will automatically appear on all pages.

Next, suppose the design team decides that moving the logo to the right side and moving the navigation to the left would be better. The elements, which exist on the master page, need to be altered only once, then all of the other pages in the design will instantly reflect those changes:

Simultaneous Update On All Pages
Edit an element (or several elements) on the master page and see all pages updated with those changes!

Fireworks has other features that make complex design projects easier. Here are just a few:

  • In Fireworks, you can turn any object or group of objects into a symbol. Just create a symbol and copy it to a few layers and/or pages; then, whenever you edit the symbol, all instances of it throughout the document will automatically update. Symbols can be of different types — graphic symbols, button symbols, and component (rich) symbols — each of which serves a different purpose and has different benefits. (If you want to learn more, the “Symbols13” section in Adobe’s documentation for Fireworks might help.)
  • Fireworks gives you the option to share layers to pages (i.e. share the contents of one layer to selected pages), so if the content of a layer is updated, then the changes are automatically shown on all of the pages on which the shared layer appears).
  • If you work with states, you also have the option to share states to pages.
  • You can use styles in your Fireworks PNG documents (and can even import and export them to reuse in more than one document).

By taking advantage of pages, master pages, symbols and styles, every designer on our team saves a huge amount of time every day!

4. Interactive Prototyping Made Easy Link

If you are creating a complex interaction that spans multiple pages, being able to prototype the interaction before investing precious development time in coding it is often very beneficial. Again, Fireworks comes to the rescue with its built-in capabilities to create simple click-through prototypes for multi-page documents.

This subject was covered thoroughly by Smashing Magazine in a recent article by André Reinegger, “Create Interactive Prototypes With Adobe Fireworks14” (quoted below), and one by Trevor Kay, “Interactive Prototypes And Time-Savers With Adobe Fireworks2715.” Check them out!

“A click-through prototype is an interactive mockup of a website or application that allows you to click through different pages and states and is packed with key interactions. Creating such a prototype in Adobe Fireworks is very easy. All you have to do is prepare the design for exporting as an interactive prototype: create slices for all interactive areas on the screen, and make pages for all of the different states of the application.”

By defining slices and hotspots, you can quickly link the pages in your document together and export them all at once as HTML files.

Create Interactive Prototypes
André Reinegger explains in detail16 how to create interactive prototypes with Fireworks. Pages and hotspots are key parts of the process.

For instance, if your shopping cart has a “Buy now” button on the first page, you can specify that, when clicked, the button will take the user to page 2 of the design; and on page 2, you can define more interactions, and so forth. Similarly, you can create simple navigation between the pages or create links that point to external resources. What’s more, any behavior added to the master page will also be active on every other page in the document (so, a navigation bar graphic could serve as a navigation bar in the whole interactive prototype). Build it once and it works everywhere!

Interactive prototypes also help you quickly experience how an interaction feels as you click through it. You can even use these prototypes for user testing, to work out any kinks before investing in the actual development.

Of course, you always have the option to use an external application for the live-interaction part of the design and development process, but for simple interactions, Fireworks does the trick nicely, and we don’t even have to switch to another app.

5. Fireworks Component Library With Evernote Link

One thing that makes collaboration between designers and developers much easier and more efficient is having a common set of design resources. Fireworks has a “Common Library” panel, but I won’t sugarcoat it: it’s not useful when multiple designers are collaborating and need to share a library of UI resources that needs to be updated over time.

However, taking advantage of Fireworks’ use of vector PNG files, we can use a third-party service — namely, Evernote17 — with Fireworks to create and maintain a synchronized component library. This will allow all designers on the team to simply drag and drop Fireworks PNG elements into their layouts from a common source. (See “Creating a Pattern Library With Evernote and Fireworks18,” in which I speak about this technique in greater detail.)

Here are the benefits of this workflow:

  • Easily browsable
    Finding what you’re looking for is easier when you can just see it. And because source Fireworks PNG files can be viewed in the browser just like any regular image file, you can find the right asset in Evernote simply by browsing for it — while examining the previews! (This wouldn’t work with Photoshop, Illustrator or InDesign files because browsers cannot read their proprietary file formats.)
  • Searchable
    If you can’t find it by browsing, just search. And in Evernote, even the text in PNG files is indexed (a truly amazing feature, which, again, is possible because of the PNG format’s openness).
  • Drag and droppable
    Pulling elements into your layout is super-easy. Simply drag and drop them from Evernote into the Fireworks document!
  • Synchronized
    Any change made to a UI element propagates instantly, and everyone on the team always has access to the most recent version. Plus, Fireworks PNG files are fairly small, so synchronization is fast and easy.

Evernote And Fireworks
Evernote and Fireworks can make a component library an easy solution.

Conclusion Link

It’s fair to say that Fireworks is not perfect and has its limitations. For example, if you exceed a certain number of pages or objects in a file, Fireworks could suffer some drop in performance. The app is not 64-bit, so it cannot use all of the 16 GB of RAM you’ve just installed in your new computer, and its user interface is slightly different than other tools in the Adobe family.

However, in our design practice, we’ve found that the benefits of Fireworks far outweigh the disadvantages.

In one relatively short article, I can’t cover all of the reasons why we use Adobe Fireworks, but if you (and your design team) work in the field of screen design — UI, UX, Web, mobile — then I hope the five above are enough to give you ideas or inspire you to try something new!

Further Reading Link

Here a few links to articles, tutorials and blog posts that discuss some of Fireworks’ most interesting features, as well a few complex workflows that are possible with it:

(mb) (al)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29

↑ Back to top Tweet itShare on Facebook


  1. 1

    I’ve been a FW user for many years. It has done wonders for production speed for me, even as a lone web designer. It’s also great for making wireframes, then iterating them into an actual design.

    So it annoys me to no end all the .psd libraries for web. Give a FW .png or vector format folks! Especially with the advent of retina I think you’re going to see more web designers second-guessing their decision to use Photoshop (as they should).

    • 2

      I think you misunderstand PS, it has a whole host of vector capabilities – many that actually behave a lot better for pixel-perfect design and represent effects generated by CSS3 far more accurately.

      It’s totally preference based though – the benefit of PS for me is that I can do both vector AND rastorised work in it. When I used FW I’d still have PS open at least a few times a day.

      • 3

        Photoshop has vector capabilities better than Firefox? Not challenging you in anyway, rather for my enlightenment, can you name some? Even with the CS6 versions of both, it seems that Fireworks, with the exception of Vector Masks in Photoshop, constantly performs better and has better tools better than Photoshop when it comes to vector tools relevant to Web Design.

        When it comes to serious work involving vector content for the web, It’s far more efficient to use Illustrator to make SVG versions of whatever you’re using either Photoshop or Fireworks for if it’s something that’ll be attached and be seen by the user. If not that use Canvas. At worst use the .png format preferably with Fireworks as it has much, much better compression system and features for files that will ultimately be best in .png format.

        Of course, you can manipulate Photoshop’s tools meant specifically for photos for web projects, which I think is the true reason why it’s preferred.

        To be honest, creating websites with a responsive (or adaptive) web design workflow first (mobile-first usually), I sometimes will use–as mentioned also at the recent Smashing UK Conference–InDesign CS6 Fluid Layout tool to wireframe, get straight to rapid prototyping , and get the site’s first workable version far faster than when I relied on other tools.

        Using tools such as, SASS, Compass (For the useful CSS3 mix-ins and auto-sprites, a HUGE timesaver), and Bootstrap or Foundation, I find that a far more lightweight and more effective workflow to have than one incorporating Fireworks or Photoshop unless I’m retouching photos with the latter…

      • 4

        Fireworks allows you to work in BOTH vector and bitmap modes. Also, don’t forget the rest of the features mentioned in this article. They are the key to why is a good idea using it. It can be a matter of choice if you prefer working with PS, but be sure FW is the rightest tool for screen design, UI’s, apps, web, as PS it’s the one for photo editing. Why would I use a fork to stir sugar in my coffee when I can use a spoon?

    • 5

      Agreed – I would love to see more high quality PNG library sites out there. Feel free to link to any favorites!

  2. 6

    Doug LeMesurier

    October 12, 2012 6:29 am

    I felt like I was forced to start using Photoshop about 9 years ago because these were the only files my clients would provide. I loved FW and still do (there, I feel better). It makes my life better as a front-end designer.

  3. 7

    “Fireworks efficiently embeds all of the vector layer data into the meta data section of the PNG. This means you can view a Fireworks PNG file in any image viewer or directly in a Web browser, and if you open the same PNG in Fireworks, you have full editing capability of the vector paths, layers, pages, live filters, embedded bitmaps, symbols, etc.”

    If you’ve ever ended up with a 6mb icon on a website due to mistaking it for an ACTUAL .png you won’t see this as a plus.

    When I had to use Fireworks I chose to use my own extension to avoid the confusion (on a Mac, so I just told the Mac to associate .fwk with Fireworks).

    Whoever decided it should share an extension with a rasterised, exported image format was a dunce.

    I’m no FW hater though. I choose not to use it, as I still feel PS is a far superior design tool, and the last time I used FW it still had issues with things I rely on every day – but it also has some really nifty features that make it great for web work. The real conclusion is that both PS and FW are a bit crappy for web design – they’re just the best we’ve got.

    • 8

      Since Fireworks CS6 they have included the option to append .fw.png to all Fireworks PNGs, which is really handy.

      Before that I named all my files with _FW.png and I believe that design source files should never be in the same folder as files to be uploaded as online assets.

      I see your point though and would (almost) agree with you, as it is nice to be able to view a Fireworks PNG even in a browser, but only being able to see the first page is not that handy and requires exporting still, as 99% of Fireworks files I have contain more than one page or state. Having to decide to open .png in either Preview or Fireworks by default is a tough decision and has annoyed me more than once – especially in the pre-SSD times, when Fireworks took a minute to open.

    • 9

      Now with FW CS6, you can append a *.fw.png to the document and differentiate between a source file or a simple flat png graphic.

  4. 10

    I have only -ever- used Fireworks for graphics work. I never learned how to use Photoshop. I have, on a few occasions, felt that I really should learn how to use Photoshop so I can be a “real” designer, but after reading tutorials and messing around with some learning projects, my only thought was “Well gosh, I can do this in Fireworks soooo much easier.” In rebellion against the status quo, I recently uninstalled Photoshop from my computer :)

  5. 13

    I think I’m inspired to try Fireworks. I’ve been using Photoshop since I was a teenager, it was forced upon me at school really but I’ve always loved it. When that happens, you get comfortable and stick to what you know. That’s been the case for me.

    Some of the things raised here are exactly the type of problems I have with Photoshop – things like page masters would really be handy.

    I recently installed Fireworks but it’s been sat unused and unloved, I think it’s time for me to give it a try.

    • 14

      Don’t be afraid Ben.. you will never want to look back! Once you got your head around Layer sharing, Master pages, hotspots, symbols and a few others you will feel born-again :D

      The transition from Photoshop to Fireworks is not that hard, as I can’t think of one thing that is easier to do in Photoshop than Fireworks.

      Oh and DO check out the many great extensions for Fireworks once you are comfortable:

      • 15

        Absolutely agree with Armin. Fireworks’ learning curve is short. Much shorter that anyone would think.

      • 16

        Armin – thanks for the links! I think you are right on – of all the designers and coders that I have introduced to Fireworks, once they really got comfortable with using it for design and layout, they never looked back.

  6. 17

    Mike Robinson

    October 12, 2012 6:59 am

    As a front-end developer who’s job is becoming more UI design focused, I’ve been tempted to look into Fireworks. I wonder though, are there significant benefits vs. banging out a prototype using a CSS framework + CSS preprocessor?

    • 18

      I think the main advantage is being able to play around more easily. As a front-end dev you dive right in, but for UI design its important to try a few things and not get stuck on one path too early on. If not on paper, than at least in Fireworks! With Fireworks you can make clickable prototypes and preview in the browser very quickly, which is especially handy for UI elements.

      You should check out the new CSS properties pallet in Fireworks CS6 if you are also doing the front-end dev.

    • 19

      If you can create a real prototype with code and bypass design steps in any graphics program, definitely do it. Fireworks prototyping is not much more than a slideshow with image map links. Instead, I export my prototype states and pages as flat PNG’s using Cycle (jQuery) to make a simple slideshow of the PNG’s for design presentations.

      I don’t think you’ll see any savings in desktop prototyping if you can already sling quality CSS on a framework. The real time saving benefits are smaller files, PNG in general, and less concern with layers because you simply group and ungroup anything on the canvas rather than meticulously organize layers.

      FW is much more point and shoot than Photoshop – sometimes it feels like cheating. Fireworks UI feels more like Illustrator than Photoshop.

      My favorite feature in Fireworks is “Fit to Screen” which resizes the canvas to whatever is on the stage – either growing to include hidden objects or cropping to remove every pixel of empty background. My second favorite feature is how much faster it is for me to draw with the pen tool. I still do live trace in Illustrator, but when I need to illustrate anything from scratch I use Fireworks.

      The strokes and font aliasing do suck as other people have mentioned repeatedly. If you need fancy type and special brushes do that work in another program and copy the flattened bitmap to FW.

      100% of the production graphics I use on websites are exported from Fireworks. One thing Fireworks is not great at is perserving the layout of .ai or .psd files. When people send me .ai files I open them in Illustrator, group everything in the document before copying and pasting the giant group into Fireworks. All vector points, nested groups and text remain editable and scaled perfectly.

      When I have to work with .psd or .indd, I open them in Photoshop or InDesign and then take a screenshot at 100% or export the entire layout with a transparent background and open the file in Fireworks to actually export sprites and web-ready graphics.

    • 20

      Mike – I say use whatever you are most comfortable with. Depending upon your needs for the project (the level of interaction complexity, animations, etc), using Fireworks may not be the best choice. But I have always found it to be the best place to start – especially for designers that don’t have a strong development background, it can be incredibly helpful.

  7. 21

    Thanks for this great article and some new insights, even though I have been using Fireworks exclusively for web design since the days it was still owned by Macromedia. It’s a nice overview of all the advantages, especially for large teams.

    In the mean time I will keep shaking my head from here to Timbuktu over the myriads of web designers using the wrong tool (Photoshop). To me it’s like doing a book layout completely in Illustrator – you would just go crazy. In all my years as web designer I have never needed Photoshop for any part of web design and it annoys me endlessly being given Photoshop files and having to find layers with the medieval method of turning layers on and off to find the right part.

    Nowadays I find myself using Fireworks more and more. Even to crop/resize an image I use Fireworks because it is much quicker. Recently I have noticed how good Fireworks is for making story boards and style boards for motion graphics to then be used in After Effects. The only shame is that even with the “Copy Vectors” feature (which i have remapped to Cmd+C) you can’t paste directly to a mask in AE. If i copy to Illustrator first and then from Illustrator to AE it works.. strange.

    Thanks for a great article!

  8. 22

    Fireworks is a screen design tool, always has been.
    Photoshop is a photo editing tool, always has been.

    To me it’s a clear distinction. Don’t be shy people you can have more than one program open at a time. Everyone is always arguing which is better, am I the only person who uses both? for their intended purposes? It’s too mainstream I guess.

    • 23

      Agreed. Photoshop + Wacom Intuos5 is a blast when it comes to retouching and manipulating photos, while it’s a blast using quick library assets, master pages, states, and exporting interactive mockups in PDF with Fireworks.

    • 24

      Yes that is true. Recently I started using photoshop in collaboration with Fireworks. In photoshop I complete all my image related work (ex. slider image manipulation) and then import it back to Fireworks to incorporate it to my layout/template/work. Similarly, for print work, I use InDesign and Illustrator side-by-side. There is a reason why these software exists individually, a reason why Adobe has not abandoned any of them. So take advantage of that. Creative Cloud suite can be bought for a price of $20 a month for students. Why not take advantage of it?

    • 26

      Agreed! I try to stay away from the “Fireworks is better / Photoshop is better” shouting matches. Each one has it’s strengths and weaknesses – and a good designer will know which app to use to achieve their desired result.

      I use Fireworks for web page layout and icon design, Photoshop for heavy editing of photos, and Illustrator to create more complex vectors. Often I use all three apps in a single project – pulling photos from Photoshop and vectors from Illustrator, and combining them in Fireworks to create the layout I need. But at the end of the day Fireworks is where 80+% of my time is spent, so to me, it’s the essential app.

  9. 27

    “2. Layer Management”

    In Photoshop: Use the “move-tool” (V) and activate “Auto-Select” in the bar at the top with “Layer” in the Dropdown (show transform controls too!). Now click on a layer and see the magic! Also you can disable Auto-Select and hold Ctrl (Win) while click on a layer and you are there. Layer renaming is in PS not really neccessary.

    “In Fireworks, you can turn any object or group of objects into a symbol. Just create a symbol and copy it to a few layers and/or pages; then, whenever you edit the symbol, all instances of it throughout the document will automatically update. Symbols can be of different types — graphic symbols, button symbols, and component (rich) symbols — each of which serves a different purpose and has different benefits.”

    This you can do also in PS with Smart Objects. If put some layers into a Smart Object and dublicate it, the source is all the same. If you edit one of the Smart Object, all copy´s get updated.

    “4. Interactive Prototyping Made Easy”
    Not so comfortable, but in PS you can give slices a URL and “save for web” -> HMTL. You can also build linked “images” with that and link many designs together. I prefer for dynamic wireframes Flash Catalyst (more complex interactions!) and I´m curious about the new Adobe Muse.

    “3. Did I Mention Pages And Master Pages?”

    Why not work with a locked smart object “Header” and put all other states in layer groups beneath it?
    How about layer comps for this?

    Photoshop has plenty of features, but I often realize that 80% of PS users know 20% of the features.

    • 28

      FYI, your comment for #4 is hardly what most would consider a interactive prototype being created in Photoshop. Fireworks allows dropdowns, states, an all sorts of things that provide an interactive ‘taste’ of what the current mockup is showing, even inside a PDF.

      Honestly though, it’s become too limiting perhaps to an extent to what you can do by having a more rapid protoyping workflow using, your browser of choice’s developer tool panel, and dare I say it, InDesign CS6 Fluid Layout Tool.

      In my opinion, that tool MUST become part of Fireworks.

    • 29

      Thank you, I was scrolling down the comments to see if any one knows this. Layers selecting is really easy in photoshop… It’s one of those necessary tricks to gain a bit of speed in photoshop. I can’t imagine a professional user not knowing this.

      • 30

        In fact this is one of the features Im missing in FW, right clicking over and element and finding it in the layers panel throughout a document just as in PS.

        Anyway, you should grasp the idea that for most things (other than this layer issue) what takes you minutes or at least several seconds in PS may take a quick instant in FW if you master both of them.

        And there is no other way than understanding FW is the rightest tool for certain kind of work, even though you can use PS to do things it was not intended to do, like building software UI’s, apps, and websites.

        And why is absolutely a nightmare for a Fireworks user to receive psd files from other designers when building apps, UI’s and software. If you’d know Fireworks, you would easily understand what we all FW users mean with this and how wrong it feels, how unpractical and why FW was created.

        As simple as that. As I said before, why using a fork to stir the sugar in my coffe when I can use a spoon.

    • 31

      Great points you bring up. There are a lot of great features in Photoshop that many folks don’t know about! I love watching others use PS, because I invariably learn something new.

      I wanted to quickly respond about selecting layers. Using Auto Select in PS is handy, but I love the implementation in Fireworks (and Illustrator) – for me, it’s just much better for two reasons:

      1. In FW, as you hover the mouse over shapes on the canvas, they highlight – so you know exactly what will be selected when you click on it. That instantaneous feedback is really nice – especially when you have multiple shapes right next to / overlapping each other.

      2. In FW you can easily select multiple shapes by holding Shift and clicking on each shape you want. This is really important, because I am usually modifying/moving multiple shapes at the same time.

      This is just my personal preference, but many other people I have talked to resonate with this aspect of the FW interface.

  10. 32

    I agree with Mazurka, as far each tool having its strength. Definitely, Fireworks is my tool of choice for “web UI” work.
    Thanks, Kris, for this article it brings out a few new workflow (with Evernote) advantages that i will put into practice.

  11. 33

    Honestly I wish that some of these features would just be implemented in PS. For example, I’ve wished for a long time that something like the Select Behind tool existed in PS as an alternative to navigating layers. That said, as a web designer I use the layers panel to my benefit by grouping a mock into sections that will later be DOM elements. So I might create a “header” layer folder that will correspond to a div called header, and inside that there will be a “logo” layer folder and a “global nav” folder which will correspond to elements within the header div. This creates a road map for coding a design that makes it almost mindlessly easy.

    • 34

      What you use layers for is entirely also done in Fireworks and on top of that more easily handled through master pages as the article detailed in great detail. Fireworks even exports the CSS3 styles for such components out of the box rather than forcing Photoshop to through plug-ins. It can even import some PSD Plug-ins apparently, though I never bothered.

      Nonetheless your subselector tool idea being introduced in Photoshop has some benefits for photo-editing workflows as well, hopefully something like that comes out (though it would probably be for Creative Cloud subscribers only).

    • 35

      You can right click on your PS document and it will list all visible layers. Simply select the one you want. Job done!

  12. 36

    I’ve been a Photoshop user for many years. It’s a great tool, but when it came to web design there were a lot of things that frustrated me. A year ago I started trying Fireworks for web design and was completely blown away by it. It’s features just make sense when it comes to web design.

    Personally, I still love Photoshop, but as soon as I gave Fireworks a real try, I felt that Photoshop was just NOT the right tool for web design. I convinced my colleague web designer to use it too, and were now happily converted to fireworks.
    The only thing that bothers me is that Adobe seems to really ignore fireworks. The CS6 “update” can hardly be called an actual update. I’d really like some better blending modes (or a better version of ‘ photoshop live effects’) and gradient strokes.

    Anyway, if you’re using fireworks in design teams I’d recommend using a plugin called Linked Images. It makes it possible to link files like you do in inDesign. (that guy has the best FW plugins btw)

  13. 38

    Master pages would be nice but I have not had a full website or even a few web pages where the height of the page was consistent among the pages. For example, a blog page will be much taller than, let’s say, a contact page.

    Photoshop has layer comps too which are somewhat similar but that did not work either.

    All in all I do a lot of custom graphic work as I’m designing websites so having it all in one place like photoshop just makes it easier for me. I can see the merit in Fireworks if your creating sites with lines, shapes and text but for the more extravagant sites that utilize custom imagery and design, photoshop seems more suitable.

    • 39

      Actually in Fireworks, you can have master pages while still allowing the individual pages to have their own heights. Just like how it works on the web. I usually use the master pages for the header and navigation at the top plus the backgrounds and set it very long so that the background will show no matter how long a page is. And then the canvas of the individual pages are whatever length they end up.

      Just design your individual pages, add your footer as a symbol at the bottom, hit the handy “fit canvas” button in Fireworks, and there ya go. Can’t do that with Photoshop. Not sure why anyone would use a photographer’s tool to do UI work but I guess old habits are hard to die.

  14. 40

    Kris good article. FW and Evernote is the way to go. In the last five years I’ve made $150k + a year using only FW. Speed and the PNG format is the name of the game. The only issue with FW is that Adobe does not care that much about it as a tool and the rendering is poorly implemented, text, gradient and strokes… They just make a shinny re-skin in every new updated but underneath is still have the same rendering issues as previous version. At least it doesn’t crash as much on the Mac as before :)

    • 41

      Agree, these are the cons. I hope next version will be better in font rendering. And do more improvments on memory handling.
      Btw, i don’t think if somebody says FW is good, it means PS can’t do the job.
      I came from PS world, but my workplace made me use FW. Honestly, they were right – 8 years ago. It’s quicker and easier for me: webdesign. I don’t care about layers, i just use mouse on the canvas and grouping / ungrouping and with shortcuts, its like a charm. And on the top: 9 slice scalings, symbol scripts, easy style coping and handling, and more.
      Photoshop just fall back, but i use it when its needed, where fireworks can’t beat it: photoediting.

  15. 42

    – Photoshop ctrl+left-mouseclick is indeed verrrrrry handy to directly select layers.
    – Import vector graphics through Illustrator as shape or to smart object into PS
    – Save (simple) vectors in illustrator as .svg for use in web. sorry ie <9
    – Photoshop not ideal for typography sometimes when fonts have more than one stylistic set.
    – Use to optimize your web images

    • 43

      Fireworks optimization tool gives usually better results than and its faster.

  16. 44

    I love Fireworks but have heard from various people that Adobe will eventually stop supporting Fireworks – has anyone else heard this rumor?

    • 45

      I do not have any ‘inside’ information, but I feel confident that Adobe will continue to grow Fireworks. Although the Fw community is relatively small, they are very passionate – and growing! Also, the quality of work being created in Fireworks has increased dramatically over the last few years, which has been very inspirational. I’m looking forward to what the future holds for Fw!

  17. 46

    I really like many of the features of Fireworks and I would love to switch to it full time. But after a few months of using it over Photoshop, I just found it to be too buggy and sluggish. I don’t know what it is… I think part of it may be that Photoshop does a better job of managing memory… but I’m sure there’s more to it than that. I was initially very excited by the possibility of symbols and the ability to use them to create UI libraries… I really got into it. But, it’s just too slow and I have to jump thru hoops to be able to export PDFs or PSDs without crashing. It might work fine if you are working on a site with only a few pages, but that is rare for me.

    In the end, I think this is personal preference. It needs to become more reliable and a bit snappier to use before I will consider switching again.

    • 47

      Right on.
      As wonderful as people might say FW is, the performance and lag issues make it useless, regardless of any perks it may offer.

      We have a designer in another office who insists on using it and it never fails to drive me nuts with it’s performance delays and jumpy rendering. Say what you will about PS being “only for photos”, but I’d rather use a fast, multi-purpose tool than a slow, buggy, task-specific one.

      • 48

        PS is not multipurpose. You are just using workarounds.

      • 49

        Interested to hear if you guys are on a Mac or PC? I have found the Mac version to be pretty stable and fast, as long as I am managing my fonts correctly. Sometimes having too many fonts activated can slow Fireworks down, I have noticed.

  18. 50

    I use PS and AI for concepts and asset creation, FW for building layouts and prototypes.

    If your making files for developers, FW is the best way to achieve a good workflow, especially when you factor in the CSS properties panel.

    That said, i totally understand why new designers shy away from it.

    The UI design in FW is pretty lame, and when compared to PS CS6, performance is terrible. I like to work fast. Quite often FW struggles to keep up, there are sometimes noticeable lags on interface interactions that really bug me when i’m working under pressure. Don’t get me started on how buggy the filter panels are…

    I think any designer worth their salt should endeavour to use both proficiently to their strengths. They’re both great tools, with different intentions and aims.

    Thanks for another great article, keen to try out the evernote tip!

  19. 51

    Jeslin George

    October 13, 2012 4:11 am

    For any one who haven’t used Fireworks it can really change the way you design. The best part is the rapid prototyping utility which can be used hand in hand with effects from photoshop to make a really slick and polished looking layout

  20. 52

    Amen. Fireworks has so many great features that make web designers’ lives easier. Fireworks has been my primary design program for years, and it’s great to see it get some love on Smashing.


↑ Back to top