Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Tab Button

Tab Button


Step 1
Make a new document 350x350 pixels. Make a new layer and call it Tab button. Select your Rectangle Marquee Tool and make a fixed selection of 157x32. You can see an example here:

You should now have a selection that roughly looks like mine (left image). Hold "ALT" button on the keyboard and while holding it click and drag the bottom half selection until you get it like the one show below (right image).

image 1

image 2


Step 2
Fill the background in any colour you'd like, I chose red.

image 3

Step 3
While still selected on the Tab button layer click the image 4 and select the stroke option, then enter in these settings:

don't press "OK" because this is a demonstration of how it looks so far.

image 5

Step 4
Now while still on the Blending options properties move up to the Gradient Overlay settings. You should then enter in these settings:

This is a preview of how it looks so far.

image 6

Step 5
As you can see it is starting to look a lot nicer! Now while still on the Blending Options move up to the Bevel and Emboss settings. You should enter in these settings:

This is a preview of how it looks so far.

image 7

You can now be able to add text to it in anyway you'd like. Its very simple. This can be very helful when making a site, its a nice way of making buttons to integrate with your site. Hope you enjoy!

Tab Button


Author's URL: Aaron
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Tab Button"

Captcha