第11章综合实训案例1——多媒体界面的设计

1、第第11章章 综合实训案例综合实训案例1多媒体界面的设计多媒体界面的设计 l 案例简介案例简介l 案例制作步骤案例制作步骤l 背景知识介绍背景知识介绍本章主要内容：本章主要内容：Photoshop平面设计实用教程平面设计实用教程(第二版第二版)清华大学出版社清华大学出版社11.1 案例简介案例简介 本案例介绍用本案例介绍用Photoshop进行多媒进行多媒体软件界面的设计和制作的方法。通过体软件界面的设计和制作的方法。通过本案例的制作读者将对多媒体软件界面本案例的制作读者将对多媒体软件界面各个构成要素的制作过程有一个深入的各个构成要素的制作过程有一个深入的了解。了解。 11.1.1 案例设计思

2、路案例设计思路 本案例制作的是一个多媒体软件的主界面。在设计时本案例制作的是一个多媒体软件的主界面。在设计时要求满足相应功能的需要，界面结构设计合理且尽可能简要求满足相应功能的需要，界面结构设计合理且尽可能简洁，在视觉上要求富于设计感。本案例在设计时，以蓝色洁，在视觉上要求富于设计感。本案例在设计时，以蓝色作为整个界面的主色调，容易让使用者产生心灵的感应。作为整个界面的主色调，容易让使用者产生心灵的感应。标题适当使用特效，以便对软件的主体有清晰明确的认识，标题适当使用特效，以便对软件的主体有清晰明确的认识，突出重点。按钮设计实用简单，但又不失美观，并且与背突出重点。按钮设计实用简单，但又不失美

3、观，并且与背景搭配合理。按钮在布局上做到内部结构布局合理，简单景搭配合理。按钮在布局上做到内部结构布局合理，简单明了，便于用户操作，方便用户灵活的运用。界面整体风明了，便于用户操作，方便用户灵活的运用。界面整体风格与软件本身的结合度强，使之合乎现代的时尚感和大局格与软件本身的结合度强，使之合乎现代的时尚感和大局观。观。 11.1.2 案例制作说明案例制作说明 本案例在制作中没有使用复杂的操作。案例的本案例在制作中没有使用复杂的操作。案例的制作分为背景的制作，标题的制作、按钮的制作和最终效果制作分为背景的制作，标题的制作、按钮的制作和最终效果图的制作这几步。图的制作这几步。 1背景制作背景制作制

4、作过程中使用背景素材图片来构建界面背景制作过程中使用背景素材图片来构建界面背景，这样能减小制作工作量，提高制作效率。在制作过程中使，这样能减小制作工作量，提高制作效率。在制作过程中使用了图层蒙板和用了图层蒙板和【切变切变】滤镜来创建图像背景效果。同时使滤镜来创建图像背景效果。同时使用矢量工具来绘制主体部分的装饰线，并通过添加用矢量工具来绘制主体部分的装饰线，并通过添加【图层样图层样式式】来获得透明的水晶效果，使背景更富有现代感。来获得透明的水晶效果，使背景更富有现代感。2标题的制作标题的制作在创建标题后，分别对标题的不同文字部分创在创建标题后，分别对标题的不同文字部分创建不同的效果。对标题中的

5、英文字符，采用了建不同的效果。对标题中的英文字符，采用了【马赛克马赛克】滤滤镜和镜和【描边描边】特效创建边缘像素文字效果。同时对标题中的特效创建边缘像素文字效果。同时对标题中的汉字字符应用汉字字符应用【图层样式图层样式】创建水晶字体效果。创建水晶字体效果。11.1.2 案例制作说明案例制作说明3按钮制作按钮制作多媒体软件中的按钮分为常态、鼠标滑过和鼠多媒体软件中的按钮分为常态、鼠标滑过和鼠标按下这标按下这3种状态，为了便于按钮在具体软件中使用，按钮种状态，为了便于按钮在具体软件中使用，按钮采用单独的文件形式制作。按钮的制作使用采用单独的文件形式制作。按钮的制作使用【图层样式图层样式】创创建特效

6、。建特效。4效果图的制作效果图的制作效果图的制作是在制作时放置功能按钮和说明效果图的制作是在制作时放置功能按钮和说明文字的过程，使用文字的过程，使用【移动工具移动工具】来移动对象进行界面的布局来移动对象进行界面的布局，使用，使用【自由变换自由变换】命令调整对象的大小，使之符合界面的命令调整对象的大小，使之符合界面的要求。要求。 11.2 案例制作步骤案例制作步骤 下面，详细介绍本案例的制作步骤。下面，详细介绍本案例的制作步骤。 11.2.1 制作背景制作背景 背景的制作分为两步完成，先为背景的制作分为两步完成，先为作品添加素材并应用滤镜对素材进行处理作品添加素材并应用滤镜对素材进行处理。然后，

7、使用路径工具创建背景装饰并为。然后，使用路径工具创建背景装饰并为其添加图层样式效果。其添加图层样式效果。 11.2.1 制作背景制作背景 1添加并处理素材图片添加并处理素材图片（1）打开）打开【新建新建】对话框，设置如图对话框，设置如图11-1所示。将新文档保存为所示。将新文档保存为“多媒体界多媒体界面面.psd”文件。文件。（2）打开水滴）打开水滴.jpg和底纹和底纹.jpg文件。将文件。将“水滴水滴.jpg” 拖放到新文档中，如图拖放到新文档中，如图11-2所示。所示。 图图11-1 【新建新建】对话框的设置对话框的设置 图图11-2 放置素材图片放置素材图片 11.2.1 制作背景制作背

8、景 （3）为图层添加图层蒙板。选择）为图层添加图层蒙板。选择【渐渐变工具变工具】，渐变设置为，渐变设置为【从背景色到前景从背景色到前景色色】，选择，选择【径向渐变径向渐变】。在图层蒙板中。在图层蒙板中创建从中心向外侧的径向渐变效果，如图创建从中心向外侧的径向渐变效果，如图11-3所示。所示。 图图11-3 在图层蒙板中创建径向渐变在图层蒙板中创建径向渐变 11.2.1 制作背景制作背景 （4）将）将“底纹底纹.jpg” 拖放到图像中拖放到图像中来，如图来，如图11-4所示。所示。【高斯模糊高斯模糊】参数参数设置，如图设置，如图11-5所示。应用滤镜，图像所示。应用滤镜，图像的效果如图的效果如图

9、11-6所示。所示。 图图11-4 放置第二张图片放置第二张图片 图图11-5 【高斯模糊高斯模糊】 图图11-6 应用后效果应用后效果 11.2.1 制作背景制作背景 （5）在）在【切变切变】对话框中对滤镜效果对话框中对滤镜效果进行设置，如图进行设置，如图11-7所示。应用滤镜，所示。应用滤镜，此时图像的效果如图此时图像的效果如图11-8所示。所示。 图图11-7 【切变切变】对话框对话框 图图11-8 应用应用【切变切变】滤镜后的图像效果滤镜后的图像效果 11.2.1 制作背景制作背景 （6）为图层添加图层蒙板，在蒙板中创）为图层添加图层蒙板，在蒙板中创建由左上角到右下角的线性渐变效果，如

10、建由左上角到右下角的线性渐变效果，如图图11-9所示。所示。（7）在）在【波浪波浪】对话框中对滤镜效果进对话框中对滤镜效果进行设置，如图行设置，如图11-10所示。应用滤镜，图所示。应用滤镜，图像的效果如图像的效果如图11-11所示。所示。 图图11-9 蒙板中渐变效果蒙板中渐变效果 图图11-10 【波浪波浪】参数设置参数设置 图图11-11 应用后效果应用后效果 11.2.1 制作背景制作背景 （8）选择）选择【图层图层1】。打开。打开【色阶色阶】对对话框，在对话框中调整中间灰色滑块位置话框，在对话框中调整中间灰色滑块位置将图像适当加亮，如图将图像适当加亮，如图11-12所示。此时所示。此

