MagnusFx

Final Image

Let’s Begin!

Start by creating a New Document, any size. Mine is 400 pixels by 150 pixels, but yours can be any size you desire. Fill your canvas background with this color: #D8D1C4. Create a new layer (CTRL+ALT+SHIFT+N) and name it “Base”. Grab your Rectangular Marquee Tool (M) with default settings. Slowly drag your selection across the canvas to be about the height and width of your desired navigation area.

Creating the Gradient

Now we’re going to use a basic gradient to serve as the base for our navigation bar. Without deselecting your selection, set your Foreground Color to #E6DED0 and your Background Color to #C4BA9A. Select your Gradient Tool (G). Your settings should look like this by default:

Drag your gradient from the very bottom of your selection to the very top, once you are done with this you may deselect your area. Your outcome should be very similar to this:

Adding Effects

Now we will be adding several more effects, to give the navigation bar a more sophisticated look. Quickly, create a new layer named “Top”. Grab your Pencil Tool (B), and make sure it is set to 1 pixel. Set your Foreground Color to White (#FFFFFF) and very carefully drag it across the very top of your navigation area (the Shift key will help you keep it in a straight line), then set your Foreground to Black (#00000) and drag it right above the white line you just created.  Set layer “Top” to the blending mode “Soft Light”. Make sure “Top” is lined up with the top of our navigation bar:

Make sure your “Base” layer is selected, and grab your Burn Tool (O). Be sure the Master Diameter is set to 13 pixels, and Exposure is set to 100%. Drag the burn tool across your navigation area (again, pressing Shift will ensure a straight line.)

We are going to grab our Dodge Tool (O), with the same settings as the burn tool we just used. Give “Base” the same treatment, except on the bottom instead of the top. Create a new layer called “Bottom” and and create a black line on the bottom of your navigation bar (Remember how we did this from a few steps ago?) This time, though, set the layer’s opacity to 50%.

Gloss and Text

We’re in the home stretch! Moving on to adding the gloss, let’s create a new layer aptly named “Gloss”. Grab your Rectangular Marquee Tool and select the upper half portion of your navigation bar, like so:

Fill the selected area completely with White, and deselect. Set “Gloss” to the Blending Mode “Soft Light”, then set the layer’s Opacity to 30%.

Time for some text. Let’s grab our Horizontal Type Tool (T). For the purposes of this tutorial, we will use the prolific Times New Roman, though any nice serif typeface would work fairly well. Set your text’s color to #3B3B3B and size to 18 points. Type out your text, and be sure to vertically align it across the gloss you just created.

A bit bland, isn’t it? Right click your text layer and go into Blending Options. Set a Drop Shadow with these settings:

I added a few more links, and spruced up background, and a simple hover effect for good measure.

That’s it! I sincerely hope you enjoyed following this tutorial as much as I enjoyed writing it. If you enjoyed this tutorial don’t forget to subscribe or bookmark us!