Making a Glass Orb - By DeeZeL
Introduction: Glass orbs are considered one of the coolest eye candy elements for websites. They are commonly used in glossy websites and interfaces (for example, mac OSX network icon ); the good thing about them is that although they look so much appealing, they are extremely easy to be made ^_^. In this extremely detailed tutorial you are gonna learn how to make glass orbs. Now let's begin..shall we?
1. Create our lovely 400x400 document.
2. Create a new layer and call it 'Orb'. Right click the rectangular marquee tool (Hotkey: M) and click on Eliptical Marquee tool; press shift and drag your mouse to create an orb of the size you like; release the mouse once you are satisfied with the orb's size.
*Note: Before you move on to the next step, make sure that your foreground color is set to the following color profiles (this is just to make things go 'my way' in this tutorial ). Ehm, now double click your foreground color (by default is is black) to bring the color picker window.
Next to the '#' symbol, insert the following color code: 005B7F.
Now repeat this step again but this time double click on the white color, and insert this color code instead: 0076A3.
Now lets move to the second step*
3. Press CTRL+Backspace to bring up the fill window, leave the settings as they are and press ok. You should have something like this:
4. Now right click the 'Orb' Layer and click on blending options, make a tick (check) on 'Gradient overlay' option. By default the orb would grade from black to white; since we dont want that click the grading color bar as shown:
A new window will pop up, just click once as shown and press OK.
5. Click ok to apply the settings. You should now have something like this:
*optional step*
Just for the sake of adding some 'effect' to the orb, I made this step. As always, it is perfectly safe to skip it and head to step 8, I recommend following this step tho in order to make you more familiar with some techniques to add a small, yet effective touch to whatever you are creating .
6. Press CTRL on the orb layer in order to make a 'load Selection' action. you should notice that the orb now is defined with this moving border
7. Create a new layer, call it 'Clouds'. Now fill this layer with black. Go to 'Filters > Render > Clouds' Apply that filter as much as you want. After you are satisfied with it, set the overlay mode of this layer to 'Soft light', Opacity to 65%.
Now you should have something similar to this:
*Optional steps ended*
8. Create a new layer and call it 'Lower light'. Highlight the orb selection and fill it with white. Prestt CTRL + T to to make a 'Free Transform' action, and then Hold SHIFT and resize the white cirle to almost half the size of the orb.
9. Go to Filter > Blur > Gaussian blur and set the blur pixels to 30.7. And set the layer mode to overlay.
10. Duplicate the lower light layer, it will be set to the same settings as the previous layer. Leave the blending options alone and change the opacity 50%. You should have something like this:
11. Now make another layer and call it 'Upper light'. Load the Orb layer selection again and fill it with white. Free transform the circle again to half the size of the orb. then position it at the upper center of the orb:
12. Go to Layer > Add layer mask > Reveal all. Use the gradient tool (Hotkey: G) *Note: if you get the 'Paint Bucket tool', just right click the icon and select the 'Gradient Tool' instead. Now, hold SHIFT to make sure that the line of grading will be a sharp 90 degree line. Now drag the mouse from the top of the white circle till the center of it:
You should have something like this now:
*Tweak: The problem with the layer we just made is that it cant be gaussian blurred, because it will be gaussian blurred as the whole circle, not as a fading circle. So in order to overcome that, all you have to do is to create a new layer and link it with the Upper Light layer, and merge both layers:
Now you should have a one, fading circle in a layer of its own:
13. Go to 'Filter > Blur > Gaussian Blur' and set the pixels to "6.7". Now you are done , you should have something like this:
1. Create our lovely 400x400 document.
2. Create a new layer and call it 'Orb'. Right click the rectangular marquee tool (Hotkey: M) and click on Eliptical Marquee tool; press shift and drag your mouse to create an orb of the size you like; release the mouse once you are satisfied with the orb's size.
*Note: Before you move on to the next step, make sure that your foreground color is set to the following color profiles (this is just to make things go 'my way' in this tutorial ). Ehm, now double click your foreground color (by default is is black) to bring the color picker window.
Next to the '#' symbol, insert the following color code: 005B7F.
Now repeat this step again but this time double click on the white color, and insert this color code instead: 0076A3.
Now lets move to the second step*
3. Press CTRL+Backspace to bring up the fill window, leave the settings as they are and press ok. You should have something like this:
4. Now right click the 'Orb' Layer and click on blending options, make a tick (check) on 'Gradient overlay' option. By default the orb would grade from black to white; since we dont want that click the grading color bar as shown:
A new window will pop up, just click once as shown and press OK.
5. Click ok to apply the settings. You should now have something like this:
*optional step*
Just for the sake of adding some 'effect' to the orb, I made this step. As always, it is perfectly safe to skip it and head to step 8, I recommend following this step tho in order to make you more familiar with some techniques to add a small, yet effective touch to whatever you are creating .
6. Press CTRL on the orb layer in order to make a 'load Selection' action. you should notice that the orb now is defined with this moving border
7. Create a new layer, call it 'Clouds'. Now fill this layer with black. Go to 'Filters > Render > Clouds' Apply that filter as much as you want. After you are satisfied with it, set the overlay mode of this layer to 'Soft light', Opacity to 65%.
Now you should have something similar to this:
*Optional steps ended*
8. Create a new layer and call it 'Lower light'. Highlight the orb selection and fill it with white. Prestt CTRL + T to to make a 'Free Transform' action, and then Hold SHIFT and resize the white cirle to almost half the size of the orb.
9. Go to Filter > Blur > Gaussian blur and set the blur pixels to 30.7. And set the layer mode to overlay.
10. Duplicate the lower light layer, it will be set to the same settings as the previous layer. Leave the blending options alone and change the opacity 50%. You should have something like this:
11. Now make another layer and call it 'Upper light'. Load the Orb layer selection again and fill it with white. Free transform the circle again to half the size of the orb. then position it at the upper center of the orb:
12. Go to Layer > Add layer mask > Reveal all. Use the gradient tool (Hotkey: G) *Note: if you get the 'Paint Bucket tool', just right click the icon and select the 'Gradient Tool' instead. Now, hold SHIFT to make sure that the line of grading will be a sharp 90 degree line. Now drag the mouse from the top of the white circle till the center of it:
You should have something like this now:
*Tweak: The problem with the layer we just made is that it cant be gaussian blurred, because it will be gaussian blurred as the whole circle, not as a fading circle. So in order to overcome that, all you have to do is to create a new layer and link it with the Upper Light layer, and merge both layers:
Now you should have a one, fading circle in a layer of its own:
13. Go to 'Filter > Blur > Gaussian Blur' and set the pixels to "6.7". Now you are done , you should have something like this:
- End of Tutorial