website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Interface Bar
rss

Interface Bar

Author: WebDogPro More by this author


1) Create new file, 400x75 should work.

2) With the gradient tool fill it, use it Up to Down. Use this colors in your gradient:



3) Now create new layer and with the Rectangular Marquee Tool make a rectangle in the mid of the image.

4) Now with the same gradient do it in the rectangle Down to Up.

5) Now you should have something like this:



Don't think that is the final effect... is just the begin... rofl I'm starting like Yoda. :P. Sorry lets back to the tutorial.

Now add this layer styles:







Now You have something like this:



7) Ok let's add the buttons, with the Rectangular Marquee Tool make another rectangle in the bar.

Now go to Edit -> Transform -> 180°

Copy and paste. Now add this layer styles:





8) Now this is your button bar!!:



Add more buttons, just duplicate and move the buttons.

9) Now after you have add your buttons let's add a transparency and you can start adding text. Make new layer, and with the Rectangular Marquee Tool (oh my god i love that tool) in the mid of the button make a rectangle and fill it with white.

Now change the opacity to 40% or 50%. Add a stroke (Layer Style) and you're a done.

Add it to the another buttons and you're ready to start typing.

10) Now type your text, like Home, Downloads, etc., and add some layer styles.

Remember to experiment !!!.

Well, that's all. Here is my final effect:

Interface Bar 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

Read/Add comments to "Interface Bar"

comments  tyrc_racing August 04, 2006 says:
Interface Bar
NIce tut Wink