ps真功夫-专注国外photoshop教程的翻译介绍 » 导航条制作

碳纤维风格的插入式导航菜单

木枫 — Sat, 20 Mar 2010 06:26:52 +0000

这是HV-Designs的设计者Richard Carpenter 应HV-Designs读者的设计作品。

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

完成此教程后，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代码

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

photoshop教程–打造一款酷黑导航条

木枫 — Tue, 01 Dec 2009 02:21:21 +0000

想在您的网站上添加一款酷黑的导航条吗？这篇教程将教您快速而有效的制作一款导航条并添加到您的网站中。
先预览下最终效果吧！很酷哦！

第一步：基本要领
创建新的psd文档，宽度700px，高度160px，背景色以黑灰色（#2b2b2b）填充。
新建图层，图层属性为“导航条”，选择圆角矩形工具，设置前景色为黑色（#000000）如下图一样画一矩形条（长度和宽度可自行处理）。

第二步：设置图层样式
双击“导航条”图层或者选择“导航条”图层，点击右键，在下拉菜单中选择混合选项菜单，将出现“图层样式对话框”。
点击左边复选框中的“外发光”，并且如下图进行设置：

再点击左边复选框中的“斜面和浮雕”，并且如下图进行设置：

最后，点击左边复选框中的“渐变叠加”，如下图进行设置：

完成以上步骤后，你的导航条将会是这个样子：

第三步：增加高光
新建图层，设置前景色为白色（#ffffff），选择矩形工具，用白色矩形条覆盖导航条的上半部，选择橡皮擦工具擦去左上角和右上角的白色，显示导航条的圆角形状，如下图所示：

把此图层的透明度降低为4%，导航条将会如下图所示：

第四步：制造发光
新建图层，设置前景色为#2a5368。
从画笔工具中选择预设画笔，并设置大小为360px。使用画笔，在导航条上方中心画一个圆形区域，设置图层透明度为65%（自己可斟酌减少或增加），选择橡皮擦工具擦去不属于导航条的发光区域，如下图所示：

剩下要做的就是添加菜单按钮（自行设计），使用白色或灰色即可。
完整的导航条华丽丽的出炉了：

但愿你喜欢！

web2.0风格导航条制作

pskungfu — Wed, 08 Apr 2009 08:12:06 +0000

本教程来源于pscloud作者未知（原创翻译转载请注明出处表明链接谢谢）

利用web2.0风格创建一个令人惊奇的网站导航条。

1. 创建一个新文件600 * 140px。现在选择圆角矩形工具制作一个圆角矩形如下图。

2. 应用层样式：内发光混合模式：滤色方法：柔和

3. 渐变叠加:颜色设置为 #5e80a3 ,#839db8 and #b8c7d6

4.描边: #5e80a3

5. 这就是它应该呈现的样子。

6. 现在书写链接使用 Segoe 14 pt #ffffff

7. 给字体链接应用层效果：描边 #53769a

8.创建一个新层。选择矩形选框工具,绘制1px宽度的线条并使用# ffffffs填充

9. 复制这个层接着在每个链接之间添加每个线条。现在选择矩形选框工具选取线条底部的区域覆盖到所有的线条，然后使用选择- >修改- >羽化和应用5px半径。按下Del然后采取相同的方法处理上方的线条。

10. 将线条图层的混合模式改为柔光

11. 使用矩形选框工具选取你链接的内部区域（在两个线条之间）然后填充任何你想要的颜色。

12.现在给这个层应用混合模式渐变叠加使用颜色: #567595, #728fae #b3c3d3

13. 这就是它应该呈现的样子。

14. 现在使用矩形选框工具2px的半径绘制一个小矩形使用#ffffff填充。

15. 应用如下的层效果到形状图层: 内阴影（混合模式：叠加）

16. 渐变叠加: #e6e6e6 和 #ffffff

17. 描边: #5e80a3

18. 这就是它应该呈现的样子。

19. 在形状内输入“search”使用Segoe字体大小为 12pt 颜色#7b7b7b

20. 从 f3 Silk Icons（Silk Icons是一组免费的图标译者注）中添加一个放大镜这样你的导航条就完成了。这就是最后呈现的效果正常状态下和鼠标滑过时。

photoshop教程–基本的网页布局设计