11、时图像效果如图图像效果如图11-13所示。所示。 图图11-12 调整中间灰色滑块的位置调整中间灰色滑块的位置 图图11-13 调整色阶后的图像效果调整色阶后的图像效果 11.2.1 制作背景制作背景 2制作装饰物制作装饰物（1）选择）选择【椭圆工具椭圆工具】，在选项栏中对，在选项栏中对工具进行设置，如图工具进行设置，如图11-14所示。使用所示。使用【椭圆工具椭圆工具】绘制绘制2个圆形路径，如图个圆形路径，如图11-15所示。所示。 图图11-14 【椭圆工具椭圆工具】选项栏的设置选项栏的设置 图图11-15 绘制绘制2个圆形路径个圆形路径11.2.1 制作背景制作背景 （2）打开路径调板，

12、单击）打开路径调板，单击【路径路径】调调板下的板下的【将路径作为选区载入将路径作为选区载入】按钮，获按钮，获得选区，如图得选区，如图11-16所示。选择所示。选择【选择选择】【变换选区变换选区】命令，对选区进行变换，命令，对选区进行变换，如图如图11-17所示。所示。 图图11-16 将路径转换为选区将路径转换为选区 图图11-17 变换选区变换选区11.2.1 制作背景制作背景 （3）创建一个新层，选择）创建一个新层，选择【渐变工具渐变工具】，打开，打开【渐变编辑器渐变编辑器】对渐变进行编辑对渐变进行编辑，选择左侧颜色为当前图像中深蓝色区域，选择左侧颜色为当前图像中深蓝色区域颜色，中间颜色为

13、当前图像中浅蓝色区域颜色，中间颜色为当前图像中浅蓝色区域颜色，右侧颜色为白色，如图颜色，右侧颜色为白色，如图11-18所示所示。使用。使用【渐变工具渐变工具】从下向上在选区创建从下向上在选区创建线性渐变效果，如图线性渐变效果，如图11-19所示。所示。 图图11-18 使用使用【渐变编辑器渐变编辑器】编辑渐变编辑渐变 图图11-19 在选区中创建线性渐变效果在选区中创建线性渐变效果 11.2.1 制作背景制作背景 （4）取消选区，在）取消选区，在【图层样式图层样式】对话框对话框中选中中选中【投影投影】复选框，对投影进行设置复选框，对投影进行设置，如图，如图11-20所示所示（5）选中）选中【内

14、阴影内阴影】复选框，对内阴影复选框，对内阴影效果进行设置，如图效果进行设置，如图11-21所示。所示。 图图11-20 投影效果的设置投影效果的设置 图图11-21 设置内阴影效果设置内阴影效果 11.2.1 制作背景制作背景 （6）选中）选中【外发光外发光】复选框，对外发光复选框，对外发光效果进行设置，如图效果进行设置，如图11-22所示。所示。（7）选中）选中【内发光内发光】复选框，对内发光复选框，对内发光效果进行设置，如图效果进行设置，如图11-23所示。所示。 图图11.22 设置外发光效果设置外发光效果 图图11-23 设置内发光效果设置内发光效果 11.2.1 制作背景制作背景 （

15、8）选中）选中【斜面和浮雕斜面和浮雕】复选框，对斜复选框，对斜面和浮雕效果进行设置，如图面和浮雕效果进行设置，如图11-24所示所示。选中。选中【等高线等高线】复选框，对等高线参数复选框，对等高线参数进行设置，如图进行设置，如图11-25所示。所示。 图图11-24 设置斜面和浮雕效果设置斜面和浮雕效果 图图11-25 等高线参数的设置等高线参数的设置11.2.1 制作背景制作背景 （9）选中）选中【光泽光泽】复选框，同时对参数复选框，同时对参数进行设置，如图进行设置，如图11-26所示。所示。（10）选中）选中【颜色叠加颜色叠加】复选框，同时复选框，同时对参数进行设置，如图对参数进行设置，如

