Photoshop tutorials

Basic Tutorials

Drawing&Paiting

Effects & Objects

Photo Effects

Text Effects

Textures Making

Photo Fixing

Manipulation

Web Graphics

Miscellaneous

Photo Retouch

Animation

Web Layouts

Button Making

Abstracts

Filters

Brushes

Actions

Shapes

Fonts


folder Photoshop Tutorials > Web Layouts

Power Cool Buttons Making



web button menu making tutorials
New Document
web button menu making tutorials


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.



web button menu making tutorials
Coloring
web button menu making tutorials

Fill This new document with the color #484848.



web button menu making tutorials
Sizes
web button menu making tutorials


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

Width: 68
Height: 22




web button menu making tutorials
Button
web button menu making tutorials

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

web button menu making tutorials




web button menu making tutorials
shading
web button menu making tutorials

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.

web button menu making tutorials




web button menu making tutorials
Lining
web button menu making tutorials

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.

web button menu making tutorials




web button menu making tutorials
Gradiants
web button menu making tutorials

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.

web button menu making tutorials




web button menu making tutorials
Text
web button menu making tutorials

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

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



web button menu making tutorials
Extras
web button menu making tutorials

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

Here is my final Effect:
web button menu making tutorials

 

 

 

 

eXTReMe Tracker

                                    © 2006 PhotoshopTutorials100.com