Shiny Orb Button / Icon

This tutorial demonstrates how to create shiny glass orb button or icon using Adobe Photoshop and explains how to style the icon within the button to achieve fully 3D glass marble button effect. This type of button can be used in a GUI, website design, or even print media.

Step 1

Create a new file with a white background. In this example I have used a 325×325 pixel canvas.

Step 2

Create two perfect circles, each in its own layer, in the center of the canvas and center them one in front of the other like this:

Step 3

Load the selection of the larger circle and create a new layer. Fill the selection with white and make sure the whit circle is now the top layer. To load the selection of the larger circle, either click the layer icon while holding down Ctrl, or use the select menu (Select > Load Selection). Your image should now look like this:

Step 4

We are now going to create a “yin and yang” type of cut-out from the white circle layer. To do this, use the pen tool and create a selection like this:

Then, with the white circle layer active, invert the selection (Ctrl+Shift+I) and press delete. This will erase the top half of the “yin and yang” shape like this:

Step 5

Load a selection from the smaller orange circle and contract the selection by about 40 pixels (Select > Modify > Contract). Next, feather the selection by 30 pixels (Select > Feather). You should end up with a small feathered selection in the middle of the circles. Make sure the “yin and yang” shape is active and press delete a couple of times. You should end up with something that looks about like this:

Step 6

Create a new circular selection and feather by 30 pixels. Your selection after feathering should look about like this:

With the “yin and yang” shape layer still active press delete a few times. The end result of this process should leave you with the following image:

Step 7

Load a selection from the large dark orange layer and contract your selection by 4 pixels. Create a new layer above all other layers and fill the selection with white. Next, draw a new circular selection over the edge of the new white layer and feather your selection by 40 pixels.

Now inverse the selection and press delete three times. You should end up with an image that looks like this:

Step 8

Use the Circle Marque Tool to create a couple of white highlight spots. Place each highlight in a new layer and rotate them to fit wit the circle’s overall shape as seen here:

Step 9

Using the Circle Marque Tool again, create two large circular selections that come together near the center of the orb. To make the second selection you will need to hold Shift to prevent loosing the first. Your selections should look like this:

Step 10

Inverse the selection (Ctrl+Shift+I) and create a new layer above all other layers. Then fill the selection with white, resulting in something about like this:

Step 11

Load a selection from the smaller orange circle. Then inverse the selection and press delete. This will trim the new white shape down to the size of the smaller orange circle as seen:

Step 12

Again load a selection from the smaller orange layer. This time contract the selection by 20 pixels and feather by 30 pixels. Press delete a couple of times to end up with this:

If needed, you can rotate the new layer slightly to line up better with the other highlights and reflections.

Step 13

Duplicate the bottom layer (the large orange circle) and place it above the original large orange circle layer. Apply the following stroke to the new layer:

Step 14

Select the original large orange circle layer (which should still be the bottom layer) and apply the following styles:

The image should now look like this:

Step 15

Next, we are going to place a logo or icon into the orb. Chose a custom shape or logo or any simple graphic to place within the globe. It will work best if the image can be flattened to one color. For my example I have used a simple hand silhouette.

Size the icon graphic so that it fits nicely into the orb and place its layer directly above the orange circles and below the highlights like this:

Step 16

Apply a color overlay (#333333) to the new icon layer and also apply the following styles:

Final Graphic

If you have made it this far… Congrats! Now add a dark color to the background layer and your image should look something like this:

If you work through this tutorial let us see how it turns out – post a link in the comments to share your work. Good luck!

Welcome Back!

Now is your chance to join our growing community! Be the first to know about great new articles like this one. Register for my Email Updates or RSS Feed today!