![]() |
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.
|
![]() |
||||||
|
|
|||||||
|
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.
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! |
![]() |
||||||