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

Interface Bar


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



Author's URL: WebDogPro
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 "Interface Bar"

Only registered users can write comment

Reader's comments
comments tyrc_racing August 04, 2006 says:
Interface Bar
NIce tut :wink: