Post your Icons - How to make glass orbs - New Method

Glass?

Yeah, most or all of them look like glass
1
20%
Kinda looks like glass
3
60%
doesn't really look like glass
1
20%
Doesn't look like glass in any way possible
0
No votes
 
Total votes: 5

User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Post your Icons - How to make glass orbs - New Method

Post by Click16 »

OK if any of you noticed that Windows Vista and Mac OSX's Icons have the same 'glassy' look or they look shiny? Well i will tell you all how to create icons that look like that but you need adobe photoshop (i don't know if this works with gimp shop)

Method 1

To start off in photoshop create a 256x256 bitmap image.
Click the Selection tool and hold it in for about 2 seconds and a extension will show. Click the "Elliptical Marquee Tool" and hold shift and drag across the picture.
Select in the Foreground Color any color you want your icon to be. I will use a blue one.
Image
That's what it should look like.

Now create a new layer with the circle still selected.
you should still see your blue circle but the reason for creating a new layer is so you don't edit your original image.

Now set your foreground color to be white and instead of using a paint bucket we are going to use a Gradient.
make the gradient type to foreground to transparent and select the top of the circle and drag it to the bottom.
Image
Thats what it should now look like. Use the distort to make the top part just inside the rim with the bottom of the gradient coming in (make it look something like this)
Image
Now duplicate layer 2 and name it layer 3.
in layer 3 go to :Edit:Transform:Flip Vertical Move it to the same position that it is on the top except on the bottom. (pic)
Image
Now you have to select the 3rd layer and go to the top and select:
Filter>Blur>Gaussian Blur and set the radius to 10 pixels
Image
Now mess around with the opacity of layer 2 and layer 3 until you make the layers blend with layer 1.
(Layer 3 [the Gaussian Blur layer] works with the opacity of 70%
Layer 2 with somewhere around 50 - 60%)
Image
OK now we need to edit the blue (or your color) circle. Select Layer 1/ Background and go to the top and select:
Filter>Render>Lighting effects.
make the light hit the bottom and get darker wile it goes up. Different colors require stronger or weaker light.
this is mine so far:
Image
Now its looking better right??? well there are 2 more things we have to do.
make sure Layer 1 is selected and go to the top and select Layer>Layer Style>Inner Glow
Make the Blend Mode Multiply.
Change the color to black instead of that yellowish color.
Make the Opacity 100% (this is temperamental so we can see what and where the glow is.)
and move the size and choke around until its around the edge about when it reaches the light effects/light reflection.
change the opacity to a % that looks right here is what mine looks like:
Image
Now to finish it off we need an outer glow. To do this go to the top and select:
Layer>Layer Style>Drop Shadow. Now make the shadow color the color of what your circle started out to be (mine is blue so i make the shadow color blue) and change the distance to 0. Mess with other settings until you get a small glow around the edge (this will look more like a boarder) and hit OK. This is what i ended with:
Image
Have fun Now this is a post for all who can create exotic looking icons Start Posting!
Here are all of my icons:
Image
Image
Image
Image
Image
Image

Method 2

Create any size bitmap in photoshop. I will use a 256x256 bitmap size and make the background transparent.
Hold in the selection tool and select 'Elliptical Marquee Tool.'
Hold the Shift button on your keyboard and click + drag the mouse over the bitmap to create a perfect circle.
Click the foreground button and make it a VERY dark color version of what you want to use. Use the color dump tool and fill the circle with any color. (i will use red)
Image
Now press the 'New Layer' button.
In your new layer (Layer 2) make your foreground color white and click and hold in the paint bucket tool until a menu shows, select 'Gradient Tool' then select 'Linear Gradient'
Make a gradient from the top of the circle to right before the bottom.
Image
Now (with the circle still selected) Go to 'Edit' > 'Transform' > 'Distort' and make it look something like this:
(make sure its inside the circle leaving a small gap between the gradient and the background)
Image
Now on the layers panel, find a drop down box next to the opacity levels, change it from 'Normal' to 'Color Dodge.'
Image
Now create a new layer. (Layer 3) and make Layer 2 invisible. (Click the eye next to it) Now you will only see your original circle. Go to 'Select' > 'Color Range' and click in the circle and press 'OK.' Now with the circle selected, Go to the top and go to 'Select' > 'Modify' > 'Contract' Contract the selection by 1 Pixel, then press 'OK'.
Select the 'Gradient Tool' and make the gradient shape 'Diamond Gradient' and the gradient type 'Foreground to Transparent' Make your foreground color white.
Go from the bottom of the circle to the middle.
Image
Now (With Layer 3 selected) make the layer type 'Color Dodge'
Make all layers visible and select Layer 1.
Right click on Layer 1 and select 'Blending Options'
Check in 'Inner Glow' and select it as well.
make the color black and the blend mode 'Multiply.'
Mess with the size and choke until you get something you like. Once you finish that, you can deselect.
Image
For the last step, Mess with the opacity of Layer 2 until you get a nice blend. This is what i finished with:
Image

Method 3 - Vista Orbs


1. Open photoshop and create any image with a transparent or white background.
2. (Use this if you have a background)Create a new layer and select the Eclipse Tool. OR (Use this if you have a transparent background) Select the Eclipse tool.
3. Set your foreground color to 001767.
4. At the top, select the 'Geometry Options' from the drop down. Select 'Circle (draw diameter or radius)' and 'From Center'
5. At the top go to: View > Rulers. Then right click the white bars surrounding the image (you may want to maximize the image) and select 'Percent'
6. Zoom in so it fits the screen. Set your mouse cursor at 50 x 50 percent (half vertical and half horizontal)
7. at the top set it to 'Fill Pixels'
Draw a good sized circle.
Image
8. Now select at the top 'Paths' Set the cursor at 50 x 50 and make it a tad bit smaller then the circle itself.
9. Select the 'Direct Selection Tool' and set it to 'Path Selection Tool'
10. Move the path up until its at the rim of the circle.
11. Now go to the 'Direct Selection tool' select the edges of it and move them up (the dots to the sides) Mess with it until you get the curve at the half way mark.
12. Go to the Paths tab and right click the work path and select 'Make Selection' and just press ok.
13. Make a new layer above the circle and fill it with this color: ddf8ff
Image
14. Use the eraser tool and make it look like this:
Image
15. Set the eclipse to be 'Fill Pixels' Now make a layer below your circle but above the background if you use one, make the background invisible. Set your foreground color to be white. set your cursor to be at 50 x 50 and make a circle bigger then your orb.
it should look something like this:
Image
16. right click on your orbs layer's thumbnail (the blue plain background) and select 'Select pixels' and go to your white circle and pres the delete button so it puts a hole in the white circle. With it still selected press the mask button at the bottom. Set that layer to be above all other layers.
17. Now duplicate your mask layer. name it the next layer number.(Ex. Layer 3, duplicate it and name it Layer 4)
18. Select the not duplicated layer at go to Edit > Free Transform.
19. At the top, press the chain button. Hold the Alt button on your keyboard and shrink it just a tad bit so it leaves a boarder. (It should be a VERY thin white outline of a circle.
20. Now press the lock button on the layer and move it up by a few so you get something that looks like this:
Image
21. Now with the layer still selected go to the top and select Filter > Blur > Motion Blur. set it to be at -90 or 90 and set the distance to 10 pixels. It will look something like this:
Image
22. Now select your duplicated mask layer. Do the same thing like you did with the first one but put it on the boarder of your reflection and transform it inward instead of just moving it in.
23. Go to paths and select the work path. Once the work path is selected, go to the top and select Select > Inverse then press the delete button and deselect.
24. Now go to Filter > Blur > Motion Blur and set the distance to 7 pixels. It may look something like this:
Image
25. Make a new layer below your non duplicated mask layer. Set the cursor to 50 x 50, make a eclipse using this color: 42d6fb. Don't make the eclipse as big as the circle, make it look like a pokeball with a large center circle.
26. Now go to the top and go to Filter > Blur > Gaussian Blur. Set it so you can see the center without fading but has a glow look. Set it at the bottom. Right click your first mask's thumbnail and select 'Add Layer Mask to Selection' then go to Select > Inverse and press delete on your new layer. It should look something like this:
Image
27. Now make all layers invisible except the blue circle. Right click it and go to 'Blending Options' Go to Inner glow and check 'Center' and make the color this: 3d84d9
Make it look something like this:
Image
28. Now go back to the blending options and set a drop shadow. Make the distance 0 pixels, the spread 20, the size 14, the Opacity 100, the blend mode to be normal, and the color to be 001767
29. Make all layers visible and merge them!
30. Draw anything in the circle using f0f0f0
Here's what i ended with:
Image

Thanks and Bye!
Last edited by Click16 on Fri Oct 03, 2008 1:44 am, edited 7 times in total.
Image
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons

Post by Click16 »

Hmm... Well i dont think this worked the best but i guess i can say its alright
For all of you windows media player 11 users, you should know what this is:
Image
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons

Post by Click16 »

Yay, orange:
:XP: :XP: :XP: :XP: :mrgreen: :mrgreen: :mrgreen: :D :D :D
Image
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: Post your Icons - How to make 'Glassy' Icons

Post by Aumaan Anubis »

Who wants a sweet avatar!?
:p

Image

Credits to Click16.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons

Post by Click16 »

Aumaan Anubis wrote:Who wants a sweet avatar!?
:p

Image

Credits to Click16.
HAHA thats a good one! i like it i would love to use it as a avatar! i has permission to use it right?
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons

Post by Click16 »

Dark Purple:
Image
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: Post your Icons - How to make 'Glassy' Icons

Post by Aumaan Anubis »

Yeah Click, you can use it.
User avatar
NotZachary82
Posts: 1846
Joined: Thu Dec 20, 2007 8:39 pm

Re: Post your Icons - How to make 'Glassy' Icons

Post by NotZachary82 »

Aumaan Anubis wrote:Image
<_<
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: Post your Icons - How to make 'Glassy' Icons

Post by Aumaan Anubis »

I just knew you'd be jealous :roll:

Image

There ya' go :p
User avatar
NotZachary82
Posts: 1846
Joined: Thu Dec 20, 2007 8:39 pm

Re: Post your Icons - How to make 'Glassy' Icons

Post by NotZachary82 »

heh, since it's my favorite color, I'll wear it. :XP:
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons

Post by Click16 »

Sorry if this is a bump, i want to show you something i made with photoshop while messing with effects:
Image
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: Post your Icons - How to make 'Glassy' Icons

Post by Aumaan Anubis »

Nice, but I'm not a fan of the bottom of the border.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons

Post by Click16 »

I would think not... im still trying to make that new effect work better...
I made a better one but a lot bigger... i still has the boarder
Image
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons

Post by Click16 »

Does this look any better?
Image
Last edited by Click16 on Thu Sep 04, 2008 12:19 am, edited 1 time in total.
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: Post your Icons - How to make 'Glassy' Icons

Post by Aumaan Anubis »

The second one is much better. In the larger one, the distorted border is so ugly and noticable. It's less noticable in the second, but it's still there.
xxpenguinxx
Posts: 1974
Joined: Sun Jan 27, 2008 4:50 am

Re: Post your Icons - How to make 'Glassy' Icons

Post by xxpenguinxx »

Ah, the triple post of doom!

I added a different effect but it gives more of a button look.
Image
DON'T PUSH MEH BUTTONS!
DemonicSandwich wrote:See that? You see that how it is highlighted down here but it's not highlighted right there? Ah, I guess that's what I get for pirating it.
In Soviet Russia, DS touches you. Say it again and I'll do more than touch. ~DS -Oh baby
A cat was licking itself to the sound of potato chips.
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: Post your Icons - How to make 'Glassy' Icons

Post by Aumaan Anubis »

That actually does look like a button.

Cool.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons + New Method

Post by Click16 »

Image
Oh i pushed your button :XD:
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons + New Method

Post by Click16 »

OWNED PENTAGON!
Image
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons + New Method

Post by Click16 »

I tried my best to remove the boarder.
Image
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: Post your Icons - How to make 'Glassy' Icons + New Method

Post by Aumaan Anubis »

In the pentagon, the border seems uneven. Such as, it's very slim at the bottom of the image.

The fact that a border isn't there, it's just not very spherical. It's got those edges on it every pixel or so.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons + New Method

Post by Click16 »

I was just messing with the pentagon... my photoshop work will be on this website, i may make a post somewhere in the cafe showing my photoshop work and effects... (A link to this page will defiantly be supplied)

Here is a green version of one that i tried to get the boarder to be part of the orb and i think it worked for the most part.
Image
(Fixed the blue glow at the bottom)
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons + New Method

Post by Click16 »

Dont push mah glass glowing buttons!
Image
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

Re: Post your Icons - How to make 'Glassy' Icons + New Method

Post by Click16 »

Vista Button! (Custom)
Image
User avatar
Aumaan Anubis
Staff
Posts: 1812
Joined: Thu Dec 13, 2007 12:18 am
Contact:

Re: Post your Icons - How to make 'Glassy' Icons + New Method

Post by Aumaan Anubis »

Ain't bad.
Post Reply