Post your Icons - How to make 'Glassy' Icons
Posted: Wed Apr 23, 2008 7:30 pm
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)
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.
Thats 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.
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)
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)
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
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%)
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:
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:
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:
Have fun Now this is a post for all who can create exotic looking icons Start Posting!
Here are all of my icons:
http://i25.tinypic.com/1zdytza.png
http://i26.tinypic.com/24f9su0.png
http://i31.tinypic.com/30w5pvm.jpg
http://i29.tinypic.com/2aanka1.png
http://i31.tinypic.com/20hptdx.png
http://i28.tinypic.com/bzcls.png
http://i30.tinypic.com/2qxqnmw.png
http://i31.tinypic.com/2w3t2yd.png
http://i27.tinypic.com/69kkll.png
I know alot! :p
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.
Thats 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.
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)
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)
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
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%)
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:
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:
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:
Have fun Now this is a post for all who can create exotic looking icons Start Posting!
Here are all of my icons:
http://i25.tinypic.com/1zdytza.png
http://i26.tinypic.com/24f9su0.png
http://i31.tinypic.com/30w5pvm.jpg
http://i29.tinypic.com/2aanka1.png
http://i31.tinypic.com/20hptdx.png
http://i28.tinypic.com/bzcls.png
http://i30.tinypic.com/2qxqnmw.png
http://i31.tinypic.com/2w3t2yd.png
http://i27.tinypic.com/69kkll.png
I know alot! :p
Also, I agree that this is way too much work for such a poor result. All orb work is knowing your lighting. You start with a circle, and 3 basic lighting techniques later and you're done.
