实例5 制作手绘风格网页

实例说明

在本实例中，将制作一个手绘风格网页。手绘风格网页一个比较突出的特点就是图形和色彩的不规则性。在本实例中，将使用纹理、分层云彩等工具，产生出不规则的花纹，使其效果更为自然写意。

技术要点

在制作本实例时，首先将网页填充，然后设置其出现画布纹理，创建一个新图层，使用分层云彩工具使该层生成不规则纹理，接下来设置网页主体图案，使用橡皮擦工具形成不规则的边缘，最后添加文本，完成网页的设置。

不规则的图形是比较难以实现的，由于本实例制作的网页位手绘风格网页，所以需要制作不规则的污迹、笔触等效果，为了实现这些效果，在本实例中将使用分层云彩等工具，配合橡皮擦工具手动完成不规则纹理的制作，图5-1为本实例完成后的效果。

1 运行Photoshop CS3，执行菜单栏中的“文件”/“新建”命令，打开“新建”对话框。在“名称”文本框中键入“手绘风格网页”。在“宽度”参数栏内键入1024，在“高度”参数栏内键入768，单位设置为“像素”；在“分辨率”参数栏内键入72，在“颜色模式”下拉式选项栏中选择“RGB颜色”选项；在“背景内容”下拉式选项栏中选择“白色”选项，如图5-2所示，单击“确定”按钮，创建一个新文件。

2 将工具箱内的“设置前景色”显示窗中的颜色设置为R、G、B值分别为185、165、140的浅棕色，按组合键Ctrl+A，全选视图。在工具箱单击“矩形选框工具”按钮，右击视图，在弹出的快捷菜单中选择“填充”选项，这时会弹出“填充”对话框。在该对话框内的“使用”下拉式选项栏中选择“前景色”选项，如图5-3所示，单击“确定”按钮退出该对话框，使用前景色将“背景”层填充。

3 在菜单栏执行“滤镜”/“纹理”/“纹理化”命令，打开“纹理化”对话框，在该对话框内的“纹理”下拉式选项栏中选择“画布”选项，在“缩放”参数栏内键入60，在“凸现”参数栏内键入2，在“光照”下拉式选项栏中选择“左上”选项，如图5-4所示，单击“确定”按钮，退出该对话框，使背景出现画布纹理效果。

4 在“图层”面板底部单击“创建新图层”按钮，创建一个新图层——“图层1”，单击工具箱中的“矩形选框工具”按钮，按组合键Ctrl+A，全选视图，将“图层1”使用前景色填充。

5 在菜单栏执行“滤镜”/“渲染”/“分层云彩”命令，使“图层1”成为如图5-5所示的效果。

6 在“图层”面板中选择“图层1”，在“不透明度”参数栏内键入10，在“图层1”的“不透明度”参数栏内键入10%，单击“创建新图层”按钮，创建一个新图层——“图层2”。

7 在工具箱内将“设置前景色”显示窗内的颜色设置为R、G、B值分别为245、225、190的浅黄色，在工具箱中单击“矩形选框工具”按钮，在如图5-6所示的位置绘制一个矩形选区。

8 使用前景色填充选区，如图5-7所示。

9 在“图层”面板中选择“图层2”，按住鼠标左键将其拖动至“创建新图层”按钮，在“图层”面板会出现“图层2副本”层。

10 在“图层”面板中选择“图层2副本”层，在工具箱内将“设置前景色”显示窗内的颜色设置为黑色，在菜单栏执行“滤镜”/“渲染”/“分层云彩”命令，使“图层2副本”成为如图5-8所示的效果。

11 在“图层”面板的“不透明度”参数栏内键入20，将“图层2副本”的不透明度参数为20%，如图5-9所示。

12 按住Ctrl键单击“图层2”图层缩览图，设置该层为选区，在“图层”面板中单击“创建新的填充或调整图层”按钮，在弹出的快捷菜单中选择“色相/饱和度”选项，打开“色相/饱和度”对话框，在 “色相”参数栏内键入-2，在“饱和度”参数栏内键入-5，在“明度”参数栏内键入-10，如图5-10所示，单击“确定”按钮，退出该对话框。

13 退出“色相/饱和度”对话框后，在“图层”面板会出现一个新图层——“色相/饱和度1”层，如图5-11所示。

14 选择“色相/饱和度1”层，在“图层”面板单击“添加图层样式”按钮，在弹出的快捷菜单中选择“描边”选项，打开“图层样式”对话框，设置“描边”复选框。

15 “颜色”显示窗内的颜色设置为黑色，在描边编辑窗口内的“大小”参数栏内键入3，在“位置”下拉式选项栏中选择“内部”选项，在“不透明度”参数栏内键入50，如图5-12所示，单击“确定”按钮，退出该对话框。

16 设置描边后的“色相/饱和度1”层效果如图5-13所示。

17 在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例5：手绘风格网页/手绘图像.jpg”文件，单击“打开”按钮，打开该文件，如图5-14所示。

18 确定“手绘图像.jpg”处于可编辑状态，按组合键Ctrl+A全选图像，然后按组合键Ctrl+C，复制图层内的图像。

19 按组合键Ctrl+V粘贴图像，在“图层”面板中会出现一个新的图层——“图层3”，将该层图像缩放并移动至如图5-15所示的位置。

20 选择“图层3”，按住Ctrl键并单击“图层2”的图层缩览图，加载选区，在菜单栏中执行“选择”/“修改”/“收缩”命令，打开“收缩选区”对话框，在该对话框的“收缩量”参数栏内键入3，然后单击“确定”按钮，退出该对话框。

21 按组合键Ctrl+Shift+I反选选区，然后按Delete键，删除选区内的图像，效果如图5-16所示。最后按组合键Ctrl+D取消选区。

22 在工具箱中单击“橡皮擦工具”按钮，在属性栏内的“点按可打开‘画笔预设’选取器”下拉式选项栏中选择“柔角300像素”选项，如图5-17所示。

23 使用“橡皮擦工具”擦拭“图层3”图像边缘白色的部分，完成效果如图5-18所示。

24 在“图层”面板中单击“创建新图层”按钮，创建一个新的图层“图层4”，在工具箱中单击“矩形选框工具”按钮，在如图5-19所示的位置绘制一个矩形选区。

25 在工具箱内将“设置前景色”显示窗内的颜色设置为R、G、B值分别为170、45、45的暗红色，将设置的选区填充，如图5-20所示。

26 在工具箱中单击“橡皮擦工具”按钮，在属性栏内的“点按可打开‘画笔预设’选取器”下拉式选项栏中选择“半湿描边油彩笔”选项，并在“主直径”参数栏内键入65，使用“橡皮擦工具”擦拭“图层4”，完成后的效果如图5-21所示。

27 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Impact选项，在“设置字体大小”参数栏内键入90，将“设置文本颜色”显示窗内的颜色设置为黑色，在如图5-22所示的位置键入PERI。

28 键入字体后，在“图层”面板中会出现一个新的图层——PERI，右击PERI层，在弹出的快捷菜单中选择“栅格化文字”选项，将该层栅格化。

提示

某些命令和工具（如滤镜效果和绘画工具）不可用于文字图层。必须在应用命令或使用工具之前栅格化文字。栅格化将文字图层转换为正常图层，并使其内容不能再作为文本编辑。

29 使用“橡皮擦工具”擦拭PERI，完成后的效果如图5-23所示。

30 将PERI层复制，复制的图层名称为“PERI副本”。

31 选择PERI层，在菜单栏执行“滤镜”/“模糊”/“动感模糊”命令，打开“动感模糊”对话框，在“角度”参数栏内键入0，在“距离”参数栏内键入140，如图5-24所示，单击“确定”按钮，退出该对话框，使PERI层图像呈现动感模糊效果。

32 在“图层”面板中的“不透明度”参数栏内键入40，在PERI层的“不透明度”参数栏内键入40%，如图5-25所示。

33 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Arial选项，在“设置字体大小”参数栏内键入25，将“设置文本颜色”显示窗内的颜色设置为白色，在如图5-26所示的位置键入Brushwork。

34 在属性栏内的“设置字体系列”下拉式选项栏中选择Arial选项，在“设置字体大小”参数栏内键入25，将“设置文本颜色”显示窗内的颜色设置为白色，在如图5-27所示的位置键入WWW.PERI.COM。

35 现在手绘风格网页的制作就全部完成了，完成后的效果如图5-28所示，如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘“使用Photoshop CS3编辑网页素材/实例5：手绘风格网页/手绘风格网页.psd”文件，该文件为本实例完成后的效果。