本实例根据珠宝饰品网页的内容特点，将按钮样式制作成逼真的钻石按钮，使得所要传达的信息更加直观。在璀璨夺目的钻石按钮的衬托下，整幅画面更显得光艳、亮丽。如图6-2所示，为本实例的完成效果。

图6-2  本实例完成效果

技术提示

本实例的按钮以钻石为原型，通过钻石图像和其他图像的完美结合使画面的效果华丽夺目。由于钻石样式按钮特有的切割方式，材质特点，制作起来较为复杂，因此在绘制前应认真的观察和分析，讲究绘制的方法，重点对钻石内部的纹理变化、以及钻石璀璨的光泽变化效果进行绘制。在绘制过程中通过将滤镜工具和绘图工具等相结合的方法来表现钻石丰富的光影效果。如图6-3所示，为本实例的制作流程。

图6-3  本实例制作流程

制作步骤

1. 制作光晕按钮

（1）运行Photoshop，执行“文件”→“新建”命令，打开“新建”对话框，参照图6-4所示设置对话框，创建一个名为“珠宝饰品网页按钮”的空白文档。

图6-4  “新建”对话框

（2）执行“文件”→“打开”命令，打开本书附带光盘\Chapter-06\“背景图像.jpg”文件，使用“移动”工具，将背景图像拖移到“珠宝饰品网页按钮”文档中，生成“图层 1”，并调整背景图像的位置，如图6-5所示。

图6-5  添加背景

（3）在“图层”调板中新建“组 1”图层组，并新建“图层 2”。使用工具箱中的“椭圆选框”工具，按下<Shift>

键绘制正圆选区，为选区填充颜色，接着按下<Ctrl+D>键取消选区，如图6-6所示。

提示：在一幅画面中主体物再漂亮再精致也需要绿叶来衬托。因此可以说背景在画面中起着举足轻重的作用，只有主体和背景相互融合协调才具有美感，在此我们结合背景开始绘制主体图像。

图6-6  绘制选区并填充

（4）在“图层 2”空白处双击，打开“图层样式”对话框，参照图6-7所示设置“投影”、“斜面和浮雕”选项参数，为图像添加图层样式效果。

图6-7  添加图层样式效果

（5）按下<Ctrl>键的同时单击“图层 2”的图层缩览图，将该图层中图像的选区载入，执行“选择”→“变换选区”命令，按下<Alt+Shift>键的同时拖动变换框，将选区等比向中心缩小，完毕后按下<Enter>键完成变换选区操作。

（6）在“图层”调板中新建“图层 3”，将选区填充为默绿色并取消选区，如图6-8所示。

图6-8  变换选区并填充

（7）参照以上添加图层样式方法，再为“图层 3”添加“内阴影”、“斜面和浮雕”效果，如图6-9所示。

图6-9  添加图层样式效果

（8）在“路径”调板中新建“路径 1”，使用

“钢笔”工具，参照图6-10所示绘制路径，接着使用“路径选择”工具选择绘制的路径，按下<Ctrl+C>和<Ctrl+V>，将路径复制、粘贴。

技巧：也可以按下<Ctrl+T>键，执行“自由变换路径”命令，并调整路径的旋转中心点位置到右下角，然后将其旋转一定的角度，完成后按下<Enter>键确认变换操作。最后按下< Shift+Ctrl+Alt+T>键对图像进行再制。

图6-10  绘制路径并复制

（9）接下来使用“路径选择”工具选择绘制的全部路径，将其复制粘贴，执行“自由变换路径”命令，将路径旋转。使用同样的操作方法，将路径旋转复制多个，效果如图6-11所示。

图6-11  复制路径

（10）按下<Ctrl+Enter>键将路径转换为选区，在“图层”调板中新建“图层 4”并将选区填充为白色，接着取消选区。然后参照图6-12所示设置该图层的属性。

图6-12  设置图层混合模式

（11）在“路径”调板中新建“路径 2”，选择“自定形状”工具，参照图6-13所示绘制形状。然后使用“直接选择”工具，分别调整节点位置。

图

6-13  绘制路径并调整

（12）将路径转换为选区，在“图层”调板中新建“图层 5”，将选区填充为白色并取消选区。然后使用“椭圆选框”工具绘制选区，执行“滤镜”→“扭曲”→“挤压”命令，打开“挤压”对话框，参照图6-14所示设置对话框，为图像添加滤镜效果，并取消选区。

