| |

Website Button Tutorial

Posted on June 13th, 2007
Written by admin and filed into the Web Graphics category.


In this tutorial I will teach you how to create a website button like this:

Final


First start out by creating a new layer. Name this layer Bottom metal. Take your rectangular marquee tool, make a selection around the size I have showing below, and fill it with any color.

Once you have the layer filled you can go ahead and deselect if you haven’t already. Now go to Blending Options and add these settings.

If you inserted all the settings correctly you should have something like this:

Now make a new layer and name it metal texture. Ctrl-click the layer Bottom Metal, then fill it. Now grab your elliptical marquee tool and create a thin selection, and use the selection to delete a little on each corner like shown below.

After you finish that you can go ahead and deselect. After go to blending options and insert the below settings:

Now you button should look something like this:

After you finish that make a new layer, and name it Top metal. Then Ctrl – Click the layer Bottom metal. Then go to Select > modify > contract. Use anything from 2-5 pixels. After you finish that go ahead and fill you selection. Then go down to the Blending Options and insert these settings:

If you inserted all of the settings correctly you should have something like this:

Now make a new layer and name it button bottom. Grab your Rounded Rectangle tool with a radius of 6 px. Draw a rectangle like the one shown below. (This is the bases and shape of your button so shape it however you want your button.)

Now go to blending options and insert these settings:

Your button should now look like this:

Now make a new layer name it Button top. Also pat yourself on the back because you’re almost done! Ctrl – click the layer Button Bottom and grab your gradient tool. Insert these settings for it:

(Click for Full View)

Now take your gradient tool click it and drag it from the top to the middle of your button. If done right this should create a glare.

Add any text you want and you are done.

Good job you have finished the tutorial!

19 Responses to “Website Button Tutorial”

Leave a Reply