实例6 制作茶艺网站布局模板

实例说明

本实例中，将指导制作茶艺网站布局模板。茶艺网站布局模板整体简单明了，主题突出，色彩以灰绿色调为主，显得淡雅温馨，模板中板块设置合理，便于进行后期的处理。

技术要点

在制作本实例时，首先使用矩形工具绘制选区，通过将该选区进行填充，完成茶艺网站布局模板区域的制作，然后导入背景素材图像，使用“色相/饱和度”命令将该图像色调进行调整，使其能与网站整体颜色相融合，最后通过添加标识与创建文本完成该实例的制作。

在制作本实例时，应注意色调的整体把握，该网站整体色调偏灰，使色彩与主题相吻合，并注意模块的布局，使其更具美感，图6-1为本实例完成后的效果。

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

2 单击工具栏中的“设置前景色”按钮，打开“拾色器（前景色）”对话框，将R、G、B值分别设为172、173、159，如图6-3所示。

3 按组合键Alt+Delete，使用前景色填充图层。

4 选择工具箱的“矩形选框工具”按钮，在如图6-4所示的位置绘制一个矩形选区，将R、G、B值分别设为183、182、169的浅灰色。

5 单击“图层”面板底部的“添加图层样式”按钮，打开“图层样式”对话框，选择“投影”复选框，在投影编辑窗口中，在“不透明度”参数栏内键入19，在“角度”参数栏内键入-140，在“距离”参数栏内键入8，如图6-5所示。

6 按组合键Ctrl+D取消选区。单击“图层”面板底部的“创建新图层”按钮，创建一个新图层——“图层2”。

7 选择工具箱的“矩形选框工具”按钮，在如图6-6所示的位置绘制一个矩形选区，将该选区填充为R、G、B值为222、223、218的浅灰色。

8 按组合键Ctrl+D取消选区。选择工具箱中的“矩形选框工具”按钮，在如图6-7所示的位置绘制一个矩形选区，将该选区填充为R、G、B值为229、230、225的浅灰色。

9 按组合键Ctrl+D取消选区。将前景色设置为R、G、B值为229、230、225的浅灰色，然后单击工具箱中的“自定形状工具”下拉按钮下的“直线工具”按钮，这时在属性栏内会出现其编辑参数，在“粗细”参数栏内键入0.08，参照图6-8在绘制三条直线。

10 选择工具箱的“矩形选框工具”按钮，在如图6-9所示的位置绘制一个矩形选区，将该选区填充为R、G、B值分别为208、209、198的浅灰色。

11 按组合键Ctrl+D取消选区。按Shift键，分别绘制如图6-10所示的选区，将该选区填充为R、G、B值为148、145、138的灰色。

12 按组合键Ctrl+D取消选区。使用工具箱中的“直线工具”按钮，参照图6-11所示绘制四条由深灰色到浅灰色过渡的直线。

13 接下来需要导入背景图像。在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例6：制作茶艺网站布局模板/背景.jpg”文件，单击“打开”按钮，打开该文件，如图6-12所示。

14 确定“背景.jpg”层处于可编辑状态，使用工具箱中的“移动工具”，将“背景.jpg”移动至图6-13所示的位置，在“图层”面板中会出现一个新的图层——“图层3”。

15 确定“图层3”处于可编辑状态，执行菜单栏中“图像”/“调整”/“色相/饱和度”命令，弹出“色相/饱和度”对话框。在“色相”参数栏内键入10，在“饱和度”参数栏内键入-76，如图6-14所示。单击“确定”按钮，退出该对话框。

16 进入“图层”面板，在“图层3”的“不透明度”参数栏内键入80，如图6-15所示。

17 接下来为茶艺网站布局模板添加标识与文字说明。创建一个新图层——“图层4”。然后单击工具箱中的“直线工具”下拉按钮下的“自定形状工具”按钮，这时在属性栏内会出现其编辑参数，单击“点按可打开‘自定形状’拾色器”下拉按钮，打开该选项栏，选择如图6-16所示的“后退”选项。

18 将前景色设置为白色，按住Shift键，在如图6-17所示的位置绘制该图形。

19 创建一个新图层——“图层5”。选择工具箱中的“自定形状工具”，这时在属性栏内会出现其编辑参数，单击“点按可打开‘自定形状’拾色器”下拉按钮，打开该选项栏，选择“箭头2”选项。在如图6-18所示的位置绘制图形。

20 创建一个新图层——“图层6”。使用绘制箭头的方法，参照图6-19再次绘制一个箭头图形。然后在“图层”面板中的“不透明度”参数栏内键入60。

提示

在绘制第二个箭头时，应使该箭头略小于第一个。

21 创建一个新图层——“图层7”。使用绘制箭头的方法，参照图6-20绘制一个箭头图形。然后在“图层”面板中的“不透明度”参数栏内键入30。

22 接下来将创建完成后的箭头标识进行复制。按住Ctrl键，选择“图层5”、“图层6”、“图层7”三个图层，然后按组合键Ctrl+E，将选择的图层进行合并，合并后的图层为“图层7”。

技巧

为了便于编辑，确定创建完成的图层在不需要更改的情况下可将其进行合并，这样不仅可以减少图层数量，便于编辑，还可以大大提高工作效率。

23 选择“图层7”层，将其拖至“图层”面板底部的“创建新图层”按钮中，复制得到“图层7副本”层。

24 选择工具箱中的“移动工具”，将“图层7副本”层中的图像移动至图6-21所示的位置，并缩放该图像的大小。

25 使用同样的方法，将该图像复制2次，并参照图6-22移动对象的位置。

26 接下为茶艺网站布局模板添加文本。单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择“方正黑繁体”选项，在“字体大小”参数栏内键入18，将“设置文本颜色”显示窗内的颜色设置为R、G、B值为151、135、123的灰色。在如图6-23所示的位置键入DIGG。

27 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择“方正黑繁体”选项，在“字体大小”参数栏内键入14，将“设置文本颜色”显示窗内的颜色设置为白色。在如图6-24所示的位置键入http://www.yishuchayin.com。

28 单击工具箱中的“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择BankGothic Md BT选项，在“字体大小”参数栏内键入12，将“设置文本颜色”显示窗内的颜色设置为R、G、B值为251、249、211的黄色。在如图6-25所示的位置键入REFRESHMENTS。

29 使用步骤28中设置字体的基本参数，在图6-26所示的位置键入COZE。

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

31 使用步骤30中设置字体的基本参数，分别在图6-28所示的位置键入black tea和green tea。

32 现在制作茶艺网站布局模板就全部完成了，完成后的效果如图6-29所示。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例6：制作茶艺网站布局模板/制作茶艺网站布局模板.psd”文件，该文件为本实例完成后的效果。