Hi-Tech Button
Learn to create these Hi-Tech Buttons.

author:
  young
title:
  Hi-Tech Button
date:
  Sat 25 February 2006
category:
  Web Layout and Design
credits:
  MTV


New Document


Firstly you will need to make a new document. This can be any size that you wish, as long as it is no smaller than the final image.



Coloring

Fill This new document with the color #484848.



Sizes

Now you need to select your rectangle marquee tool and set it to fixed style. Use these settings

Width: 68
Height: 22



Button

Now you will make the actual button. Make a new layer.
Then make a selection and fill it with the color #C5C5C5.






shading

Now make another new layer and simply make a 1 pixel selection at the top of you rectangle, and fill it with the color #FFFFFF.
Now set the blending mode to soft light

And make a new layer. Then select a 1 pixel selection on the left side of the rectangle and fill with the color #adadad
Set this blending mode to overlay.






Lining

Make another new layer.

Now make a 1 pixel selection 6 pixels from the bottom of the rectangle and fill with the color #A1A1A1.

Make another 1 pixel selection above that and fill with the color #BFBFBF.






Gradiants

Next make a new layer.

Make a selection from your bottom 1 pixel line, down to the bottom of the rectangle.

Select your gradiant tool using the setting: from white to transparent and going from the bottom to the top of your selection, fill with the gradiant.






Text

As far as the text, you can type using these settings:

TEXT - Arial
color - #3C3C3C
size - 12
anti-aliasing method - sharp



Extras

After that, theres many extras that you could create to make it look even better.

Here is my final Effect:



For questions and help regarding this tutorial,
please post a message at the forums.
Want your link here?