![Photoshop CS3 Flash CS3 Dreamweaver CS3网页制作50例](https://wfqqreader-1252317822.image.myqcloud.com/cover/857/687857/b_687857.jpg)
实例6 制作茶艺网站布局模板
实例说明
本实例中,将指导制作茶艺网站布局模板。茶艺网站布局模板整体简单明了,主题突出,色彩以灰绿色调为主,显得淡雅温馨,模板中板块设置合理,便于进行后期的处理。
技术要点
在制作本实例时,首先使用矩形工具绘制选区,通过将该选区进行填充,完成茶艺网站布局模板区域的制作,然后导入背景素材图像,使用“色相/饱和度”命令将该图像色调进行调整,使其能与网站整体颜色相融合,最后通过添加标识与创建文本完成该实例的制作。
在制作本实例时,应注意色调的整体把握,该网站整体色调偏灰,使色彩与主题相吻合,并注意模块的布局,使其更具美感,图6-1为本实例完成后的效果。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0057_0001.jpg?sign=1734473860-Hy80sxKJ1zY5eJU0DBK4xGreJEQuxl8K-0-8f451f839e3991598811664b9ed9bb29)
图6-1 制作茶艺网站布局模板
1 运行Photoshop CS3,执行菜单栏中的“文件”/“新建”命令,打开“新建”对话框。在“名称”文本框中键入“制作茶艺网站布局模板”。在“宽度”参数栏内键入1024,在“高度”参数栏内键入768,单位设置为“像素”,在“分辨率”参数栏内键入72,在“模式”下拉式选项栏中选择“RGB颜色”选项,在“背景内容”下拉式选项栏中选择“白色”选项,如图6-2所示,单击“确定”按钮,创建一个新文件。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0057_0003.jpg?sign=1734473860-Aj42yDiILhJJtOlLgBiTLY412IRMfeyo-0-fe941115367275da15bbba6915d2e65b)
图6-2 “新建”对话框
2 单击工具栏中的“设置前景色”按钮,打开“拾色器(前景色)”对话框,将R、G、B值分别设为172、173、159,如图6-3所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0057_0005.jpg?sign=1734473860-9SfGg7mzp9odvo0HTNp01mosxU9Pqqke-0-9c9983c443448c2d2eda72d13cf0167c)
图6-3 设置前景色参数
3 按组合键Alt+Delete,使用前景色填充图层。
4 选择工具箱的“矩形选框工具”按钮,在如图6-4所示的位置绘制一个矩形选区,将R、G、B值分别设为183、182、169的浅灰色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0058_0004.jpg?sign=1734473860-0R0TqlcIyZsEdDpTr7VVtTSvBVMKfxsQ-0-c690107fd57273aad7024582b06c99c6)
图6-4 绘制选区
5 单击“图层”面板底部的“添加图层样式”按钮,打开“图层样式”对话框,选择“投影”复选框,在投影编辑窗口中,在“不透明度”参数栏内键入19,在“角度”参数栏内键入-140,在“距离”参数栏内键入8,如图6-5所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0058_0007.jpg?sign=1734473860-SzUriOqoTLR5uYxpER11uwM6x1oG44nS-0-1bd3f3bdd42a3fad1e6c6851fb2e74a8)
图6-5 “图层样式”对话框
6 按组合键Ctrl+D取消选区。单击“图层”面板底部的“创建新图层”按钮,创建一个新图层——“图层2”。
7 选择工具箱的“矩形选框工具”按钮,在如图6-6所示的位置绘制一个矩形选区,将该选区填充为R、G、B值为222、223、218的浅灰色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0059_0001.jpg?sign=1734473860-BW68VULBKpUcRPjzlHl3VR4sVL18lqEr-0-75ef0b113eaafea24b97bac9ef803d39)
图6-6 填充选区1
8 按组合键Ctrl+D取消选区。选择工具箱中的“矩形选框工具”按钮,在如图6-7所示的位置绘制一个矩形选区,将该选区填充为R、G、B值为229、230、225的浅灰色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0059_0002.jpg?sign=1734473860-wdOEuLpvbWf2DsGfzehP8AD9M0sk4kFC-0-2b35394178bf1cfba28bf743ad7cf90d)
图6-7 填充选区2
9 按组合键Ctrl+D取消选区。将前景色设置为R、G、B值为229、230、225的浅灰色,然后单击工具箱中的“自定形状工具”下拉按钮下的
“直线工具”按钮,这时在属性栏内会出现其编辑参数,在“粗细”参数栏内键入0.08,参照图6-8在绘制三条直线。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0059_0008.jpg?sign=1734473860-by6ov0LwqEJvFocHSIPF7lRl573h4BH7-0-aa5f63bf6e307a45e47c75286aadeb7e)
图6-8 绘制直线
10 选择工具箱的“矩形选框工具”按钮,在如图6-9所示的位置绘制一个矩形选区,将该选区填充为R、G、B值分别为208、209、198的浅灰色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0059_0009.jpg?sign=1734473860-zfTWiVU2gNrvKkFfPTbR83SsPsHSL9hW-0-0234a05d89359f8c10cd5584d010eefe)
图6-9 填充选区
11 按组合键Ctrl+D取消选区。按Shift键,分别绘制如图6-10所示的选区,将该选区填充为R、G、B值为148、145、138的灰色。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0059_0013.jpg?sign=1734473860-okUWCyJJRQGG3GJT7ek0VXlk1Hhurv7Q-0-0bec785495f07af1618cfca9be004a68)
图6-10 绘制选区
12 按组合键Ctrl+D取消选区。使用工具箱中的“直线工具”按钮,参照图6-11所示绘制四条由深灰色到浅灰色过渡的直线。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0059_0014.jpg?sign=1734473860-kS8yhLevixOA6cXSllvVJ0GZARCKxTiU-0-5b065e1e70b73e43d6f04f53c35041cf)
图6-11 绘制直线
13 接下来需要导入背景图像。在菜单栏中执行“文件”/“打开”命令,弹出“打开”对话框,从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例6:制作茶艺网站布局模板/背景.jpg”文件,单击“打开”按钮,打开该文件,如图6-12所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0060_0002.jpg?sign=1734473860-0bUEE5YOrHPsc5kqRDiBJesmJtC9ZU84-0-7ac95ab0cb32662901312e1477269cfe)
图6-12 “打开”对话框
14 确定“背景.jpg”层处于可编辑状态,使用工具箱中的“移动工具”,将“背景.jpg”移动至图6-13所示的位置,在“图层”面板中会出现一个新的图层——“图层3”。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0060_0005.jpg?sign=1734473860-M02RMVW3KAtBQWBpT7Reu46yXSU2EmpV-0-8434f122112a748d822c2a9021220565)
图6-13 移动图像
15 确定“图层3”处于可编辑状态,执行菜单栏中“图像”/“调整”/“色相/饱和度”命令,弹出“色相/饱和度”对话框。在“色相”参数栏内键入10,在“饱和度”参数栏内键入-76,如图6-14所示。单击“确定”按钮,退出该对话框。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0061_0001.jpg?sign=1734473860-V9AdN6yurCh7LsACDinJuFcDxm8XtArc-0-696f8414951be325469d645ce63cf7c9)
图6-14 调整图像色相/饱和度
16 进入“图层”面板,在“图层3”的“不透明度”参数栏内键入80,如图6-15所示。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0061_0003.jpg?sign=1734473860-ZstzFSmc62TTDd6yIRPlkMpURIFhBlMR-0-6ad3f4b3a1f2483151562fe9889334d2)
图6-15 设置图层不透明度
17 接下来为茶艺网站布局模板添加标识与文字说明。创建一个新图层——“图层4”。然后单击工具箱中的“直线工具”下拉按钮下的
“自定形状工具”按钮,这时在属性栏内会出现其编辑参数,单击“点按可打开‘自定形状’拾色器”下拉按钮,打开该选项栏,选择如图6-16所示的“后退”选项。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0061_0007.jpg?sign=1734473860-Nvfa1RjqGfoQLE9MT2tsnM7ju7hsrl7y-0-c5a3f50eae0db0d7eac3f9595b349265)
图6-16 选择“后退”选项
18 将前景色设置为白色,按住Shift键,在如图6-17所示的位置绘制该图形。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0062_0005.jpg?sign=1734473860-l11SD37zgLlYEp9eAkhU86c82xdgd19k-0-993fbec41951f2523d79d8c0336c84a3)
图6-17 绘制图形
19 创建一个新图层——“图层5”。选择工具箱中的“自定形状工具”,这时在属性栏内会出现其编辑参数,单击“点按可打开‘自定形状’拾色器”下拉按钮,打开该选项栏,选择
“箭头2”选项。在如图6-18所示的位置绘制图形。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0062_0006.jpg?sign=1734473860-CwGeyCkYHqDXuYpoh07o9KbomFQbWq9k-0-f038b50d793d5b3e3ac44ce0de7c2da8)
图6-18 绘制图形
20 创建一个新图层——“图层6”。使用绘制箭头的方法,参照图6-19再次绘制一个箭头图形。然后在“图层”面板中的“不透明度”参数栏内键入60。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0062_0010.jpg?sign=1734473860-U3jjQbekmPaAghVK4pxjaHLBXTtKqhpB-0-a97c3347ee014f25bea22a56023c2035)
图6-19 绘制图形
提示
在绘制第二个箭头时,应使该箭头略小于第一个。
21 创建一个新图层——“图层7”。使用绘制箭头的方法,参照图6-20绘制一个箭头图形。然后在“图层”面板中的“不透明度”参数栏内键入30。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0062_0011.jpg?sign=1734473860-ODkmbzr5dh1nGqSBXQjjs0kG5xl0X1vC-0-ad0565d60182b18ab904dcbede2eef31)
图6-20 绘制图形
22 接下来将创建完成后的箭头标识进行复制。按住Ctrl键,选择“图层5”、“图层6”、“图层7”三个图层,然后按组合键Ctrl+E,将选择的图层进行合并,合并后的图层为“图层7”。
技巧
为了便于编辑,确定创建完成的图层在不需要更改的情况下可将其进行合并,这样不仅可以减少图层数量,便于编辑,还可以大大提高工作效率。
23 选择“图层7”层,将其拖至“图层”面板底部的“创建新图层”按钮中,复制得到“图层7副本”层。
24 选择工具箱中的“移动工具”,将“图层7副本”层中的图像移动至图6-21所示的位置,并缩放该图像的大小。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0063_0007.jpg?sign=1734473860-nl2ltGukhHaHHTEVdc01APo2792EUv4o-0-be0c6524112ce2278e8858d5bb24d312)
图6-21 移动图像位置
25 使用同样的方法,将该图像复制2次,并参照图6-22移动对象的位置。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0063_0008.jpg?sign=1734473860-6LUJPuTt2TFzSAfjAyolgjWq3WeJ6EVt-0-578e2a59563f5d5fc7b1fb93a645912f)
图6-22 复制图像
26 接下为茶艺网站布局模板添加文本。单击工具箱中的“横排文字工具”按钮,在属性栏内的“设置字体系列”下拉式选项栏中选择“方正黑繁体”选项,在“字体大小”参数栏内键入18,将“设置文本颜色”显示窗内的颜色设置为R、G、B值为151、135、123的灰色。在如图6-23所示的位置键入DIGG。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0063_0011.jpg?sign=1734473860-6ReTl1iOSwBvtN2Nv1a53xzC6mRJd3yo-0-fabd3b1bbf6f7735a6bb4e1c77a229f5)
图6-23 键入文本1
27 单击工具箱中的“横排文字工具”按钮,在属性栏内的“设置字体系列”下拉式选项栏中选择“方正黑繁体”选项,在“字体大小”参数栏内键入14,将“设置文本颜色”显示窗内的颜色设置为白色。在如图6-24所示的位置键入http://www.yishuchayin.com。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0064_0001.jpg?sign=1734473860-dZaMSxhoz0LTnEQloPIew5RGZ08YsOCO-0-eed231af14ab71048bfe652d9f6e7d3a)
图6-24 键入文本2
28 单击工具箱中的“横排文字工具”按钮,在属性栏内的“设置字体系列”下拉式选项栏中选择BankGothic Md BT选项,在“字体大小”参数栏内键入12,将“设置文本颜色”显示窗内的颜色设置为R、G、B值为251、249、211的黄色。在如图6-25所示的位置键入REFRESHMENTS。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0064_0004.jpg?sign=1734473860-9LUPJTbwEY1m7QPIxMKKwMx5MYIQJBo3-0-4c9b7e9a88ee30ef7de569b463240a7e)
图6-25 键入文本3
29 使用步骤28中设置字体的基本参数,在图6-26所示的位置键入COZE。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0064_0008.jpg?sign=1734473860-uYCpHdpdVdKS8c7E3ufiw9xvsf9h08Sq-0-9eeff5e3cc4b1f8276902318a14e9423)
图6-26 键入文本4
30 单击工具箱中的“横排文字工具”按钮,在属性栏内的“设置字体系列”下拉式选项栏中选择Italic选项,在“字体大小”参数栏内键入10,将“设置文本颜色”显示窗内的颜色设置为黑色。在如图6-27所示的位置键入afternoon tea。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0064_0009.jpg?sign=1734473860-L2hVY0c6WSneRfdBLe7j1jBD6hbnhwmD-0-366b602634a7ed0aa705b4212259925a)
图6-27 键入文本5
31 使用步骤30中设置字体的基本参数,分别在图6-28所示的位置键入black tea和green tea。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0064_0011.jpg?sign=1734473860-3c0CHVl2bgB5otwN2Yzmm7Rt81LO1Jv3-0-d293bb8a6167ba9abcb6ef8c59f43073)
图6-28 键入文本6
32 现在制作茶艺网站布局模板就全部完成了,完成后的效果如图6-29所示。如果读者在制作过程中遇到了什么问题,可以打开本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例6:制作茶艺网站布局模板/制作茶艺网站布局模板.psd”文件,该文件为本实例完成后的效果。
![](https://epubservercos.yuewen.com/54DACD/3590505403553501/epubprivate/OEBPS/Images/figure_0065_0002.jpg?sign=1734473860-XX4VQg9yNR45lDbaR4MGYakY9uyMsfPs-0-bdbd591771565cbe1befedead6b05a27)
图6-29 制作茶艺网站布局模板