提示：在对图像执行挤压命令时要注意保持选区的浮动状态。在挤压对话框中数量若是正值（最大值是100%）将选区向中心移动；若是负值（最小值是-100%）将选区向外移动。

图6-14  设置“挤压”对话框

（13）按下<Ctrl+Alt+T>键，调整放射状图像的旋转角度，生成“图层 5 副本”图层，如图6-15所示。

图6-15  复制图像并调整

（14）按下<Ctrl+E>键将“图层 5 副本”图层合并到“图层 5”图层中。然后执行“滤镜”→“扭曲”→“波纹”命令，打开“波纹”对话框，参照图6-16所示设置对话框，为图像添加波纹效果。

图6-16  添加波浪效果

（15）在“图层”调板中设置“图层 5”的图层混合模式为“叠加”，效果如图6-17所示。

图6-17  设置图层混合模式

（16）按下<Ctrl+E>

键将“图层 5”合并到“图层 4”中，接着设置“图层 4”的混合模式为“柔光”，效果如图6-18所示。

提示：将有图层效果的图层与其他图层进行合并，合并后所形成新的图层将成为普通图层，可以继续对图层添加图层效果。

图6-18  合并图层并调整属性

（17）将“图层 4”复制3次，增强放射状图像效果，如图6-19所示。

图6-19  复制图层

（18）新建“图层 5”，按下<D>键恢复工具箱中默认的前景色和背景色。然后执行“滤镜”→“渲染”→“云彩”命令，效果如图6-20所示。

提示：执行云彩命令随机性比较强，每次执行的效果都不同，读者可按下<Ctrl+F>键，重复执行云彩命令，达到满意效果为止。

图6-20  添加云彩效果

（19）选择工具箱中的“魔棒”工具，在云彩图像上单击，接着按下<Ctrl+Shift+Alt>键的同时单击“图层 3”的图层缩览图，创建两个图层的交叉选区，效果如图6-21所示。

图6-21 

创建选区

（20）保持选区浮动，执行“选择”→“羽化”命令，打开“羽化选区”对话框，参照图6-22所示设置对话框，将选区羽化。然后在“图层”调板中新建“图层 6”，并将选区填充为白色，接着取消选区。

图6-22  羽化选区并填充

（21）执行“滤镜”→“杂色”→“中间值”命令，打开“中间值”对话框，参照图6-23所示设置对话框，设置完毕后单击“确定”按钮，关闭对话框。

提示：执行中间值命令可以通过混合选区中像素的亮度来减少图像的杂色，此滤镜搜索像素选区的半径范围以查找亮度相近的像素，扔掉与相邻像素差异太大的像素，并用搜索到的像素的中间亮度值替换中心像素。该滤镜在消除或减少图像的动感效果时非常有用。

图6-23  设置“中间值”对话框

（22）在“图层”调板中复制“图层 6”3次，以增强图像的效果。然后按下<Shift>键选择“图层 6”和创建的副本图层，按下<Ctrl+E>键，将图层合并。单击“图层 5”前的指示图层可视性图标，将该图层隐藏。

（23）为“图层 6 副本3”图层添加图层蒙版，设置前景色为黑色，选择“画笔”工具，参照图6-24所示对蒙版进行编辑。

图6-24  编辑蒙版

（24）载入“图层 6

副本3”图层中图像的选区，执行“选择”→“修改”→“收缩”命令，打开“收缩选区”对话框，如图6-25所示设置对话框，将选区收缩。新建“图层 6”，将选区填充为白色，并取消选区。

图6-25  设置“收缩选区”对话框

（25）接下来为“图层 6”添加图层蒙版，并使用“画笔”工具对蒙版进行编辑，效果如图6-26所示。

提示：根据画面效果，调节画笔的的大小和不透明参数，在蒙版上对图像进行调整，加强边缘的效果，减弱中间的效果。

图6-26  编辑蒙版

（27）按下<Ctrl>键的同时单击“图层 6 副本3”的图层蒙版缩览图，接着按下<Ctrl+Shift+I>键将选区反转。然后按下<Ctrl+Shift>键的同时单击“图层 6 副本3”的图层缩览图，创建图6-27所示选区。

图6-27  创建选区

（28）保持选区浮动，单击“图层”调板底部的“创建新的填充或调整图层”按钮，在弹出的菜单中选择“色相/饱和度”命令，打开“色相/饱和度”对话框，参照图6-28所示设置对话框，为选区内图像调整颜色。

图6-28  设置“色相/饱和度”对话框

