The trick to creating believable 3D effects in Fireworks, as in many other 2D programs, is the skilfull application of various "shadows" and "fills" to produce a convincing optical illusion. This is, however, easier than it sounds! The following tutorial will demonstrate the techniques used in producing the 3D sphere shown above. Don't worry about being too exact with the sizes I have quoted - they are for guidance only in producing a test graphic. You are unlikely to use these actual measurements in producing real buttons.

It is worth noting at this point that the same techniques can be successfully varied to create a wide range of other shapes and effects, such as glass/gel/plastic buttons etc. So, let's get on with it!

Creating your sphere

Open a new white canvas (200x200)

Select the "elipse" tool and, whilst pressing the "shift" key, draw a 100x100 circular button on the canvas (HINT: By opening the "INFO" panel, you can see the image size increase as you drag to the required size, thus ensuring pin-point accuracy. Or, you could simply draw a circle and set the dimensions in the Info panel and press Enter to apply the settings!).

Select the "paint bucket" tool and choose a fill colour for your button.

Open the "EFFECTS" panel and select EFFECTS>SHADOW&GLOW>INNER GLOW and set the effect parameters to WIDTH=4, SOFTNESS=8, CONTRAST=65. You may leave the glow fill colour as the default setting (BLACK), but a better alternative may be to choose a darker variation of your button fill colour.

Open the "FILL" panel and select FILL TYPE>RADIAL.

The "radial gradient" fill effect will appear on your button, simulating a "highlight" from an imaginary light source. You will also see a "control bar" which can be dragged around to place the highlight where you wish. You may at this point need to change the fill colour for the radial gradient. You should be setting a fill which smoothly transitions from WHITE>BUTTON FILL COLOUR. Simply click on the "EDIT" button in the Fill panel and click the small pointers to open colour swatch charts to set the gradient.

Now, click on the "round" end of the radial control bar and drag it to the top left area of your button.

By click/dragging the "square" end of the bar, you can alter the appearance of the highlight dramatically. Experiment for the best result!

Click EFFECT>BLUR>GAUSSIAN BLUR and apply a blur setting of 0.5 to smooth the image.

Save the file.

PREVIEW IN BROWSER

You're done! Apart from adding a drop-shadow, of course!