Refining Your Design In Adobe Fireworks

Advertisement

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

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

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 Kickoff1’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

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 it2, 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

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

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

Adding a gradient between two similar colors (i.e. colors close in hue3) 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 84).

To prevent this, Fireworks introduced in CS55 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

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

A picture is worth a thousand words.

Fred Barnard7

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 Cock8
Folder icon

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

A Dribbble shot by Benjamin De Cock10
“Free” icon

A Dribbble shot by Benjamin De Cock11
Icons for an FAQ

A Dribbble shot by Benjamin De Cock12
Envelope icon

A Dribbble shot by Benjamin De Cock13
Monochrome icon set

A Dribbble shot by Benjamin De Cock14
Kickoff teaser icon

A Dribbble shot by Benjamin De Cock15
Email account icons

A Dribbble shot by Benjamin De Cock16
Toolbar with navigation icons

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

Conclusion

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 screencasts17 produced by Rogie King18. 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 Week2319 series by Craig Erskine20, and download and deconstruct his free source PNG files.

Happy experimenting with Fireworks!

Further Reading

(mb, al)

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

Footnotes

  1. 1 http://kickoffapp.com
  2. 2 http://jamesbryant.com.au/round-circles-in-illustrator/
  3. 3 https://en.wikipedia.org/wiki/Hue
  4. 4 https://en.wikipedia.org/wiki/TFT_LCD#Twisted_nematic_.28TN.29
  5. 5 http://www.smashingmagazine.com/2010/05/22/adobe-fireworks-is-it-worth-switching-to-cs5/
  6. 6 http://www.tutorialshock.com/tutorials/shadows-photoshop-illustrator-fireworks/
  7. 7 https://en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words
  8. 8 http://dribbble.com/shots/404904-Documents
  9. 9 http://dribbble.com/shots/356307-Date-Picker
  10. 10 http://dribbble.com/shots/326992-Free
  11. 11 http://dribbble.com/shots/326991-FAQ-icons
  12. 12 http://dribbble.com/shots/322798-1
  13. 13 http://dribbble.com/shots/206798-Monochrome-set
  14. 14 http://dribbble.com/shots/143445-Kickoff-icon
  15. 15 http://dribbble.com/shots/381637-Email-accounts
  16. 16 http://dribbble.com/shots/295070-Secondary-nav-features
  17. 17 http://www.komodomedia.com/tags/fireworks/
  18. 18 http://twitter.com/rogie
  19. 19 http://craigerskine.com/category/fw-png-week
  20. 20 http://dribbble.com/craigerskine
  21. 21 http://www.komodomedia.com/tags/fireworks/
  22. 22 http://dribbble.com/rogie
  23. 23 http://craigerskine.com/category/fw-png-week
  24. 24 http://tv.adobe.com/watch/max-2011-design/i-didnt-know-fireworks-could-do-that/
  25. 25 http://www.idux.com/
  26. 26 http://www.adobe.com/devnet/fireworks/learning_guide/design/design_guide_pt7.html
  27. 27 https://www.adobe.com/devnet/author_bios/tommi_west.html
  28. 28 http://www.brownbatterystudios.com/sixthings/rapid-fire/
  29. 29 http://fireworks.smashingmagazine.com/2012/01/20/extracting-logos-using-levels-in-adobe-fireworks/
  30. 30 http://www.smashingmagazine.com/2011/12/07/mixing-up-illustration-combining-analog-and-digital-techniques/
  31. 31 http://www.optimiced.com/

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

