How do I make a gradient with transparency in Fireworks?

Not often do I learn something new about Fireworks. Granted, this may be one of the lowest areas of entries on this blog site, but I use Fireworks on a daily basis. The other day I realized something so simple that I can’t believe I didn’t notice it before, and it saves me a ton of masks on very basic vector shapes.

Gradients are a great tool to give a website color and interest, and simple usage can turn a couple of flat colors into a three dimensional area of interest.

In this entry, I am going to show you how to create a simple button. This button, our “More Info” button is pretty commmon on the web, I took mine from cue on the Tiger Direct website. The nice thing about this button is that it is completely scalable and editable at any time later on.

Being self taught, some things that seem so simple to other designers are things that I may have totally missed in my own training. Gradients with transparencies was one of them.

Let’s get started

Step 1: Open Fireworks, and choose File > New (New Document)

Step 2: Make your new document 77 x 24 pixels, set your resolution to 72 DPI, and set your canvas to “White”.

Here are some similar arcade posts

• How do I create a rectangle by entering in specific dimensions?
• Using the “Fit Canvas” shortcut.
• Save time exporting web images using Fireworks
• How do I trace an image in 3ds Max? How do I create an Image plane?
• Editing layered Fireworks pngs in Photoshop

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.