Interface Navigation Tutorial

[Sunjo]

Alright, in this tutorial I will explain how to create the below navigation box.
I've included the PSD at the bottom of the post in case you get stuck on any of the steps.




Note: I will tell you to Ctrl + Click on layers several times through this tutorial, this does not mean to select that layer, it means to Ctrl + Click on the layer icon to make a marquee selection of that layer.


Step 1: Make a new document, 800x600 pixels in size.
Fill your background with a dark color, in this tutorial I used #1b1b1b.




Step 2: Create a new layer, and name it "BG Box".
Now make a selection like the below, and fill it with #232323.




Step 3: Now right click on your "BG Box" layer and add these settings:




Step 4: Create a new layer, and name it "BG Flare".
Now make a selection like the below and fill it with #FFFFFF.
Set this layer to Overlay, and 45% Opacity.

You can right click on this layer and select "Create Clipping Mask" if needed.




Step 5: Create a new layer, and name it "Noise".
Make a selection similar to the "BG Box" layer, to do this simply Ctrl + Click on the "BG Box" layer.
Now reset your colors (hit D on your keyboard) and fill this layer with black.
Now go to Filter>Noise>Add Noise. Use 55% Noise.
Now set this layer to Overlay and 5%-6% Opacity.

You should now have something like the below.




Step 6: Create a new layer, and name it "Pattern".
Ctrl + Click on your "BG Box" layer again, right click, and select "Fill".
Use these settings:




Step 7: Set the "Pattern" layer to Overlay and 35% Opacity.
Now make a new layer, and name it "BG Box 2".
Make a selection like the below and fill it with #111111.




Step 8: Set the "BG Box 2" layer to 50% Fill.
Right click on the "BG Box 2" layer and select Blending Options, and use these settings.




Step 9: Create a new layer, and name it "Blue Box".
Make a selection like the below and fill it with #275165.




Step 10: Now right click on the "Blue Box" layer and select "Blending Options".
Use the settings shown below.






Step 11: Create a new layer, and name it "Blue Box Noise".
Repeat Step 5. Now right click on this layer and select "Create Clipping Mask".
You should have something like the below.




Step 12: Create a new layer, and name it "Blue Box Flare".
Make a selection like the below, and fill the selection with #FFFFFF.
Set this layer to Overlay and 20% Opacity.




Step 13: Create a new layer, and name it "Soft Brushing".
Reset your brushes and select a 500px Soft Round brush.
Ctrl + Click on the "BG Box" layer to select only the navigation box area.
Click once with the brush in the middle of the layer like shown below.




Step 14: Now set the "Soft Brushing" layer to Overlay and 35% Opacity.
Now add some text for the menu, select the text tool and use Tahoma on 14pt, and Sharp.
Add in text like I have shown below.




Step 15: Create a new layer, and name it "Rollover Top".
Make a selection like shown below, and fill it with white.




Step 16: Now make a selection like I've shown below.




Step 17: Now right click inside the selection and select "Feather" and use 5px.
Now right click inside the selection again and select "Select Inverse"
Now hit delete on your keyboard twice.
You should now have something like the below.




Step 18: Now right click on the "Rollover Top" and select Blending Options.
Use the below settings.




Step 20: Now duplicate the "Rollover Top" layer, and move it to the bottom of the blue bar like I have shown below.




Step 21: Now this is optional, as it's more about taste, but here I selected the top part of the bottom line and hit Delete on my keyboard. (so it was 1 pixel in height, instead of 2)
I then changed the layer to "Overlay".
Here is my result now.




Step 22: Now go to Layer>New Adjustment Layer>Brightness/Contrast.
Use Brightness -10, and Contrast +40.
You should now have something like the below.




Step 22: Now for the final step I will sharpen it.
Create a new layer and name it "Sharpen".
Now go to Image>Apply Image. Then Filter>Sharpen>Sharpen.
Set this layer to 40% Opacity, and you're done!


Result:




PSD:
Click here


--
Did you enjoy this tutorial?
If so please register, it only takes a minute.. maybe less.

[Parker]

This is actually really helpful and will probs use it to make a skin! Thanks a lot!

[Sunjo]

No worries, glad you found it useful.

[Parker]

Will def post an outcome in about 2 days

[benjamin]

Outcome: i232.photobucket.com/albums/ee141/benjo5/NavigationBarcopy.jpg


Great Tut Sunjo

~Ben

[Sunjo]

Nice outcome.

And thanks.

[benjamin]

No Problemo


~Ben

[Graham]

I've been looking for something like this - there's some handy little tips and the outcome is epic.

*bookmarks*

[dexordesigns]

Hey Iam new here and i try ur Tutorial and its very easy to follow all steps

Here is my Outcome:



DexorDesigns

[XeroCint]

Nice outcome, mate

[Sunjo]

Glad you found it easy to follow, and nice outcome.

[dacads]

very nice outcome but how do you actually set up a roll over?

[Dude™]

To create a rollover, you'll need to look up some Javascript...

You'll need both an image before and after it has been moused over, and that should be about all you'd need.

[Wrighty]

No, you can use CSS for rollovers!