16、图11-27所示。所示。 图图11-26 【光泽光泽】的参数设置的参数设置 图图11-27 【颜色叠加颜色叠加】的参数设置的参数设置 11.2.1 制作背景制作背景 （11）完成所有参数设置后，单击）完成所有参数设置后，单击【确确定定】按钮关闭按钮关闭【图层样式图层样式】对话框，此时对话框，此时图像效果如图图像效果如图11-28所示。所示。 图图11-28 添加图层样式后的图像效果添加图层样式后的图像效果11.2.2 创建标题创建标题 1“Photoshop CS5”文字效果的创文字效果的创建建（1）创建文字）创建文字Photoshop CS5，打开，打开【字符字符】调板设置字符样式，如图调板

17、设置字符样式，如图11-29所示。所示。（2）将文字图层栅格化。打开）将文字图层栅格化。打开【马赛克马赛克】对话框。在对话框中对滤镜进行设置，对话框。在对话框中对滤镜进行设置，如图如图11-30所示。应用滤镜，此时文字的所示。应用滤镜，此时文字的效果，如图效果，如图11-31所示。所示。 图图11-31 应用滤镜后效果应用滤镜后效果 图图11-30 对话框对话框 图图11-29 设置字符样式设置字符样式 11.2.2 创建标题创建标题 （3）打开）打开【图层样式图层样式】对话框。选中对话框。选中【描边描边】复选框，对其参数进行设置，如图复选框，对其参数进行设置，如图11-32所示。所示。 （4

18、）选中）选中【投影投影】复选框，对其参数进复选框，对其参数进行设置，如图行设置，如图11-33所示。此时文字效果所示。此时文字效果如图如图11-34所示。所示。 图图11-32 【描边描边】 图图11-33 【投影投影】 图图11-34 应用后的文字效果应用后的文字效果 11.2.2 创建标题创建标题 2标题中标题中“平面设计技巧详解平面设计技巧详解”文字效文字效果的创建果的创建（1）创建文字）创建文字“平面设计技巧详解平面设计技巧详解”，使用使用【字符字符】调板设置字符样式，如图调板设置字符样式，如图11-35所示。所示。（2）选）选【投影投影】、【内发光内发光】、【斜面斜面和浮雕和浮雕】、

19、【颜色叠加颜色叠加】，并分别对投影，并分别对投影样式进行设置。创建的文字标题效果，如样式进行设置。创建的文字标题效果，如图图11-36所示。所示。 图图11-35 创建文字并设置字符样式创建文字并设置字符样式 图图11-36 创建的文字标题效果创建的文字标题效果 11.2.3 制作导航图标制作导航图标 1制作图标制作图标（1）打开图标）打开图标1.jpg文件。选择文件。选择【裁切裁切工具工具】，对图片进行裁切操作，如图，对图片进行裁切操作，如图11-37所示。所示。（2）打开）打开【图像大小图像大小】对话框，在对话对话框，在对话框中设置新图像的大小，如图框中设置新图像的大小，如图11-38所示

20、所示。单击。单击【确定确定】按钮缩小图像，如图按钮缩小图像，如图11-39所示。所示。 图图11-37 裁切素材图片裁切素材图片 图图11-38 【图像大小图像大小】设置设置图图11-39 缩小图像缩小图像 11.2.3 制作导航图标制作导航图标 （3）使用）使用【移动工具移动工具】将缩小后的图像将缩小后的图像放置到当前处理的图像中，并在放置到当前处理的图像中，并在【图层图层】调板中将该图像所在的图层命名为调板中将该图像所在的图层命名为“图标图标1”，如图，如图11-40所示。所示。 图图11-40 放置图像放置图像 11.2.3 制作导航图标制作导航图标 2制作装饰线制作装饰线（1）创建一个

