Useful Fireworks Techniques And Features For Large Design Teams

Advertisement

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

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 IT214”:

“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

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 Musselman9, designer and developer of Android games, sums it up10 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 Fireworks11”:

“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 Scaling12 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?

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

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 “Symbols14” 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

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 Fireworks15” (quoted below), and one by Trevor Kay, “Interactive Prototypes And Time-Savers With Adobe Fireworks2916.” 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 detail17 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

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, Evernote18 — 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 Fireworks19,” 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

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

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

  1. 1 http://www.citrixonline.com/collaboration/about_citrix_online
  2. 2 https://en.wikipedia.org/wiki/Portable_Network_Graphics
  3. 3 http://sonspring.com/
  4. 4 http://www.adobe.com/devnet/fireworks/articles/enterprise_it.html
  5. 5 http://dribbble.com/shots/134283-Photoshop-Etiquette
  6. 6 http://dribbble.com/shots/93622-Resolution-2011
  7. 7 http://dribbble.com/shots/94577-Fireworks-Resolution-2011
  8. 8 http://www.photos-public-domain.com/2011/01/02/yellow-notebook-paper-texture/
  9. 9 http://alanmusselman.com/blog/?page_id=2463
  10. 10 http://twitter.com/DeeSadler/status/224912957258211330
  11. 11 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  12. 12 http://www.adobe.com/devnet/fireworks/articles/9-slice_scaling.html
  13. 13 http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups
  14. 14 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7fd4.html
  15. 15 http://fireworks.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
  16. 16 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  17. 17 http://fireworks.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
  18. 18 http://evernote.com/
  19. 19 http://fireworks.smashingmagazine.com/2012/09/13/create-pattern-library-with-evernote-fireworks/
  20. 20 http://medialoot.com/blog/fireworks-for-beginners/
  21. 21 http://www.adobe.com/devnet/fireworks/articles/enterprise_it.html
  22. 22 http://fireworksinterviews.com/
  23. 23 http://www.adobe.com/devnet/fireworks/articles/cooper_interactive.html
  24. 24 http://www.adobe.com/devnet/fireworks/articles/prototype_iphone_app.html
  25. 25 http://qrayg.com/learn/fireworks/
  26. 26 http://ivomynttinen.com/blog/how-to-achieve-pixel-perfection-in-your-designs-with-adobe-fireworks/
  27. 27 http://boagworld.com/design/fireworks-vs-photoshop
  28. 28 http://floridaflourish.com/news/detail/we-love-fireworks/
  29. 29 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  30. 30 http://fireworks.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  31. 31 http://fireworks.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/

↑ Back to topShare on Twitter

Advertising
  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).

    6
    • 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.

      5
      • 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 placehold.it, 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…

        7
      • 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?

        8
    • 5

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

      0
  2. 6

    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.

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

    0
    • 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.

      4
    • 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.

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

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

    4
    • 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: http://fireworks.smashingmagazine.com/2012/08/28/fireworks-extensions-for-better-workflow/

      6
      • 15

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

        2
      • 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.

        1
  6. 17

    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?

    1
    • 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. http://webdesign.tutsplus.com/tutorials/applications/new-in-fireworks-cs6-css-properties-and-sprites/

      1
    • 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.

      2
    • 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.

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

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

    19
    • 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.

      4
    • 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?

      8
    • 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.

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

    4
    • 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 placehold.it, 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.

      2
    • 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.

      1
      • 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.

        2
    • 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.

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

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

    2
    • 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).

      3
    • 35

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

      0
  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. http://johndunning.com/fireworks/about/LinkedImages (that guy has the best FW plugins btw)

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

    3
    • 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.

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

    1
    • 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.

      1
  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 smush.it to optimize your web images

    0
  16. 44

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

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

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

    0
    • 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.

      0
      • 48

        PS is not multipurpose. You are just using workarounds.

        4
      • 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.

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

    1
  19. 51

    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

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

    1
  21. 53

    I always use fireworks for wireframing and initial Logo sketching. By the way when I worked for a big enterprise business they went from Desktops to thin clients with Citrix.. For the designers and developers from our department this was the beginning of the end. The Horror!!! The whole team with big international clients was forced on the thin clients cloud without any Development tools ( too expensive to implement) and we were not allowed to install anything locally anymore. I wonder if you work on Citrix yourself and if they made a special Development cloud for your team.

    0
  22. 54

    I only use FW for wireframes, it is handy, fast and very good for quick works. However, when it comes to pixel perfect hi-fidelity visual mockups, I do have to jump back to PS. Somehow, visual just doesn’t look good enough in FW, not sure why, I think might be the way things render differently in those two apps. Also in Photoshop, there are just so many things you could do both with bitmap or vector graphics.

    One more thing, FW has some memory handling issues, which makes it not very stable, and that is big problem for me. Never the less, it works fine for me as a wireframe maker, good tool.

    0
  23. 55

    I love fireworks. But since CS3 it’s been a buggy piece of poo. I’m using CS6 and I swear one day I had over 20 crashes. This makes it incredibly frustrating to use. If only Adobe would give it the love it deserves and fix the bugs rather than re-badging it every CS release.

    2
  24. 56

    Love you guys so much for these Fireworks articles! :) Hope to see advanced tutorials in the future! Keep uo the good work!

    1
  25. 57

    For fast and simple wireframing I use the Firefox add-on Pencil. It doesn’t have a lot of bells and whistles, but I can whip up something in no time, export as PNG and send it to the client.

    0
  26. 58

    great article,
    I´m a huge firewoks user and still don´t understand why people just don´t take the leap and get rid of photoshop for webdesign

    5
  27. 59

    Too bad FW is as stable as a table with 3 legs and still uses flash for their own ui. Even in cs6. Also grouping and masking is way more hessle then in illustrator. And why doesn’t the symbol have a pivot point to align to? Even flash has that! They need to improve lots, before it is as good as ps and ai. Eventually it would be nice if adobe used the same aproach on functionality and shortcuts in all their software. Breaking my fingers on the shortcodes here….

    0
    • 60

      Well, the more ppl using it, the more possibilities maybe FW has to be taken seriouly by Adobe… I believe…

      2
  28. 61

    I’m sold. I have used PS for many years now, I have a few projects lined up soon and think it’s about time I save time. The master pages sounds amazing, love the idea of that.

    Thanks!

    2
  29. 62

    I just made the leap a month or two ago and I’m never looking back. I LOVE, LOVE, LOVE Fireworks for the reasons stated in the article and more. It has made web design much more fun. Tools and feedback are more web design-friendly than Photoshop’s. That said, I still use Photoshop, but not for web design. I still use Illustrator too, of course. The more I discover about Fireworks, the more I like it. SOLD!

    4
  30. 63

    Luisa Ambros Costa

    October 15, 2012 8:30 pm

    I was about to say that you made me say to myself “OK, let’s try to use Fireworks again” and I liked that many people already changed from PS and wrote their experiences here!

    OK, let’s try to use Fireworks again. Now with your useful tips and references will be easier! :)

    Thank you!

    2
  31. 64

    I love Fireworks. But the font rendering is still horrible. If im exporting font images, i need to switch to photoshop. Adobe should fix that asap.

    0
  32. 65

    Is it correct that Adobe are going to be reducing support for Fireworks (rumor currently). If so, it shows how much faith they have in it.

    0
    • 66

      The last update was really disappointing. I really really love Fireworks, I wish Adobe gave it more love too… Since they purchased it from Marcomedia it got far too little attention :(

      0
  33. 67

    OK, so I create a new png with 1 master page and 1 regular page with very basic graphics. Then I copy this regular page say 7 times and save this on a Macbook Air. It takes ….. 15 minutes !
    How can you overcome this ‘shortcoming’ ? I was cured pretty fast and back to Omnigraffle it was.
    Am I missing something ? I mean it’s not like I had 200 pages ?

    0
    • 68

      That’s what I hate about Fireworks too. I like being able to prototype several versions of a page or an entire site, but the overhead memory demands huge — anything over three pages and FW bogs down. Why won’t Adobe fix this?

      0
  34. 69

    Love the points you bring up here…exactly why FW is my tool of choice. My one qualm is that I think point #1 is not relevant, principally because of the paging benefits you bring up in point #3! Whenever anyone opens your PNG file in a browser, they will only see the first page. I don’t know any designers who just use 1 page per PNG file, unless they are at the very very beginning of a basic design.

    For presentation purposes, I just export each page to an image file (either PNG or JPEG), and then use the “Insert New Photo Album” feature in Windows Powerpoint, or add the files via Automator in Mac Powerpoint.

    0
  35. 70

    Thanks! I’ve been a FW user since it’s beginning and felt like I’ve been swimming upstream for years, but after working on a huge website and having to deal with the inefficiencies of Photoshop, I think I’ve finally convinced a programmer and another designer to drink the kool-aid. I’ll point a couple of designers to this article.

    1
  36. 71

    A Fireworks PNG trick most people are not aware off, is that you can upload multi-page Fireworks PNGs to Flickr. So you can use Flickr as a backup and archiving tool for your design assets. Don’t forget to set your upload to ‘private’ ;)

    1
  37. 72

    Marcel Stalenhoef

    October 17, 2012 10:20 pm

    I’m UI-designer and mostly work with Photoshop. This is (was) a habit I got from the past, starting my own company Aquaster. Fireworks was scary and I opened it one time to close it even faster.

    Reading your article gives me an inside I really wanted to have. Making one masterpage (like Indesign) and only have to switch between layouts could be very very nice to have.

    Thanks for sharing.

    2
  38. 73

    I really do like Fireworks.

    The only reason against it – and maybe be the worst of all? – is the bad rendering of the PDF export. That’s unfortunately the reason why we stopped using it. If you compare your design with a PDF export from illustrator or indesign… there are worlds in between.

    I even tried a bunch of workarounds. Like exporting all pages as (flattened) PNG’s and then put it together with Acrobat Pro. But the result is always bad.

    Did anyone tried something that works???

    I hope Adobe gets this thing done. Because no other Tool is better for preparing material for the web. Slicing in Photoshop? Come on! ;)

    1
    • 74

      Hey Martin,
      I’m not sure what you’re seeing, but I usually export JPG (100%) or PNG (32-bit) or ‘save as a PhotoShop file’ and then export a JPG (100%) for web from Photoshop. I then open Acrobat and use the create “PDF from files” option on the File menu. The image quality is perfect. BTW, I just compared side-by-side views of both the ‘saved as’ Photoshop and the original Fireworks files, are identical to 3200% magnification.

      –Mark

      1
      • 75

        Hey Mark.

        I tried it again. Apparently i didn’t choose the “High Quality” option at the “PDF from files” …
        Now it’s a little bit better, but not as razor sharp as others.

        I guess i figured out what’s the problem: if you export the PDF directly from FW you can select all text on the pages. so that makes senses for an PDF. ;)
        But the rendering of the text is way too blurry. Because if you zoom in in a “normal” PDF, text is always sharp. Thanks to vector. ;)
        Apparently that’s the real issue.

        Martin

        0
  39. 76

    If I was going to design Smashing Magazine I’d probably use Fireworks.

    If I was going to design the majority of the ads over in the sidebar I’d probably use Photoshop.

    If I was going to design The Smashing Cat I’d probably use Illustrator.

    1
  40. 77

    I’ve used Fireworks ever since I started web design & I’ve never had a problem with it except it always seems to crash, but only when I’ve forgotten to save something! However every time I do use Photoshop or even Illustrator they do this too, so it’s probably just an Adobe® thing.

    Overall though Fireworks in my opinion is just so much easier to use and in my personal opinion better.

    1
  41. 78

    First – sorry for my english!

    Fireworks has really the best concept for designing websites and more. But really, it is the most buggy and uncomplete software on the market. Everyday ive got problems. With every Mac (MacPro, MacBook, MacBookPro and the new MacBook Air), every System form 10.4 to Mountain Lion, and every Version since Macromedia Firworks 4. To describe all problems ia he to write a book and to make a screencast about 1 hour.
    FW has allways a delay for the infomation tool, layers, status …. It takes about 30 seconds to save a 16MB file on a local SSD???
    Really, i have tried all what is possible to make it faster … and so on, also Wacom Drivers for my Intuos 4 from early2011…

    Thats also Fireworks!

    Best, Michael

    0
  42. 79

    I was a Firworks enthusiast, until I couldn’t edit a png file after open it. For some weird reazon, two times in diferent projects occures the same, all the work made in that png files were lost. When I opened the files, there is no layers, no slides, nothing to edit, just a flat image. I had to remake all the work and I have to move to Photoshop to design a wesbite.

    0
    • 80

      If you are using versions previous to cs6 be aware that you can save 2 different kinds of PNG in fireworks. One is the layered editable version (first option on the drop down when about to save: “save as fireworks PNG”) and the other is the flattened version (“save as flattened PNG”). Both are to be saved as *.png, just pay attention to which one you are picking.
      However this has been changed in cs6 and now editable fireworks png’s have the extension *.fw.png in order to avoid errors and confusions.

      0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top