爱华网图4-53 本实例完成效果技术提示
本实例的画面以暗绿色调为主，给人一种和谐统一的视觉印象，按钮发出幽幽的绿光，又给人一种诡异，但又充满未知的探索欲望。在制作按钮特效的过程中，应用图层样式效果，为图形设置立体效果和光影变化，然后进一步对按钮图像进行编辑和修饰，来加强这种光泽变化。文字的处理使之与按钮相互结合，成为一个整体，其中对文字的细节调整，打破了文字呆板的视觉效果，在统一中又有变化。如图4-54所示，为本实例的制作流程。
图4-54 本实例制作流程制作步骤
（1）运行Photoshop，执行“文件”→“打开”命令，打开本书附带光盘Chpater-01“游戏背景.jpg”文件，如图4-55所示。
图4-55 打开素材图像
（2）选择工具箱中的 “圆角矩形”工具，然后设置选项栏，接着在视图中绘制两个大小相同的圆角矩形路径，如图4-56所示。
图4-56 绘制路径
（3）单击“图层”调板底部的 “创建新图层”按钮，新建“图层 1”，按下<Ctrl+Enter>键，将路径转换为选区。设置前景色为绿色（R0、G100、B40），按下
提示：将绘制的两个路径略微交叠排放，使中间没有空隙，在转换成选区的时候成为一个连续的选区。
图4-57 转换选区并填充颜色
（4）执行“图层”→“图层样式”→“投影”命令，打开“图层样式”对话框，参照图4-58～4-59所示设置对话框，为其添加图层样式效果。
图4-58 设置“投影”、“内阴影”和“外发光”参数
图4-59 设置“斜面和浮雕”和“描边”参数
（5）在“图层”调板中拖动“图层
1”至调板底部的 “创建新图层”按钮处，创建出“图层 1 副本”，如图4-60所示。
图4-60 复制图层
（6）使用工具箱中的 “钢笔”工具，在视图中再次绘制路径，然后将路径转换为选区，如图4-61所示。
图4-61 绘制路径并转换为选区
（7）执行“选择”→“羽化”命令，在打开的“羽化选区”对话框中，设置羽化半径值为10个像素，然后单击“确定”按钮，退出对话框，如图4-62所示。
图4-62 设置“羽化选区”对话框
（8）在“图层”调板中，新建“图层 2”，设置前景色为草绿色（R148、G218、B16），使用前景色填充选区，然后将选区取消，如图4-63所示。
图4-63 为选区填充颜色
（9）单击“图层”调板底部的 “添加图层蒙版”按钮，为“图层 2”添加图层蒙版。确定前景色为黑色，使用工具箱中的 “画笔”工具，对蒙版进行编辑，如图4-64所示。
提示：在绘制图像反光效果的时候，由于图像带有凝胶按钮的质感特点，所以要注意反光的边缘要处理柔和。
图4-64 编辑图层蒙版
（10）选择工具箱中的 “横排文字”工具，在视图中创建字母“GAME”，然后执行“图层”→“栅格化”→“文字”命令，将文字所在图层转换为普通图层，如图4-65所示。
注意：某些命令和工具（如滤镜效果和绘画工具）不可用于文字图层。必须在应用命令或使用工具之前栅格化文字。栅格化能将文字图层转换为正常图层，但其内容不能再作为文本进行编辑。
图4-65 创建文字
（11）使用 “矩形选框”工具，在文字图像上绘制一个矩形选区，然后将选区内的图像删除并取消选区，如图4-66所示。
图4-66 删除部分图像
（12）单击“图层”调板底部的 “添加图层样式”按钮，在弹出的菜单中执行“外发光”命令，打开“图层样式”对话框。参照图4-67所示设置对话框，为图像添加“外发光”效果。
图4-67 设置“外发光”参数
（13）对文字图像所在图层复制，创建出一个副本图层，然后对副本图层的“外发光”参数进行更改，并为其再添加“斜面和浮雕”图层样式效果，如图4-68所示。
提示：为文字图像添加图层样式使文字图像具有特殊的立体效果，中间删除部分使图像效果新颖别致，增添了形式感。
图4-68 设置图层样式
（14）按下<Ctrl>键的同时，单击任一文字图像所在图层前的图层缩览图，将文字图像作为选区载入，然后单击“图层”调板底部的 “创建新的填充或调整图层”按钮，在弹出的菜单中执行“亮度/对比度”命令，参照图4-69所示设置对话框，调整图像的亮度。
图4-69 调整图像亮度
（15）使用工具箱中的 “画笔”工具，对该调整图层的蒙版进行编辑，使部分图像不受该调整图层的影响，如图4-70所示。
提示：对图像的明暗色调进行进一步的加强，增强了光感效果。
图4-70 编辑蒙版
（16）按下<Ctrl>键的同时单击“亮度/
图4-71 调整图像色调
（17）再次将文字图像作为选区载入，然后在“图层”调板中新建“图层 3”，使用白色填充选区并取消选区。参照图4-72所示为图像添加“内发光”效果，接着再将“图层 3”的混合模式设置为“正片叠底”。
图4-72 设置“外发光”参数
（18）新建“图层 4”，使用 “钢笔”工具，在视图上侧绘制路径，将路径转换为选区后填充为淡绿色（R227、G245、B207），并将选区取消，效果如图4-73所示。
图4-73 绘制图像
（19）为“图层 4”添加图层蒙版，并对蒙版进行编辑，然后再将“图层 4”的混合模式设置为“亮度”，不透明度参数设置为55%，如图4-74所示。
提示：绘制按钮图像的高光，在对图像进行编辑的时候要注意调整画笔的大小及不透明参数，以增强按钮的光泽度。
图4-74 设置图层混合模式和不透明度
（20）打开本书附带光盘Chapter-04“裂痕.psd”文件，使用 “移动”工具将图像拖动到“游戏背景”文件中的相应位置，然后为其添加“投影”和“斜面和浮雕”效果，如图4-75所示。
图4-75 设置图层样式
（21）在“图层”调板中，将裂痕图像所在“图层 5”的混合模式设置为“叠加”，不透明度参数设置为“70%”。然后对该图像复制，并调整复制图像的大小、位置和角度，如图4-76所示。
图4-76 复制并调整图像
（22）新建“图层
6”，设置前景色为深绿色（R50、G86、B25），使用工具箱中的 “椭圆”工具，在视图中绘制椭圆图像，然后参照图4-77～4-78所示为图像添加图层样式效果。
图4-77 设置图层样式
图4-78 设置“描边”参数
（23）新建“图层
7”，使用
提示：在使用橡皮擦进行擦除的过程中，由于100% 的不透明度将完全抹除像素。较低的不透明度将部分抹除像素，因此，应根据画面效果来设置画笔大小和不透明参数。
图4-79 制作高光图像
（24）下面复制出其他两个按钮图像，并在视图中添加相关的文字信息，如图4-80所示。
图4-80 复制按钮图像并添加文字信息
（25）单击“图层”调板底部的 “创建新的填充或调整图层”按钮，在弹出的菜单中执行“亮度/对比度”命令，参照图4-81所示设置对话框，调整图像的整体色调。
图4-81 设置“亮度/对比度”对话框
（26）整个实例至此已经制作完毕，效果如图4-82所示。如果读者在制作过程中遇到什么问题，可打开本书附带光盘Chapter-04的“游戏网页按钮.psd”文件进行查看。
图4-82 实例完成效果
原文出处
推荐阅读-Photoshop分类教程
PS入门教程 PS路径教程 PS滤镜教程 PS图层教程 PS通道教程 PS画笔笔刷
PS工具教程 PS创意制作 PS插画制作 PS成签制作 PS海报制作 PS壁纸制作
PS动画制作 PS影楼后期 PS美容教程 PS美白教程 PS磨皮教程 PS清晰修复
PS调色教程 PS边框纹饰 PS排字教程 PS字效教程 PS仿手绘 PS鼠绘教程
PS网页元素 PS抠图教程 PS图片合成 PS非主流 PS视频教程 PS软件资源
