If you're looking for a clean custom web design, then visit the incredible team over at Captain Marketing Thanks for visiting!
Step 1
First of all we want to create a new document (File > New) and make it something like 540 by 440 pixels in size. Fill the background with a radial gradient from a lightish grey (I’ve used #343435) at the top left to a darker grey (and #222222) in the bottom right.
Step 2
Create a new layer (Layer > New > Layer). Select the rounded rectangle tool and make a selection of 300 by 300 pixels with a radius of 10 pixels.
Step 3
Fill the selection with another radial gradient from #007ccb at the top left to #004877 at the bottom right of the selection. Deselect (Ctrl + D).
Step 4
Now we are going to be adding a drop shadow to our navigation box by going Layer > Layer Style > Drop Shadow and applying the below settings.
Now your box should be looking like this.
Step 5
And we are going to be adding a gradient overlay to the box as well now. So go Layer > Layer Style > Gradient Overlay and apply these settings – click on the image on the right of “Gradient:” to get the top window.
Your navigation box should be looking pretty good now 
Step 6
Add a title for the navigation box.
The font details I’ve used are…
Step 7
Now we are going to be adding some dividers etc to go between the text links that we will be adding. Using the rectangular marquee tool make a fixed sized selection of 260 by 1 pixel below the box title. Fill with #ffffff (white).
Step 8
Set the blend mode of that divider to Overlay and decrease the opacity of the layer to 20%.
Step 9
Duplicate the divider (Ctrl + J) and then move it down 30 pixels (Ctrl + Shift + Down Arrow three times). The Ctrl + Arrow moves the layer in the direction of the arrow by one pixel, and adding the shift key moves it 10 pixels. Repeat this process until you have enough dividers for your links.
Step 10
Now we are going to be adding the text links.
Pay close attention to the line height setting – this will set the line height (of course) to 30 pixels which is the distance between our dividers
Step 11
And we need a hover effect because otherwise it’d be boring when we hover our mouse over it (this is only when you have coded it! Please don’t ask why it doesnt work while in Photoshop or how to code it – this is a design blog ).
On a new layer make a selection of 260 by 30 pixels over one of the text links – so it sits nicely between the dividers.
Fill (Edit > Fill) the selection with #ffffff (white). Deselect – we don’t need it selected now.
Set the blend mode to Soft Light and the opacity to 20%. Or play around with the settings until you get a nice effect you like.
Welcome to WordPress, this is your first post, edit or delete it, then start blogging, this is your first post.
too Good,Elegant,nice idea
thanks
Great tutorial mate,looks class and simple:)
Thanks for this great tutorial. But I dont know the easiest way to use it in website (include hover effect). Plz help me! Thanks so much!
Vut out the images and place it with a rollover… so you will get 2 images with teh same text only with an other color
love this so much am trying to make them into conten boxes but its hard when u just restart photoshop after a year of doing it before lol ive forgotten eveything i used to no but this is ace
great tutorial
Looks great! I’m only having trouble with the first step, hehe xP I can’t figure out how you make the edges so smooth. Making the selection and going “Select >> Modify >> Smooth” doesn’t cut it, because you can see the edges are pixelated. Help? ^-^;
Are you sure you are selecting the rounded rectangle tool (that can produce rounded corners) rather than the rectangular marquee tool (makes sharp corners)?
Thanks for the tutorials James, I have learned quite a bit thanks to your site! Quick question, what are your thoughts as far as condensing down the background to more or less a surrounding shape for the inset menu? I was thinking this might be the best approach for a website with a white background. Any tips as far as giving this a clean looking border surround?
Thanks in advance.
Very nice, simple and quick tutorial. Good job with the gradients. Thank you for sharing.
I dont know how to create selections with the rounded rectangle tool; all i get is paths that can’t apply the gradient tool on (i can apply a blue’ish gradient overlay in layer style, but since there’s a white layer style gradient applied later on, i’m stuck)?
Good tutorial! but there are some problem in my action fellow your step 2.
“圆角矩形工具” and “路径” is selected，->”建立选区”, in this way, i can get this type!
It’s great! Ilove this.Thanks.
thanks .. it was a simple & functional tutorial
hey . . . umm . . how do u make it into a content box . . . on da web . . i mean coding it into HTML. . . please help me. . .
thx. . . btw i jus love this tut!!!!!!!!! 
<3
Thank you James. Great tutorial. I will wait your next tutorial
Thanks again. Good luck 
Very nice.
In depth and easy to follow. *the final product looks great!
Thanks again!
Nice tutorial, thanks.