Dark Glassy Buttons For Websites/forums

Godlesswanderer · Mar 9, 2005 at 10:50 PM

Here's your chance to create your very own dark glass-like button for use in forums or websites.

First, create a 88 by 31 pixel document. Pick any resolution, as long as it is over 72. I have chosen 300 simple because the higher the resolution, the better the quality. also, have the background as transparent.

Next, click on the rounded rectangle shape icon. If it is not already there on the toolbar, you'll need to click and hold the shape icon until the little menu appears.

Next, click the button. This will bring up the geometry options menu.
On this menu, click the fixed size option and enter the following values.

Also, as you can see on the screenshot, I have entered the radius as 10px. This will give it the perfect rounded shape.

Now all you need to do is click this () button and click and drag the cursor to where you want the button to be in the document.

Try and get in roughly in the centre of the document.
Once you have decided where you want the button to be, click the pen tool () and right click (Mac = CTRL + click) inside the selection.

Now a little drop down menu will appear. Click the 'make selection' option and the following window will open,

Enter the same values I have done and you're almost there.

This will then create a rounded selection. Now pick the colour you wish to make the button. I have picked light grey (#D9D9D9). Now click the Fill () icon and fill the selection with that colour. Now press CTRL + D to deselect the selection.

Now click Layer >>> Layer Style >>> Bevel & Emboss.
The following window will open.

Now change the angle and altitude to the following,

Angle = 153 degrees
Altitude = 67 degrees

Now click Inner Shadow, and keep all the values as default.
That will give it the glassy texture and feel.

Next, click Stroke and enter the following values,

Size = 2px
Position = Outside
Blend Mode = Normal
Opacity = 80%
Fill Type = Colour
And use #A4A5A5 as the colour

As you can see below,

Now enter whatever text you want. It's your choice.

You can see a finished version below.

http://img190.exs.cx/img190/9936/finished9dj.jpg
(For some reason the img tags wont work on this link.)

Of course, if you want a transparent background, just delete the background layer and save the image as a .GIF or .PNG

Enjoy your new skill!