Photoshop Tutorials

Step 5

I've applied three layer styles to this button to give it some depth and make it look cooler.

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Layer > Layer Styles > Stroke

Your navigation bar should now look something like this.

Step 6

Select the text tool and add in some text - the font styles that I have used for the text are Bell Gothic Std, Bold, 20 pt, Crisp, #ffffff.

Step 7

Now repeat the button steps so you have two new buttons - I've decided that I'd make the middle one a different colour to stand out (this can be like a mouse over effect or something if you decided to code this navigation bar for a web layout). The blue colours I used for that are #14b9ef and #054573.

Step 8

Because we have set the fill of the layers to 50-60% we can adjust the background and it can be half see through - below I've put a radial gradient with colours used in the vista theme.