今天我们来学习下tab式样的导航菜单的制作效果非常不错，先来看下设计部分的制作，以后在htm部分再来谈谈介于div+css的切割问题。
效果:
先看看导航的样式效果
Step 1:
先建立一个新的文档当然先打开photoshop 建立1000×300 pixels canvas set at 72dpi 白色背景
建立一个新层 名字 Navigation Interface.
Now make a new layer and draw a long rectangle with #88C000 color shade and 800 px 40 px dimensions. Then under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options.
Result: 
Step 2:
Select the Horizontal Type Tool and set the font family to Verdana, bold, 10 pt, none and white color shade. In a new text layer type out your navigation links with a lengthy space between each link.
Step 3:
At the end of your green rectangular strip add a simple search box made of a white rectangle.
Step 4:
Create a new layer. At the end of your navigation interface draw a green rectangle with #8DC20A color shade and 48 x 27 px dimensions. Then use the Polygonal Lasso Tool to cut a triangle shape as shown below.
Step 5:
Select the Horizontal Type Tool and set the font family to Arial Black, 12 pt, crisp and whitecolor shade. In a new text layer type 'GO' on the button design. Then under Layer Style(Layer > Layer Style) add a Stroke blending option.
Result: 
Step 6:
Now set the font size to 18 pt, in a new text layer add your name with black and #88C014 color shade for colors.
Step 7:
Create a new layer and draw a 1 px line with #618706 color shade across your navigation interface, below that add another line with #E1F5AE color shade.
Step 8:
Select the Rounded Rectangle Tool, under the options palette select Fill Pixels, set radius to 10 px and check anti-aliased. Now create a new layer and draw a green rounded rectangle with #88C000 color shade and set your own size with 40 px height. Then cut the bottom corners off so its straight.
Step 9:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your half rounded rectangle layer.
Result:
Step 10:
Here we added the title of our categories for the navigation links below.
Step 11:
In a new layer make a half white rounded rectangle like you did in step step eight. Then under Layer Style(Layer > Layer Style) add an Inner Shadow, Gradient Overlay and Stroke blending options.
Result: 
Step 12:
Add a navigation link on the white button.
Step 13:
Add the rest of our navigation links with its own button.
Results:
Eco Style Navigation Interface.
