Platinum Bar Navigation

Platinum Bar Navigation

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.

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

Inner Glow

Outer Glow

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

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

Stroke

The bar should now look similar to the images below:

Step 3 : Creating the Sleek Buttons.

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

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

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

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

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

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.

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

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:

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

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

Platinum Navigation Bar with reflection result: