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

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

Refining Your Design In Adobe Fireworks

While certainly not as well known as Photoshop, Adobe Fireworks is a great tool for creating user interfaces, website designs and mock-ups, wireframes, icons and much more. However, most designers who have been using Photoshop for years may find Fireworks a bit awkward at first. Fireworks does have a slightly different workflow and requires a slightly different approach than you may be used to.

In this article, I’ll share some tips that I use in my work in Adobe Fireworks that could help improve the quality of your designs and workflow. Some of these tips are just quick explanations of features that you might not be aware of, while some are techniques and methods to improve the default visual results. Let’s begin!

Improve Fine Strokes Link

Fireworks’ stroke feature gives the user quite a lot of options. But one of the most important is missing: the ability to add a gradient to a stroke. Also, the effect from the Stroke tool isn’t always elegant — for example, when using an inset border with rounded corners.

Default stroke render in Adobe Fireworks
Native stroke rendering in Fireworks. The rounded corners look a bit too thick.

Fireworks lets you specify the stroke’s position: outside, centered or inside. But the best results are when the stroke is outside.

Three possible stroke alignment options in Fireworks
Stroke can be set to different alignments in the Properties panel. Outside (example 3) looks better for fine strokes than centered or inside.

But in such cases, I recommend a composite path instead of a stroke to get better control of the result and to be able to apply a gradient to it.

Start by drawing two rectangles with rounded corners, one of them 2 pixels taller and wider than the other. Put the smaller rectangle above the larger (you can verify that it’s above in the Layers panel), and make its border radius smaller by several pixels, as shown here:

Two vector shapes for making a custom stroke
We’ll need two vector shapes to create our custom stroke.

The purpose of the smaller shape (the one with the yellow-orange background) is to cut out (or “punch”) the interior of the red shape, resulting in a 1-pixel-wide object that can be used in place of a stroke. To achieve this, select the two rectangles and hit the “Punch Paths” tool icon in the Path panel:

Punch paths command in the Path panel in Fireworks
Punch Paths will help us get a better-looking stroke.

Alternatively, you could select the two rectangles and go to Modify → Combine Paths → Punch.

Composite path (custom stroke)
The stroke is now a composite path that you can easily edit and even apply a gradient fill to.

Bonus tip: Should you later decide that you need to resize this shape (without distorting its perfectly rounded corners), the “9-slice scaling tool” can come to your rescue:

9-slice scaling tool in Fireworks
Distortion-free scaling is easily achieved with the 9-slice scaling tool.

Draw Better Triangles Link

Triangles are everywhere in user interfaces: arrows in buttons, breadcrumbs, pop-over indicators and so on.

While Fireworks provides built-in arrow and polygon vector drawing features, I recommend going the customized route and drawing those vector shapes yourself.

Arrow autoshape
The Arrow vector autoshape in Fireworks. The yellow control points allow for easy customization of width and height, thickness, type of head, roundness, arrow size and more.

Smart Polygon autoshape
The Smart Polygon vector autoshape in Fireworks. You can easily transform it into a triangle!

To illustrate our new workflow, let’s draw a simple arrow like the one in Kickoff’s download button:

kickoffapp download button
Kickoff’s download button

Let’s start by drawing a nice triangle. Most of the time, you’ll want an odd number of pixels for the triangle’s base so that its middle falls on a half-pixel, resulting in a sharp arrow:

Full pixel, half pixel
On the left, the triangle with an odd width. On the right, the triangle with an even width.

To create a triangle like the one on the left, we start by drawing a simple 7 × 7-pixel vector square using the Rectangle tool (found in the Tools panel, or simply press U). To delete its bottom-right point, use the Subselection tool (press A, or use the white arrow in the Tools panel), select the bottom-right node, then hit the Delete key; Fireworks will remind you that you are trying to change one point of a rectangle primitive and that it must be ungrouped for the change to occur; so, click “OK” to turn it into a vector, and delete the point. After deleting the corner, you’ll end up with this:

Square with bottom right vector point deleted
Our square with the bottom-right point deleted.

We now need to place the bottom-left point exactly at the center, which is located at 7 pixels ÷ 2 = 3.5 pixels from its current position. When you use your keyboard’s arrows, Fireworks moves the elements by full pixels only and aligns them perfectly to the pixel grid. This is convenient in most cases but not in this one. Luckily, Fireworks gives us a “Move Points” feature (in the Path panel) that lets us specify numeric values:

Moving an object by an exact numeric value
Moving horizontally by 3.5 pixels will center our bottom point.

If the triangle is now a bit too tall for our arrow, use the Subselection tool to select the center point again, and press the up arrow key twice to move the node up a couple of pixels.

We’re almost done! We just need to draw the 3 × 5-pixel rectangle part of our arrow and then use the “Union Paths” command (Modify → Combine Paths → Union, or press Control/Command + Alt/Option + U) to combine our two paths into one final single vector shape:

The perfect vector arrow!
The separated shapes are on the left, and the unified shape is on the right.

Draw Better Ellipses Link

For some reason, Fireworks has difficulty drawing elegant circles (especially small ones), and the circles tend to have too straight an edge:

A circle? Almost.
A default circle in Fireworks. Note that the top, right, bottom and left edges aren’t rounded enough.

(Note: Fireworks is not the only app to have this problem. Illustrator has it, too.)

We’ll use the “Numeric Transform” window (Control/Command + Shift + T, or in the menu Modify → Transform → Numeric Transform) to make the circle just a tiny bit smaller:

Using Numeric Transform
Decreasing the circle’s size by a bit will make it appear more rounded.

Compare the two circles
The original on the left, and our result after the transform on the right.

You will notice that the right circle is more elegant; that’s because we have fewer “full” pixels at the edges:

The perfect circle
The original on the left, and our perfect circle (after the transform) on the right!

Fillet Points Link

One great feature of Fireworks that few people seem to know of is the Fillet Points path tool. Basically, it rounds any angle you select by a value that you specify. To use it, select any vector shape, and in the Path panel in the “Edit Points” section, choose “Fillet Points”:

Fillet Points in the Path panel
Fillet Points rounds all of your angles.

Let’s use the built-in vector Star autoshape as an example. Note that you need to ungroup autoshapes and rectangle primitives before using Fillet Points; then you can either select the entire vector shape to round all corners or use the Subselection tool to select certain points to round.

Results of using Fillet Points
The original shape on the left, and with Fillet Points applied on the right.

This can be a huge time-saver when you want to modify complex shapes with many filters and effects. Now you won’t have to redraw shapes over and over again just because the radius is a few pixels off.

Inset Paths Link

Another useful vector tool many designers are unaware of is the Inset/Expand Paths feature.

Inset/Expand Paths
Inset/Expand Paths is also accessible via Modify → Alter Path → Inset Path.

As you’ve probably guessed by its name, this tool enables you to alter a vector path and make it either smaller (inset) or larger (expand) without losing its proportions.

Let’s say we want to make our Star autoshape from above 10 pixels smaller:

Inset/Expand dialog
The Inset/Expand Paths prompt.

This dialog can be confusing if you do not know what all of the options and abbreviations mean. The third parameter (“Corners”) is the least obvious, because the meaning of “BE, RO, MI” is not defined. The letters are actually abbreviations of “Bevel,” “Round” and “Miter.” You can’t use those abbreviations in the text field, so you need to know the terms they represent. “Bevel” creates squared corners, “Round” creates rounded corners, and “Miter” creates pointed corners; the “Miter limit” specifies the maximum length of the pointed corners before Fireworks replaces them with clipped (or square) tips. We’ll use “Miter” in our example because we obviously want to keep our straight lines.

Star autoshape after applying inset/expand paths command
And voilà!

Gradient Dither Link

Adding a gradient between two similar colors (i.e. colors close in hue1) in a big shape often produces an unsightly banding effect, as shown here:

Banding in gradients
Banding is visible in this gradient (especially on LCD screens of the common “twisted nematic” type, which display only 6 bits per pixel, not 82).

To prevent this, Fireworks introduced in CS53 a Gradient Dither option that can be used if the edges of the object are set to “Anti-alias” and if you use the “Radial” or “Linear” type of gradient fill.

Gradient Dither option
“Gradient Dither” (found in the Properties panel) makes gradients look better.

The result is a smooth, unified linear gradient, similar to what you would get with CSS browser rendering:

Gradient with Gradient Dither applied in Fireworks
With the “Dither” option applied, the gradient becomes much smoother.

Similarly good results can be achieved by dithering radial gradients.

Avoid Large Shadows Link

Fireworks isn’t very good at rendering large shadows (if you use the “Drop Shadow” live filter). If you’re curious about the subtleties involved, a detailed article on WebDesignShock compares shadow and glow effects in Fireworks, Photoshop and Illustrator.

Instead of a beautiful shadow that slowly fades to a transparent value, the edge of the shadow might look like it has been cut off before fading to full transparency. The issue is particularly noticeable on the Mac version of Fireworks:

A large drop shadow effect in Fireworks
A shadow effect created with the Drop Shadow live filter. Notice the edges (in Fireworks CS5 on a Mac)—yikes!

Here are the settings to use to get this drop-shadow effect on Windows and Mac:

A large shadow live effect in Fireworks (on Mac)
The settings for the drop-shadow live effect on a Mac. Again, notice the “cut” edges of the shadow.

A large shadow live effect in Fireworks (on Win)
The settings for the drop-shadow live effect on Windows. The settings are the same, but the edges of the shadow are almost perfect.

So, instead of using a live filter, I usually duplicate the shape (the white rectangle in this example), set its edge to “Feather” and fill it with black.

A shadow using feather edge
Possible settings for the “shadow” vector shape behind the object.

Putting this shape behind the white rectangle produces a better-looking large shadow than the built-in method:

A better drop-shadow!
The original shadow on the left, and the “Feather method” on the right.

Practical Examples Link

A picture is worth a thousand words.

Fred Barnard4

Talking about gradients, fills, strokes, vector autoshapes, rounded rectangles, pixels and half-pixels is exciting, but a few real examples would be even better. Below are some illustrations, icons and UI designs that I made exclusively with Fireworks. The tips and tricks covered above made the results more elegant and refined.

A Dribbble shot by Benjamin De Cock5
Folder icon

A Dribbble shot by Benjamin De Cock6
UI for a date picker

A Dribbble shot by Benjamin De Cock7
“Free” icon

A Dribbble shot by Benjamin De Cock8
Icons for an FAQ

A Dribbble shot by Benjamin De Cock9
Envelope icon

A Dribbble shot by Benjamin De Cock10
Monochrome icon set

A Dribbble shot by Benjamin De Cock11
Kickoff teaser icon

A Dribbble shot by Benjamin De Cock12
Email account icons

A Dribbble shot by Benjamin De Cock13
Toolbar with navigation icons

As you can see, it’s all about pixel-precision, and Fireworks delivers great results!

Conclusion Link

Adobe Fireworks is a powerful tool, offering both vector– and bitmap-editing capabilities and even hiding some gems. Yes, it imposes different workflows, and some of its default effects are disappointing, but the advantages outweigh the little quirks here and there.

Having to change one’s work habits is always frustrating. Perhaps actions that you once did in a few minutes with your old design tool will now feel incredibly slow. Getting used to a different workflow takes time, and you might not see the benefit of using Fireworks immediately. The best thing you can do is commit to designing an actual project from start to finish using only Fireworks. Choose a small project or a personal side project for this purpose. Get your hands dirty for a few hours (or a few days). It’s the only way to be able to judge whether Fireworks really suits your needs. If you’re into UI design, I’ll bet it does!

If you’re interested in learning more about Fireworks, I highly recommend watching the great screencasts produced by Rogie King14. They offer many more tips and tricks for refining designs and achieving more polished results than this article.

Also, the work of others can be a good source of inspiration and knowledge, so have a look at the Fw PNG Week1815 series by Craig Erskine16, and download and deconstruct his free source PNG files.

Happy experimenting with Fireworks!

Further Reading Link

(mb, al)

Note: A big thank you to our Fireworks editor, Michel Bozgounov25, for preparing this article.

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

↑ Back to top Tweet itShare on Facebook


Benjamin is a freelance icon and interface designer living in Belgium. He specializes in iOS and OS X software design. You'll find some of his work on his Dribbble profile.

  1. 1

    I don’t really understand what are the advantages. i use photoshop and illustrator for about 15 years now. in the end i will have to make slices. if fireworks could create CSS/HTML code then i would understand moving to fireworks.

    maybe it’s good for people who don’t know illustrator.

    • 2

      It can. You can export markup with images. I understand CS6 takes this even further.

      • 3

        Michel Bozgounov

        May 7, 2012 10:05 am

        Yup, Fireworks CS6 has a new panel: CSS3 Properties panel, which can extract CSS from any selected object on the canvas. But, with that said: Let’s stay on topic, please — this article is about better workflows with Fireworks, not about Fw vs Ai vs Ps debate! Thank you! :)

        • 4

          Emil Johnsen

          May 9, 2012 3:00 am

          Does it only extract CSS3? Is it possible to have it extract only CSS1 or 2?
          Seeing as CSS3 is still in working draft and with dubious browser support, such aotu-features easily become the devil (and you save, tops, 15 lines of code writing)

    • 5

      From a web perspective, Fireworks can do a lot of what both Illustrator and Photoshop can do. So instead of having to run two tools, you only have to run one.

      I also find that Fireworks interface is much more simplified as compared to Illustrator and definitely Photoshop.

  2. 6

    Agree. Fireworks is one of the most underestimated tools in CS. It is the fantastic combination of vector and raster tool. Of course you can use AI for vectors and combine it with PS for rasters, but believe me there is no faster and easier way to create great looking and easily editable design at all. It has all the features you need to build a RICH Web design & applications.
    Think about the application which allows you to create great looking designs & UI elements. The application where you can create one file with all views for the websites, including states & styles. The application which helps you to create easily editable sprites sets in the same file you created the design (and then change the design and auto – update the sprites). The application which helps you to export and build HTML layouts, Flash animations and FLEX RICH applications as simple as it could be. That’s the Fireworks is.
    Love it!

  3. 7

    Ive been using Fireworks for vector graphics since the late 90’s. Long before Photoshop was capable of such things! Such a powerful tool.

    Keep the tips coming!

  4. 8

    WIIII, at last some kind words (and at least one new trick for me) about Fireworks. if only all webdesigners used it.

  5. 9

    Dude, this is awesome!

  6. 10

    Thanks a lot, great tips!

  7. 11

    I’m pretty sure this is a really stupid question but here it goes: When should i choose fireworks over illustrator? Up to this point in my career i have never found a compelling reason to use fireworks and none of my coworkers have been able to find one either. It has seemed to me that it was a matter of preference dating from before adobe absorbed fireworks and flash.

    • 12

      Michel Bozgounov

      May 7, 2012 8:46 am

      Fireworks offers a streamlined workflow for screen designers. Are you into screen design — web, mobile apps, icon design, etc.? If yes, Fireworks might be your tool. In fact, it might be the better tool!

      Also, why compare Illustrator and Fireworks? Ai is a tool that deals primarily with vectors and print, while Fw is a tool that offers both vector and bitmap tools inside one package! In Illustrator, you cannot edit bitmap objects, while in Fireworks you can. So if you are heavily relying on Illustrator for your screen design work, you’ll have to constantly switch to another tool (Ps?), when you need to work with bitmaps; this will likely slow you down. In Fireworks, you can work with vectors (Fw has a very powerful vector engine) and bitmaps, almost equally well.

      Of course, vector and bitmap editing all-in-one, is not the only reason why Fireworks could be a better tool for you, if you’re into screen design. Fireworks has also Symbols, Rich Symbols, Pages/States/Layers, Styles, powerful Properties panel, special vector Autoshapes, Live Filters, and many other features that make the life of a UI designer easier. If saving time is important for you, then you may try Fireworks…

      And finally:

      Up to this point in my career I have never found a compelling reason to use Fireworks and none of my coworkers have been able to find one either.

      — You can’t find a reason if you never seriously tried Fireworks. And if you didn’t, how could you judge if Fw is really the tool for you, or not?… ;-)

      • 13

        Emil Johnsen

        May 9, 2012 2:58 am

        The fact that Illustrator is primarily used for print design doesn’t mean it can’t be used for screen. I always start, and sometimes finish, my web layouts in Illsutrator, as I find it has superior handling (contra Photoshop, I haven’t gotten around to Fw yet) of objecs, shapes and text.

        A common flow for me is to do mockups and basic layout in Ai, then transfer elements to photoshop for final assembly and pixel perfect design work.
        Ai also offers shapes, symbols, Live Filters, styles, and many other features : )

        • 14

          “A common flow for me is to do mockups and basic layout in Ai, then transfer elements to Photoshop for final assembly and pixel perfect design work.”

          If you used Fireworks, you wouldn’t need to transfer anything – you can do all in Fireworks, including prototyping, demo of interaction, and exports: code and resources (images in various formats, image sprites and CSS, HTML snippets, XAML, etc…).

          “Ai also offers shapes, symbols, Live Filters, styles, and many other features.”

          I was forced sometimes to design in Illustrator, and believe me, the features you mentioned above, including slicing or using the ‘save for web’ (lets open Image Ready /*nightmare*/ in a popup-window) are a poor and patchy copy (that Adobe was forced to do I guess) of the same features that exist in Fireworks even before the Adobe CS version (I would say from Fireworks MX version, but I’m not sure, maybe even in earlier versions).

          Try the simple action of renaming 10 Layers one after the other in both softwares, and you will understand why Fireworks is better and less time consuming, then try the same on slices — I mention very basic actions (but essential for UI design and development), and not the cutting edge Fw features that Illustrator and Photoshop users cannot even understand…

          If you will not try a different solution, you will never know how much time you’re wasting…

    • 15

      I couldn’f agree more. The things you do here are much easyer to do in illustrator and photoshop!

    • 16

      If you’re designing something where the final output is for print, use Illustrator. If you’re designing for web, mobile, apps, or any other screen based output, use Fireworks. That’s a pretty good rule of thumb to use. However, I know some people that always start in Fireworks or Illustrator regardless of the intended output.

    • 17

      I agree with you Rene. I have always thought Adobe kept updating and supporting Fireworks after the brand was absorbed because it still made money from them. I was never a consistent Fireworks user, although I dabbled. I would alway choose Illustrator over Fireworks for generating designs that can be used both in print on for the web.

  8. 18

    How cool is this, i only started learning FW a day ago and already such great resources for me to learn from. Please, more, thank you.

  9. 19

    Austin Siewert

    May 7, 2012 8:32 am

    Great insight! I’ve been a longtime Fireworks user and will definitely use these techniques to refine my workflow.

    I’ve always been interested with the 1px highlight in Fw, for which I really haven’t seen a solid solution yet — do you mind sharing your technique for a 1-pixel highlight (i.e. folder icon example, the back tab). Thanks, Ben!

    • 20


      I’d probably duplicate the back tab, inset path by one pixel, and then remove the fill and apply a 1 px white border to the duplicated tab. You’ll have 2 layers, but selecting them is much easier in FW than Photoshop. Just group them afterwards if you need to.

    • 22

      Benjamin De Cock

      May 7, 2012 12:33 pm

      I usually create a composite path with a linear gradient. While it obviously takes a bit more time than using a simple inner shadow, it produces better results since you have a perfect control of everything :)

    • 23

      If you’re interested in the 1px highlight for FW, check out Interface Styles:
      It’s a styles library for FW and PS. The buttons and elements all have that style.

  10. 24

    Glenn Taylor

    May 7, 2012 8:43 am

    My understanding is that Fireworks will not work in the Lion OS. Is that correct?

    • 25

      Michel Bozgounov

      May 7, 2012 8:55 am

      No, this is not correct. Check Fireworks system requirements, and you’ll see listed there Mac OS X 10.6 and 10.7 (Snow Leopard and Lion); although I am pretty sure you’ll run latest Fireworks (CS6) just fine on even earlier versions of Mac OS X.

      • 26

        Glenn Taylor

        May 7, 2012 2:38 pm

        Thanks. I had been told that it wouldn’t and was concerned before I upgraded.

    • 27

      Fireworks runs fine in Lion, but with big files it has a tendency to crash. (And with big I mean 30-something pages with hundreds of layers).

      One tip is to get “Fireworks Autobackup” (LINK: which is a little program that runs in Adobe AIR. Fireworks will still crash, but at least you won’t have lost everything. :-)

      I’m hoping Fireworks CS6 will have fixed this issue.

    • 28

      Absolutely woks fine!

  11. 29

    Marc Landry

    May 7, 2012 9:19 am

    Good timing for this article. I’ve been following a tutorial about Fireworks since last week. Seems a grab new tool to work with. Could Fw be called the missing link between Ai, Ps and the web?

  12. 30

    Also, check out the path options within the Properties panel (often overlooked). It allows you to do a few of the common things that you’ll find in the Path panel (add/combine, punch, etc…) but won’t actually destroy your vector objects, so you can easily go back and make changes. There are a ton of great features that make Fireworks an ideal workflow, perhaps the best one… Pages. It’s probably the best feature that let’s you go in a different direction (sometimes crazy places) and explore creative solutions. I’m constantly duplicating pages and trying something new. Give it a week and you’ll convert.

  13. 31

    Lembit Kivisik

    May 7, 2012 9:49 am

    Thanks Benjamin, really good stuff. Reminded me an oldie but goodie by Trevor “senocular” McCauley (many who’ve been using FW for long time, should know this name) — “Fireworks: The Things You Might Have Missed”.

  14. 32

    Do we know if any of this is changing with CS6?

    • 33

      Michel Bozgounov

      May 7, 2012 10:09 am

      As far as I know, Path panel is updated in Fw CS6 and now has a few new features added; and there have been some changes to the Property Inspector (PI) panel; but, to answer more precisely your question: this article is relevant for both CS5 and CS6 versions of Fireworks! :)

  15. 34

    I’m surprised that the most useful feature of Fireworks, when it comes to building layouts for the web, was not mentioned.

    Pages and States. It’s basically better organized layer comps. As a developer, this feature alone has saved me countless hours.

    Exporting images is also much, much easier in Fireworks for me.

    • 35

      Completely agree with you, that is the most important feature about Fw. You can create multiple pages and set different image properties when exporting or slicing. That is extremely useful when in a heavy web production environment. Also, I’m in love with the interactive gradient tool! you can do so many gradients choices that are really hard to achieve in Ai or Ps.

  16. 36

    Mike Boardley

    May 7, 2012 11:16 am

    Fireworks is the future. Here’s why: Print is playing a smaller role and mobile gaining a larger role.

    No other tool is as flexible, precise and fast as Fireworks for screen (web, mobile, icons) design.
    The power of Fireworks is in its vector tools and screen based workflow. It’s designed from the ground up to be everything you need as a web designer.

  17. 37

    I find the workflow in Fireworks so much better than photoshop.
    I can get things done in about 1/8 of the time it takes in PS, it’s just more natural. Maybe I’m a weirdo though…

  18. 38

    Why Fireworks is so underrated is beyond me…

    Thank you very much for your tips, Benjamin!

    Would love to see more FW pro tips, guys! :)


  19. 39

    Oh, and Abduzeedo has the greatest FW tutorials too!

    And check out amazing work done in Fw:


  20. 40

    Great tips!

    There is no doubt that Fireworks can be the primary tool for any pixel lover. I always desire to work in Fireworks primarily but absence of some functions like Photoshop layer effects & Colour profiles make Fireworks difficult to adopt (at least for me and its may be because I used to work in Photoshop from start).

    Please keep writing these types of articles whether for Fireworks or Photoshop. Thanks again for great article.


↑ Back to top