Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Creating A Sleek Web 2.0 Navigation Bar

Tuesday, September 16th, 2008
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

You’ll be creating something like this:

First off, create a new document – 750 px by 75 px.

1. Fill the canvas with a nice blue. I used #00a2ff

2. Set the blending options of that layer to these screenshots:

3. Insert a new layer and draw a white rectangle on about half of the canvas like this:

4. Set the opacity of that layer to about 12% give or take.

5. Now you have your main base of the navigation bar, add your text. I used VERDANA, with the font size 12px and no anti alias for the text.

Thats basically it! Have fun! Any questions just comment!

Topics: , ,

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved