2007
How to Draw a Marble or Glass Ball
This next guest tutorial is written by Mark Lawson. He will show you how to make a simple marble/glass ball effect.
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.
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%
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.
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!
December 16th, 2007 at 5:06 am
Looks Great, really effective and life like.
December 17th, 2007 at 12:45 pm
Thanks. I look forward to using that technique sometime soon.
March 28th, 2008 at 5:10 pm
great job. if you give some gaussian blur to images at step 3 and step 4 you can get another type of glass ball.
July 12th, 2008 at 12:28 pm
[...] Read More [...]
November 2nd, 2008 at 2:28 am
どの位に成るかなと思っている。。 いつもＰｈｏｔｏｓｈｏｐを使っているんだ。
December 1st, 2008 at 4:31 pm
Awesome! Thank you!
March 15th, 2009 at 10:00 am
Really useful posts.
I love fireworks. This was my first project with fireworks: http://restaurantecasadeguadalajara.com/ContactForm/index.html and I ask to my self if this program will last some years more ´cause I found in Dreamwaever CS3 it was eliminated and photoshop is the image manipulation predefinied tool; and the same for Flash CS3.
Is the Fireworks life programmed to finish ?
March 29th, 2009 at 3:59 am
Thanks you’s beautiful…
July 10th, 2009 at 1:12 am
[...] Drawing a Glass Ball or Marble This tutorial shows the simple steps involved in creating a glass ball or marble in your design [...]
April 7th, 2010 at 2:44 pm
[...] How to Draw a Marble or Glass Ball – This next guest tutorial is written by Mark Lawson. He will show you how to make a simple marble/glass ball effect. 1. Start with a canvas which is 175% higher than your circle for the drop shadow, reflection etc. … [...]
May 13th, 2010 at 12:57 am
enemy infantry spoted
May 13th, 2010 at 12:58 am
Medic!!!!
May 17th, 2010 at 1:48 am
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.
July 12th, 2010 at 1:21 pm
thanks thats tutorial for
May 18th, 2011 at 1:56 pm
Nice tutorial. Icons are easy to find these days, but this technique will come handy when doing bespoke icons for web design.