How to Draw a Marble or Glass Ball

Posted in Resources > Miscellaneous by Mark Lawson

This next guest tutorial is written by Mark Lawson. He will show you how to draw a marble or glass ball effect.

Lets get started on how to draw a marble or glass ball

1. Start with a canvas which is 175% higher than your circle for the drop shadow, reflection etc. Draw a circle and gradient fill it using a sample of blue (dark) and then a dropper sample of a lighter (not white that’s too harsh) shade of blue, or your chosen color.

How to Draw a Marble or Glass Ball

2. Now grab a copy of the circle and invert it and position it under the existing circle and commands > creative > fade image to fade it out as a reflection then reduce the opacity down to 60%

How to Draw a Marble or Glass Ball

3. Now we add the inner reflections to create the shiny effect on the surface of the marble. Draw a small ellipse with the same colour (FW usually keeps the same gradient you used earlier) and place it in the circle as in the image below.

How to Draw a Marble or Glass Ball

4. Now copy the added inner circle and paste it on the top of the circle, again fade it out to get it to blend in the main circle and reduce it’s opacity down to 60%.

5. Nearly there, you can add in a further drop shadow to the left or right of the main circle (make sure that it sits under the main marble and is lowest in the order list in the layers panel. Draw an ellipse. fill = solid, colour=#DDDDDD. width=70px, height=13 pixels, feather = 5

6. You can add in surface elements and an overlapping title for the navigation item if, like me, you needed to use a number of these on a page.

Have fun, I hope this was of use to somebody somewhere!



Get Source
There're 16 comments for this post.
  1. Pingback: Real Tutorials Collected! » Blog Archive » How to Draw a Marble or Glass Ball

  2. Tokuzoh on said:

    どの位に成るかなと思っている。。 いつもPhotoshopを使っているんだ。

  3. Pingback: 65 Photoshop Fireworks Tutorials »

  4. Pingback: » How To Draw Sonic Related Articles

  5. Web design is great, I like taking many online classes at my school. I like learning anything related to flash, web design, graphic design, and new topics in general.

  6. Nice tutorial. Icons are easy to find these days, but this technique will come handy when doing bespoke icons for web design.

  7. Pingback: 70+ Adobe Fireworks Resources - Is there a future for Fireworks? - Speckyboy Design Magazine