21、新图层，命名为）创建一个新图层，命名为“图标图标1线条线条”。使用。使用【钢笔工具钢笔工具】创建矢量路径创建矢量路径，如图，如图11-41所示。所示。（2）在）在【画笔画笔】调板中对画笔进行设置调板中对画笔进行设置。这里将画笔笔尖的直径设置为。这里将画笔笔尖的直径设置为1个像素个像素，同时选中，同时选中【形状动态形状动态】复选框，如图复选框，如图11-42所示。所示。 图图11-41 创建矢量路径创建矢量路径 图图11-42 设置画笔笔尖设置画笔笔尖 11.2.3 制作导航图标制作导航图标 （3）前景色为白色，）前景色为白色，【用画笔描绘路径用画笔描绘路径】。在。在【路径路径】调板中将路径删除

22、。在调板中将路径删除。在【图层图层】调板中将调板中将【图标图标1线条线条】图层放置图层放置到到【图标图标1】图层的下方。此时的图像效图层的下方。此时的图像效果，如图果，如图11-43所示。所示。3制作其他图标效果：采用相同方式添制作其他图标效果：采用相同方式添加图标，并为图标添加装饰性线条，如图加图标，并为图标添加装饰性线条，如图11-44所示。所示。 图图11-43 绘制线条绘制线条 图图11-44 添加其他图标添加其他图标11.2.4 制作导航按钮制作导航按钮 按钮一般有正常状态、鼠标滑过状态、按按钮一般有正常状态、鼠标滑过状态、按下状态这下状态这3种状态。下面，介绍本实例中种状态。下面，

23、介绍本实例中的导航按钮的制作。的导航按钮的制作。1制作常态时的按钮制作常态时的按钮（1）打开）打开【新建新建】对话框，在对话框，在【新建新建】对话框中对新建文档进行设置，如图对话框中对新建文档进行设置，如图11-45所示。所示。 图图11-45 【新建新建】对话框的设置对话框的设置11.2.4 制作导航按钮制作导航按钮 （2）选择）选择【圆角矩形工具圆角矩形工具】，在选项栏，在选项栏中对工具进行设置，如图中对工具进行设置，如图11-46所示。使所示。使用该工具在新文档中绘制一个圆角矩形，用该工具在新文档中绘制一个圆角矩形，如图如图11-47所示。所示。 （3）将路径转换为选区，用蓝色填充选）将

24、路径转换为选区，用蓝色填充选区，如图区，如图11-48所示。所示。 图图11-46 选项栏中工具的设置选项栏中工具的设置 图图11-47 绘制一个圆角矩形绘制一个圆角矩形 图图11-48 用蓝色填充选区用蓝色填充选区11.2.4 制作导航按钮制作导航按钮 （4）取消选区，为图层添加）取消选区，为图层添加【投影投影】样样式，其参数设置，如图式，其参数设置，如图11-49示。示。（5）为图层添加）为图层添加【描边描边】图层样式，如图层样式，如图图11-50所示。图像的效果如图所示。图像的效果如图11-51所示。所示。 图图11-49 设置设置【投影投影】 图图11-50 设置设置【描边描边】 图图

25、11-51 图像效果图像效果 11.2.4 制作导航按钮制作导航按钮 （6）选择）选择【直排文字工具直排文字工具】，在图像中，在图像中输入文字，并使用输入文字，并使用【字符字符】调板设置文字调板设置文字样式，如图样式，如图11-52所示。所示。（7）保存文件，完成第一个按钮的制作）保存文件，完成第一个按钮的制作。 图图11-52 创建文字并设置文字样式创建文字并设置文字样式 11.2.4 制作导航按钮制作导航按钮 2制作鼠标滑过状态按钮制作鼠标滑过状态按钮（1）在）在“按钮常态按钮常态1.psd”文件中按文件中按Ctrl键单击键单击【图层图层1】图层载入选区，如图层载入选区，如图图11-53所

26、示。所示。（2）前景色设置为浅蓝色（其颜色值为）前景色设置为浅蓝色（其颜色值为R：197，G：223，B：249），使用），使用【油漆桶工具油漆桶工具】填充选区，如图填充选区，如图11-54所所示。示。 图图11-53 载入选区载入选区 图图11-54 填充选区填充选区 11.2.4 制作导航按钮制作导航按钮 3制作鼠标按下状态按钮制作鼠标按下状态按钮（1）打开）打开“按钮常态按钮常态1.psd”文件。文件。【图层样式图层样式】对话框中取消选中对话框中取消选中【投影投影】，如图如图11-55所示。所示。（2）此时图像的效果，如图）此时图像的效果，如图11-56所示所示。将文件保存为。将文件保存

27、为“按钮按下按钮按下1.psd”。至。至此，按钮此，按钮1的的3种状态按钮制作完成。种状态按钮制作完成。 图图11-55 取消取消【投影投影】复选框的选中复选框的选中 图图11-56 取消取消【投影投影】样式效果后的图像效果样式效果后的图像效果 11.2.4 制作导航按钮制作导航按钮 4其他按钮的制作其他按钮的制作（1）打开）打开“按钮常态按钮常态1.psd”文件，在文件，在按钮标签文字所在的图层中将文字改为新按钮标签文字所在的图层中将文字改为新按钮的标签文字，并适当调整文字的大小按钮的标签文字，并适当调整文字的大小，如图，如图11-57所示。所示。 图图11-57 修改文字并调整文字大小修改

28、文字并调整文字大小11.2.4 制作导航按钮制作导航按钮 （2）将文档保存为）将文档保存为“按钮常态按钮常态2.psd”完成第完成第2个常态下的按钮制作。打开个常态下的按钮制作。打开“按按钮滑过钮滑过1.psd”文件，将按钮标签改为文件，将按钮标签改为“素材与源文件素材与源文件”， 同样修改文字大小。同样修改文字大小。（3）按相同的方法制作第）按相同的方法制作第2个按钮按下个按钮按下状态时的按钮。完成第状态时的按钮。完成第2个按钮的制作。个按钮的制作。（4）按照上面介绍的方法完成本案例的）按照上面介绍的方法完成本案例的其他其他2个按钮的制作，完成本案例的所有个按钮的制作，完成本案例的所有按钮的

29、制作。按钮的制作。 11.2.4 制作导航按钮制作导航按钮 5圆形水晶按钮的制作圆形水晶按钮的制作（1）打开）打开【新建新建】对话框，如图对话框，如图11-58所示。将文件保存为所示。将文件保存为“水晶按钮常态水晶按钮常态.psd”。（2）在）在【工具箱工具箱】中选择中选择【椭圆选框工椭圆选框工具具】在图像中绘制一个圆形选区，以蓝色在图像中绘制一个圆形选区，以蓝色的前景色填充选区，如图的前景色填充选区，如图11-59所示。所示。 图图11-58 【新建新建】对话框的设置对话框的设置 图图11-59 绘制圆形选区绘制圆形选区11.2.4 制作导航按钮制作导航按钮 （3）取消选区。打开）取消选区。

30、打开【图层样式图层样式】对话对话框，采用框，采用11.2.2小节中相同的步骤和设小节中相同的步骤和设置为图层添加样式效果。再为图层添加一置为图层添加样式效果。再为图层添加一个个【描边描边】效果，其参数设置，如图效果，其参数设置，如图11-60所示。所示。（4）此时获得一个水晶按钮，如图）此时获得一个水晶按钮，如图11-61所示。保存文件，完成水晶按钮常态所示。保存文件，完成水晶按钮常态的制作。的制作。 图图11-60 增加增加【描边描边】效果效果 图图11-61 水晶球效果水晶球效果 11.2.4 制作导航按钮制作导航按钮 （5）打开）打开【图层样式图层样式】对话框，颜色全对话框，颜色全改为绿

31、色，如图改为绿色，如图11-62所示。所示。（6）将文件保存为）将文件保存为“水晶按钮滑过水晶按钮滑过.psd”，完成按钮在鼠标滑过状态的制，完成按钮在鼠标滑过状态的制作。作。（7）使用相同的方法将颜色改为蓝色，）使用相同的方法将颜色改为蓝色，得到一个蓝色水晶按钮，如图得到一个蓝色水晶按钮，如图11-63所示所示。将按钮保存为。将按钮保存为“水晶按钮按下水晶按钮按下.psd”文件。文件。 图图11-62 制作绿色水晶按钮制作绿色水晶按钮 图图11-63 制作蓝色水晶按钮制作蓝色水晶按钮 11.2.5 制作界面效果图制作界面效果图 1添加导航按钮添加导航按钮（1）切换到）切换到“多媒体界面多媒体

32、界面.psd”文件窗文件窗口。打开口。打开“按钮常态按钮常态1.psd”文件。在文件。在【图层图层】调板只能够选择最上面的图层，合调板只能够选择最上面的图层，合并图层，如图并图层，如图11-64所示。所示。（2）选择）选择【移动工具移动工具】将合并后的图层将合并后的图层拖到拖到“多媒体界面多媒体界面.psd”文档窗口中，文档窗口中，如图如图11-65所示。所示。 图图11-64 合并图层合并图层 图图11-65 拖放到文档窗口中拖放到文档窗口中11.2.5 制作界面效果图制作界面效果图 （3）按）按Ctrl+T键，调整对象大小和位置键，调整对象大小和位置。按。按Enter键确认变换操作，添加按

33、钮后键确认变换操作，添加按钮后的图像效果，如图的图像效果，如图11-66所示。所示。（4）按相同的方法一次添加其他按钮，）按相同的方法一次添加其他按钮，图像效果如图图像效果如图11-67所示。所示。 图图11-66 添加按钮后的图像效果添加按钮后的图像效果 图图11-67 添加按钮后的界面效果添加按钮后的界面效果11.2.5 制作界面效果图制作界面效果图 2制作退出按钮效果制作退出按钮效果（1）打开）打开“水晶按钮常态水晶按钮常态.psd”文件，文件，将其拖放到将其拖放到“多媒体界面多媒体界面.psd”文件窗文件窗口中，同时调整其位置并将其缩小，如图口中，同时调整其位置并将其缩小，如图11-6

34、8所示。所示。（2）输入文字）输入文字“退出退出”，使用，使用【字符字符】调板设置文字样式，如图调板设置文字样式，如图11-69所示。所示。 图图11-68 将水晶按钮缩小将水晶按钮缩小 图图11-69 创建文字并设置字符样式创建文字并设置字符样式 11.2.5 制作界面效果图制作界面效果图 （3）将水晶按钮所在的图层）将水晶按钮所在的图层【图层图层8】复制复制4份，将它们按图份，将它们按图11-70所示的位置所示的位置放置。放置。（4）分别在这些按钮后面创建文字，如）分别在这些按钮后面创建文字，如图图11-71所示。所示。 图图11-70 复制并放置按钮复制并放置按钮 图图11-71 创建文

35、字创建文字 11.2.5 制作界面效果图制作界面效果图 （5）在）在【字符字符】调板中调整文字的大小调板中调整文字的大小，对文字和按钮的位置进行适当的调整，对文字和按钮的位置进行适当的调整，如图如图11-72所示。所示。（6）对图像的各个组成元素进行适当的）对图像的各个组成元素进行适当的调整，效果满意后，保存文件，完成本案调整，效果满意后，保存文件，完成本案例的制作。本案例的最终效果如图例的制作。本案例的最终效果如图11-73所示。所示。 图图11-72 调整文字和按钮的位置调整文字和按钮的位置 图图11-73 本案例的最终效果本案例的最终效果 11.3 背景知识简介背景知识简介 在多媒体技术

36、迅速发展的今天，在多媒体技术迅速发展的今天，多媒体技术逐渐被广泛应用到社会各个领多媒体技术逐渐被广泛应用到社会各个领域，这使得创造美的界面的重要性和必要域，这使得创造美的界面的重要性和必要性也越来越得到大家的认识。将美学原理性也越来越得到大家的认识。将美学原理应用到多媒体界面的设置，能够加强界面应用到多媒体界面的设置，能够加强界面的气氛，增强界面的吸引力，突出作品的的气氛，增强界面的吸引力，突出作品的重点，提高美感。重点，提高美感。 11.3.1 界面的构成界面的构成 界面是一个窗口，它是将不同界面是一个窗口，它是将不同的元素编排在一起，并形成一个连贯的的元素编排在一起，并形成一个连贯的整体。

37、从实质上说，界面是设计者才艺整体。从实质上说，界面是设计者才艺、技能和软件人工智能的体现，是软件、技能和软件人工智能的体现，是软件设计者设计理念的体现。就目前多媒体设计者设计理念的体现。就目前多媒体软件来说，界面主要包括两类：一类是软件来说，界面主要包括两类：一类是控制元素，这指的是界面上的菜单、按控制元素，这指的是界面上的菜单、按钮、图标和各种交互热区或热字。另一钮、图标和各种交互热区或热字。另一类是内容元素，这指的是反映有关信息类是内容元素，这指的是反映有关信息的界面元素，如文字、图片、声音和动的界面元素，如文字、图片、声音和动画等。画等。11.3.1 界面的构成界面的构成 好的程序界面，

38、实际上是一个好的程序界面，实际上是一个集多种视觉和听觉元素的综合体，其中集多种视觉和听觉元素的综合体，其中的视觉元素占了很重要的地位。界面的的视觉元素占了很重要的地位。界面的设计既考虑到信息的呈现，又要最大限设计既考虑到信息的呈现，又要最大限度地实现操作的简单性。可见，多媒体度地实现操作的简单性。可见，多媒体界面的设计是一个思维过程，也是一个界面的设计是一个思维过程，也是一个组织过程，将控制元素和内容元素有机组织过程，将控制元素和内容元素有机结合，充分体现出了创意、设计和制作结合，充分体现出了创意、设计和制作的三合一。的三合一。 11.3.2 界面设计的基本原则界面设计的基本原则 要想获得良好

39、的人机界面，需要注意遵循一定要想获得良好的人机界面，需要注意遵循一定的设计原则，这些原则包括：对比原则、协调原则、平衡原的设计原则，这些原则包括：对比原则、协调原则、平衡原则和趣味性原则。则和趣味性原则。1对比原则对比原则从平面设计的角度来看，对比能够使特征更加从平面设计的角度来看，对比能够使特征更加鲜明，使画面更富有色彩和表现力。在界面设计时，通过对鲜明，使画面更富有色彩和表现力。在界面设计时，通过对比可以在界面形成兴趣中心，能够将主体从背景中突出出来比可以在界面形成兴趣中心，能够将主体从背景中突出出来。在应用对比构建界面时，可以通过大小的对比来突出界面。在应用对比构建界面时，可以通过大小的

40、对比来突出界面布局，使使用者获得无法忘怀的最初基本印象。布局，使使用者获得无法忘怀的最初基本印象。在界面中使用明暗对比，将背景设置暗一些，在界面中使用明暗对比，将背景设置暗一些，重点元素设置亮一些，可以突出元素在界面中的地位。在字重点元素设置亮一些，可以突出元素在界面中的地位。在字体的应用上可以注重粗细对比的应用，如增加细体字，减少体的应用上可以注重粗细对比的应用，如增加细体字，减少粗体字能使界面给人以明快的感觉。重要的文字使用粗体字粗体字能使界面给人以明快的感觉。重要的文字使用粗体字，能给人一种气魄感，比较柔情的词语可以使用较为纤细的，能给人一种气魄感，比较柔情的词语可以使用较为纤细的斜体字。斜体字。11.3.2 界面设计的基本原则界面设计的基本原则 在线条的使用上，曲线富有柔和感，直线富有在线条的使用上，曲线富有柔和感，直线富有硬度感和锐利感。两种线条的搭配使用能够产生较为和谐的硬度感和锐利感。两种线条的搭配使用能够产生较为和谐的效果。线条中的水平