Creating An Elegant Website Navigation Box Using Photoshop

Creating an elegant website navigation box using Photoshop
All copyrights reserved 2008 Zeronese, Inc.©

Note: This tutorial is written and designed to be comprehended by total beginners. This tutorial is a good start for beginners who have a little or no knowledge in Photoshop, have a great imagination and would like to expand or start learning to design websites. This tutorial will show you how to create a web site navigation box.

Introduction: When reading any tutorial I always recommend that you read it in the seek of knowledge. Do not tie your self to the colors, shapes, sizes or design factors introduced. Look at the concept and make it fit your needs. Know that this tutorial might be read by thousands and you do not want your navigation box to look just like another thousand web site. always distinguish your self by adding your touches and styles. Just like imagination is not limited, also design is not limited.
Also, a very important factor to accomplish a beautiful design is to know what you are designing. No matter what you think, paper and pen are still the very best tools to design and draw a starting blue print. Try using these superior tools and then see how helpful it is to have a drawn blue print and then working to digitalize it. A blue print will act as a mind reference, after you have accomplished your task you can always add and enhance your project.

The Tutorial:
My blue print for the purpose of this tutorial; is a very simple drawing of a rectangle with few links arranged vertically. The web site I intend to put this navigation box in is red and navy blue, so I want to mostly use these colors in my design.

We start by creating our working environment.

Create a new document which is 400px X 600px.
I like rounded corners, so I will use the rounded rectangle tool to draw a rounded corners rectangle in the middle of my document.

 Make sure the radius is 10px and drag your mouse on your working document to draw the navigation box.
If you did not have the red color (or the color that you want as your background color selected) double click the layer that you have just created and select the appropriate color.

We are now going to be adding a couple of layer styles to our box. From your layers box, right-click your shape and click "Blending Options". (You can also get there using the toolbar menu at the top by choosing Layer => Layer Style => Blending Options. Make sure the layer is selected in the layers box.).

From the blending options on the left, select the outer glow and apply the following settings:


Don't close the blending options box just yet. Now select the Satin effect and apply the following settings


Click the Ok button to close the Blending Options.

Now that our background is beautifully ready, we are ready to add our navigation elements.
Let's start by adding a place at the top to hold the title of the navigation box. We do that by first creating a new layer. To create a new layer, choose Layer => New => Layer from the menu toolbar at the top. Make sure the layer just created is chosen in the layers box. Select the rectangular marquee tool and enter 5px in the feather box.

At the top of the your navigation box, draw a place to hold the title. Go back to the menu toolbar, choose Edit => Fill . In the Fill box, choose pattern from the use drop down menu. In the custom pattern, choose a pattern that you like. Click Ok and your box should now look something like this:


Again from the menu, choose Layer => Add layer Mask => Reveal All

Choose the gradient tool, and at about 70 percent down from the top of the title box, draw a straight horizontal line from this point to the bottom of the title box. This will make the title box fade into the navigational box.

Right click the title box layer, choose the blending options and apply the following settings.


We can now start admiring our work by adding title to the title box using the text box.

Use the text tool to a title to your navigational box. Play around with the text font, color and styles until it looks good for you.
After adding your title, create a new layer, and just below the title box use the selection tool to draw a rectangle with few pixels high(we have done something like this before, that is why I am not going to extensively explain it. Use the gradient tool to give it a touch.
Your box should now look something like this.
se the text box

Next up, lets actually add the navigation links.
Use the text tool to write the title of your first link. After you are happy with the text color, font and size. create a new layer. With the new layer selected, use the "Single Row Marquee Tool" to draw a line just under your link.

Go to Edit => Fill and fill it with a color that is distinguished from your background color. This will create a nice line under your links.

To create more links having the same exact style and design, duplicate the layer containing the text of your link. Also duplicate the layer that contains the line under it. To duplicate a layer, have the layer you want duplicated selected and go to the main menu tool bar choose Layer => Duplicate Layer.
Note that if you can not see the layer that you have just duplicated, it is because the duplicate layer is created above the layer being duplicated. Select the duplicated layer and use the move tool to move  the layer to the appropriate place.

Keep duplicating the layer as many times to create all your links.
Modify the text to reveal the text of each links and you should end up with a navigational box for your web page nicely designed just like this one.
 

What remains to do is to transfer the image into html. This is yet another subject. If you do not know how to create website links and websites from your Photoshop images, read this tutorial that has all the details: Creating Photoshop Website Templates

Also, do not limit yourself to the styles and options used in this tutorial because they are done here for demonstrational purposes. Have fun trying the unlimited options available for every layer until you are happy with your design. Good Luck.

This tutorial is written by Hassan Sayed webmaster at zeronese.net. You can use the navigational box created by this tutorial for any purpose, personal and commercial. However, the tutorial itself is a copyright of zeronese.net. Any reproduction in any form, modified or not is prohibited without a written notification provided solely by Zeronese, Inc.