You are on page 1of 6

How to make a orb with glossy effect?

So get tutorial here so easy about 10 minutes

1.
Start by
creating a
document
of any size
that you
want, as
later on we
are going to
crop it to
the desire
size. Here for this tutorial, I’ll be using 200×200 px. Fill the background with white color.
Create a new layer, name this layer as - orb-bg, with the Eclipse Tool, draw a perfect
circle of size similar as shown as the above picture. Give the circle a gradient color of
#2a2a2a on top and #3e3e3e at the bottom.

2. Secondly, create another new layer. Name this layer orb-glass. Using the Eclipse Tool
again, draw an oval shape as how it is shown on the above image, with white(#fffff) color
fill of course.
3. Then use the round marquee tool, draw a marquee selection 1/3 below the orb-glass
which was created on step-2, as shown in the image. Open up the feather option by going
to Select > Feather or with the shortcut key Ctri + Alt + D. Give it a 30px feather. With
the orb-glass layer select, press delete twice.

4.
After the deletion, you will come close to what’s shown in the above image. Change the
opacity of the orb-glass if you wanted to.

5. Make another new layer in between orb-glass and orb-bg. Name this layer orb-bottom.
Using again the Eclipse Tool, draw a small oval shape at the bottom of the orb with
black(#000000) fill. As how is shown on the above image.
6. With the orb-bottom layer, selected, bring out the Gaussian Blur window by going to
Filter > Blur > Gaussian Blur. Give a 2.8px of blur.

7. If everything is on the right path, you will have something like is shown on the image.
However, it is still not done yet as we are goin to make the mouse over effect glow.
8. Create another new layer in between orb-bottom and orb-bg. Name this layer over-
glow. With the Eclipse Tool, draw another oval shape like what is shown in the image. Of
course with the fill color of #00c1de

9.
With the over-glow layer selected, bring out the Gaussian Blur window again, Filter >
Blur > Gaussian Blur, this time give a 9.0 px blur to it. Then you will have the glow
effect as what is shown on the above image.

10. Now, duplicate the orb-bottom layer, name this layer orb-shadow.
11. Then, shift this orb-shadow layer down, right below orb-bg layer. With the orb-
shadow selected, press the ↓ key around 4 - 5 times to shift the orb-shadow object 4 pixel
down. Now you will have the shadow for the orb done.

12. Ctrl + left click on the orb-bg thumbnail to have a marquee selection over it. Then
Inverse the selection by going Select > Inverse or with the shortcut key Shift + I. With the
over-glow layer selected, press Delete to clear what is outside the orb button for this
layer.
13. With the marquee selection still active, select the orb-bottom layer and press Delete
again to clear what is outside the orb button for this layer

14. Now the final step to complete the orb button. Using the round marquee tool, draw an
oval marquee selection as shown in the image. Bring out the Feather window, Select >
Feather or with the shortcut key Ctri + Alt + D. Give again 30px feather. With the orb-
bottom layer selected, press Delete twice.

15. This will be the mouse over effect for your orb button. You can add any icon on the
orb if you want to, but for here I will just left it blank.

DzibrilOne - 2009