last updated: Feb. 10, 2001

Fireworks has the distinct advantage in that it uses PNG as it's native format. This means that you don't have to worry about doing any conversion or anything, just create your document and save it.

To demonstrate the effects achievable, lets create a simple button for launching Fireworks. If you want the file to play with, download it here.


The key thing to do is to start with an object that has a transparent background. I know 100x100 is big for a button but I'm making it so you can see it. This will create a new document as you can see on the right.:


The next think is to add a rectangle to the drawing and fill it. You may ask why I haven't created a rectangle to fill the space ... patience Grasshopper, all will become clear in time.

I have used the fill dialogue to add some colour, and a bit off texture too. I have customised the colours of the fill to meet my needs.


OK, now it's time to make it look like a button. I know Fireworks can create buttons easily, but I'm going to use the effects that come with Fireworks instead.

Layers

These allow you to create compound effects by tweaking the individual items without compromising the entire image. For this object I have 2 layers, one for the button and one for the icon.

The Button

To create a quick button, I've just added a simple inner bevel.

The icon

I've added a slight bevel to give the icon depth, and have added a slight white glow, so that the icon stands out from the background.


Playing with transparency is the real fun and where using PNGs shows the true benefits.

You can see from the example that I have added a drop shadow; and yes that is why I didn't fill the whole image with my rectangle.

The drop shadow is simply another effect in Fireworks which I have applied to the button. You can see that it is semi transparent, so the background will show through. This sort of effect is far more complicated to create using bitmaps with per pixel transparency.

In addition, I have also made the button itself semi-transparent. A bit of overkill maybe, especially as you could do this sort of thing using DesktopX itself, but hey, I'm indulging myself to prove a point.


The result

So here we have it, a button to launch Firework. You can get it here if you so wish.

I have placed another object beneath it to help emphasise the transparency. You can see both the drop shadow casting it's effect on everything beneath it, and can see that the button itself is slightly transparent by the fact that the other object is partially visible through it.

So there you go. Easy huh!