Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
Beveled Button
by Axialabs.com
Plastic Tabs
by Robouk
Useful Button (and a bit about gradients)
by Adam Priestley
Fancy Buttons
by Atul Thakur
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
Photoshop  Home Photoshop Web Layout Tab Button
rss

Tab Button

Author: Aaron More by this author

Added: Mar 14, 2005 Rating:  Average Rating: 3.13 Votes: 15 Position: 6892 of 13009Average Rating: 3.13 Votes: 15 Position: 6892 of 13009Average Rating: 3.13 Votes: 15 Position: 6892 of 13009Average Rating: 3.13 Votes: 15 Position: 6892 of 13009Average Rating: 3.13 Votes: 15 Position: 6892 of 13009 Level: Beginner Software:  Photoshop

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


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Photoshop  More Photoshop: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials
Add comments to "Tab Button"