1. CREATE CUSTOM SHAPE
First create a triangle shape from the Custom Shape Tool (U) , go to menu click Edit > Transform > Flip Vertical.

2. FREE TRANSFORM
Now right click and choose Free Transform, then stretch the image upward. Free transform again, transfer the registration point below. Rotate the image while holding down the Shift button.

3. ROTATE DUPLICATE
Hold down (Alt+Ctrl+Shift) then repeatedly press “T“. To skip from a certain area try holding down only (Alt+Ctrl) then press “T“.

4. LAYER MASK
Add Layer Mask icon at the bottom of the Layers palette. Then choose Gradient Tool (G) , from the option panel choose Radial Gradient Effect . Start from below and stretch your mouse cursor to top area while holding down left click button.

If you haven’t read my basic css navigation tutorial, click on the link bellow to learn on how to make your own css navigation.

Basic CSS Navigation from Dodski

VIEW DEMO: Advanced Navigation

Step 1
Open your photoshop and create new file. Set the width to width 500px and Height 30px. Press letter U in your keyboard to use shape tool but choose only the rounded tool and set the radius to 20px.

Step 2
Will now add new layer style for navigation. Go to blending option and choose gradient overlay. You can give any color you want for your glossy navigation so before you choose the right color make sure that the two colors will almost match.

Step 3
Hold press CTRL and click on the layer to select a perfect rounded side marquee tool on your layer and then hold press ALT to delete the top part of the marquee. Don’t deselect the marquee as of now make a new layer above the first layer and go to your gradient tool to choose your own color.

Click the image bellow to enlarge.

Step 4
And now let’s create one part of the navigation to make it a glossy navigation. Repeat the same as above by holding CTRL on the first layer, create new layer and put it above the second layer then delete the bottom part of the selected layer marquee.

Change the opacity of the layer 3 to 50% and set the layer property to screen.

Press CTRL+ALT+C to open canvas option and do the same option i did in the image bellow.

Duplicate your glossy navigation bar and do it same as the image bellow.

Step 5
Then let’s add some text as your navigation together with the hover effect. Make sure the text is aligned in the center.

What you see above there is only one hover effect so make more for the others and do the same bellow.

Step 6
Select one of the hover effect layers and go to blending tool then gradient overlay. The angle should be -90 degree and default gradient color, change the black to lighter one, change it to grey. And select overlay for the blending mode and opacity to 75%. To make your work faster for doing the same for the other hover effect layers, right click on the layer with the blending option settings and copy layer style then right click on the other hover effect layer and click on paste layer style.

Step 7
In this step will start coding in html. And what we are going to use is unordered list.

<ul id="navigation">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="photos"><a href="#">Photos</a></li>
<li class="blog"><a href="#">Blog</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>

Step 8
This next step is coding the basic in CSS code for the navigation. So read carefully especially the comment part.

ul#navigation{
	margin:0;
	padding:0;
}
ul#navigation li{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
ul#navigation li a{
	margin:0;
	padding:0;
	width:100px; /*All link width are set to 100 pixels*/
	height:30px; /*All link height are set to 30 pixels*/
	text-indent:-2000px; /*Move your text link to 2000 pixels to the left*/
	float:left;
	outline:none;
}

Step 9
Let’s start inserting the image into your unordered list. If you notice the coordinates of 0 0 to -400 0; it is use to position your image navigation to display properly. The first digit is for the left position and the second digit is top position. I used negative coz if the position is set to 0 0, means the image is starting from the left part of the image navigation. So by displaying the second menu properly, you need to give it a negative coordinates for the left position. Then do it the same as the other menu but don’t forget using basic math for the positioning of your menu. Coz all width is set to 100 pixels.

ul#navigation li.home a{
	background:url(09.jpg) no-repeat 0 0;
}
ul#navigation li.about a{
	background:url(09.jpg) no-repeat -100px 0;
}
ul#navigation li.photos a{
	background:url(09.jpg) no-repeat -200px 0;
}
ul#navigation li.blog a{
	background:url(09.jpg) no-repeat -300px 0;
}
ul#navigation li.contact a{
	background:url(09.jpg) no-repeat -400px 0;
}

Step 10
For the final step, let’s start the hover effect of the image navigation guys. Just copy the code above and paste it in a new line then change the second digit to -30px and then it’s all done. You advanced navigation is ready to go.

ul#navigation li.home a:hover{
	background:url(09.jpg) no-repeat 0 -30px;
}
ul#navigation li.about a:hover{
	background:url(09.jpg) no-repeat -100px -30px;
}
ul#navigation li.photos a:hover{
	background:url(09.jpg) no-repeat -200px -30px;
}
ul#navigation li.blog a:hover{
	background:url(09.jpg) no-repeat -300px -30px;
}
ul#navigation li.contact a:hover{
	background:url(09.jpg) no-repeat -400px -30px;
}

Original post from Dodski

Here in our web blog page we focus mainly on posting quality free tutorials dedicating to freelancers that specialises in the internet and multimedia industries. Our tutorials involves Photoshop, Flash animation, Illustration, CSS/XHTML and PHP programming. So if you have good tutorials that you have in mind please feel free to submit your tutorials to us and we will gladly add them up to our database and will give you a credit by linking back to your website.

Don’t forget to visit our online marketplace which is located in our forum.