Platinum Bar Navigation

Category: Adobe Photoshop Tutorials
Added: 04/08/2007
Views: 49,107
Category: Adobe Photoshop Tutorials
Added: 04/08/2007
Views: 49,107
We will create a sleek platinum bar navigation in Adobe Photoshop. Click the image below to see the full size result.
Open Adobe Photoshop and Create a new Image:
Size: 700 x 200px
Background Color: Black
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:
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%.
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.
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:
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.
Poster 18" x 36"
The Arnold Expedition's Route from the Kennebec River to Lac-Mégantic in 1775
Interactive Trail Map Directory
Discovering trails in Maine just got a lot easier!
"I have worked with Max Langdon for almost five years. Max is not only a talented web designer and programmer, but he has an added quality that I find quite rare. He is able to really listen to and understand the client's vision. He asks excellent questions that help you zero in on exactly what you are trying to accomplish. This helps you clarify your goal and allows Max to think through the scope and sequence of the process before beginning to program. This saves him time and saves you money.
Working with Maxwell Langdon and his company, Pixel Hive has been a pleasure. I have always found him to be responsive and helpful. There is no "attitude" when you ask for an explanation or guidance.
I would be happy to speak with anyone who is thinking of working with Max. "