实例6 制作茶艺网站布局模板
实例说明
本实例中，将指导制作茶艺网站布局模板。茶艺网站布局模板整体简单明了，主题突出，色彩以灰绿色调为主，显得淡雅温馨，模板中板块设置合理，便于进行后期的处理。
技术要点
在制作本实例时，首先使用矩形工具绘制选区，通过将该选区进行填充，完成茶艺网站布局模板区域的制作，然后导入背景素材图像，使用“色相/饱和度”命令将该图像色调进行调整，使其能与网站整体颜色相融合，最后通过添加标识与创建文本完成该实例的制作。
在制作本实例时，应注意色调的整体把握，该网站整体色调偏灰，使色彩与主题相吻合，并注意模块的布局，使其更具美感，图6-1为本实例完成后的效果。
图6-1 制作茶艺网站布局模板
1 运行Photoshop CS3，执行菜单栏中的“文件”/“新建”命令，打开“新建”对话框。在“名称”文本框中键入“制作茶艺网站布局模板”。在“宽度”参数栏内键入1024，在“高度”参数栏内键入768，单位设置为“像素”，在“分辨率”参数栏内键入72，在“模式”下拉式选项栏中选择“RGB颜色”选项，在“背景内容”下拉式选项栏中选择“白色”选项，如图6-2所示，单击“确定”按钮，创建一个新文件。
图6-2 “新建”对话框
2 单击工具栏中的“设置前景色”按钮，打开“拾色器（前景色）”对话框，将R、G、B值分别设为172、173、159，如图6-3所示。
图6-3 设置前景色参数
3 按组合键Alt+Delete，使用前景色填充图层。
4 选择工具箱的
“矩形选框工具”按钮，在如图6-4所示的位置绘制一个矩形选区，将R、G、B值分别设为183、182、169的浅灰色。
图6-4 绘制选区
5 单击“图层”面板底部的
“添加图层样式”按钮，打开“图层样式”对话框，选择“投影”复选框，在投影编辑窗口中，在“不透明度”参数栏内键入19，在“角度”参数栏内键入-140，在“距离”参数栏内键入8，如图6-5所示。
图6-5 “图层样式”对话框
6 按组合键Ctrl+D取消选区。单击“图层”面板底部的
“创建新图层”按钮，创建一个新图层——“图层2”。
7 选择工具箱的
“矩形选框工具”按钮，在如图6-6所示的位置绘制一个矩形选区，将该选区填充为R、G、B值为222、223、218的浅灰色。
图6-6 填充选区1
8 按组合键Ctrl+D取消选区。选择工具箱中的
“矩形选框工具”按钮，在如图6-7所示的位置绘制一个矩形选区，将该选区填充为R、G、B值为229、230、225的浅灰色。
图6-7 填充选区2
9 按组合键Ctrl+D取消选区。将前景色设置为R、G、B值为229、230、225的浅灰色，然后单击工具箱中的
“自定形状工具”下拉按钮下的
“直线工具”按钮，这时在属性栏内会出现其编辑参数，在“粗细”参数栏内键入0.08，参照图6-8在绘制三条直线。
图6-8 绘制直线
10 选择工具箱的
“矩形选框工具”按钮，在如图6-9所示的位置绘制一个矩形选区，将该选区填充为R、G、B值分别为208、209、198的浅灰色。
图6-9 填充选区
11 按组合键Ctrl+D取消选区。按Shift键，分别绘制如图6-10所示的选区，将该选区填充为R、G、B值为148、145、138的灰色。
图6-10 绘制选区
12 按组合键Ctrl+D取消选区。使用工具箱中的
“直线工具”按钮，参照图6-11所示绘制四条由深灰色到浅灰色过渡的直线。
图6-11 绘制直线
13 接下来需要导入背景图像。在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例6：制作茶艺网站布局模板/背景.jpg”文件，单击“打开”按钮，打开该文件，如图6-12所示。
图6-12 “打开”对话框
14 确定“背景.jpg”层处于可编辑状态，使用工具箱中的
“移动工具”，将“背景.jpg”移动至图6-13所示的位置，在“图层”面板中会出现一个新的图层——“图层3”。
图6-13 移动图像
15 确定“图层3”处于可编辑状态，执行菜单栏中“图像”/“调整”/“色相/饱和度”命令，弹出“色相/饱和度”对话框。在“色相”参数栏内键入10，在“饱和度”参数栏内键入-76，如图6-14所示。单击“确定”按钮，退出该对话框。
图6-14 调整图像色相/饱和度
16 进入“图层”面板，在“图层3”的“不透明度”参数栏内键入80，如图6-15所示。
图6-15 设置图层不透明度
17 接下来为茶艺网站布局模板添加标识与文字说明。创建一个新图层——“图层4”。然后单击工具箱中的
“直线工具”下拉按钮下的
“自定形状工具”按钮，这时在属性栏内会出现其编辑参数，单击“点按可打开‘自定形状’拾色器”下拉按钮，打开该选项栏，选择如图6-16所示的“后退”选项。
图6-16 选择“后退”选项
18 将前景色设置为白色，按住Shift键，在如图6-17所示的位置绘制该图形。
图6-17 绘制图形
19 创建一个新图层——“图层5”。选择工具箱中的
“自定形状工具”，这时在属性栏内会出现其编辑参数，单击“点按可打开‘自定形状’拾色器”下拉按钮，打开该选项栏，选择
“箭头2”选项。在如图6-18所示的位置绘制图形。
图6-18 绘制图形
20 创建一个新图层——“图层6”。使用绘制箭头的方法，参照图6-19再次绘制一个箭头图形。然后在“图层”面板中的“不透明度”参数栏内键入60。
图6-19 绘制图形
提示
在绘制第二个箭头时，应使该箭头略小于第一个。
21 创建一个新图层——“图层7”。使用绘制箭头的方法，参照图6-20绘制一个箭头图形。然后在“图层”面板中的“不透明度”参数栏内键入30。
图6-20 绘制图形
22 接下来将创建完成后的箭头标识进行复制。按住Ctrl键，选择“图层5”、“图层6”、“图层7”三个图层，然后按组合键Ctrl+E，将选择的图层进行合并，合并后的图层为“图层7”。
技巧
为了便于编辑，确定创建完成的图层在不需要更改的情况下可将其进行合并，这样不仅可以减少图层数量，便于编辑，还可以大大提高工作效率。
23 选择“图层7”层，将其拖至“图层”面板底部的
“创建新图层”按钮中，复制得到“图层7副本”层。
24 选择工具箱中的
“移动工具”，将“图层7副本”层中的图像移动至图6-21所示的位置，并缩放该图像的大小。
图6-21 移动图像位置
25 使用同样的方法，将该图像复制2次，并参照图6-22移动对象的位置。
图6-22 复制图像
26 接下为茶艺网站布局模板添加文本。单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择“方正黑繁体”选项，在“字体大小”参数栏内键入18，将“设置文本颜色”显示窗内的颜色设置为R、G、B值为151、135、123的灰色。在如图6-23所示的位置键入DIGG。
图6-23 键入文本1
27 单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择“方正黑繁体”选项，在“字体大小”参数栏内键入14，将“设置文本颜色”显示窗内的颜色设置为白色。在如图6-24所示的位置键入http://www.yishuchayin.com。
图6-24 键入文本2
28 单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择BankGothic Md BT选项，在“字体大小”参数栏内键入12，将“设置文本颜色”显示窗内的颜色设置为R、G、B值为251、249、211的黄色。在如图6-25所示的位置键入REFRESHMENTS。
图6-25 键入文本3
29 使用步骤28中设置字体的基本参数，在图6-26所示的位置键入COZE。
图6-26 键入文本4
30 单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Italic选项，在“字体大小”参数栏内键入10，将“设置文本颜色”显示窗内的颜色设置为黑色。在如图6-27所示的位置键入afternoon tea。
图6-27 键入文本5
31 使用步骤30中设置字体的基本参数，分别在图6-28所示的位置键入black tea和green tea。
图6-28 键入文本6
32 现在制作茶艺网站布局模板就全部完成了，完成后的效果如图6-29所示。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例6：制作茶艺网站布局模板/制作茶艺网站布局模板.psd”文件，该文件为本实例完成后的效果。
图6-29 制作茶艺网站布局模板