实例12 制作对话框内容
实例说明
本实例中将制作对话框内的组件部分，该组件由模块、滑条、按钮及文字四部分组成。
技术要点
本实例中，首先打开上一实例中的未完成文件，使用工具箱中圆角矩形工具创建各模块，并使用自定形状工具绘制按钮图形，通过图层样式对话框中的相关设置为创建的图形添加效果，最后使用文本工具，添加所需文字，完成对话框内容的制作。
在本实例的制作中，为了便于编辑，读者可以将先将导入的源文件中的图层全部合并，然后在进行其他制作。图12-1为本实例完成后的效果。
图12-1 对话框内容
1 运行Photoshop CS3，在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例11：制作对话框/对话框.psd”文件，单击“打开”按钮，打开上一实例中保存的文件，如图12-2所示。
图12-2 “打开”对话框
2 按组合键Shift+Alt+E，将“对话框.psd”文件中的全部图层合并，生成“背景”层，以便于以后编辑。如图12-3所示。
图12-3 合并可见图层
3 单击“图层”面板底部的
“创建新图层”按钮，创建一个新图层——“图层1”。选择工具箱中的
“自定形状工具”下拉按钮下的
“圆角矩形工具”，在属性栏中单击
“路径”按钮，在“半径”参数栏内键入5，在图12-4所示的位置创建一个圆角矩形路径。
图12-4 绘制圆角矩形路径
4 在“半径”参数栏内键入20，在图12-5所示的位置在创建一个圆角矩形路径。
图12-5 绘制圆角矩形路径
5 进入“路径”面板，单击“路径”面板底部的
“将路径作为选区载入”按钮，加载选区，如图12-6所示。
图12-6 加载选区
6 进入“图层”面板。选择工具箱中的
“矩形选框工具”，在选区任意处右击，在弹出的快捷菜单中选择“描边”选项，打开“描边”对话框，在“宽度”参数栏内键入2，将“颜色”设置为R、G、B值为159、158、155的灰色，选择“居外”单选按钮，在“混合”选项组下的“不透明度”参数栏内键入80，如图12-7所示，单击“确定”按钮，退出该对话框。
图12-7 “描边”对话框
7 单击“图层”面板底部的
“添加图层样式”下拉按钮，在弹出的快捷菜单中选择“投影”选项，打开“图层样式”对话框，在“不透明度”参数栏内键入20，在“距离”参数栏内键入1，在“扩展”参数栏内键入21，在“大小”参数栏内键入0，如图12-8所示。单击“确定”按钮，退出该项对话框。
图12-8 设置“图层样式”对话框
8 接下来导入背景图像。在菜单栏中执行“文件”/“打开”命令，弹出“打开”对话框，从该对话框内选择本书附带光盘中的“使用Photoshop CS3编辑网页素材/实例12：制作对话框内容/背景.jpg”文件，单击“打开”按钮，打开该文件，如图12-9所示。
图12-9 “打开”对话框
9 确定“背景.jpg”处于可编辑状态，选择工具箱中的
“矩形选框工具”，绘制如图12-10所示的选区。
图12-10 绘制选区
10 执行菜单栏中的“编辑”/“定义图案”命令，打开“图案名称”对话框，如图12-11所示。单击“确定”按钮，退出“图案名称”对话框。
图12-11 “图案名称”对话框
11 确定“对话框内容.psd”文件处于可编辑状态，选择工具箱中的
“仿制图章工具”下拉按钮下的
“图案图章工具”，在属性栏中“画笔”的“主直径”参数栏内键入200，单击“点按可打开图案拾色器”下拉按钮，在打开的选项栏中选择刚刚创建的“背景.jpg”图案图章，按下鼠标左键，在“图层1”的选区内拖动鼠标，将“背景.jpg”图案图章填充至选区内，如图12-12所示。
图12-12 填充图像
12 执行菜单栏中的“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框，在“色相”参数栏内键入84，在“饱和度”参数栏内键入22，在“明度”参数栏内键入83，如图12-13所示，单击“确定”按钮，退出该对话框。
图12-13 “色相/饱和度”对话框
13 按组合键Ctrl+D取消选区。选择工具箱中的
“矩形选框工具”，在如图12-14所示的位置绘制矩形。
图12-14 绘制矩形
14 按组合键Ctrl+Alt+D打开“羽化选区”对话框，在“羽化半径”参数栏内键入2，如图12-15所示。单击“确定”按钮，退出该对话框。
图12-15 “羽化选区”对话框
15 执行菜单栏中的“图像”/“调整”/“亮度/对比度”命令，打开“亮度/对比度”对话框，在“亮度”参数栏内键入-39，在“对比度”参数栏内键入68，如图12-16所示。单击“确定”按钮，退出该对话框。
图12-16 “亮度/对比度”对话框
16 按组合键Ctrl+D取消选区。单击“图层”面板底部的
“创建新图层”按钮，创建一个新图层——“图层2”。
17 选择工具箱中的
“圆角矩形工具”，在属性栏中单击
“路径”按钮，在“半径”参数栏内键入15，在图12-17所示的位置创建一个圆角矩形路径。
图12-17 绘制圆角矩形路径
18 进入“路径”面板，单击“路径”面板底部的
“将路径作为选区载入”按钮，加载选区。
19 进入“图层”面板。选择工具箱中的
“渐变工具”，在属性栏中单击“点按可编辑渐变”按钮，打开“渐变编辑器”对话框，参照图12-18所示设置由R、G、B值为215、205、179的黄色到R、G、B值为227、224、207的浅黄色到R、G、B值为232、231、223的灰白色渐变。
图12-18 “渐变编辑器”对话框
20 参照图12-19在选区内创建渐变填充。
图12-19 填充渐变色
21 选择工具箱中的
“矩形选框工具”，在选区任意处右击，在弹出的快捷菜单中选择“描边”选项，打开“描边”对话框，在“宽度”参数栏内键入2，将“颜色”设置为R、G、B值为172、157、127的灰色，选择“居外”单选按钮，在“混合”选项组下的“不透明度”参数栏内键入80，如图12-20所示。单击“确定”按钮，退出该对话框。
图12-20 “描边”对话框
22 按组合键Ctrl+D取消选区。选择工具箱中的
“圆角矩形工具”，在属性栏中单击
“路径”按钮，在“半径”参数栏内键入15，在如图12-21所示的位置创建一个圆角矩形的路径。
图12-21 创建圆角矩形路径
23 进入“路径”面板，单击“路径”面板底部的
“将路径作为选区载入”按钮，加载选区。
24 进入“图层”面板。选择工具箱中的
“渐变工具”，在属性栏中单击“点按可编辑渐变”按钮，打开“渐变编辑器”对话框，参照图12-22所示设置由R、G、B值为232、231、223的灰白色到R、G、B值为227、224、207的浅黄色到R、G、B值为192、176、139的蛋黄色的渐变。
图12-22 “渐变编辑器”对话框
25 参照图12-23在选区内创建渐变填充。
图12-23 填充渐变色
26 选择工具箱中的
“矩形选框工具”，在选区任意处右击，在弹出的快捷菜单中选择“描边”选项，打开“描边”对话框，在“宽度”参数栏内键入2，将“颜色”设置为R、G、B值为172、157、127的灰色，选择“内部”单选按钮，在“混合”选项组下的“不透明度”参数栏内键入80，如图12-24所示，单击“确定”按钮，退出该对话框
图12-24 “描边”对话框
27 按组合键Ctrl+D取消选区。单击工具箱中的
“圆角矩形工具”下拉按钮下的
“自定形状工具”按钮，这时在属性栏内会出现其编辑参数，单击
“填充像素”按钮，单击“点按可打开自定形状拾色器”下拉按钮，打开该选项栏，选择
“标记3”选项。
28 将前景色设置为R、G、B值为144、125、93的浅灰色，按住Shift键，在图12-25所示的位置绘制“标记3”图形。
图12-25 绘制图形1
29 再次选择工具箱中的
“自定形状工具”，在属性栏内单击“点按可打开自定形状拾色器”下拉按钮，打开该选项栏，选择
“三角”选项，在图12-26所示的位置绘制“三角”图形。
图12-26 绘制图形2
30 选择“图层2”，将该图层拖动至“图层”面板底部的
“创建新图层”按钮处，复制生成“图层2副本”。
31 按组合键Ctrl+T，打开自由变化换。右击鼠标，在打开的快捷菜单中选择“旋转90度（逆时针）”选项，将“图层2副本”层中的图形进行旋转，并将其移动至图12-27所示的位置。
图12-27 移动图形位置
32 参照图12-28横向缩放图形。
图12-28 缩放图形
33 按Enter键，取消自由变化换。单击“图层”面板底部的
“创建新图层”按钮，创建一个新图层——“图层3”。
34 确定“图层3”处于可编辑状态。选择工具箱中的
“矩形选框工具”，在图12-29所示的位置创建一个矩形。
图12-29 创建矩形选区
35 在矩形选区中右击鼠标，在弹出的快捷菜单中选择“描边”选项，打开“描边”对话框，在“宽度”参数栏内键入2，将颜色设置为R、G、B值为184、185、176的灰色，在“位置”选项组中选“居外”选项，在“混合”选项组中的“不透明度”参数栏内键入100，如图12-30所示，单击“确定”按钮，退出该对话框。
图12-30 “描边”对话框
36 将前景色设置为白色，按组合键Alt+Delete填充选区。执行菜单栏中的“选择”/“修改”/“收缩”命令，打开“收缩选区”对话框，在“收缩量”参数栏内键入4，如图12-31所示，单击“确定”按钮，退出该对话框。
图12-31 “收缩选区”对话框
37 在选区中右击鼠标，在弹出的快捷菜单中选择“描边”选项，打开“描边”对话框，在“宽度”参数栏内键入2，将颜色设置为R、G、B值为55、31、31的灰色，在“位置”选项组中选“居外”选项，在“混合”选项组中的“不透明度”参数栏内键入100，如图12-32所示。单击“确定”按钮，退出该对话框。
图12-32 “描边”对话框
38 将前景色设置为R、G、B值为128、117、97的灰色，按组合键Alt+Delete填充选区，如图13-33所示。
39 按组合键Ctrl+D取消选区。选择工具箱中的
“自定形状工具”，在属性栏内单击“点按可打开自定形状拾色器”下拉按钮，打开该选项栏，选择
“选中标记”选项，将前景色设置为白色。在如图12-34所示的位置绘制该图形。
图12-34 绘制图形
图12-33 填充选区
40 接下来添加文本。单击工具箱中的
“横排文字工具”按钮，在属性栏内的“设置字体系列”下拉式选项栏中选择Dutch801 Rm BT选项，在“字体大小”参数栏内键入24，将“设置文本颜色”显示窗内的颜色设置为黑色，在图12-35所示的位置键入Check。
图12-35 键入文本
41 现在本实例中对话框内容就制作完成了，由于该对话框中其他对组件的制作与以上制作方法较为相似，读者可以参照图12-36自行完成，在本实例中就不再进行详细的讲解。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘“使用Photoshop CS3编辑网页素材/实例12：制作对话框内容/对话框内容.psd”文件，该文件为本实例完成后的效果。
图12-36 对话框内容