本实例科幻电影网页按钮的造型设计比较独特，带有浓厚的科幻色彩，给人一种新奇、怪异的视觉印象，很容易引起人们对未知世界的无限遐想。如图5-34所示，为本实例的完成效果。

图5-34  本实例完成效果

技术提示

在本实例的构图方式上将主体物的视觉元素延伸到页面边框以外，突破页面的局限，营造出空间的视觉张力，给人以更多的想象空间，而画面的主色调以黑、紫为主，这两种颜色都是营造神秘氛围的最好选择。在绘制的过程中主要使用路径工具来编辑路径形状，为图像设置图层样式，使图像具有立体效果和光影变化，最后对图像进行修饰调整。如图5-35所示，为本实例的制作流程。

图5-35  本实例制作流程

制作步骤

1．制作主体图像

（1）运行Photoshop，执行“文件”→“打开”命令，打开本书附带光盘\Chpater-01\“时尚背景.jpg”文件，如图5-36所示。

图5-36  素材图片

（2）使用工具箱中的“椭圆”工具，配合<Shift>键，绘制一个正圆路径，然后使用“添加锚点”工具，在路径上添加锚点，接着使用“直接选择”工具，对路径形状进行调整，如图5-37所示。

图5-37  绘制并调整路径

（3）在“图层”调板中，新建“图层 1”，按下<Ctrl+Enter>键，将路径转换为选区。然后设置前景色为灰色（

R78、G78、B82），按下<Alt+Delete>键，使用前景色填充选区并取消选区，如图5-38所示。

图5-38  转换选区并填充颜色

（4）选择工具箱中的“减淡”工具，参照图5-39所示设置选项栏，然后在图像上涂抹，对部分图像进行减淡处理。

提示：根据画面效果，调整画笔的大小和曝光度参数对图像进行调整，使调整后的图像具有一定的弧度，而不单单只是一个平面。

图5-39  处理图像

（5）执行“图层”→“图层样式”→“内阴影”命令，打开“图层样式”对话框，参照图5-40所示设置对话框，为图像添加“内阴影”和“斜面和浮雕”效果。

图5-40  设置图层样式

（6）在“图层”调板中新建“图层 2”，使用同样方法，参照图5-41所示绘制一个正圆形图像，然后为图像添加图层样式效果。

图5-41  绘制正圆图像

（7）按下<Ctrl>键的同时单击“图层 2”前的图层缩览图，将该图层中的图像作为选区载入，然后执行“选择”→“变换选区”命令，参照图5-42所示调整选区大小。

提示：按下<Shift+Alt>键的同时向内拖动控制柄，可以将选区向中心等比例缩小。

图5-42  调整选区大小

（8）按下<Enter>键，完成变换选区操作，确定“图层 2”为当前可编辑状态。然后按下<Ctrl+C>键，复制选区内的图像，再按下<Ctrl+V>键，粘贴图像，在“图层”调板中生成“图层 3”，如图5-43所示。

图5-43  复制图像

（9）接下来为复制的图像添加“内阴影”和“描边”图层样式效果，如图5-44所示。

图5-44  设置图层样式

（10）将“图层 3”中的图像作为选区载入，然后将选区稍微缩小，调整完毕后新建“图层 4”，将选区填充为淡蓝色（R222、G233、B255）并取消选区，接着再为图像添加“内阴影”图层样式效果，如图5-45所示。

图5-45  设置“内阴影”图层样式

（11）新建“图层 5”，首先绘制一个白色正圆图像，然后选择工具箱中的“自定形状”工具，参照图5-11所示设置选项栏，完毕后在白色正圆图像的中间绘制路径，接着将路径转换为选区，按下<Delete>键，删除选区内的图像并取消选区，如图5-46所示。

图5-46  绘制白色图像

（12）按下<Ctrl+Alt>键的同时，依次单击“图层 2”和“图层 3”前的图层缩览图，创建出一个环形选区，接着使用“多边形套索”工具，对选区进行修改，如图5-47所示。

