Platinum Bar Navigation

Adobe Photoshop Tutorials :

Category: Adobe Photoshop Tutorials
Added: 04/08/2007
Views: 43,951

Platinum Bar Navigation

Platinum

Tutorial Goal

We will create a sleek platinum bar navigation in Adobe Photoshop. Click the image below to see the full size result.

Step 1 : Document Setup

Open Adobe Photoshop and Create a new Image:
Size: 700 x 200px
Background Color: Black

Step 2 : Creating the Platinum Bar

Using the Rectangle Tool, draw the bar shape on stage. You don't have to worry about the exact dimensions, you can always adjust them later since it is a vector shape. You can use the image below to gauge the relative size of the bar to the canvas but it is not important.

Shape Reference

Right click your vector bar layer, select "Blending Options" and apply the following settings.

Inner Glow

Platinum Inner Glow Settings

Outer Glow

Platinum Outer Glow Settings

Bevel and Emboss : Feel free to adjust slightly to your liking.

Platinum Bevel and Emboss Settings

Bevel and Emboss - Contour Map : Again, tweak my settings if you like.

Platinum Contour Map

Stroke

Platinum Stroke

The bar should now look similar to the images below:

Platinum Progress
Platinum Full

Step 3 : Creating the Sleek Buttons.

Create a new layer and using the Marquee Tool draw and fill in the button background.

Draw Platinum Button

Right click the button layer, select "Blending Options" and apply the following setting.

Platinum Button Outer Glow

Create another new layer then using the Pencil Tool with Hard Round 1 px, draw the white border box below:

Draw border box

Reduce the box layer's opacity to 30%. Create a new layer and using the Marquee Tool select the top half of the button.

Platinum Shine

Fill the selection in with White and reduce the layer Opacity to 20%.

Platinum Shine 2

Step 4 : Duplicate the Button and add Labels

Create a new Folder in the layers panel and drag the 3 button layers into it. Then duplicate the button by dragging the folder to the 'Create a New Layer' button on the bottom of the pane. Drag the copy to the right and repeat until your bar is full. You will probably need to adjust the size of the platinum bar at this point.

Platinum Shine 2

Use the Text Tool to add labels to each button. I used the font: "Volter Fish" from 1001font.com.

Customized Platinum with Text
Flash Den

Step 5 : Adding the Platinum Reflection

Create a new folder and put all of your layers into it. Duplicate the folder and merge the new folder into a single layer by pressing 'Ctrl E' or 'Cmd E'.

Now flip the resulting merged layer vertically.
Edit > Transform > Flip Vertically

Drag the flipped layer below the navigation, like so:

Flipped Customized Platinum

With the flipped layer selected, Add a Mask Layer, select the gradient tool, set its gradient to:

Gradient Settings

Then click and drag, top to bottom as shown below:

Create the Mask.

Platinum Navigation Bar with reflection result:

Customized Platinum

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Platinum Bar Navigation" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Web Development : Interactive Map Tour de Baccalieu

Interactive Map
New Foundlands Business and Tourist Destinations

Web Development : Musician Website Eddie Kirkland

Musician Website
Blues Legend

Web Development : Tutorial Directory Tutorial Quest

Tutorial Directory
Design and Coding Resource

Testimonials

"Working with Max was easy and fun. He understood the feel and look I wanted my site to have. Max is easy to communicate with and very available, always returning emails and answering all of my questions promptly. He also had great suggestions when I had questions about website and business etiquette. In addition to his programming abilities, Max has a great way with people. He has set me up to manage my website easily. I am left feeling confident and proud of my new site."

- Megan Jean Morris, Professional Fine Artist, Farmington, Maine
View More Testimonials

More Tutorials!