三维软件教学网页的页面设计，是以模拟三维软件制作的物体形象，作为画面的主体构图元素，形成与网页信息内容相照应的画面效果。各种视觉要素组成一个有机整体，不仅各得其所，而且各有分工，其中各种元素的大小、主次、位置以及疏密、均衡等关系的恰当组合，使页面具有强烈的视觉冲击力。如图11-2所示，为本实例的完成效果。

图11-2  本实例完成效果

技术提示

本实例给人以厚重，机械味浓重的视觉感受。图像分成好多部分组成，按照由下向上的绘图顺序，先绘制最底层的图形，并添加图层样式效果制作出图像的立体效果。然后使用相同的操作方法继续绘制图像。在绘制过程中添加图层样式效果是塑造立体图像的主要编辑方法。应仔细体会添加不同的图层样式所得到的不同的立体效果。如图11-3所示，为本实例的制作流程。

图11-3 本实例制作流程

制作步骤

（1）启动Photoshop，执行“文件”→“打开”命令，打开本书附带光盘\Chapter-11\“火焰背景.jpg”文件，如图11-4所示。

图11-4  打开素材图像

（2）在“图层”调板中，新建“图层 1”，使用工具箱中的“矩形选框”工具，在视图中绘制一个矩形选区，然后将选区填充为灰色（R110、G110、B108），接着再将选区取消，如图11-5所示。

图11-5  绘制矩形图像

（3）执行“滤镜”→“杂色”→“添加杂色”命令，打开“添加杂色”对话框，参照图11-6所示设置对话框，为图像添加杂色效果。

图

11-6  设置“添加杂色”对话框

（4）下面再执行“滤镜”→“杂色”→“中间值”命令，参照图11-7所示设置“中间值”对话框，为图像添加滤镜效果。

图11-7  设置“中间值”对话框

（5）配合使用工具箱中的“加深”和“减淡”工具，对图像色调进行处理，如图11-8所示。

提示：根据画面效果来调节画笔的大小以及曝光度参数，为图像添加明暗变化。

图11-8  处理图像

（6）选择工具箱中的“钢笔”工具，在视图中参照图11-9所示绘制路径，按下<Ctrl+Enter>键，将路径转换为选区。

提示：按下<Shift>键的同时绘制路径，绘制出的路径的角度成0度或者45度角的倍数。

图11-9  绘制路径并将路径转换为选区

（7）确定“图层 1”为当前可编辑状态，按下<Ctrl+C>键，复制选区内的图像，按下<Ctrl+V>键，对图像进行粘贴，生成“图层 2”，将“图层 1”暂时隐藏，使用“移动”工具参照图11-10

所示调整图像的位置。

图11-10  复制并调整图像

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

提示：在斜面和浮雕对话框中，调整方法选项为雕刻清晰，雕刻清晰使用距离测量技术，主要用于消除锯齿形状（如文字）的硬边杂边。它保留细节特写的能力优于“平滑”技术。

图11-11  设置图层样式

（9）打开本书附带光盘\Chapter-11\“装饰.psd”文件，使用“移动”工具，将该文档中的图像拖动到“火焰背景”文档中的相应位置，如图11-12所示。

图11-12  添加装饰图像

（10）新建“图层 4”，设置前景色为黑色，选择工具箱中的“圆角矩形”工具，参照图11-13所示，在视图中绘制一个黑色圆角矩形图像。

图11-13  绘制圆角矩形图像

（11）单击“图层”调板底部的“添加图层样式”按钮，在弹出的菜单中执行“斜面和浮雕”命令，参照图11-14所示设置对话框，为图像添加图层样式效果。

图11-14  设置“图层样式”对话框

（12）配合使用工具箱中的

“矩形”工具和“圆角矩形”工具，在视图中绘制路径，然后将路径转换为选区，如图11-15所示。

提示：选择路径选择工具，按下<Alt>键的同时在需要复制的路径上拖动鼠标，即可以复制原路经。

图11-15  绘制路径

（13）新建“图层 5”，使用深灰色（R62、G62、B62）填充选区，并取消选区，然后参照图11-16所示，为图像添加“斜面和浮雕”图层样式效果。

图11-16  为图像添加浮雕效果

（14）使用“钢笔”工具，在视图中绘制路径，然后再将路径转换为选区，如图11-17所示。

图11-17  创建选区

（15）确定“图层 2”为当前可编辑状态，依次按下<Ctrl+C>和<Ctrl+V>键，复制并粘贴选区内的图像，在“图层”调板中生成“图层 6”，将“图层 6”拖动到调板的最顶端，并为图像添加“投影”和“斜面和浮雕”图层样式效果。如图11-18所示。

图11-18  设置图层样式

（16）使用前面绘制路径、将路径转换为选区，然后再对“图层 1”中的图像进行复制的方法，得到如图11-19所示的图像效果。

图11-19  复制图像

提示：为方便读者观察，图11-19中特意将复制图像的选区载入。

（17）在“图层 2”的图层样式图标上右击，在弹出的菜单中执行“拷贝图层样式”命令，然后在刚复制的图像所在“图层 7”的图层名称上右击，在弹出的菜单中执行“粘贴图层样式”命令，然后为图像添加投影效果，如图11-20所示。

