Home > Tutorials > Photoshop Tutorials > 3D Navigation Bar

3D Navigation Bar

 

This 3D navigation bar used to be a common element in website design – however over the years it has transitioned to be a common design element used across all sorts of graphic and web design projects.

Let’s start by openingĀ up a new 600 wide by 50 high canvas in Adobe Photoshop.

Using the Rectangular Marquee <M> tool create a rectangle about 10 pixels away from each edge.


Go to SELECT > MODIFY > SMOOTH and use a value of 10 pixels. See what it does to the ends?

Create a new layer and fill your selection with white and then select the Gradient Tool.

Select the Gradient Tool (or hit G on the keyboard) and make sure that the Gradient is set to “Foreground to Transparent” do the following series of steps:

  • Select a dark grey color from the palette. (RGB:87,87,87)
  • Use the Gradient Tool from the top to about midway down the object / text
  • Select an even darker grey colour (RGB:38,38,38)
  • Use the Gradient Tool from the bottom to about midway again.
  • You will need to make sure that there is a certain amount of grey in the middle of the image.

Right click the same layer and this time choose LAYER EFFECTS

Keep DROP SHADOW selected, and from the drop-down box select Bevel & Emboss. Create a Inner Bevel of about 5 pixels depth and 5 pixels blur.

Create a new layer and make sure it’s on top of our bar layer from above. Select the line tool and draw two 1 pixel wide vertical lines while holding the <SHIFT> key. This will constrain your line to a perfectly vertical state.

Now just add some text, and your 3D navigation bar is ready to be used!

rp-3d-navigation-bar-final

About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

How To Populate A DIV via an HTML SelectBox, PDO, and jQuery

Imagine you have a database full of information, and you want to let users browse ...

Like every other website, this site uses cookies to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.

Close