Advertisement
  1. 1

    Great article, I use Illustrator for illustrations / icons etc, Photoshop for image manipulation and Fireworks for web based work. I find it is perfectly streamlined. Illustrator and photoshop can do the job, but I find they over complicate the whole process.

    I have been using it for many years, so pleased it is getting the attention it deserves (apart from when it randomly – on an ‘apple z’ – undoes everything since your last save – the little scamp)

    Some good tips as well, but please tell me where to find the ‘9 slice scale tool’ in CS5.5?

    Cheers

    0
  2. 103

    Thank you for the insights and new methods to tackle Fireworks issues. A rare article on Fireworks …so just loved it!

    0
  3. 154

    I have been a big fan of Fireworks since time I worked at Macromedia..back in 2003. This is an excellent tool for web design.. well under rated. Thanks for the article, I didn’t learn anything new as I have been using it for years, but glad that this Software gets a bit of limelight.

    0
  4. 205

    This is great. I’m a big fan of Fireworks and this post taught me so much more. Thanks for sharing!

    0
  5. 256

    These tips are super-helpful. Thanks for posting them up online.

    0
  6. 307

    I’m a long-time Photoshop user who’s been looking into transitioning to Fireworks. The few times that I’ve tried to work with Fireworks were awkward and time just didn’t allow me to figure things out. Still, it’s something I’d like to look into and this article is a great starting point. Thanks for the great presentation and resources.

    0
    • 358

      Michel Bozgounov

      May 14, 2012 9:44 am

      Hi, Emma,

      @ Smashing Magazine, we’re working on more tutorials (and articles), dedicated to Adobe Fireworks; and we’ll have tutorials targeted at both beginners and advanced users — so stay tuned! :-)

      3
  7. 409

    Just another point to this (not a debate about Fireworks vs Ps/Ai), I think the main difference between Fireworks users and Ai/Ps users is that most of us Fireworks users happen to or are forced to use Ai or Ps (because most of you never tried Fireworks), so we know the difference; I never heard about someone who works in Ai/Ps, tried Fireworks, and then switched back.
    So trust us ;)

    0
  8. 460

    Awesome work!

    0
  9. 511

    Someday…. Someday I will learn this.

    0
  10. 562

    Since 2001 I use Fireworks for basically everything that needs to be designed. This goes from interaction designs to visual designs. I’ve tried to do this in Photoshop, but that was just a hopeless effort.
    Me being an interaction designer and frontend developer also find it much easier to convert designs created in Fireworks much easier to translate to html/css(3) code. All information about a single element in FW can basically be found in the Properties panel, where in Photoshop a lot of effect and properties are hidden in separate layers or elsewhere.
    Even though I am a huge Fireworks fan, I have to admit that the css3 Properties panel doesn’t give the clean code an experienced frontend developer would write. But still, it’s extremely convenient to get all the color codes of gradients, settings of rounded corners, shadows etc. within only 2 clicks.

    btw, loved the article and will try some of the suggestion made. Thanks!

    *edit* One more thing about pixel perfection. As the author stated, FW isn’t always as pixel perfect as some designers might want it to be. As you will usually design for screens (and browsers!) with FW, designs are, in my opinion allowed to be less than a 100% pixel perfect as every browser renders the frontend code slightly different anyway.

    0
    • 613

      I’m going to have to disagree with your comment about the CSS3 Properties panel in Fireworks. It absolutely does produce “clean code”. I’m an experienced front end developer and I can tell you that the CSS3 it outputs is exactly how it should be done. Things like the gradients syntax and backwards compatibility with older browser versions may look verbose but there is no other way to do it.

      Fireworks does give you the option of deselecting browser specific prefixes and comments so that you can copy and paste shorter (but less backwards supported) code.

      But the beauty of what the Fireworks CS6 CSS properties panel does is that it just gives you the correct CSS3 code for a selected object in your design rather than attempting to WYSIWYG an entire site. Thus there really is no such particular thing as it not producing clean code. CSS is rather straight forward.

      There are online resources and tools for creating CSS3 based buttons and stuff that spits out the required code for you but they fail in comparison to Fireworks CS6 because they don’t allow you to design in context with the rest of your design like you can do in a real design application such as Fireworks.

      2
  11. 664

    Sherman Dickman

    May 22, 2012 1:47 pm

    Ben, you are a god!

    (I wish Adobe would dedicate more resources to FW.)

    0
  12. 715

    This the best article on Fireworks I have read in a long time. Very useful stuff if you are FW user.

    0
  13. 766

    Started using FW last week. Very useful for wireframing, but software very unstable on my Mac. Lost many hours of work because software keeps crashing. VERY frustrating.

    0

↑ Back to top