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 topShare on Twitter

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.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

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

          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

        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!

  10. 24

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

  11. 29

    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

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

    Cheers

  19. 39

    Oh, and Abduzeedo has the greatest FW tutorials too!
    http://abduzeedo.com/tags/fireworks

    And check out amazing work done in Fw:
    http://dribbble.com/search?q=fireworks

    :)

  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.

  21. 41

    I have been using fireworks for a decade! I started with photoshop as many others have, but if you are a webdesigner you´ll find that fireworks is THE tool for webdesign, it offers flexibility and simplifies many tasks. Photoshop is too “bloated” for just webdesigning.

    On the other hand, I don´t understand why Adobe just doesn´t release a “perfect” Fireworks experience. In CS6, there are many thing that need improvement (text rendering and paragraph editing i.e.) and yet they never improve.

    It seems as they don´t want webdesigners to quit photoshop and therefore loose money…

  22. 42

    Excellent. You taught this old Fireworks guru some new tricks. Thanks!

  23. 43

    Elliott from the design agency

    May 8, 2012 4:59 am

    Awesome, I’ve just come back to Fireworks after taking a few years off and this is a great help — many thanks.

  24. 44

    Ficholas Norneris

    May 8, 2012 5:39 am

    I work in a web design department staffing just under 20 designers and we all use and swear by Fireworks (well most of us) for everything from wire-framing to full designs. There is simply nothing out there that is near as fast and streamlined.

    Here’s to 64bit in CS6!!! Finally!

    • 45

      Michel Bozgounov

      May 8, 2012 11:31 am

      While Fireworks CS6 will certainly work better in Windows 64bit (and will be able to manage more RAM in it), it’s still not a 64bit app (unfortunately)…

  25. 46

    Fireworks is the BEST tool for doing web design

    Photoshop is just too heavy. Use PS for photos, that’s what it’s for ;-)

  26. 47

    Michael Locke

    May 8, 2012 7:06 am

    Awesome post!

  27. 48

    Bravo!
    Thanks for sharing. I am intending to use Fireworks in my next project!

  28. 49

    Thanks for the tips. I still can’t understand why web designers would prefer Photoshop over Fireworks.

    I can’t seem to find the move point option in CS6 in relation to making the custom arrow and moving half a pixel. It’s driving me nuts but could be my incompetence.

  29. 52

    Loved this article! Well I am the only one using Fireworks in my design team in my company. Can’t wait to show this post to my fellow designers!

  30. 53

    I have been using Fireworks for more than a decade as well. Since the version 1 came out and I’m the only one using Fw in my company a mid/lg organization. Such a powerful tool. Also I been using these tricks on the daily basis, as is the only way to get perfect results without using Ps.

    My only complain is similar to @Pablo:

    I don´t understand why Adobe just doesn´t release a “perfect” Fireworks experience. In CS6, there are many thing that need improvement (text rendering and paragraph editing i.e.) and yet they never improve.

    It seems as they don´t want webdesigners to quit Photoshop and therefore loose money…

    Maybe one day Adobe will take Fw web designers seriously and update the rendering tool similar to the one used in Ps.

    • 54

      Agree with you. The biggest FW’s problem is that Adobe doesn’t develop it as much as other softwares. Differences between FW CS3 and FW CS5 are really small (in common design process) just a few new mostly useless features.
      Problem with errors are obviously really annoying – Adobe didn’t remove know issues from CS3 on CS5.5 – we can see the same errors on screen.
      I hope that Adobe will find some good businness plan for FW and it will be updated and developed as well as other CS products. It’s really worth it

  31. 55

    Dreamweaver aside, I use the full range of Adobe products for print and web pretty much daily.

    Fireworks is the only programme I have any issues with.

    I appreciate the benefits of using it, but getting meaningless warnings when trying to save a file for example, claiming that ‘An internal error occurred.’ is absolutely maddening. This happens on both my Windows and OSX machines.

    I have never found a solution to this problem, and while it exists, Fireworks remains, in my eyes, a faulty bit of kit that Adobe seems to have intention of fixing.

  32. 57

    Daniel J. Wilson

    May 8, 2012 10:35 am

    Nice refinement tips. It won’t get you a gradient stroke, but another way to get nice stroke rendering around rounded shapes is to use the Basic > Soft Rounded stroke, then go to Stroke Options (bottom of the strokes menu) > Advanced and change the Tips value to 2. It’s not clear from the UI labeling, but this value is independent of the stroke thickness. You can also try toggling the Fill over stroke setting in the Stoke Options if the rounding looks a bit heavy.

  33. 58

    Great article. Been building all my UX work in Fireworks since 2004. The pixel-level precision feels much better to me than Photoshop, and the combination of vector and bitmap elements makes UI creation quick and easy.

  34. 59

    Kim Cavanaugh

    May 8, 2012 5:01 am

    Thanks for all the great tips Benjamin! And your examples are gorgeous.

    It’s amazing (and fun!) that there are always new Fireworks techniques to learn along the way. Thanks for sharing yours!

    Kim

  35. 60

    Eh.. I’ve tried using Fireworks before, for small things like icons. The issue I have is it’s a throwback to FlashXM and Macromedia’s clunky, often confusing UI. IMO having to completely change your workflow is exactly why I dont like it. I use photoshop, indesign, and illustrator just fine. My workflows are not the same but revolve around some of the features provided. To say ‘illustrator is for print’ makes no sense. Indesign is more for print and desktop publishing than any of the aforementioned apps, and it’s starting to emerge as a tool for designing webpages. I’ve designed entire interfaces using illustrator and photoshop. I see no need for Fireworks. I would rather not spend time learning a new workflow using software I’ve, A) never needed, B) never worked with someone who used it, C) dont expect it to be around much longer, and finally D) uses an interface reminiscent of Flash MX and other Macromedia software. I always hated macromedia’s UI, I dont get why they havent spent the time to update Fireworks. Call me a hater, call me old fashioned. I got work to do.

  36. 62

    Has Fireworks fix the memory leak issue on CS6 version yet??? That problem is a show stopper.

  37. 63

    Thanks for the tips, some of them were unknown to me.
    I’m using FW for about 2 yrs and it is my best friend. Unfortunately I cannot afford a high-end PC but as FW is much less resource hungry than PS I can design things without running out of memory. Long live FW!

  38. 64

    Could not agree MORE. Fireworks is so underrated, and yet it is consistently the best tool for web design. I’ve been using it since the late 90s as well, mainly because it is simply more intuitive of a workflow for web than Photoshop. And it create smaller files than Photoshop. And whoever led some to believe it doesn’t generate code? Hasn’t it had that capability since version ONE? I can’t remember, but it seems like it has.

    I agree with others that Adobe should step up the development and take this product to the next level! It is my go-to product for web that I use every day.

  39. 65

    I never used Fireworks before, I’m so accustomed to Photoshop :P Anyway, if I decide to start using it I’ll definitely keep this article in mind as it provides a lot of information and guides.
    Thank you!

  40. 66

    Thanks,
    What a useful article. I’ve been using Fireworks for nearly a year and these tips will be really helpful.

  41. 67

    Thanks… great tips.

  42. 68

    I love Fireworks but the elephant in the room is memory.

    I and everyone I know experience constant memory issues with Fireworks – besides the memory leaks and crashes (we’ve filed many bug reports) it never seems to use more then 1.89GB ram on a Mac (and we’re using CS5.1).

    The pages and symbol features alone make Fireworks better than Photoshop for web design but judging by the lack of love it receives from Adobe (compared with other CS apps), it sometimes feels like Adobe would prefer it if Fireworks disappeared?

    Either that, or Adobe doesn’t understand how some of us are using the app – try designing several 3000px-5000px scrolling pages (like Apple’s product pages) with a compressive symbol library.

    The only way I’ve found to make Fireworks work reliably with 10+ templates (and symbol library), is to either reduce the number of undos to 1, or forget the symbols feature and split the document into multiple pages (updating a symbol library across multiple documents is so slow it’s unusable – great idea though).

    Even then, we still encounter “Unknown Error” issues when saving a document – forcing you to restart the app, often losing work.

    Because of this, every time I use Fireworks, it breaks my heart!

    I really hope Adobe sees that Fireworks is different to Photoshop and decides to fix the memory issues – once that’s done, every web designer should use it.

  43. 69

    Great write up! It’s nice to see Fireworks get some love. I’m actually for more comfortable using it than Photoshop

  44. 70

    As with other commenters. I love the hell out of Fireworks and was a Photoshop convert.

    However, the basic things need to be fixed.

    Out of memory errors are totally wack. I’ve lost tens of hours worth of work due to this problem.
    Other random crashes also need fixing.
    Canvas size needs to be maxed esp with the new iPad coming out.
    x64bit version would be useful
    Text Rendering is a crappy. They need to tighten this up.

    Fireworks is a great tool. Adobe need to stop trying to add features and fix the basics. v3-5.5 have all contained these simple problems.

  45. 71

    I didn’t know FW can do such awesome work before!!Thanks very much!

  46. 72

    There’s an easier way of overcoming the first problem with objects that have rounded corners and too thick of a stroke.

    Just disable the stroke and add to the object: 1px shadow with 0 blur and 100% opacity

  47. 73

    Yes, Fireworks is an awesome tool and we need more articles like this. Check out my interview with the author, Benjamin De Cock, at http://fireworksinterviews.com/benjamin-de-cock

    For those who want to know everything about Fireworks CS6, please visit http://launch.fwpolice.com/
    There are lots of stability fixes and enhancements that made a lot of improvements to a designer’s workflow.

    There is also an Auto Save feature in Fireworks CS6 now too.

  48. 74

    I’ve been using Fireworks since way back in the Macromedia days. Good to see it getting some love on Smashing Magazine! By far my favorite graphics app.

  49. 75

    Awesome post, I’ve been a FW user for years since the Macromedia days and if they could only fix the memory problem and improve text handling it would be perfect for my workflow. I PS and AI for different tasks but don’t design layouts with them.

    Having pages is fantastic for developing a website layout with shared components.

    Exporting to 8-bit PNG with alpha transparency is something I think PS still can’t do, Fireworks rocks for creating small transparent PNG’s

  50. 76

    Great article. I’ve been exclusively using Fireworks for web design for the last 12 years. I love it, especially the ability to edit vectors and bitmaps in the same place and the ease at which pixels and vertices can be moved.

  51. 77

    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

  52. 79

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

  53. 80

    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.

  54. 81

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

  55. 82

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

  56. 83

    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.

    • 84

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

  57. 85

    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 ;)

  58. 86

    Awesome work!

  59. 87

    Someday…. Someday I will learn this.

  60. 88

    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.

    • 89

      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.

  61. 90

    Sherman Dickman

    May 22, 2012 1:47 pm

    Ben, you are a god!

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

  62. 91

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

  63. 92

    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.

Leave a Comment

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

↑ Back to top