Post your Icons - How to make glass orbs - New Method
- Click16
- Posts: 1941
- Joined: Mon Dec 31, 2007 4:36 am
- Location: United States
Post your Icons - How to make glass orbs - New Method
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.
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.
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:
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)
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.
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)
Now on the layers panel, find a drop down box next to the opacity levels, change it from 'Normal' to 'Color Dodge.'
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.
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.
For the last step, Mess with the opacity of Layer 2 until you get a nice blend. This is what i finished with:
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.
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
14. Use the eraser tool and make it look like this:
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:
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:
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:
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:
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:
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:
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:
Thanks and Bye!
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.
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.
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:
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)
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.
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)
Now on the layers panel, find a drop down box next to the opacity levels, change it from 'Normal' to 'Color Dodge.'
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.
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.
For the last step, Mess with the opacity of Layer 2 until you get a nice blend. This is what i finished with:
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.
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
14. Use the eraser tool and make it look like this:
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:
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:
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:
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:
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:
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:
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:
Thanks and Bye!
Last edited by Click16 on Fri Oct 03, 2008 1:44 am, edited 7 times in total.
- Click16
- Posts: 1941
- Joined: Mon Dec 31, 2007 4:36 am
- Location: United States
Re: Post your Icons - How to make 'Glassy' Icons
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:
For all of you windows media player 11 users, you should know what this is:
- Click16
- Posts: 1941
- Joined: Mon Dec 31, 2007 4:36 am
- Location: United States
Re: Post your Icons - How to make 'Glassy' Icons
Yay, orange:
- Aumaan Anubis
- Staff
- Posts: 1812
- Joined: Thu Dec 13, 2007 12:18 am
- Contact:
Re: Post your Icons - How to make 'Glassy' Icons
Who wants a sweet avatar!?
:p
Credits to Click16.
:p
Credits to Click16.
- Click16
- Posts: 1941
- Joined: Mon Dec 31, 2007 4:36 am
- Location: United States
Re: Post your Icons - How to make 'Glassy' Icons
HAHA thats a good one! i like it i would love to use it as a avatar! i has permission to use it right?Aumaan Anubis wrote:Who wants a sweet avatar!?
:p
Credits to Click16.
- Click16
- Posts: 1941
- Joined: Mon Dec 31, 2007 4:36 am
- Location: United States
Re: Post your Icons - How to make 'Glassy' Icons
Dark Purple:
- Aumaan Anubis
- Staff
- Posts: 1812
- Joined: Thu Dec 13, 2007 12:18 am
- Contact:
Re: Post your Icons - How to make 'Glassy' Icons
Yeah Click, you can use it.
- NotZachary82
- Posts: 1846
- Joined: Thu Dec 20, 2007 8:39 pm
Re: Post your Icons - How to make 'Glassy' Icons
Aumaan Anubis wrote:
- Aumaan Anubis
- Staff
- Posts: 1812
- Joined: Thu Dec 13, 2007 12:18 am
- Contact:
Re: Post your Icons - How to make 'Glassy' Icons
I just knew you'd be jealous
There ya' go :p
There ya' go :p
- NotZachary82
- Posts: 1846
- Joined: Thu Dec 20, 2007 8:39 pm
Re: Post your Icons - How to make 'Glassy' Icons
heh, since it's my favorite color, I'll wear it.
- Click16
- Posts: 1941
- Joined: Mon Dec 31, 2007 4:36 am
- Location: United States
Re: Post your Icons - How to make 'Glassy' Icons
Sorry if this is a bump, i want to show you something i made with photoshop while messing with effects:
- Aumaan Anubis
- Staff
- Posts: 1812
- Joined: Thu Dec 13, 2007 12:18 am
- Contact:
Re: Post your Icons - How to make 'Glassy' Icons
Nice, but I'm not a fan of the bottom of the border.
- Click16
- Posts: 1941
- Joined: Mon Dec 31, 2007 4:36 am
- Location: United States
Re: Post your Icons - How to make 'Glassy' Icons
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
I made a better one but a lot bigger... i still has the boarder
- Click16
- Posts: 1941
- Joined: Mon Dec 31, 2007 4:36 am
- Location: United States
Re: Post your Icons - How to make 'Glassy' Icons
Does this look any better?
Last edited by Click16 on Thu Sep 04, 2008 12:19 am, edited 1 time in total.
- Aumaan Anubis
- Staff
- Posts: 1812
- Joined: Thu Dec 13, 2007 12:18 am
- Contact:
Re: Post your Icons - How to make 'Glassy' Icons
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.
-
- Posts: 1974
- Joined: Sun Jan 27, 2008 4:50 am
Re: Post your Icons - How to make 'Glassy' Icons
Ah, the triple post of doom!
I added a different effect but it gives more of a button look.
DON'T PUSH MEH BUTTONS!
I added a different effect but it gives more of a button look.
DON'T PUSH MEH BUTTONS!
In Soviet Russia, DS touches you. Say it again and I'll do more than touch. ~DS -Oh babyDemonicSandwich 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.
A cat was licking itself to the sound of potato chips.
- Aumaan Anubis
- Staff
- Posts: 1812
- Joined: Thu Dec 13, 2007 12:18 am
- Contact:
Re: Post your Icons - How to make 'Glassy' Icons
That actually does look like a button.
Cool.
Cool.
- 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
Oh i pushed your button
- 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
OWNED PENTAGON!
- 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
I tried my best to remove the boarder.
- 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
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.
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.
- 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
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.
(Fixed the blue glow at the bottom)
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.
(Fixed the blue glow at the bottom)
- 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
Dont push mah glass glowing buttons!
- 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
Vista Button! (Custom)
- Aumaan Anubis
- Staff
- Posts: 1812
- Joined: Thu Dec 13, 2007 12:18 am
- Contact: