实例11 制作对话框

实例说明

本实例中将制作对话框，在网站应用中，对话框是必不可少的。对话框制作的尺寸不是固定的，它可以通过编辑设置适应网站的尺寸。在本实例中将为读者讲解对话框边框及按钮的制作，对于对话框内容的设置，读者可以在以后的制作过程中为其添加。

技术要点

本实例中，首先使用圆角矩形工具创建一个圆角矩形，设置圆角矩形选区，将底纹图像定义图案，通过图案图章工具将底纹图像刷满整体个矩形选区内，然后通过图层样式对话框中的相关设置为创建的图形添加效果，完成对话框边框的制作。

在制作本实例时，将使用标尺工具来规范绘圆角矩形位置，以便更准确地绘制图形。图11-1为本实例完成后的效果。

1 运行Photoshop CS3，执行菜单栏中的“文件”/“新建”命令，打开“新建”对话框。在“名称”文本框中键入“对话框”。在“宽度”参数栏内键入800，在“高度”参数栏内键入600，单位设置为“像素”，在“分辨率”参数栏内键入72，在“模式”下拉式选项栏中选择“RGB颜色”选项，在“背景内容”下拉式选项栏中选择“白色”选项，单击“确定”按钮，创建一个新文件。

2 按Crtl+R组合键，打开标尺，参照图11-2所示创建四条参考线。

3 选择工具箱中的“自定形状工具”下拉按钮下的“圆角矩形工具”按钮，在“半径”参数栏内键入15，在如图11-3所示的位置绘制一个圆角矩形。

4 因为制作的对话框顶部圆角比底部圆角大，所以需要在底部在绘制一个圆角半径较小的矩形。使用“圆角矩形工具”，在属性栏内将“半径”参数设置为5，在如图11-4所示的位置绘制一个圆角矩形，使其与顶部的圆角矩形重叠。

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

6 确定“背景.jpg”处于可编辑状态，执行菜单栏中“图像”/“调整”/“色相/饱和度”命令，打开“色相/饱和度”对话框，单击“着色”单选按钮，在“色相”参数栏内键入29，在“饱和度”参数栏内键入50，在“明度”参数栏内键入46，如图11-6所示，单击“确定”按钮，退出该对话框。

7 选择工具箱中的“矩形选框工具”，绘制如图11-7所示的选区。

8 执行菜单栏中的“编辑”/“定义图案”命令，打开“图案名称”对话框，如图11-8所示，单击“确定”按钮，退出“图案名称”对话框。

9 确定“对话框.psd”文件处于可编辑状态，按住Ctrl键，单击“图层1”的“图层缩览图”，加载该图层的选区。

10 选择工具箱中的“仿制图章工具”下拉按钮的“图案图章工具”，在属性栏中“画笔”的“主直径”参数栏内键入200，单击“点按可打开图案拾色器”下拉按钮，在打开的选项栏中选择刚刚创建的“背景.jpg”图案图章，如图11-9所示。

11 按下鼠标左键，在“图层1”的选区内拖动鼠标，使用“背景.jpg”图案填充选区内，如图11-10所示。

12 确定“图层1”处于可编辑状态。单击“图层”面板底部的“添加图层样式”按钮，在弹出的快捷菜单中选择“描边”选项，进入描边编辑窗口，在“大小”参数栏内键入2，在“不透明度”参数栏内键入100，将“颜色”设置为R、G、B值为117、67、26的褐色，将该选区进行描边，如图11-11所示。

13 选择“样式”选项组中的“斜面和浮雕”复选框，进入斜面和浮雕编辑窗，在“深度”参数栏内键入50，其他参数使用默认设置，如图11-12所示。

14 选择“样式”选项组中的“投影”复选框，进入投影编辑窗，在“不透明度”参数栏内键入30，在“距离”参数栏内键入7，在“扩展”参数栏内键入1，在“大小”参数栏内键入10，如图11-13所示。单击确定按钮，退出“图层样式”对话框。

15 按组合键Ctrl+H，取消参考线。选择工具箱中的“矩形选框”工具，在如图11-14所示的位置绘制一个矩形。

16 按组合键Ctrl+Alt+D打开“羽化选区”对话框，在“羽化半径”参数栏内键入20，如图11-5所示。单击“确定”按钮，退出该对话框。

17 执行菜单栏中的“图像”/“调整”/“亮度/对比度”命令，打开“亮度/对比度”对话框，在“亮度”参数栏内键入35，在“对比度”参数栏内键入30，如图11-16所示。单击“确定”按钮，退出该对话框。

