Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Collaborating With Adobe Fireworks On Large Design Teams

Working with people can be hard. But get it right, and you’ll be able to produce stunning work more smartly and quickly than ever before.

With methodologies such as agile1 and lean2 influencing how design teams work, some interesting challenges lie ahead. Iterative and collaborative practices vary greatly across work environments and even projects, and they can, and most likely will, bring your time-honed workflow to its knees.

A shared understanding of the tools (and the way you use them) is crucial, then. By sharing assets, constructing files systematically and generating objects using core techniques, the team is freed to focus on crafting concepts and solving problems, rather than fighting unwieldy file structures and obtuse working practices. This shared understanding should underpin everything the team works on, becoming part of an ever-evolving process of refinement and learning.

Further Reading on SmashingMag:

In this article, we’ll see how to start that journey by creating a stronger foundation for collaboration, even before the design process begins. I’ll also explore some techniques that are unique to Adobe Fireworks and that have the potential to transform your collaboration. (While these techniques involve Fireworks — my team’s tool of choice — you could apply them to your own workflow, even if you use another UI design tool.)

The Right Tools For The Job Link

You don’t have to listen too hard to be deafened by the passionate war cries of designers defending their program of choice, or else ditching it altogether. With Adobe’s decision to cease active development7 of Fireworks, focusing on this design tool might seem strange. However, neither Photoshop nor Illustrator can yet be used to design interfaces and Web graphics as efficiently.

The open extension architecture of Adobe Fireworks keeps its pulse beating, enabling the wider community to pick up Adobe’s slack. (The article “The Present and Future of Adobe Fireworks8” covers this topic in depth and is well worth digging into.)

When it comes to UI design, Fireworks still has numerous advantages and is without doubt my team’s preferred design tool. In fear of repeating others, I’ll refrain from describing every Fireworks feature, focusing instead on what works best for us and on how Fireworks improves our workflow.

To get primed, consider reading some of Smashing Magazine’s other detailed articles about Fireworks, covering such essentials as vector graphics, direct selection, master pages, symbols, prototyping and extensions:

What we’re really interested in is how best to exploit what’s available to improve collaboration. Below is a rundown of the juiciest parts.

Multiple Pages in a Single Document Link

Fireworks PNG (*.fw.png) is a neat, self-contained editable file format that contains all of a website or section’s layouts. This affords us a couple of advantages because we can apply a common page and layer structure to all pages in a document by using master pages and shared layers.

Multiple pages in Fireworks.
Multiple pages in Fireworks help to organize your workflow. (Image credit: Trevor Kay17)

Multiple pages also help with cross-device design, because each page can have its own dimensions. You could have laptop, tablet and mobile phone screens all in one file, and even 1× and 2× versions that share assets and styles!

Using Symbols for Common UI Elements Link

By turning common UI elements into symbols, we can reuse them throughout the document. Update once and the changes will propagate everywhere!

Symbols can also make any transformations to a rasterized image non-destructive. Import an image, turn it into a symbol and then scale without a care.

Note: When using symbols to make bitmaps lossless when rescaled, you are still limited by the original image size. Scaling a symbol larger than the original will obviously introduce artifacts. Turning a bitmap into a symbol only facilitates lossless rescaling, as long as the symbol is as large as or smaller than the original.

External Libraries Link

With the Common Library, you can save a group of symbols outside of your PNG files to be reused across projects — think browser scroll bars, social icons and other handy stuff. Adobe Fireworks already comes preinstalled with a selection of symbols, ranging from fair to best forgotten. Unfortunately, these (and any libraries you create) must be saved locally in a particular folder on your computer, so sharing them with the team could be painful.

Fear not. This workflow can still be useful, and we’ll walk through a way that is not as well documented. Avoiding many of the limitations mentioned above, we can create a Fireworks master document: a single self-contained file that houses all of your shared symbols and that will feed all of your separate artwork files.

Export, Import and Update Graphic and Typographic Styles Link

Similar to other Adobe programs, Fireworks allows you to create a library of styles. Save any color, typographic style (font family, font weight, font color, etc.) or combination of live filters into a preset. Then, at the click of a button, the selected element will adopt the styles you’ve defined. These styles may be grouped, exported and imported between documents and, again, updated globally.

The workflow described in this article assumes a team of people, but the techniques will save you time even if you work alone.

Creating A Strong Foundation: Boilerplate To The Rescue Link

We’re going to have to overcome a few hurdles in order to use Fireworks effectively and to prepare a given project for the team. Creating and sharing a common starting point is key. A solid folder structure outside of Fireworks and a boilerplate will enable us to start quickly and to pick up a document where another team member left off, with minimal fuss and fewer headaches.

Creating a Boilerplate Link

The boilerplate should be the first file your team opens when it starts to design. It needs to be a living document, evolving as you improve your workflow and learn. Every team will have its own preferences, but here are some principles to guide you.

To get started, download the sample boilerplate18 (ZIP, 200 KB) that I created for this article.

Your boilerplate should be a living document. (Large version20)

The sample boilerplate (ProjectBoilerplate_1140_v1.0.fw.png) contains two pages: “1. Blank” and “2. Modular Scale.” I also took advantage of the “Share Layer to Pages…” feature in Fireworks to organize the file.

Structure and Layers Link

Fireworks layers (identifiable by a folder icon) may contain multiple objects, groups of objects and sublayers.

Fireworks layers panel.
Fireworks’ Layers panel. Every layer, sublayer and individual object (or group of objects) can be easily renamed.

Keep the base structure high level and abstracted. In my experience, three layers, named “Foreground,” “Background” and “Guides” are usually more than enough. With fewer layers, you will enjoy the benefits of easy object ordering and direct selection. Photoshop users will feel uncomfortable as they try to confine each element to a separate layer group. Resist the urge! It will restrict your flow and efficiency.

Select any object on the canvas with the Selection (the V key is a shortcut) and Sub-selection (A) tools, and rearrange the stacking order easily with Control/Command + up/down or Control/Command + Shift + up/down. Manipulating objects in this way is incredibly quick. Note that an object may be arranged only within the current layer; so, the higher the number of layers, the more restricted an object’s movement will be. If you find yourself working with the Layers panel for specific actions, like naming, visibility and masking, then try to simplify your file structure by reducing the number of layers (perhaps by consolidating layers).

Labelling Link

That being said, don’t get (too) lazy. Labeling (or renaming) symbols and locking objects are still important. Because the naming of object groups is non-persistent, there is little point in going over the top.

Use the Pointer tool (i.e. the Direct Selection tool — V) and Subselection tool (A) to highlight the objects you’re working with and to work more quickly. The Pointer tool is usually used to select an individual object or a group of objects, while the Subselection tool will select an object in a particular group of objects.

When working with more complex objects, the Select Behind tool (press V twice) might be handy, too.

Important: Once a group of objects that you have named is ungrouped, the name will be lost, even if you regroup them. To help you work with groups, John Dunning21 has created a smart set of commands22. These commands enable you to add elements to existing groups, to easily ungroup objects without losing the attributes of the individual objects within the group, and more.

Grids Link

There are no hard and fast rules about grids. Different grids suit different briefs, technologies and situations. Test different systems, though, to get a quick start when you need one. Use both solid shapes and guides (Control/Command + ; or View → Guides → Show Guides) to define horizontal spacing and gutters. Some great Fireworks extensions for creating grids are covered in Ashish Bogawat’s article “Optimizing the Design Workflow With Fireworks Extensions, Part 123” (see the sections on “Grids Panel” and “Guides Panel”).

Common Viewport Dimensions Link

By creating a small library of graphical silhouettes that match the dimensions of common monitor resolutions, you can quickly sense-check your layouts (and page folds) by toggling their visibility. The silhouettes can also help you frame content when designing long pages.

Baseline Link

Make a vertical baseline with the Grid tool (Alt + Control/Command + G), and turn on “Snap to Grid.” Now, when you resize elements, you’ll find that snapping their height to the baseline value becomes natural. This enables you not only to run the baseline down the canvas infinitely, but to control each one independently, viewing it separately or alongside the horizontal grid.

Modular and Typographic Scale Link

As part of creating a coherent design, you will be defining the space between page elements. Not only is this a necessary element of a design system, but it enables the design team to make informed decisions going forward.

Normally, these values settle into multiples of 10. Why? Because that is the number of pixels that the extended nudge command (Shift + down/up/left/right) moves in most of Adobe’s applications (Fireworks, Illustrator, Photoshop and so on). And, realistically speaking, who doesn’t prefer to deal with nice, clean round numbers? As convenient as that may be, though, it makes little sense. Defining a modular scale up front will help here. Like a musical scale, a modular scale is a prearranged set of harmonious proportions that run through the design, forming relationships between elements and pulling them into a balanced whole. Because the Web is primarily a medium for textual content, our scale should be driven by typography.

