实例7 花艺网站引导页
实例说明
在本实例中，将制作一个花艺网站的引导页，引导页通常只包含较为简单的内容，通过图像的形式展示网站内容，并吸引用户注意。由于本实例中花草较难选择，所以使用了快速蒙版对其进行编辑。
技术要点
本实例在制作过程中，首先设置背景的渐变色，然后使用快速蒙版方式编辑并选择花盆图像，设置其局部模糊和倒影效果，最后添加文本，完成网页的制作。
在使用Photoshop CS3编辑图像时，有时会遇到边缘较为复杂，且无法通过选择颜色的方法来选色的图像，这时可以进入到快速蒙版模式，使用画笔工具沿需要的部分绘制，当退出快速蒙版模式后，绘制的区域就变成了选区，使用这种方法，可以准确选择较为复杂的图像，并且便于修改，在本实例中，就将为读者讲解蒙版的使用方法。图7-1为本实例完成后的效果。
图7-1 花艺网站引导页
1 运行Photoshop CS3，执行菜单栏中的“文件”/“新建”命令，打开“新建”对话框。在“名称”文本框中键入“花艺网站引导页”。在“宽度”参数栏内键入1024，在“高度”参数栏内键入768，单位设置为“像素”，在“分辨率”参数栏内键入72，在“颜色模式”下拉式选项栏中选择“RGB颜色”选项，在“背景内容”下拉式选项栏中选择“白色”选项，单击“确定”按钮，创建一个新文件。
2 设置前景色为R、G、B值分别为220、235、175的绿色，设置背景色为R、G、B值分别为255、255、235的浅绿色，在工具箱中单击
“渐变工具”按钮，在属性栏单击“点按可编辑渐变”显示窗，打开“渐变编辑器”对话框，将该对话框内左右侧的色标移动至色彩滑条中部，然后单击色彩滑条最右侧，这时会出现一个新的色标，设置该色标为R、G、B值分别为220、235、175的绿色，如图7-2所示。
图7-2 编辑色标
3 在“花艺网站引导页”文件顶部单击鼠标，然后垂直向下将鼠标拖动至该文件底部，将该文件填充，如图7-3所示。
图7-3 设置渐变填充
4 在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例7：花艺网站引导页/花盆.jpg”文件，如图7-4所示，然后单击“打开”按钮，打开该文件。
图7-4 “打开”对话框
5 确定“花盆.jpg”处于可编辑状态，在工具箱内单击
“以快速蒙版模式编辑”按钮，进入快速蒙版编辑模式，在工具箱中单击
“画笔工具”按钮，沿花盆和植物绘制填充，直至将其完全填充为红色，如图7-5所示。
图7-5 描绘图像轮廓
技巧
可以首先使用较大的笔触描绘图像轮廓，是用较小的笔触描绘细节，然后使用
“橡皮擦工具”擦拭多余部分，完成对图形的描绘。
6 在工具箱激活
“以标准模式编辑”按钮，进入标准模式编辑状态，视图中会出现如图7-6所示的选区。
图7-6 设置选区
7 按组合键Ctrl+Shift+I反选选区，然后按组合键Ctrl+C复制选区内的图像。
8 确定“花艺网站引导页”文件处于可编辑状态，按组合键Ctrl+V粘贴图像，这时在“图层”面板中会出现一个新的图层——“图层1”，将粘贴的图像缩放并移动至图7-7所示的位置。
图7-7 缩放并移动图像
9 在“图层”面板中选择“图层1”，将其拖动至
“创建新图层”按钮处，在“图层”面板中会出现“图层1幅本”层。
10 在“图层”面板中选择“图层1”，在菜单栏执行“编辑”/“变换”/“垂直翻转”命令，将该层图像垂直翻转，然后移动至图7-8所示的位置。
图7-8 垂直翻转图像
11 在菜单栏执行“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框，在该对话框内的“色相”参数栏内键入40，在“饱和度”参数栏内键入-5，在“明度”参数栏内键入-5，如图7-9所示，单击“确定”按钮，退出该对话框。
图7-9 “色相/饱和度”对话框
12 按D键，设置前景色为黑色，背景色为白色，在工具箱内单击
“以快速蒙版模式编辑”按钮，进入快速蒙版编辑模式，在工具箱内单击
“渐变工具”按钮，然后设置如图7-10所示的渐变填充。
图7-10 设置渐变填充
13 在工具箱中激活
“以标准模式编辑”按钮，进入标准编辑模式，视图中出现如图7-11所示的选区。
图7-11 设置选区
14 在菜单栏执行“滤镜”/“模糊”/“高斯模糊”命令，打开“高斯模糊”对话框，在该对话框内的“半径”参数栏内键入3，如图7-12所示，单击“确定”按钮退出该对话框。
图7-12 “高斯模糊”对话框
15 在工具箱内单击
“以快速蒙版模式编辑”按钮，进入快速蒙版编辑模式，在工具箱内单击
“渐变工具”按钮，设置如图7-13所示的渐变填充。
图7-13 设置渐变填充
16 在工具箱中激活
“以标准模式编辑”按钮，进入标准编辑模式，得到图7-14所示的选区。
图7-14 设置选区
17 按Delete键，删除选区内的图像，并将“图层1”的不透明度参数为30，效果如图7-15所示。
图7-15 编辑投影效果
18 在“图层”面板选择“图层1副本”层，在工具箱内单击
“以快速蒙版模式编辑”按钮，进入快速蒙版编辑模式，在工具箱内单击
“渐变工具”按钮，设置如图7-16所示的渐变填充。
图7-16 设置渐变填充
19 在工具箱激活
“以标准模式编辑”按钮，进入标准编辑模式，得到图7-17所示的选区。
图7-17 设置选区
20 在菜单栏执行“滤镜”/“模糊”/“高斯模糊”命令，打开“高斯模糊”对话框，在该对话框内的“半径”参数栏内键入3，单击“确定”按钮退出该对话框，“图层1副本”模糊效果如图7-18所示。
图7-18 设置模糊效果
21 在菜单栏执行“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框，在该对话框内的“色相”参数栏内键入0，在“饱和度”参数栏内键入35，在“明度”参数栏内键入5，如图7-19所示，单击“确定”按钮，退出该对话框。
图7-19 “色相/饱和度”对话框
22 单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择“微软简中圆”选项，在“设置字体大小”参数栏内键入40，将“设置文本颜色”显示窗内的颜色设置R、G、B值分别为45、160、15的绿色，在如图7-20所示的位置键入“丝路花语”。
图7-20 键入网站名称
23 在属性栏内的“设置字体系列”下拉式选项栏中选择“微软简中圆”选项，在“设置字体大小”参数栏内键入25，将“设置文本颜色”显示窗内的颜色设置为R、G、B值分别为45、160、15的绿色，在如图7-21所示的位置键入“盆栽 / 插花 / 花艺”。
图7-21 键入网站内容
24 在属性栏内的“设置字体系列”下拉式选项栏中选择Giddyup Std选项，在“设置字体大小”参数栏内键入30，将“设置文本颜色”显示窗内的颜色设置为R、G、B值分别为45、160、15的绿色，在如图7-22所示的位置键入www.flower.com。
图7-22 键入网址
25 在属性栏内的“设置字体系列”下拉式选项栏中选择Brush Script Std选项，在“设置字体大小”参数栏内键入30，将“设置文本颜色”显示窗内的颜色设置为R、G、B值分别为45、160、15的绿色，在如图7-23所示的位置键入flower。
图7-23 键入字母
26 在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例7：花艺网站引导页/叶子.jpg”文件，单击“打开”按钮，打开该文件，如图7-24所示。
图7-24 “叶子.jpg”文件
27 在工具箱中单击
“魔棒工具”按钮，在“叶子.jpg”文件的白色部分单击，设置如图7-25所示的选区。
图7-25 设置选区
28 按组合键Ctrl+Shift+I反选选区，在菜单栏中执行“选择”/“修改”/“收缩”命令，打开“收缩选区”对话框，在该对话框的“收缩量”参数栏内键入3，然后单击“确定”按钮，退出该对话框，设置如图7-26所示的选区。
图7-26 收缩选区
29 按组合键Ctrl+C复制选区内的图像。确定“花艺网站引导页”文件处于可编辑状态，按组合键Ctrl+V粘贴图像，将其缩放并移动至如图7-27所示的位置，在“图层”面板中会出现新的图层——“图层2”。
图7-27 缩放并移动图像
30 在“图层”面板中双击“图层2”图层缩览图，打开“图层样式”对话框。选择“样式”选项组中的“投影”复选框，进入投影编辑窗口。设置“阴影颜色”显示窗内的颜色为R、G、B值分别为45、115、30的绿色，在“不透明度”参数栏内键入30，在“角度”参数栏内键入120，在“距离”、“扩展”和“大小”参数栏均键入7，如图7-28所示，单击“确定”按钮，退出“图层样式”对话框。
图7-28 设置“投影”复选框
31 单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择“微软简中圆”选项，在“设置字体大小”参数栏内键入25，将“设置文本颜色”显示窗内的颜色设置为R、G、B值分别为35、125、10的绿色，在如图7-29所示的位置键入“进入”。
图7-29 键入文字
32 现在手绘风格网页的制作就全部完成了，完成后的效果如图7-30所示，如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘“使用Photoshop CS3编辑网页素材/实例7：花艺网站引导页/花艺网站引导页.psd”文件，该文件为本实例完成后的效果。
图7-30 花艺网站引导页