（29）载入“图层 3”中图像的选区，并将选区反转。确认“色相/饱和度 1”调整图层的图层蒙版为可编辑状态，将选区填充为黑色，接着取消选区，效果如图6-29所示。

图6-29  调整图像

（30）载入“图层 6 副本3”中图像的选区，单击“图层”调板底部的“创建新的填充或调整图层”按钮，在弹出的菜单中选择“亮度/对比度”命令，参照图6-30所示设置“亮度/对比度”对话框，增强选区内图像的对比度。

图6-30  设置“亮度/对比度”对话框

（31）新建“图层 7”，使用“椭圆选框”工具，绘制选区并填充为白色，然后取消选区。接着为“图层 7”添加图层蒙版，使用“画笔”工具，对蒙版进行编辑，制作按钮的反光效果，如图6-31所示。

提示：在制作反光的过程中也可以使用橡皮擦工具对不需要的部分进行擦除。

图6-31  制作反光效果

（32）新建“图层 8”，使用“椭圆选框”工具绘制正圆选区，将选区填充为白色并取消选区。继续使用“椭圆选框”工具绘制较小选区并调整位置，按下<Delete>键将选区内图像删除，制作出一个月牙图像，如图6-32所示。

提示：为便于读者观察，图示中将月牙图像的选区载入。

图6-32  创建选区

（33）接下来参照图6-33所示设置“图层样式”对话框，为月牙图像添加“外发光”效果。

图6-33  添加外发光效果

2. 添加装饰图像和文字信息

（1）接下来制作螺丝钉。新建“图层 9”，使用“椭圆选框”工具绘制正圆选区并填充为灰色（R143、G143、B143）。然后参照图6-34所示设置对话框，为其添加图层样式效果。

图6-34  添加图层样式效果

（2）复制“图层 9”，得到“图层 9 副本”图层，在该副本图层空白处双击，打开“图层样式”对话框，在对话框中将投影效果隐藏，接着参照图6-35所示设置“斜面和浮雕”选项参数。

图6-35  复制图层并调整

（3）新建“图层 10”，设置前景色为灰色（R143、G143、B143），选择工具箱中的“自定形状”工具，参照图6-36所示设置其选项栏，在螺丝钉上面绘制图像。

图6-36  绘制图像

（4）下面为“图层 10”添加图层样式效果，设置对话框参数如图6-37所示。

提示：添加斜面和浮雕效果使螺丝钉效果更加真实。在处理图像的时候要注意使光源一致。

图6-37  添加“斜面和浮雕”效果

（5）按下<Shift>键，将螺丝钉图像所在图层全部选择，按下<Ctrl+E>键将图层合并为一个图层（即“图层 10”）。然后将螺丝钉图像复制，并分别调整位置，如图6-38所示。

图6-38  复制图像并调整

（6）单击“组 1”图层前的小三角，将图层组折叠，接着单击“图层”调板右上角的小三角按钮，在弹出的菜单中选择“合并组”命令，将图层组合并为一个图层，如图6-39所示。

图6-39  合并图层

（

7）在“组 1”图层空白处双击，打开“图层样式”对话框，参照图6-40所示设置对话框，为图像添加“斜面和浮雕”效果。

图6-40  添加图层样式效果

（8）使用“钢笔”工具，参照图6-41所示绘制路径，将路径转换为选区，在“图层”调板中新建图层，将选区填充为淡黄色，并取消选区。

图6-41  绘制图像

（9）下面为图像添加图层样式效果，设置对话框参数如图6-42～6-43所示。

提示：根据图像的材质特点来设置图层样式对话框，添加渐变叠加来加强画面明暗的对比，另外要注意角度参数的设置。

图6-42  设置“投影”、“斜面和浮雕”选项参数

图6-43  设置“渐变叠加”选项参数

（10）使用“椭圆选框”工具绘制选区，执行“编辑”→“合并拷贝”命令和“编辑”→“粘贴”命令，将选区内按钮图像合并拷贝、粘贴到新图层中。接着调整按钮图像的大小和位置。然后将按钮图像复制多个，如图6-44所示分别调整大小和位置。

图6-44  复制图像并调整

（11）将上面复制的所有按钮图像所在图层合并，接着为其添加“投影”、“斜面和浮雕”效果，如图6-45所示。

图6-45  添加图层样式效果

（13）最后添加装饰图像和文字信息，完成本实例的制作，如

 << 上一页  [11] [12] 下一页