Simple 3D 8 Ball

One wonderful thing about Adobe CS5 is that the software has many elements, styling and features that, if used properly, can do wonders. Two of these features are the gradient and paste-inside features. Using these two techniques, today are going to create a simple 3D 8 ball.

Now first things first, open up fireworks and setup your canvas. For this tutorials sake, lets work with a 600px by 400px canvas at any resolution you like.

  1. First we need to create the base of the 8 ball. We do this by selecting the ellipse tool from the selection of vector tools (press and hold down on the square icon).
  2. Once you have the tool selected, click and drag your left mouse key to create a circle. Don’t worry too much if it’s not a perfect circle.
  3. To make the circle to the size we want, we go the properties panel (usually clipped to the bottom) and set the width and height to 250 by 250. We can also position the circle to the center of the canvas as well. In this case x: 175 and y: 75.
  4. From the fill options in the properties panel, select Gradient >> Ellipse.
  5. For the color fill we will create the following pallet. If you’re wondering how to get the third color option, all you have to do is click between the two color options already available.

    Color 1: #4D4D4D Color 2: #191919 Color 3: #000000
  6. For the guide hands, we are going to place the center of the brightest ellipse on the top left corner of the ball. and we will adjust the hands as shown in the picture. Note that these hands will adjust the size of the glowing ellipse (our light source).
  7. Now by pressing SHIFT + D, we are going to duplicate this layer for future use. For now in the layers panel, hit the little eye to hide the duplicated layer.
  8. Once that’s done, we will create the shadow the ball will create when it sits on a table. To do this lets create another ellipse that’s 165 by 25 pixels and make it solid black (#000000).
  9. Taking advantage of the snap feature in Fireworks, lets position the shadow at the bottom of the 8 ball (x: 218, y: 308).
  10. Now let’s position the shadow behind the 8 ball by either pressing CTRL + Down Arrow or by manually dragging and placing it below the ball layer in the layers panel.
  11. We can achieve the shadow effect in 2 ways. First is to set the edge in the properties panel to feather and playing around with the intensity or by creating a vector mask. You can make a vector mask by going to Commands >> Creative >> Auto Vector Mask. From the shapes select the option shown in the picture below and click “Apply.” By default the Auto Vector Mask tool will set the edit hands to the outskirts of our ellipse. For this shadow, it’s exactly what we need, so need to adjust anything.
  12. For the 8 ball label over the white background, we first need to create a white circle that is 100px by 100px. We can position this circle at x: 251 and y: 150. For the color fill we are going to select Gradient >> Ellipse and position the enter hand at similar height and position as shown in the picture below. The color used was #FFFFFF (left) and #C4C4C4.
  13. To make it look a bit more realistic, we are going to change the edge of the ellipse to feather and set the tootle to 1.
  14. For the number itself, we are going to use the Text Tool and simply write the number 8. For this I used Arial Regular 100 font-size with a solid black color. You can position it to the center of the inner circle (x: 271, y: 148).
  15. Now create another ellipse with the dimension w: 285 by h: 188 and position x: 125, y: 49. Let’s set the edge to Feather and intensity to 38. To save time, let’s press CTRL + X to cut the object.
  16. Unhide that ellipse we hid in step 7 by clicking that blank space where the little eye was in the layer panel.
  17. We’re going to remove all the color fill options we set. To do this all we need to do is click where it says Ellipse next to the fill option in the properties panel and select none. Make sure that you didn’t move the circle from it’s original position.
  18. While we have this ellipse selected, let’s press CTRL + SHIFT + V to paste the ellipse we cut in step 15 inside of the selected shape. You can also achieve this by going to EDIT >> Paste Inside.
  19. Once pasted, let’s change the opacity of that newly generated shape to 5 and that’s it.

We now have a 3D 8 Ball created in Adobe Fireworks in some fairly simple steps. Note that you can play around with the opacity and other color options to your liking. Just remember that there are multiple ways to come to the same outcome. This is just one way and this isn’t even testing the power of what Adobe Fireworks is capable of in terms of 3D design. Just check out this amazing work by Isabel Aracama.


Hey there. I’m Sazzad, a User Experience Developer from New York City. I work with many talented folks who find ways of re-inventing the way users look at the web. I am the founder of the FWPolice and co-founder of Fleech Media. You can follow me on Twitter by the handle @IamShipon1988 .

Leave a Reply

Your email address will not be published.