图11-20  设置“投影”效果

（18）使用“钢笔”工具，绘制路径，将路径转换为选区后新建“图层 8”，使用黑色填充选区并取消选区，如图11-21所示。

图11-21  绘制图像

（19）参照图11-22所示设置“图层样式”对话框，为图像添加图层样式效果。效果如图11-23所示。

图11-22  设置图层样式

图11-23  添加图层样式后的效果

（20）参照前面的操作方法，复制出一个边框图像，并为图像添加“投影”和“斜面和浮雕”效

果，如图11-24所示。

提示：可以在“图层 6”的图层样式图标上右击，在弹出的菜单中执行“拷贝图层样式”命令，然后在刚复制的图像所在图层名称上右击，在弹出的菜单中执行“粘贴图层样式”命令，最后对参数进行调整即可。

图11-24  制作边框图像

（21）打开本书附带光盘\Chapter-11文件夹内的“按钮.jpg”文件，并将图像拷贝到“背景”文档的相应位置，如图11-25所示。

图11-25  添加按钮图像

（22）接下来再参照前面绘制路径、转换选区，拷贝图像的方法，制作出如图11-26所示的图像效果，并为图像添加“投影”和“斜面和浮雕”效果。

图11-26  制作图像

（23）创建一个新图层，配合使用“圆角矩形”工具，绘制路径，并将路径置换为选区，然后使用“渐变”工具，在选项栏中单击渐变条，对打开的“渐变编辑器”对话框进行设置，完毕后在选区内由上至下绘制渐变色，如图11-27所示，最后再将选区取消。

图11-27  制作渐变图像

（24）复制刚绘制的渐变图像，将其调整到另一侧，如图11-28所示。

提示：选择“选择”工具，按下<Alt+Shift>键的同时向右移动鼠标，可以在水平位置复制原图像。

图11-28  复制图像

（25）打开本书附带光盘

\Chapter-11\“3D网页部件.psd”文件，如图11-29所示。

图11-29  素材文件

（26）使用“移动”工具，将该文档中的图像分别拖动到“火焰背景”文档中的相应位置，并对相应的图像进行复制，以及对复制的图像进行调整，然后参照以上的制作方法，结合“3D网页部件.psd”文档中的图像制作出如图11-30所示的网页右侧的图像效果。

图11-30  制作其他图像

（27）接下来在视图中添加一些相关的文字信息，并为相应的文字添加图层样式效果，效果如图11-31所示。

图11-31  添加文字图像

（28）将“背景”图层隐藏，确定“图层”调板最顶端的图层为当前可编辑状态，按下<Ctrl+Shift+Alt+E>键，将所有可见图层拷贝到一个新的图层中，然后使用“加深”和“减淡”工具，对图像局部颜色进行处理，如图11-32所示，最后再将背景显示。

图11-32  处理图像

（29）单击“图层”调板底部的“创建新建的填充或调整图层”按钮，在弹出的菜单中执行“亮度/对比度”命令，参照图11-30所示设置对话框，然后单击“确定”按钮，将对话框关闭。使用黑色对创建的调整图层的蒙版进行填充，使该调整图层不对图像产生影响，如图11-33所示。

提示：将蒙版填充为黑色可以向蒙版中添

加并隐藏图层，填充白色可以从蒙版中减去并显示图层。在此将蒙版填充为黑色，则调整图层将不对图像产生影响。

图11-33  添加“亮度/对比度”调整图层

（30）设置前景色为白色，使用工具箱中的“画笔”工具，通过对选项栏中的画笔大小、类型和不透明度参数进行设置，并对创建的调整图层蒙版进行编辑，编辑出如图11-34所示的图像高光效果。

图11-34  编辑蒙版

（31）按下<Ctrl>键的同时单击前面合并的图层（即“图层22”）前的图层缩览图，将图像作为选区载入，然后单击“图层”调板底部的“创建新的填充或调整图层”按钮，在弹出的菜单中执行“色彩平衡”命令，参照图11-35所示设置对话框，对图像进行调整。

提示：选择“阴影”、“中间调”或“高光”，以便选择要着重更改的色调范围。

图11-35  调整图像

（32）将前景色设置为黑色，使用前面操作方法，使用“画笔”工具，对蒙版进行编辑，然后在“图层”调板中对“色彩平衡 1”调整图层的“混合模式”和“不透明度”参数进行设置，如图11-36所示。

图11-36  添加“色彩平衡”调整图层

（33）单击“图层”调板底部的“添加图层样式”按钮，在弹出的菜单中执行“斜面和浮雕”命令，参照图11-37所示设置“图层样式”对话框，为图像添加“斜面和浮雕”效果。

图11-37  设置图层样式

（

34）再次将前面合并的图层中的图像作为选区载入，然后添加“亮度/对比度”调整图层，对图像进行调整，如图11-38所示。

图11-38  添加“亮度/对比度”调整图层

（35）最后在视图中添加相关的文字信息和装饰图像，完成该网页的制作，如图11-39所示。如果读者在制作的过程中遇到什么问题，可打开本书附带光盘\Chpater-01\“三维软件教学网.psd”文件进行查看。

图11-39  实例完成效果