本实例网页页面的制作，是以文字作为画面的主要构图元素，在整体上给人以比较理性的视觉印象。页面中的主要文字从字体样式和色彩都和页面中其他元素加以明显的区别，在页面中显得出众而夺目。如图8-32所示，为本实例的完成效果。

图8-32  本实例完成效果

技术提示

本实例主要是以文字作为画面的主要构成元素的。其实文字本身也是一种艺术形式，它在个性和情感方面对人们也有着很大影响，一般来说文字部分都是理性而平静的。因此在编排文字的过程中，需要先构思版面，然后再考虑主要文字、次要文字以及辅助文字等的表达方式。在制作过程中将页面的中心位置的发光字体图像定位为主要文字，页面上部的图像进行细节刻画，使之不空洞。页面最下部的文字进行弱化处理，从而使整幅画面具有层次感。如图8-33所示，为本实例的制作流程。

图8-33  本实例制作流程

制作步骤

1．制作机械图像

（1）启动Photoshop，在菜单栏中执行“文件”→“打开”命令，打开本书附带光盘\Chapter-08\“粗糙颗粒背景.jpg”文件，如图8-34所示。

图8-34  打开背景素材

（2）单击“图层”调板底部的“创建新图层”按钮，新建“图层 1”。设置前景色为深蓝色（R17、G19、B31），按下<Alt+Delete>键，使用前景色填充“图层 1”，然后将“图层 1”的混合模式设置为“叠加”，如图8-35所示。

图8-35  填充颜色并设置图层混合模式

（3）单击“图层”调板底部的“添加图层蒙版”按钮，为“图层 1”添加图层蒙版，选择工具箱中的“画笔”工具，参照图8-36所示设置选项栏，在视图中对蒙版进行编辑。

提示：对图像的中间偏上部分进行遮罩，制作出图像的受光效果，并能显示出底层的纹理图像。

图8-36  编辑蒙版

（4）新建“图层 2”，选择工具箱中的“自定形状”工具，在选项栏中选择相应的形状图形，然后配合<Shift>键，在视图中绘制路径。如图8-37所示。

图8-37  绘制路径

（5）使用工具箱中的“路径选择”工具，在视图中选择绘制的路径，按下<Ctrl+C>键，对路径进行复制，按下<Ctrl+V>键，粘贴路径。执行“编辑”→“自由变换路径”命令，对路径的角度进行调整，按下<Enter>键完成变换路径操作，如图8-38所示。

图8-38  调整复制路径

（6）使用“路径选择”工具，将这两个路径同时选中，确定选项栏中的

“添加到形状区域”按钮处于激活状态，然后单击右侧的“组合”按钮，对路径进行组合，如图8-39所示。

提示：使用路径选择工具在页面中选择路径。若要选择多个路径组件，请按住<Shift>键并点按每个其他路径组件，将其添加到选区。在选项栏中可以对路径指定设置。

图8-39  组合路径

（7）接下来再次使用工具箱中的“自定形状”工具绘制路径，然后使用“直接选择”工具，对绘制的路径进行调整，如图8-40所示。

图8-40  调整路径

（8）将刚绘制的路径复制三个，并分别对复制路径的位置和角度进行调整，然后使用工具箱中的“椭圆”工具，在中心位置绘制一个正圆路径，如图8-41所示。

提示：在对路径进行调整的时候要注意保持对称性并且路径之间相隔的宽度要比较均匀。

图8-41  复制并绘制其他路径

（9）使用“路径选择”工具，选择绘制的所有路径，然后确定选项栏中的“重叠形状区域除外”按钮处于激活状态，按下<Ctrl+Enter>键，将路径转换为选区，使用灰蓝色填充选区并取消选区，如图8-42所示。

图8-42  转换选区并填充颜色

（10）执行“图层”→“图层样式”→“投影”命令，打开“图层样式”对话框，参照图8-43所示，对参数进行设置，为图像添加图层样

式效果。

图8-43  为图像添加图层样式

（11）对制作好的齿轮图像进行复制，然后参照图8-44所示调整复制图像的大小、位置和角度。

提示：按下<Shift>键的同时拖动鼠标，可以将图像等比缩小或放大。

图8-44  复制并调整图像

（12）在“图层”调板中新建“图层 3”，确定前景色为灰蓝色（R83、G87、B104），使用“圆角矩形”工具，在视图上侧绘制圆角矩形图像，如图8-45所示。

图8-45  绘制图像

（13）参照图8-46所示为刚绘制的长条图像添加“投影”和“斜面和浮雕”效果。

图8-46  设置图层样式

（14）创建“图层 4”，在视图中再绘制圆角矩形图像，然后参照图8-47、图8-48所示为圆角矩形图像添加图层样式效果。

图8-47  设置“投影”和“内阴影”样式

图8-48  设置浮雕样式

（15）新建“图层

5”，设置前景色为灰蓝色（R82、G86、B102），使用“画笔”工具，在视图左上侧再绘制出如图8-49所示的图像。

图8-49  绘制图像

（16）在“图层 4”的图层名称上右击，在弹出的菜单中执行“拷贝图层样式”命令，接着在“图层 5”的图层名称上右击，在弹出的菜单中执行“粘贴图层样式”命令，然后再参照图8-50所示，对“图层 5”的“斜面和浮雕”图层样式进行修改。

图8-50  修改图层样式

（17）对“图层 5”进行复制，创建出“图层 5 副本”，执行“编辑”→“变换”→“水平翻转”命令，然后将复制图像调整到另一侧，如图8-51所示。

技巧：选择“移动”工具，按下<Alt>键的同时拖动鼠标可以将图像进行复制。

图8-51  复制图像

（18）在“图层”调板中，将“图层 3”、“图层 4”

、“图层 5”、“图层 5 副本”复制，然后将复制出来的四个图层合并为一个图层，如图8-52所示。

图8-52  合并图层

（19）执行“编辑”→“变换”→“垂直翻转”命令，使用“移动”工具，参照图8-53所示调整图像的位置。

图8-53  调整图像

（20）对“图层 3”进行复制，将创建的“图层 3 副本”调整到“图层”调板的顶端，接着再参照图8-54所示，对图像大小和位置进行调整。

图8-54  复制图像

（21）单击“图层”调板底部的“创建新组”按钮，新建“组 1”图层组，然后在该图层组内新建“图层 6”，接着在视图中绘制一个矩形图像，并为图像添加“斜面和浮雕”效果，如图8-55所示。

图8-55  绘制图像并添加图层样式

（22）对“图层 6”复制，创建“图层 6 副本”，按下<Ctrl+T>

键，执行“自由变换”命令，配合<→>方向键，向右移动复制的图像，然后按下<Enter>键，完成变换操作。如图8-56所示。

提示：向右移动的多少决定了在下边操作中两个图像之间间隔的大小。

图8-56  复制并调整图像

（23）接下来连续按下<Ctrl+Shift+Alt+T>键，对该图像进行变换复制操作，制作出如图8-57所示的图像效果。

图8-57  复制图像

（24）在“图层”调板中选择“组 1”图层组，使该图层组为当前可编辑状态，按下<Ctrl+E>键，执行“合并组”命令，将该图层组合并为一个图层，如图8-58所示。

图8-58  合并图层组

（25）使用“加深”工具，对合并后图像的两侧进行处理，如图8-59所示。

提示：为图像的两侧进行加深处理，使图像与背景的光线变化一致，虚实结合，效果更加逼真。

图8-59  处理图像

（26）通过复制并调整图像的方法，在视图中制作出其他图像，如图8-60所示。

图8-60  制作其他图像

（27）在“图层”调板中，将“背景”图层和“图层

1”暂时隐藏，接着按下<Ctrl+Shift+Alt+E>键，将显示图层合并拷贝到“图层 6”中，然后将隐藏的图层显示，参照图8-61所示为“图层 6”中的图像添加“图案叠加”图层样式。

图8-61  添加图层样式

2．制作文字效果

（1）选择工具箱中的“横排文字”工具，在参照图8-62所示在视图中创建字母“LV”。

图8-62  创建字母

（2）在“图层”调板中，对创建的文字图层进行复制，创建一个副本图层，然后参照图8-63所示，为副本文字添加外发光效果。

图8-63  添加“外发光”效果

（3）新建一个图层，将“lv 副本”图层与新建的图层同时选中，按下<Ctrl+E>键，将其合并，接着再使用“矩形选框”工具，绘制矩形选区，将字母图像选取，如图8-64所示。

图8-64  绘制选区

（4）执行“滤镜”→“模糊”→“径向模糊”命令，打开“径向模糊”对话框，参照图8-65所示设置对话框，为图像添加径向模糊效果。

提示：径向模糊是模拟缩放或旋转的相机所产生的一种柔化的模糊。选取“缩放”选项，使图像沿径向线模糊，好像是在放大或缩小图像，然后指定

1到100之间的值。

图8-65  设置“径向模糊”对话框

（5）多次按下<Ctrl+F>键，重复上次滤镜操作，制作出文字的射光效果，然后再将选区取消，如图8-66所示。

图8-66  制作射光效果

（6）再次将“lv”文字图层复制，并将副本图层拖动到调板的最顶端，使用“横排文字”工具，在字母右侧再添加一点，如图8-67所示。

图8-67  复制并修改文字

（7）参照图8-68所示为文字图像添加图层样式效果。

图8-68  设置图层样式

（7）添加过图层样式效果的文字图像如图8-69所示。

图8-69  文字效果

（6），在视图上侧分别创建几组文字，接着再将这几组文字所在图层合并为一个图层，如图8-70所示。

图8-70  创建文字

（7）参照图8-71～8-72所示设置“图层样式”对话框，对刚创建的文字图像添加图层样式效果。

提示：结合齿轮图像的效果来制作具有相似效果的文字，使文字与齿轮图像更加协

调，融为一体，避免破坏主题图像。

图8-71  设置“投影”和“渐变叠加”参数

图8-72  设置“斜面和浮雕”效果

（8）在视图底部添加其他相关的文字信息和装饰图像，如图8-73所示。

图8-73  创建其他文字和图像

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

图8-74  设置“色相/饱和度”对话框

（10）整个实例至此已经制作完毕，效果如图8-75所示。如果读者在制作的过程中遇到什么问题，可打开本书附带光盘\Chapter-08\“lv艺术中心网页.psd”文档进行查看。

图8-75  实例最终完成效果