Clean Navigation

Step 1

Open up a 400(width) x 300(height) white document.

Step 2

The second step to this tutorial is to create a new layer. You can simply do this buy going to (Layer - New - Layer). Once you have created a new layer, select your rectangular marquee tool and create a perfect square on your canvas by holding down the Shift key while click and dragging. Now that we have the selection of a perfect square, goto (Select - Modify - Smooth) for 10 pixels. With that step completed, our perfect square should have four smooth corners.

Step 3

Now select your gradient tool and use the colours (#ff973b) and (#ffea5f). Select the "Linear Gradient" which is located on the very top of Photoshop (The first Icon from the four). Now recreate the image below, pick the light yellow as your foreground colour, and the light orange as your background colour. Click the very bottom right corner of the square, and drag it all the way to the top left corner of the square. You should now have something like this.

Step 4

Create a new layer by going to (Layer - New - Layer). Ctrl + Click Layer 1, by doing that you should now have the selection of the square. Goto (Select - Modify - Contract) and choose 5 pixels.

Step 5

Change your foreground colour to a dark red, in this tutorial I picked (#bb2828). Change your background colour into a crimson red, in this tutorial I picked (#e53d3d). With your two reds selected, start from the top of the selection, and drag your mouse down to the very bottom of the canvas. You should now have something that looks like this.

Step 6

Select "Layer 1", and Ctrl + click on the second layer you have created, this should bring the selection box up, simply hit Ctrl + X when the selection comes up. By doing this, your cutting the inside of Layer 1.

Step 7

Right click on the second layer on your layers panel, and click on Blending Options. Choose the settings that are in the pictures below.

Step 8

Once the blending options are made, your image should look like this.

Step 9

Create a new layer, Ctrl + click "Layer 2" and fill the selection in with the same colour gradient, but instead of starting from the top, start from the bottom and drag your mouse to the top. Once you have completed that, move "Layer 3" underneath "Layer 2". The reason for this step is to enhance the looks of the lines afterwards in this tutorial.

Step 10

Once that step is complete, select your Text Tool and choose the text "Tahoma". Select white as your foreground colour. Start filling in your navigation box with some text. To enhance the effect, add a 40% opacity drop shadow with a 90 degree angle on each text layer you have created.

Step 11

With all your text written on the navigation, it's time to add a break to each line of text. Select the eraser tool, and set the mode to "Pencil" with a size of 1 pixel. Here's where Step 9 comes in action, select Layer 2 and start erasing a straight line beneath each text layer.

Click to enlarge

After you have erased a couple of lines from the layer, your image should look like this.

Step 12

The navigation box is pretty much done! Feel free to add some detailing to it (reflections, shadowing, etc)