提示：在对选区进行调整的时候，按下<Shift>键可以增加到选区，按下<Alt>键可以从选区减去。

图5-47  创建选区

（13）确定“图层 5”为当前可编辑状态，然后单击“图层”调板底部的“创建新的填充或调整图层”按钮，在弹出的菜单中执行“色相/饱和度”命令，参照图5-48所示设置对话框，调整选区内图像的色调。

图5-48  调整图像色调

（14）在“图层”调板中新建“图层 6”，使用工具箱中的“矩形选框”工具，配合<Shift>键在视图中绘制一个矩形选区，然后将选区填充为黑色，如图5-49所示。

图5-49  绘制黑色图像

（15）保持选区的浮动状态，执行“滤镜”→“渲染”→“镜头光晕”命令，参照图

5-50所示设置“镜头光晕”对话框，为图像添加镜头光晕效果。

图5-50  设置“镜头光晕”对话框

（16）接下来执行“滤镜”→“扭曲”→“极坐标”命令，打开“极坐标”对话框，参照图5-51所示设置对话框，单击“确定”按钮将对话框关闭。

提示：使用极坐标和镜头光晕命令相结合的方法来制作主体按钮，制作出来的按钮光泽效果自然，并且变化丰富。这种方法在以前的小节中也曾经讲到过，

图5-51  设置“极坐标”对话框

（17）执行“编辑”→“变换”→“垂直翻转”命令，将该图像垂直翻转，然后再执行“滤镜”→“扭曲”→“极坐标”命令，调整图像，并将选区取消，如图5-52所示。

图5-52  调整图像

（18）使用“椭圆选框”工具，在图像上绘制一个正圆选区，按下<Ctrl+Shift+I>键，将选区反转，按下<Delete>键，删除选区内的图像并取消选区，如图5-53所示。

图5-53  删除部分图像

（19）执行“自由变换”命令，调整图像的大小和位置，按下<Ctrl+I>键，执行“反相”命令，将图像颜色反转，如图5-54所示。

图5-54  反转图像颜色

（20）在“图层”调板中，将“图层 6”的混合模式设置为“强光”，如图5-55所示。

图5-55  设置图层混合模式

（21）复制“图层 6”，创建出“图层 6 副本”图层，执行“自由变换”命令，调整图像的大小和位置，然后更改“图层 6 副本”图层的混合模式为“线性减淡”，效果如图5-56所示。

图5-56  复制并调整图像

（22）使用工具箱中的“钢笔”工具，在视图中绘制路径。然后新建“图层 7”，设置前景色白色，选择工具箱中的“画笔”工具，参照图5-57所示设置选项栏，然后在“路径”调板中，单击调板底部的“用画笔描边路径”按钮，对路径进行描边。单击“路径”调板空白处可将路径隐藏。

注意：由于所绘制的路径不是闭合的，而是由多条子路径组合而成的。所以在绘制完其中一条子路径时，按下<Ctrl>键单击页面的任意位置，然后可以接着绘制下一条子路径。

图5-57  制作描边图像

（23）单击“图层”调板底部的“添加图层样式”按钮，在弹出的菜单中执行“内阴影”命令，打开“图层样式”对话框，参照图5-58所示设置对话框，为其添加图层样式效果。

图5-58  设置图层样式

（24）在“图层”调板中，新建“图层 8”，使用工具箱中的

>“钢笔”工具，在视图内绘制路径，然后将路径转换为选区，接着再将选区填充为灰色（R233、G233、B233）并取消选区，如图5-59所示。

图5-59  绘制图像

（25）在“图层”调板中将“图层 8”的混合模式设置为“叠加”，不透明度参数设置为80%，如图5-60所示。

图5-60  设置图层混合模式和不透明度

（26）接下来新建一个图层，使用描边路径的方法，参照图5-61所示，在刚绘制的图像的内侧制作出一个描边宽度为2像素，颜色为灰色（R133、G133、B133）的描边图像。

