Simple *Round* Glass Buttons

[janettsue]

The cat is a painting my very talented daughter did.

I think I have done too many tutorials lately. I found myself deviating and using other things I had learned. I think that is a good thing.

Thanks for the wonderful tutorial.

[Ash]

The cat is a painting my very talented daughter did.

Indeed

And nice job with the orb btw

[EVGNick]

SWEET!!!

Thank you VERY MUCH!!

I can use these for a web page I'm working on!!!

[janettsue]

I find that I like making glass buttons.

[Competes2Win]

Great tutorial... I'm going to give it a try immediately. Looks kind of complex though for a beginner like me...

[lylcoup]

I created this first one, and then experimented with the second, psychedelic one

[tillerman35]

Brilliant tutorial!

I used your method to produce rounded square buttons. I'm not 100% satisfied with the highlights, but I can tweak them later.

Tip for this type of work: Duplicate and keep the original background layer around. Call it "Flat White Background." It will make selecting the work area much easier (i.e. go to layer, magic-wand the circle or rectangle or whatever, then invert selection if needed). Make sure to un-check the "visible" option in the layer properties, though.

My first attempt:

I followed the tutorial nearly exactly. I only changed three things:

1. Made it a rounded rectangle

2. Used Glow effect, not drop-shadow on the "Control" layer

3. Used drop shadow twice on the flattened image, once with X=0, Y=0, Blur=10, and again with X=5, Y=5, Blur=10

A slight variation - Glossy Marbled Texture

Same as above except:

1. Duplicate the "Flat White Background" layer, move to just above "Background" layer and rename to "Marble"

2. Select Primary Color=00660A, Secondary Color=White

3. Magic-wand the Marble layer to select the rectangle.

4. Effects->Clouds(Scale=75, Roughness=75, Blend=Normal)

5. Set Layer Properties to Blend=Normal, Opacity=50

Another slight variation - Swirly Glass Texture

Same as above except:

1. Make a new (throwaway) image 800x600.

2. Primary Color=Black, Secondary=White

3. Effects->Clouds(Scale=75, Roughness=75, Blend=Normal)

4. Effects->Distort->Twist(Amount=45,Quality=2)

5. Ctrl-A to select entire image, Ctrl-C to copy

6. Switch back to original image and Edit->Paste Into New Layer. Keep the canvas size. Selection should be centered.

7. Set Layer Properties to Blend=Darken, Opacity=135, Name="Swirly"

8. Move Swirly layer to just above Background layer

9. Go back to Flat White Background layer. Select rectangle, Ctrl-I to invert selection.

10. Go back to Swirly layer and hit Delete key to make swirly same size/shape as rectangle.

11. Effects->Blurs->Radial Blur(Radial Amount=2)

[Mr Frojo]

Not bad. I like that second one. The third one looks really sharp, but the bottom corners look a little wierd. Anyways, welcome to the forums!

[Ellis_Enterprises]

this button tutorial is quite capital!

here is what i ended up with

again, very cool!

[Gerbletech]

I made a variety of internet browser buttons. In 6 different colors!

Refresh:

Stop:

Home:

Favorites:

Info:

Help:

[TheVoid]

This is my result

[Pupperooni]

Simply love them.I am gonna use it in my computer classs!

[hulagirl]

I really liked this tutorial! Any suggestions how to make these buttons look indented instead?

[cjmcguinness]

I really liked this tutorial! Any suggestions how to make these buttons look indented instead?

Do you mean something like this?

[Frenzy]

yea like that, how did you do that>>

[cjmcguinness]

I really liked this tutorial! Any suggestions how to make these buttons look indented instead?

Do you mean something like this?

yea like that, how did you do that>>

OK. Follow the tutorial right up to the point where you add the symbol (control) but before you add the drop shadow.

Select the bottom layer (Background) and duplicate this layer (call it 'Duplicate'). Select the 'Control' layer and, using the magic wand tool (with tolerance set at about 50%), hold the SHIFT button and click on the white symbol - this shape will now be selected.

Click on the new 'Duplicate' layer and press the 'Delete' key.

You won't see any change at the moment, but if you untick the 'Control' and the bottom 'Background' layers you will see that the symbol shape has been cut out. Re-tick the bottom background layer (you can now delete the 'Control' layer as we no longer need it).

Use one of the select tools (Rectangle or Ellipse) to select an area that is inside the bounds of the 'Duplicate' circle, but covers all the cut-out area (tip, draw a rectangle or ellipse selection then use the 'Move Selection' tool to resize and reposition).

Select the 'Duplicate' layer and EFFECTS > Drop Shadow: Off X = -2, Off Y = -2, Blur = 2 and change the colour of the shadow to White (move the slider from the bottom to the top). Press CTRL+F to repeat.

Go to EFFECTS > Drop Shadow and change the settings to Off X = 2, Off Y = 2. Blur = 2 and change the colour back to Black (move the slider back down to the bottom). Press CTRL+F to repeat. This will have created an internal drop shadow, or 'Inner Shadow'.

You can now finish off by adding the drop shadow to the 'Background' layer as per the original tut.

Hope this helps.

-CJ

[DarkShock]

Didn't this tutorial used to be floated?

[cjmcguinness]

Didn't this tutorial used to be floated?

This tutorial (I'm proud to say) was Stickied for quite some time, probably because it was seen as a nice introduction for Newbies and it demonstrated some basic effects and use of plugins. As well as (IMHO) producing some nice results.

I went on holiday back in August and when I came back it had been un-stickied (along with many others that had been stickies for a while). Not sure why it was taken down, but it still gets some attention every now and again.

[MrRezister]

Great tutorial, I really appreciate these!

Looks like the edges are pretty rough though. What is the most effective way to smooth that out?

Thanks,

[hulagirl]

thats great. just what i was looking for. thank you!

[ronio]

This is a great tut.

Question: How can I wrap text on the circle so it looks like it was printed on a ball, rather than flat text that doesn't really belong?

[david.atwell]

Try typing the text on a new layer and using the Shape3d or Tube Oblique plugin.

[insaneflame]

YAY! This is EXACTLY what i was looking for

i needed a base for my icons for a theme for my PS3 and here it is

[insaneflame]

SWEET!!!

Thank you VERY MUCH!!

I can use these for a web page I'm working on!!!

did u make those Wii/DS logo's....if so can u teach me?

[agtooth95]

This was the first thing that I made on PDN, and it was fairly easy!