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).


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


Step 3
While still selected on the Tab button layer click the 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.


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.


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.


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 Tutorial: Final Result


Author's URL: Aaron
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Tab Button"

Only registered users can write comment

Reader's comments