图5-61  制作描边图像

提示：为方便读者查看描边图像效果，图5-26中已经将“图层 8”隐藏。

（27）下面为描边图像添加“外发光”和“斜面和浮雕”图层样式效果，如图5-62所示。

图5-62  设置图层样式

（28）参照前面绘制图像，并为图像添加图层样式效果的方法，参照图5-63所示，制作出主体图像上的其他装饰图像。

图5-63  制作装饰图像

2．制作周围机翼图像

（1）新建图层，并使用“钢笔”工具，在视图相应位置绘制路径，将路径转换为选区后填充为淡蓝色（R202、G209、B255），接着再为其添加图层样式效果，如图5-64所示。

图5-64  绘制图像并添加图层样式

（2）参照图5-65所示绘制灰色（R186、G186、B186）图像，然后再为图像添加图层样式效果，参照图5-66所示设置参数。

图5-65  绘制图像

图5-66  设置图层样式

（3）使用同样方法，参照图5-67所示制作出其他图像效果。

提示：为图像添加不同的图层样式，得到了不同质感的图像效果，读者可以在操作的过程中仔细体会。

图5-67  制作其他图像

（4）接下来在该机翼图像上制作出一些装饰性图像，读者可参照前面制作图像的方法进行绘制，在此不再具体介绍，如图5-68所示。

图5-68  制作机翼图像上的装饰

（5）将机翼图像复制两个，并分别调整复制图像的角度和位置，如图5-69所示。

图

5-69  复制并调整图像

（6）在“图层”调板中，将“背景”图层隐藏，然后选择“图层 1”，使该图层为当前可编辑状态。接着执行“图层”→“合并可见图层”命令，将显示的图层全部合并到“图层 1”中，如图5-70所示。

图5-70  合并图层

（7）将“背景”图层显示，然后对“图层 1”进行复制，创建出“图层 1 副本”，将“图层 1”暂时隐藏，确定“图层 1 副本”为当前可编辑状态，执行“滤镜”→“模糊”→“径向模糊”命令，参照图5-71所示设置对话框，为图像添加模糊效果。

提示：径向模糊是模拟缩放或旋转的相机所产生的一种柔化的模糊。选取“旋转”，沿同心圆环线模糊，可以调整数量参数，数值从1 到100之间。模糊的品质范围从“草图”到“好”和“最好”。“草图”产生最快但为粒状的结果，“好”和“最好”产生比较平滑的结果，除非在大选区上，否则看不出这两种品质的区别。通过拖移“中心模糊”框中的图案，可以指定模糊的原点。

图5-71  设置“径向模糊”对话框

（8）将“图层 1 副本”图层的混合模式设置为“线性减淡”，并将其调整到“图层 1”的下方，然后对图像进行复制，分别执行“自由变换”命令，调整图像的大小、位置和角度，最后再将除“图层 1 副本”图层外的其他几个副本图层的不透明度参数设置为60%，效果如图5-72所示。

图5-72  复制并调整图像

（9）将“图层 1”

显示，并使其为当前可编辑状态，单击“图层”调板底部的“添加图层样式”按钮，在弹出的菜单中执行“外发光”命令，参照图5-73所示设置对话框，为图像添加“外发光”效果。

图5-73 为图像添加外发光效果

（10）按下<Ctrl>键的同时单击“图层 1”前的图层缩览图，将该图层中的图像作为选区载入。然后单击“图层”调板底部的“创建新的填充或调整图层”按钮，在弹出的菜单中执行“亮度/对比度”命令，打开“亮度/对比度”对话框，设置完毕后关闭对话框，如图5-74所示。

图5-74  调整图像对比度

（11）最后在视图中添加相关的文字信息和装饰图像，完成该实例的制作，如图5-75所示。读者可打开本书附带光盘\Chapter-05\“科幻电影网页按钮.psd”文件进行查看。

图5-75  完成效果