How to create a cool and glossy navigation bar

How to create a cool and glossy navigation bar in photoshop

Requirement: Any version of ps

• Create a new document of size 800 x 100 with transparent background

• Select the rounded rectangle toolRounded rectangle tool,click and drag according to ur convenience and fill it with #001728

• Right click on the layer and select blending options,apply Bevel and Emboss

Bevel and Emboss

• In order to apply glossy effect to the navigation bar create a new layer and fill it with #959393.Now set the layer Opacity to 49% and fill to 19%

• Now click on Selection Marquee Tool(M) from tools palette and select the bottom part of the navigation bar.

• After selecting the bottom part press del to get rid of the it

• Select Text Tool(T)Text Tool and set the text settings to Georgia 18pt #D1D0D0
text tool settings

• Use #959393 for separator (|)

• Here is your cool and glossy navigation bar


• Hope you learned something from this tutorial….feedbacks are appreciated

Share on Facebook


  1. hey cool tutorial 🙂

Speak Your Mind