Software: Photoshop
Level: Beginner / Intermediate
Author: Matt



Introduction There's nothing like crisp glass bottons to make your site look a little superior to other webmasters using plain html links. Although a number of glass button tutorials have been written, many are complex and time consuming for most people to bother with. In this tutorial I'll show you a quick method with excellent results ... so read on.

Step 1) Open up photoshop and make a new canvas ( file > new ) with a size of 150x50 pxls.

Step 2) Click the foreground color in the tools window - we want to make sure our button is a nice blue color. You'll notice a window pop-up called "color picker", set the values to: R:56 , G:105, B:243.

Step 3) Make a new layer in the layers window. Photoshop will call it "layer1". Click the rounded rectangle tool from the tools window . Whilst the rounded rectangle tool is selected have a look up the top in the main menu area for "radius". It looks like this , set it to 15 px as shown.

Step 4) Now make a rounded rectangle shape in your canvas - it should look something like figure1.


             figure 1

Step 4) Now we need to make what is called a "perfect selection". Hold down ctrl and click layer1. You'll notice a marquee suround the button shape as shown in figure2.


             figure 2

Step 5) Next click the marquee tool . Hold down the Alt button and cut the perfect selection surrounding the button in half as shown in figure 3. (Hopefully you're still with me at this stage as this about the hardest thing in this tutorial, if you're having problems take your time and try again - if everything else fails you're welcome to contact me)


             figure 3

Step 6) Now create a new layer in the layers window and then go up to the main menu and click select > modify > contract. Contract the marquee by 2.

Step 7) Set the foregound color to white and then click the fill tool in the tools window. Use the fill tool to click inside the selection that is covering half the button. You will now have something like figure 4.


             figure 4

Step 8) With the perfect selection still surrounding our white area go to the main menu and click select > feather. Select a value of 2. Now go back to the main menu and click select > inverse. Now hit the delete key on your keyboard 3 times. You should have something like figure 5.


             figure 5

Step 9) Now deselect your marquee tool by hitting Ctrl-D. Go to the main menu and click filter > blur > gaussian blur. Set it to a value of 3. You should now see how you can do steps 5-9 for the bottom area as well - except rather than using a white fill you can use an aqua color (I used the color settings R:75, G:202, B:243). For those of you keen on a short cut you can always figure out how to copy layer1, flip it upside down and than change it's color for the same effect. You'll note in my final button (figure 6) that there is a slight white highlight in the top left hand corner. To do this simply use the paint brush tool .


             figure 6

Conclusion: Once you've made one of these buttons you can change the colors easily for any number of variations as seen below.

Online Adult Designs are a newly formed company whose designers have had a great deal of experience in the adult industry. Our mission is to go well beyond our clients expectations in terms of the quality of our designs and the services we provide. With tour prices starting from as low as $500.00 USD we prove that a good product can be delivered at a very affordable price.