按照惯例，先来看下最终效果图：

完成此教程后，Richard Carpenter将会继续发布如转换为CSS代码的教程，在这儿呢…

Richard Carpenter也是看到一个Flash 菜单后，才有此灵感设计。

制作背景

新建1200 x 600px，透明背景的文档。设置前景色为#bebebf，背景色为#d2d2d2。

选取”渐变工具”从画布头部到底部进行线性渐变。

使用如下设置添加”杂色滤镜”（滤镜->杂色->添加杂色）

接着添加”模糊滤镜”（滤镜->模糊->动态模糊）

在画布左右边沿有些太过的动感模糊效果，这不是我们想要的，简单的用裁剪工具进行裁剪，去除两边不好的动感模糊效果区域。

这样你会得到一个轻柔的金属感的背景，可以再次通过调整动感模糊设置来使金属感看起来更和谐。

创建导航

选取圆角矩形工具，设置半径为10px，在画布中央拖出如下所示的矩形（663*136）。

完成后，设置如下图层样式：

内阴影

渐变叠加

描边

效果如下：

接下来，我们将制作碳纤维图案，新建4 x 4px的文档，放大到3200%，像下图一样给8个格子填充不同颜色。

（提示：借助标尺，把文档分成8个格子，再新建2 x 1px的文档，按以下颜色进行填充，填充好后复制到4 x 4px的文档，这样的话要复制8次哦）

图案完成后，去往菜单”编辑->自定义图案”，给新图案命名，然后回到制作导航栏的文档中。

选择”矩形”图层，鼠标指向矩形的”矢量蒙版缩略图”，按住ctrl，进行单击，已选中整个矩形，此时新建图层，保持选区不变，选择”油漆桶”，用新图案填充选区，效果如下所示：

接着把新图层的混合选项更改为”差值”。结果又不一样，有碳纤维的感觉了：

创建导航按钮

选择”字体工具”，在矩形底部编写导航链接。

然后给字体设置如下图层样式。

阴影

颜色叠加

在链接之间添加分隔线，两条1px的直线相邻，左边的为黑色，右边的为白色，完成后给此图层设置透明度为50%，混合选项为”柔光”。

创建导航球

选取”椭圆选框工具”，新建图层，在第一个链接上方拖出一小型椭圆。如下所示：

选取”渐变工具”，在上述的椭圆选区中拖出一个从黑（#000000）到灰（#828282）的线性渐变。如下所示：

再一次使用”椭圆选框工具”，在刚刚创建的椭圆里新建一个圆形的选区。如下所示：

以颜色#8e8e8e填充此圆形选区，保持此选区为激活状态，并在灰色圆形图层上创建新图层，设置前景色为白色，用渐变工具从左上角拖出一个从白到透明的径向渐变。如下所示：

改变渐变类型为线性渐变，仍然保持选区为激活状态，再新建图层，从底部向上拖出此渐变。如下所示：

改变每个图层的透明度和渐变的位置，以增加球体的高光点。如下所示：

复制球体到每个按钮上方。

创建按钮激活状态

选择某按钮添加激活状态，简单的给此按钮的球体添加渐变叠加（我没有这样操作，只是合并创建球体的所有图层，然后添加调整图层->色相/饱和度，并着色），选择你觉得合适的颜色。如下所示：

使用”矩形选框工具”选中此按钮，不要包括分隔线。如下所示：

创建新图层，保持选区不变，以颜色#dddddd填充此选区，然后设置图层混合模式为”叠加”。

最后，使用”多边形套索工具”创建三角形，三角形的颜色和背景色是一样的，然后添加图层样式阴影，如下所示：

最后，按钮激活状态效果如下：

下篇：CSS/HTML代码

Related posts:

1. 碳纤维风格的插入式导航菜单:HTML代码

第1步、新建一个500px * 50px 的文件

第2步、使用矩形选框工具将样式设置为固定长宽比，宽度设为480px高度设为35px，在当前画布内绘制选区

第3步、转到选择>修改>平滑命令，将取样半径设置为3，再新建一个图层将图层填充为任何你想要的颜色都可以

第4步应用图层样式

设置如下：渐变叠加颜色: #949494 到 #d2d2d2

投影：#b1b1b1

第5步添加一些文字，颜色#383838 字体为Myriad Pro  点击下载photoshop字体 大小为 14pt

第6步应用投影效果，设置如下图所示：（注这里的混合模式改为了正常）

第7步你的导航条现在应该看起来像这个样子

第8步接下来就来给每个链接添加边框

第9步新建一个图层选择铅笔工具，从导航条的顶部到底部绘制两条线间隔1px的线条，如下图所示使用白色。

第10步把这个图层的混合模式改为柔光和不透明度降到20%。

第11步创建一个新层绘制另一条1px线条颜色#808080摆放在两条白线之间

第12步保持这个图层的混合模式为正常把它的不透明度降到35%

第13步复制这两个图层，把他们（线条）摆放在每个链接之间如下图

第14步现在让我们制作翻转效果，在两个线条边框之间做选区如图所示

第15步新建图层，把选区填充为任何想要的颜色。然后转到图层样式应用渐变：颜色#666666到#a1a1a1

第16步把按钮上字体的颜色改为白色应用投影效果颜色为 #454545

第17步这样子你的苹果导航栏就完成了，完成后应该像这个样子。

就这样photoshop教程完成了，大家有看到好的photoshop国外教程可以推荐我们翻译哦，这个教程的话只是教大家做一个苹果风格的效果，要想在网页上实现这种效果还需要设置css样式，附苹果官网的导航条图，有兴趣的朋友可以研究下。

No related posts.