Clean Two-Level Navigation

Clean Two-Level Navigation



Step 1

First off, we need to make a new document; I’ve made a relativelysmall one for the purpose of this tutorial (600x420px) but yours willprobably be for a web design (1000px or so wide).To make the background less boring I’ve just added in some clouds(foreground and background colours: #33556e and #1e2a38) and applied amotion blur; both are accessible through the Filter menu.
Step 2

Now we’ll make the main, white bar. Select the Rounded RectangleTool with a radius of 10px and a fixed size of 550x65px (or wider ifyour web design wants it). The colour doesn’t matter at this point aswe’ll quickly change that. You’ll most likely want it centered so checkout this tutorial on aligning objects.
Step 3

Add an outer glow and a gradient overlay to this latest white bar layer.

Product:
Step 4

Chuck in some text with the text tool for your top level navigation.The font I’ve used is Arial, Regular (and Bold), 15pt, Sharp, #000000.
Step 5

Now for the second bar, using that Rounded Rectangle Tool again makea selection a few pixels shorter in width with a height of 50 pixels.Move this new bar layer underneath the white one (in the layers window).
Step 6

Apply these outer glow and gradient overlay settings:

Product:
Step 7

Lastly, add some text for the sub-level navigation (I’ve put in somelinks for the Tutorials pages). The font I’ve used for this is Arial,Regular, 15pt, Sharp, #7ca1bc. If you’d like to now learn how to codethis into html/css then read this tutorial.