The website Modular Scale24 is incredibly useful both for defining a typographic scale and for gathering a set of proportions to define spacing and size. Use solid shapes in the proper dimensions as measurement guides to lay out the design.

Like all rules, these too may be broken. But by educating your design and development teams and by giving them logical, predictable rules to follow, they will find their own efficiencies and achieve wonderful things. If this piques your interest, you can find out more from the following resources:

Common Folder Structures and Naming Conventions Link

Any folder that is accessed and organized by many hands has the potential to get ugly, and fast. Agree on common folders and file-naming conventions for templates, assets, source PNGs and documents, and then stick to the system. The team should adhere to the rules, or at least try to maintain some level of discipline.

Tip: Try numbering your project’s folders to order them according to your agency’s convention or creative process. It also forces people to think about structure before offloading their files.

If you’re using Fireworks CS6, then you’re probably aware that the file names of artwork you save now include .fw before the .png file extension (i.e. *.fw.png). If you’re using an older version of Adobe Fireworks (CS5.1 or lower), get into the habit of manually following this convention. Not only does it immediately distinguish an editable PNG file from a regular (flattened) PNG, but it also fixes an old bug when opening Fireworks documents in Photoshop.

Version Control Link

Versioning software can be incredibly powerful for a team. It can certainly help to kill the final_final_finalv8_last schema that we all know and love. But popular technology such as SVN29 and GIT30 have their downsides. They are not developed with a designer’s needs at heart, instead treating our files like any other flat asset and preventing us from accessing individual pages. We also can’t visually browse the history of our artwork, and we often need a certain level of technical knowledge to use them comfortably.

But things are changing. Services such as LayerVault31, Pixelapse32 and Beanstalk33 (with its design preview) are now releasing the potential of version control. They keep things simple and streamlined, and they can show the evolution of a design through every save and comment (comments are tied to particular versions). If you have not considered version control, now is the time to introduce it into your workflow.

Visual version control
Visual version control

Style Guide-Powered Visuals Link

Like most graphic design apps, Fireworks was built from the ground up for individual users. Only one designer can open and work on a given file at any time. You will more than likely fall into the natural habit of separating a file into sections, saving individual PNGs that reflect the website’s architecture. This will enable other designers to work on the project at the same time.

There is a downside. When you split a project into separate files, you lose many of Fireworks’ advantages — namely, shared layers, master pages, symbols and more. This is where the Common Library saves us a lot of heartache by keeping things consistent across multiple documents.

Fireworks Library Panels Link

Fireworks has two library panels: the Document Library and the Common Library.

The Document Library panel (Window → Document Library or Alt + F11) lists any symbols that you create, import and use in the active document.

Fireworks Document Library panel.
The Document Library panel.

The Common Library panel (Window → Common Library or F7) holds non-project symbols that have the possibility of being used across multiple projects or in more than one document.

Fireworks Common Library panel.
The Common Library panel.

The name of this panel — “Common Library” — sometimes causes confusion. The panel is simply a way to navigate and select symbols that are available across any (and all) Fireworks documents at any time (think of a common library of symbols). A symbol taken from the Common Library panel will appear in the Document Library panel (for that file) only after it has been selected and included from the Common Library.

Let’s make things a little clearer by creating a Common Library symbol. First, draw a simple shape and turn it into a symbol (F8 or Modify → Symbol → Convert to Symbol).

Symbol creation dialogue.
Creating a Common Library symbol.

Name your symbol, and make sure to check the Common Library box (see the screenshot above).

You should now be presented with a “File Save…” dialog box. (Notice that the file name ends in *.graphic.png, which is how Fireworks defines a Common Library symbol, although the graphic part isn’t strictly necessary.) To include this symbol with the other assets available in the Common Library panel, we need to save it to a particular folder in the Fireworks config folder on your computer. Here are the exact paths for Fireworks CS6:

  • Mac OS X
    ~/Library/Application Support/Adobe/Fireworks CS6/Common Library/…
  • Windows Vista, 7, 8 and 8.1
    [system drive]:Users<USERNAME>AppDataRoamingAdobeFireworks CS6Common Library…
  • Windows XP
    [system drive]:Documents and Settings<USERNAME>Application DataAdobeFireworks CS6Common Library…

Save the symbol, and then return to the Common Library panel. Hit “Refresh” in the bottom-right of the panel, and your new custom symbol should appear, ready to be used across any number of documents!

Common library (refresh button).
The refresh button in the Common Library panel.

On the face of it, this seems pretty useful. Yet it has some significant limitations for large teams:

  • Each symbol must exist as a separate Fireworks PNG file, which means it will show no context of the design around it.
  • There is no easy way to alter the location of the graphic files, which makes it difficult for a team to share and update the symbol files.

Let’s dig a little deeper.

How To Create A Fireworks Style Guide (Symbol Library) Link

Although there is little in the way of documentation, there is another way to implement a Common Library, one that is far more useful: by leveraging a single external library, which can feed any number of symbols to multiple PNGs, which, in turn, can be updated globally. If this gets you excited, just wait till I show you its potential to become more: a master document, a backbone for your project, all driven from your multi-paged style guide. Exciting times!

The Configuration Link

From this point on, it will help to work with an established design, once you’ve agreed on the direction and have an initial framework in place.

Create a new Fireworks PNG file, which will act as a source file for your external library and style guide. Enlarge the canvas and save the file (for example, as styleguide.fw.png). If you’re part of a team, then save the file on a shared space or common server.

Adding Objects Link

Our empty document isn’t exactly fulfilling our hope of it being a global style guide. Let’s add some of our design elements.

Select a component from your artwork. Copy and paste it into your style guide. To turn this object into a shared asset, convert it into a symbol. And this time, leave the “Save to Common Library” box unchecked.

Reminder: If you add any symbols in the style guide, remember to leave the “Save to Common Library” box unchecked.

At this point, following a naming convention when creating the symbols would be useful. I like to use prefixes like Global_, Form_ and Btn_ to categorize symbols, but you can follow your own convention, of course. Prefixes makes it easier to find the right asset when you later need to import it back into your original artwork files.

Note: You can also split the document into a number of pages and add supporting graphics. It won’t affect how we import the symbols into our artwork.

Importing Symbols Link

Returning to the original file, open the Document Library panel (F11), and select “Import symbols” from the drop-down menu in the top-right of the Document Library panel.

Importing a Symbol
Importing a symbol into the current Fireworks PNG file.

In the file browser, navigate and select the style guide library file that you have just saved (styleguide.fw.png). You will be presented with a list of all of the symbols available to be imported from your style guide. Select the symbols you need and click “Import.”

Updating a Symbol in Fireworks.
Selecting a symbol (or symbols) to import

Once they’re imported, you’ll find the symbols in the Document Library panel, with an _imported suffix. From this point on, you can treat them like any other symbols. You can drag and drop them into your current Fireworks artwork file, rename them and so on.

Summary: Creating a New External Library of Symbols Link

  1. Create a new Fireworks source file for your external library and style guide (for example, styleguide.fw.png).
  2. Copy the assets and symbols from the working design document(s) to the styleguide.fw.png file.
  3. Convert the assets and objects in the styleguide.fw.png file into symbols (if they are not already symbols).
  4. Save the styleguide.fw.png file in a location that will not change.
  5. Create a new working design file.
  6. Open the Document Library panel and choose “Import” from the context menu.
  7. Navigate to and select the styleguide.fw.png file, then open it.
  8. Choose the symbols that you want to import from the styleguide.fw.png file.
  9. Import the symbols, which will now appear in the Document Library. Done!

Updating The Style Guide Link

We’ve created our style guide library (styleguide.fw.png), identified the elements to share between documents and started rolling out templates across multiple Fireworks PNG files. But wait! What happens when we need to change one of our components?

Remember that we’re feeding all of our artwork Fireworks PNGs from our external library, so any changes need to originate from there.

Open the style guide file, double-click the symbol that needs to be updated, apply the corrections, and resave the file. Next, return to your current artwork; in the Document Library panel, select the imported symbol(s) that you wish to update (holding Shift to select multiple items); and, from the drop-down menu in the top-right of the panel, select “Update…”

Updating a Symbol in Fireworks.
Updating a Symbol in Fireworks.

Adobe Fireworks will look for the file that the symbol was originally imported from, automatically updating the relevant symbols in your artwork, regardless of how many pages it contains. Repeat this step for any Fireworks PNG artwork files that source symbols from the same library.

Note: For large files, the updating process might take some time. When the process is complete, Fireworks will display a success message.

Summary: Updating the External Library Link

  1. Amend the symbols you wish to change in your style guide file.
  2. Save the changes to the file.
  3. Navigate to and open your artwork file(s).
  4. Open the Document Library, and select the symbols you wish to update.
  5. Choose “Update…” from the context menu.
  6. Wait for the success message to appear.
  7. Repeat for all of the artwork files you wish to update.

Your style guide will now serve as a single reference library, accessible to everyone on the team, and detailing all of your designs components and development notes. It will also serve as a master symbol library, powering all of your artwork files.

Things to Be Aware Of Link

Nesting a symbol within another symbol is possible. With this method, both symbols will be imported, and the symbols will be displayed as separate items in the Document Library panel. But if you enable the “Select Unused Symbols…” option, it will highlight the nested symbol to be deleted, not recognizing that it’s being used in the active document canvas. So, I wouldn’t recommend nesting symbols.

Tips And Tricks Link

By keeping your source files clean, deleting unused symbols, grouping complex objects and doing regular housekeeping, you’ll keep Fireworks from getting too hungry for system resources. But if you find yourself running into problems and Fireworks slows down, there are few tricks worth knowing.

Pages (Un)limited Link

Multiple pages are a great feature in Fireworks but at times can give you some trouble.

There is no limit to the number of pages you can add to a document. (In his article “Interactive Prototypes and Time-Savers With Adobe Fireworks34,” Trevor Kay mentions that he was able to use Fireworks PNG files with more than 150 pages.) But the more complex each page is, the more memory Fireworks will need.

Add too many pages, and there’s a good chance Fireworks will use too much RAM and slow down a bit (or even become unresponsive or crash). So, for complex designs, I recommend keeping Fireworks PNG files to under 25 pages. And if you mostly use lightweight simple vectors, you can push that number to 40. Staying within these limits will prevent frustration down the line.

Tip: While there is no upper limit to the number of pages you can add to a document, there is a small bug with page numbers when you create more than 100 pages. Adobe planned for only two digits in the page-number field; so, 98-99-100-101 becomes 98-99-10-10 and so on (i.e. the third digit cannot be displayed). Luckily, you would rarely need more than 100 pages.

Learn to Love Control/Command + S Link

This could be said of any application, but you should really learn to love Control/Command + S in Fireworks. Save your files regularly! On Mac OS X, if you forget to save regularly and Fireworks crashes for some reason, it will try to restore a backup copy of your Fireworks PNGs on the desktop — but don’t count on it.

If auto-saving is your thing, a number of great free extensions are available:

  • Auto Save
    This panel automatically saves the active document at an interval of your choosing (for example, every 5 or 10 minutes). An updated and improved version of it is also available, hosted on Project Phoenix.
  • Auto Backup35
    This small AIR extension backs up all of your open documents, saving the copies in separate folder at an interval of your choosing. Sarthak Singhal has more about the extension36.

Temporarily Lock Complex Assets Link

Group and lock heavy, complex vector shapes. Locking assets in a document can speed up rendering of the canvas substantially. When you do it, Fireworks will “know” that you’re unable to select that thousand-pointed vector object and will free up a fair bit of resources as a result. You’d be surprised by how much better Fireworks performs once you master this simple tip.

Of course, once you need to edit an object again, you can unlock it at any time.

Unused Symbols Link

Throughout the creative process, things change and elements are added, expanded and removed. If you are doing things right, you will be turning a lot of these elements into symbols. But symbols hang around, taking up memory and filling the document library. Solution? Simple yet effective, you can clean up the garbage by selecting the context menu in the top-right of the Document Library panel and then hitting the “Select Unused Symbols” option. Fireworks will automatically highlight all symbols that are not in use on any pages in the document. Now, you can easily delete them. Reducing the overall file size is a good housekeeping practice.

Clear Your History Link

If you really find yourself in a tight spot, clear the undo history from the History panel’s context menu, saving the Fireworks PNG file immediately after.

Conclusion Link

Taking the time to create a broad foundation is a simple and effective way to enhance understanding among team members. It is an important first step to unlocking better collaboration and facilitating the future involvement of other designers. It also provides an opportunity for discussion and a point of focus for iterations on a design.

By exploiting Fireworks’ libraries to their full potential, we can improve our workflow and roll out our artwork more quickly. When we adapt the master symbol library into a global style guide, we create a single entity with multiple facets of use. In fact, the majority of the workflow we’ve covered here could theoretically be applied to any graphic design application that supports symbols in a way similar to Fireworks!

So, why not try implementing this for your next team project? And if you have any other collaboration tips or any questions, we’d love to hear them in the comments below!

(mb, al, ml)

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
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36

↑ Back to top Tweet itShare on Facebook

Usually found in the wilds of the Northern England. Dan has been designing and building mobile and web products for over 10 years. By day he’s an Art Director for TH_NK. By night… well, that’s probably best left unsaid. He tweets as @thedistricts you should follow him.

  1. 1

    Fireworks was great, but Sketch has become my replacement for it.

    • 2

      As a long time FW user I’ve looked at alternatives including Sketch (FW will die – not because Adobe has dropped support but because current versions will fail as OSs progress).

      My problem with Sketch is it doesn’t allow you to export to common file formats – mainly PSD. As a freelance designer I’m at the mercy of other agencies who still require a PSD to handoff to developers.

      I think this is going to be an exciting time as startups race to create the ideal UI design tool (it’s not PS or AI)!

      • 3

        If you’re looking for something that can specifically export PSD’s then look into iDraw. It’s on par with Sketch as far as use and functionality.

  2. 4

    Sounds like you have a lot to learn about Photoshop and Illustrator.

    • 5

      Anyone making comments about Photoshop and Illustrator doesn’t really know Fireworks, its extendibility and how it can speed up your workflow … Photoshop sucks compared to Fireworks for web graphics/workflow.

  3. 6

    I don’t think Fireworks is dead just because Adobe stopped putting new features into it. Fireworks is a matured product with many kinds of workflows that can benefit designers and teams to work together and this article clearly emphasise these. Many tools are trying to implement Fireworks features their own way. That’s all.

    And thanks for the mention on Phoenix Auto Save. That was an old site what i started the Phoenix Project. I am launching the new features for Fireworks next week.

    • 7

      Dylan Valade

      April 29, 2014 1:27 am

      Linus, keep up the great work! You’re going to save Fireworks. If you keep coming out with tools like this no other platform will be able to catch up.

    • 8

      No problem, it’s a great extension. I’ll keep a close eye on Project Phoenix – the upcoming feature set looks excellent!

    • 9

      Abinash Mohanty

      April 29, 2014 1:36 pm

      I have used Phoenix Project and this is really awesome! I would say FW is the future (at least for the present) when you work closely with multiple designers at the same time due to its robust features. The only problem I found with FW is that the interface is not as intuitive as PS.

      • 10

        It looks so strange to me when you say that FW’s interface is not as intuitive as PS. For me as a mainly FW user I would say the opposite so it depend about the how much time and for what purpose you spend in one tool or another. Just having a contextual tool bar on the bottom is a such a convenient benefit of the FW that little can be compared to. Now PS and FW are two different tools aiming for different purpose so if u are mainly oriented in art and photo manipulation the PS is an obvious choice, but for UI and web design FW does a much better job, more logical and pre-prepared environment made for that purpose. So when you say you love the PS more than a FW there is no too much sense in it as it’s like you are preferring a shovel to a mattock ;)

  4. 11

    I’ve been using Fireworks for about 10 years, and if I had my way, I’d use it forever. But its days are definitely numbered, and the clock is ticking. I can’t see the point in putting any time at all into learning more about it, when instead I need to be putting the time into (ugh) learning Photoshop.

  5. 12

    I use FW from many years ago, and I can’t change it. The PNG format, versatile, light, ideal for sharing and the previsualization… The velocity to make mockups and final designs is awesome, and the easy to move objects, the best feature.

    I can’t imagine today the change to photoshop, the most slow software for design interfaces…

  6. 13

    I am so happy to see this article. I have been using Fireworks since version 2! I can’t live with out it. Our team at all use it still, and haven’t really found anything that can quite replace it (Sketch is close). I can challenge any advance Photoshop user to try to compete with it, but have yet to find someone that can do it faster. I have converted many design shops to use Fireworks as well as it is super fast agile (and lean) as you mentioned above. Thanks for writing about Fireworks, keep it coming! Long Live Fireworks! (I hope Adobe is listening…)

  7. 15

    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!

  8. 16

    Well done Linus for your proactive and commendable efforts, you’re punching well above above your weight I’d say! In my opinion Adobe wants designers to feel limited by Fireworks, therefore they’ve halted the development of such features that Linus has built.

    Adobe’s reaction to RWD has caused them to see Fireworks as a static and aged tool suited to designing screen instances rather than experiences. Yet, Fireworks does offer RWD flexibility in: pages, states and layers. With options for multi dimensions within the same PNG. Fireworks is the most Pixel perfect tool I’ve used for pixel based design. I’ve been using Illustrator for 12 years as a vector drawing tool, but over the past month I’ve tried to migrate my UI workflow to Illustrator, with very mixed results. I can’t really understand why Adobe would seek to alienate commercial users, without offering similar functionality in another product.

    • 17

      Hi Michael,

      Thanks for the kind words. I really admire your passion to put up the Fireworks articles. I love to see more coming. I think many see Fireworks just a software of the past, not knowing they are missing a lot. If designers need to deal with multiple projects each with its own design approach, processes and communication with teams, Fireworks will shine above the rest. Fireworks will live on as long people give it a chance and fully utilise its potential.

      I have added some of the Smashing Magazine articles on my site too. Hope you are ok with it.

  9. 18

    Abinash Mohanty

    April 29, 2014 1:29 pm

    Thanks for the article Dan! I have read most of the FW past articles on SmashingMagazine. I have been chatting with Linus via Fireworks Facebook group including the Phoenix Project and it’s quite good. I love PS before getting into FW 4 years back. FW rocks if you are working in an agile or lean environment only because of its huge collection of extension list starting from Orange Command, Pages, Favorite Commands, Export almost everything including the sprite image files for web designers, Find & Replace, etc., that’s quite impossible in photoshop. I use FW when it comes to Web or Mobile Interface. We use FW to create draft wireframes and click through prototypes and send over to client for approval if we have less than 2 hrs of time before getting into the actual visual design part. That’s the power of FW, but that doesn’t mean we hate Photoshop rather than we integrate with FW as a better workflow.

    Photoshop has its own charm by the way. I use it for Digital Design/Art, Image Processing, Digital Ads, etc. over FW all the time.

  10. 19

    FW is an perfect tool. But it is not useful anymore. The problem it had from the beginning is: You need PS 100%, maybe also for print but 100% for web and all small jobs you do – PS is good for 1000 needs; you need AI 100% for vector graphics and illustration, its good for 1000 needs; you need ID 100% for print, is perfect for this. Nobody of your clients will complain, if you don´t know FW, also it is more useful many, many times… So RIP FW – smashing would do well to accept this.

  11. 21

    Fireworks is over. These articles are of little use in 2014 and beyond.
    I come to Smashing Magazine as it looks to the future and the idea it is catering to deprecated software, well it is a deal-breaker for those of us who want to move forward.

    Invest your time on educating those people who are stuck with Fireworks (fortunately not me), as to what their next step should be. I imagined fireworks users are quite frightened knowing the software is officially dead and they have spent years invested in learning it.

    Help them!

    • 22

      I could only agree with you lowrcase, that “Fireworks is over”, if it wasn’t up to scratch in facilitating the workflow of designers who need to create UI assets with pixel perfection, exhibiting numerous states and user patterns, but it does.

      I wouldn’t dream of using Fireworks’ tools for vector art creation, neither for raster art creation, but pulling support for a product that serves UI design in the way that Illustrator serves logo design doesn’t make sense.

      Dated software that tends to fall short of current needs naturally dies, fair enough. The developers only have themselves to blame for living in the naughties one might say! But I’ve yet to see Fireworks’ workflow tools being replicated in another Adobe application. So why the death of Fireworks, without mirroring those successful functions in its successor?

      Software that dies a natural (user migration) death is logical. Software, or any product, that dies in any other way is unnatural and will always cause some level of panic.

      The future of Fireworks (within the open-source community or otherwise) may be in its strength to support designers of progressive disclosure and staged based experiences.

      Thanks to Dan for his great article and Smashing Magazine for facilitating the discussion.

    • 23

      Mike Boardley

      May 1, 2014 10:26 pm

      This shows your ignorance lowrcase. If Fireworks was “over” this story would have never made it past the editors at Smashing Magazine. Do you think Smashing allows their contributors to post whatever they want without reviewing it?

      Smashing Magazine is made up of forward-thinking people who present content that is relevant and helpful to web designers and developers. Fireworks being part of that relevant content.

      To all the nay sayers concerning Fireworks, you have ZERO idea about what you’re talking about when it comes to Fireworks. You may have “used” it on occasion but could never have been experienced and a serious user because if you had been, you wouldn’t be saying these things.

      People like Linus and myself know because Fireworks has been with us in the trenches of Web Design for most of our design careers. Fireworks has never failed to deliver simplicity, speed, quality graphics and a much more rewarding design experience. This talk of it’s relevance is ridiculous. I am going to clue you all in on something: FIREWORKS IS STILL BETTER FOR WEB DESIGN THAN PHOTOSHOP CC.

      “and you will know the truth, and the truth will set you free” – John 8:32

      • 24

        That is all great. but you are missing the most important thing here that trumps any and all users, regardless of how many years they have worked with Fireworks.

        It has been discontinued.
        Sorry about that.
        But it just doesn’t exist from this point forward in terms of where design for online media is heading.

        Harsh but true. Better start learning some other software before you get left behind!

        • 25

          Mike Boardley

          May 2, 2014 9:38 pm

          Left behind? Are you kidding me? LOL
          Fireworks users are AHEAD of the game and always have been.
          Fireworks CS6 still does MANY things neither Photoshop CC or Illustrator CC can.
          So until either of those two products begin to actually compete with Fireworks, you’re the one who is behind.

          • 26

            Just pop a cassette into your Walkman and get back to work then.

    • 27

      Fireworks is good as you can quickly catch most of it’s advantages and the workflow doesn’t require years of practice to master it. From my experience the time needed is much closer to a several months of intensive creative work and you will cover over the 70% of what it offers. For most of the users that’s enough to be creative and for FW is enough to become more productive environment than any other tool trying to serve the same purpose (WEB / UI design). It has a very logical and (once you use to it) user friendly environment and it’s much easier to be productive in WEB /UI design with it than with a king of a all in one tools PS – if the AI jumps in to save the day from time to time ;) So while being a one big creative tool covering so much powerful tools and areas for general design and creation the PS is actually miles away from a convenient UI / WEB design production environment. Second and more important thing is that, obviously, there is NO good alternative to FW – not saying that there are no alternatives at all – but those alternatives has flaws here and there and are not so complete and well rounded as FW is as the UI / WEB design tool. The alternatives will come once, but for now I prefer FW over the others. For the comparison, the WIn XP is also dead OS for years already, but here it is, the ultimate OS percentage king, even there are alternatives and those alternatives are much better. And I would say that FW is much better product in general than the XP ever was… So being dead is very relative term especially until the proper alternative shows up.

      • 28

        Your comparison holds no weight unfortunately. Windows XP became Vista, Windows 7, and then 8 and on it goes…

        Unfortunately Adobe have decided to stop production of Fireworks all together. A very different scenario in the software world.

  12. 29

    My dream would be for Fireworks to live on as an open source program. But I’m sure Adobe would rather FW users to migrate to their own programs.

    • 30

      Mike Boardley

      May 1, 2014 10:28 pm

      I am still hoping against hope Adobe is revamping it.
      If that doesn’t happen, then yes, I hope for the same thing.

  13. 31

    Justin White

    May 5, 2014 11:19 pm

    ENOUGH ALREADY! Jesus…. Can we stop bitching about Fireworks, move on from any and all the rap Macromedia put out, and Adobe dropped the ball on? When is that going to happen? When are we as a community going to stop burying our heads in the fracking sand?

    One word. Sketch. Give it a look. Sketch App by Bohemian Code. I’m in the process of migrating my current work over to Sketch as a replacement for Illustrator and/or Fireworks.

    I love it. I tried getting company wide adoption, being an old Fireworks user myself. I tried your fancy Evernote and Fireworks component library nonsense, that went over real well… *HUGE EYE ROLL*

    Call me crazy, but for all intents and purposes, Smashing is promoting a dated, obsolete, fan boy workflow. What next? An article about integrating Windows XP into your workflow?

    The concepts here are sound. The technology is dead. Sorry, but it’s time to cond


↑ Back to top