In this tutorial I will show you how to make a ball as if it looks real, in 3D effect as shown below.

1. After booting Fireworks, open a new file 300 X 300 pixels, any background to match your HTML page.
2. Take the ellipse tool from the tool bar or press R on the keyboard.

3. Now keeping SHIFT pressed drag diagonally to create a rounded circlle object, place it a bit towards the left, later I will tell you why we are doing this.
4. Now select the paint bucket tool from the toolbar or press K on the keyboard.


5. Open the Fill palette Window -> Fill and give the settings shown below and apply it to the ball you created.


6. Now after selecting the ball you just created with the pointer tool, select the paint bucket tool and adjust the gradient tool as shown below, to show there is light falling on it from top left.


7. Now it should look a nice 3D ball, it will look better after we give it a finishing touch, for real things in life cast a shadow when light falls on them, this is the reason why we placed it to the left.
8. Go to Windows -> Layers. Copy the ball object and paste it, select the bottom layer as shown below.


9. Now go to Modify -> Transform -> Distort and distort the bottom path as shown below (drag the nodes).

(it is very important that you distort the bottom layer)
10. Now after distorting the bottom ball object give the setting shown below.

11. After completing the steps shown the ball should look like as shown at the top,...VOILA the ball is ready for play.