18 按组合键Ctrl+D取消选区。按住Ctrl键，单击“图层1”的图层缩览图，加载该图层选区。执行菜单栏中的“选择”/“修改”/“收缩”命令，打开“收缩选区”对话框，在“收缩量”参数栏内键入8，如图11-17所示，单击“确定”按钮，退出该对话框。

19 单击“图层”面板底部的“创建新图层”按钮，创建一个新图层——“图层2”。

20 确定“图层2”处于可编辑状态。在选区中右击鼠标，在弹出的快捷菜单中选择“描边”选项，在“宽度”参数栏内键入8，将“颜色”设置为白色，如图11-18所示，执行描边设置。

21 选择工具箱中的“橡皮擦工具”，在属性栏中“画笔”的“主直径”参数栏内键入100，参照图11-19所示，擦除多余描边部分。

22 单击“图层”面板底部的“创建新图层”按钮，创建一个新图层——“图层3”。

23 确定“图层3”处于可编辑状态，选择工具箱中的“矩形选框工具”，在图11-20所示的位置绘制一个矩形选区，将前景色设置为R、G、B值为234、236、52的灰色，按组合键Alt+Delete，将选区进行填充。

24 单击“图层”面板底部的“添加图层样式”下拉按钮，在弹出的快捷菜单中选择“描边”选项，进入描边编辑窗口，在“大小”参数栏内键入2，在“不透明度”参数栏内键入60，将“颜色”设置为R、G、B值为117、67、26的褐色，将该选区进行描边操作，如图11-21所示。

25 选择“样式”选项组中的“内阴影”复选框，进入内阴影编辑窗，将“设置阴影颜色”设置为R、G、B值为62、33、33的深棕色，在“不透明度”参数栏内键入71，在“距离”参数栏内键入0，在“阻塞”参数栏内键入6，在“大小”参数栏内键入13，如图11-22所示。

26 选择“样式”选项组中的“投影”复选框，进入投影编辑窗，在“不透明度”参数栏内键入30，在“距离”参数栏内键入0，在“扩展”参数栏内键入7，在“大小”参数栏内键入10，如图11-23所示，单击确定按钮，退出“图层样式”对话框。

27 接下来添加文字。选择工具箱中的“横排文字工具”，在属性栏内的“设置字体系列”下拉式选项栏中选择Arial选项，设置“字体大小”为26，将“设置文本颜色”显示窗内的颜色设置为R、G、B值为62、65、68的深灰色。在如图11-24所示的位置键入Windows xp 2008。

28 确定文字层处于可编辑状态，单击“图层”面板底部的“添加图层样式”下拉按钮，在弹出的快捷菜单中选择“外发光”选项，打开“图层样式”对话框，在“不透明度”参数栏内键入90，将“设置外发光颜色”设置为R、G、B值为250、236、178的黄色，在“扩展”参数栏内键入8，在“大小”参数栏内键入8，如图11-25所示，单击“确定”按钮，退出该对话框。

29 单击“图层”面板底部的“创建新图层”按钮，创建一个新图层——“图层4”。

30 选择工具箱中的“矩形选框工具”下拉按钮下的“椭圆选框工具”，在如图11-26所示的位置绘制一个椭圆选区，并将其填充为白色。

31 单击“图层”面板底部的“添加图层样式”按钮，在弹出的快捷菜单中选择“描边”选项，进入描边编辑窗口，在“大小”参数栏内键入2，在“位置”下拉式选项栏中选择“内部”选项，将“颜色”设置为R、G、B值为152、121、67的黄色，如图11-27所示。

32 选择“样式”选项组中的“颜色叠加”复选框，进入颜色叠加编辑窗口，将“设置叠加颜色”设置为R、G、B值为26、81、218的蓝色，在“不透明度”参数栏内键入73，如图11-28所示。

33 选择“样式”选项组中的“斜面和浮雕”复选框，进入斜面和浮雕编辑窗，在“深度”参数栏内键入246，在“大小”参数栏内键入7，在“阴影”选项组中选择“阴影模式”下拉式选项栏中的“滤色”选项，并在该选项组的“不透明度”参数栏内键入22，如图11-29所示。单击“确定”按钮，退出该对话框。

34 使用以上方法，分别创建其他两个按钮，中间按钮为绿色，右侧按钮为红色，如图11-30所示。

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

36 将本实例保存，以便下一实例中应用。