How to create Aqua buttons in Fireworks (and Photoshop)

First tutorial (to achieve this stunning effect):

Aqua buttons with Macromedia Fireworks

Fireworks How To: The Ultimate Aqua Button (tutorial) (by Brian Edgin)

You can easily re-create the above effect in Macromedia (Adobe) Fireworks, versions MX/MX 2004 and above.

I’ll quote Brian Edgin:

What I discovered was that Fireworks’ blend of vectors and bitmap-like live effects is far more suited to creating these kinds of graphics than any other application I’ve ever worked with. From CorelDraw and XaraX to Illustrator, Paint Shop Pro and Gimp to Photoshop, nothing has ever been able to match Fireworks’ ability to design with a minimum of necessary shapes and none even begin to approach Fireworks’ workflow and usability.

I developed the following Aqua button technique with only the best looking result as my guide. By taking full advantage of all that Fireworks has to offer, the technique and final result has a number of advantages over any other technique I’ve seen.

  • It takes the fewest number of steps (for a technique that doesn’t leave out any design elements)
  • It uses fewer objects to complete the design
  • All the elements of the button remain fully editable
  • The final button is made entirely out of vector objects

[ . . . ]

I cannot but agree with the author, because I’ve done this tutorial, and I remember that it was really easy to complete. At the same time, with Photoshop you needed much more steps, to achieve the same results (one more reason for me to prefer Fireworks in favor of any other graphic app;-).

Of course, at the time (2004), both Fireworks and Photoshop were much more different than today.

So, for the Photoshop fans, here’s a link to another tutorial, which will teach you, how to do all kinds of buttons for Web, incl. Aqua buttons (see pages from 1 to 3):

Aqua buttons with Adobe Photoshop

Build Beautiful Buttons in Photoshop, Part II (by Corrie Haffly)

These days I’d like to remember some of my (partially forgotten) skills in Fireworks and to experiment a little, but we’ll see, if I’ll have enough free time for this…

Finally, if you do graphic design, and you know some easy to complete and interesting tutorials, by using which you can achieve the same beautiful Aqua Effect (made with Fireworks), but using other graphic programs (GIMP, Illustrator, InkScape, etc.), I would very much appreciate if you leave here a link or two, in the comments below! :-)


Comments to “How to create Aqua buttons in Fireworks (and Photoshop)”:

  1. gfxstuff Says:

    I tried, but the result wasn’t like the one in the picture. :) Nice tutorial though. Thanks.

  2. Giovanni Says:

    I know it’s been a long time since you post this tutorial, anyway, thank you very much for sharing, i tried the tutorial and i got the same result, the button looks great.

  3. Michel Says:


    The tutorial with Fireworks (and Photoshop) is not mine, but I have made aqua buttons in the past, with Adobe Fireworks, using this technique, and the results were very good. :)

    Glad that I was able to point you at the right resource!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Your e-mаil address will never be showed.

[ is the virtual home of Web & graphic designer Michel Bozgounov | powered by WP & hosted by DreamHost | also available in български ]

0.547 / 29 / 23