多媒体界面的设计课件

《多媒体界面的设计课件》由会员分享，可在线阅读，更多相关《多媒体界面的设计课件（52页珍藏版）》请在装配图网上搜索。

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 制作背景制作背景（3）为图层

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

9、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所示所示（

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

15、1 制作背景制作背景（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）打开【图层样式】对话框。选中【）打开【图层样式】对话框。选中【描边】复选框，对其参数进行设置，如图描边】复选框，对其参数进行设

18、置，如图11-32所示。所示。（4）选中【投影】复选框，对其参数进）选中【投影】复选框，对其参数进行设置，如图行设置，如图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）打开【图像大小】对话框，在对话）打开【图像大小】对话框，在对话框中设

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

21、3 制作导航图标制作导航图标 2制作装饰线制作装饰线（1）创建一个新图层，命名为）创建一个新图层，命名为“图标图标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 制作导航按钮制作导航按钮 按钮一般有正常状态、鼠标滑过状态、按按钮一般有正常状态、

23、鼠标滑过状态、按下状态这下状态这3种状态。下面，介绍本实例中种状态。下面，介绍本实例中的导航按钮的制作。的导航按钮的制作。1制作常态时的按钮制作常态时的按钮（1）打开【新建】对话框，在【新建】）打开【新建】对话框，在【新建】对话框中对新建文档进行设置，如图对话框中对新建文档进行设置，如图11-45所示。所示。图图11-45【新建新建】对话框的设置对话框的设置11.2.4 制作导航按钮制作导航按钮（2）选择【圆角矩形工具】，在选项栏）选择【圆角矩形工具】，在选项栏中对工具进行设置，如图中对工具进行设置，如图11-46所示。使所示。使用该工具在新文档中绘制一个圆角矩形，用该工具在新文档中绘制一个圆

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

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

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

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

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

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

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

31、 制作导航按钮制作导航按钮（5）打开【图层样式】对话框，颜色全）打开【图层样式】对话框，颜色全改为绿色，如图改为绿色，如图11-62所示。所示。（6）将文件保存为）将文件保存为“水晶按钮滑过水晶按钮滑过.psd”，完成按钮在鼠标滑过状态的制作，完成按钮在鼠标滑过状态的制作。（7）使用相同的方法将颜色改为蓝色，）使用相同的方法将颜色改为蓝色，得到一个蓝色水晶按钮，如图得到一个蓝色水晶按钮，如图11-63所示所示。将按钮保存为。将按钮保存为“水晶按钮按下水晶按钮按下.psd”文文件。件。图图11-62 制作绿色水晶按钮制作绿色水晶按钮 图图11-63 制作蓝色水晶按钮制作蓝色水晶按钮 11.2.5

32、 制作界面效果图制作界面效果图 1添加导航按钮添加导航按钮（1）切换到）切换到“多媒体界面多媒体界面.psd”文件窗文件窗口。打开口。打开“按钮常态按钮常态1.psd”文件。在【文件。在【图层】调板只能够选择最上面的图层，合图层】调板只能够选择最上面的图层，合并图层，如图并图层，如图11-64所示。所示。（2）选择【移动工具】将合并后的图层）选择【移动工具】将合并后的图层拖到拖到“多媒体界面多媒体界面.psd”文档窗口中，如文档窗口中，如图图11-65所示。所示。图图11-64 合并图层合并图层 图图11-65 拖放到文档窗口中拖放到文档窗口中11.2.5 制作界面效果图制作界面效果图（3）按

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

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

35、，如图图11-71所示。所示。图图11-70 复制并放置按钮复制并放置按钮 图图11-71 创建文字创建文字 11.2.5 制作界面效果图制作界面效果图（5）在【字符】调板中调整文字的大小）在【字符】调板中调整文字的大小，对文字和按钮的位置进行适当的调整，对文字和按钮的位置进行适当的调整，如图如图11-72所示。所示。（6）对图像的各个组成元素进行适当的）对图像的各个组成元素进行适当的调整，效果满意后，保存文件，完成本案调整，效果满意后，保存文件，完成本案例的制作。本案例的最终效果如图例的制作。本案例的最终效果如图11-73所示。所示。图图11-72 调整文字和按钮的位置调整文字和按钮的位置

36、图图11-73 本案例的最终效果本案例的最终效果 11.3 背景知识简介背景知识简介 在多媒体技术迅速发展的今天，在多媒体技术迅速发展的今天，多媒体技术逐渐被广泛应用到社会各个领多媒体技术逐渐被广泛应用到社会各个领域，这使得创造美的界面的重要性和必要域，这使得创造美的界面的重要性和必要性也越来越得到大家的认识。将美学原理性也越来越得到大家的认识。将美学原理应用到多媒体界面的设置，能够加强界面应用到多媒体界面的设置，能够加强界面的气氛，增强界面的吸引力，突出作品的的气氛，增强界面的吸引力，突出作品的重点，提高美感。重点，提高美感。11.3.1 界面的构成界面的构成 界面是一个窗口，它是将不同界面

37、是一个窗口，它是将不同的元素编排在一起，并形成一个连贯的的元素编排在一起，并形成一个连贯的整体。从实质上说，界面是设计者才艺整体。从实质上说，界面是设计者才艺、技能和软件人工智能的体现，是软件、技能和软件人工智能的体现，是软件设计者设计理念的体现。就目前多媒体设计者设计理念的体现。就目前多媒体软件来说，界面主要包括两类：一类是软件来说，界面主要包括两类：一类是控制元素，这指的是界面上的菜单、按控制元素，这指的是界面上的菜单、按钮、图标和各种交互热区或热字。另一钮、图标和各种交互热区或热字。另一类是内容元素，这指的是反映有关信息类是内容元素，这指的是反映有关信息的界面元素，如文字、图片、声音和动

38、的界面元素，如文字、图片、声音和动画等。画等。11.3.1 界面的构成界面的构成 好的程序界面，实际上是一个好的程序界面，实际上是一个集多种视觉和听觉元素的综合体，其中集多种视觉和听觉元素的综合体，其中的视觉元素占了很重要的地位。界面的的视觉元素占了很重要的地位。界面的设计既考虑到信息的呈现，又要最大限设计既考虑到信息的呈现，又要最大限度地实现操作的简单性。可见，多媒体度地实现操作的简单性。可见，多媒体界面的设计是一个思维过程，也是一个界面的设计是一个思维过程，也是一个组织过程，将控制元素和内容元素有机组织过程，将控制元素和内容元素有机结合，充分体现出了创意、设计和制作结合，充分体现出了创意、

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

40、出来。在应用对比构建界面时，可以通过大小的对比来突出界面。在应用对比构建界面时，可以通过大小的对比来突出界面布局，使使用者获得无法忘怀的最初基本印象。布局，使使用者获得无法忘怀的最初基本印象。在界面中使用明暗对比，将背景设置暗一些，在界面中使用明暗对比，将背景设置暗一些，重点元素设置亮一些，可以突出元素在界面中的地位。在字重点元素设置亮一些，可以突出元素在界面中的地位。在字体的应用上可以注重粗细对比的应用，如增加细体字，减少体的应用上可以注重粗细对比的应用，如增加细体字，减少粗体字能使界面给人以明快的感觉。重要的文字使用粗体字粗体字能使界面给人以明快的感觉。重要的文字使用粗体字，能给人一种气魄

41、感，比较柔情的词语可以使用较为纤细的，能给人一种气魄感，比较柔情的词语可以使用较为纤细的斜体字。斜体字。11.3.2 界面设计的基本原则界面设计的基本原则 在线条的使用上，曲线富有柔和感，直线富有在线条的使用上，曲线富有柔和感，直线富有硬度感和锐利感。两种线条的搭配使用能够产生较为和谐的硬度感和锐利感。两种线条的搭配使用能够产生较为和谐的效果。线条中的水平线能够给人以稳定和平静的感觉，而垂效果。线条中的水平线能够给人以稳定和平静的感觉，而垂直线则具有坚忍和理智的意向。不合理地强调垂直线，界面直线则具有坚忍和理智的意向。不合理地强调垂直线，界面将会显得冷漠坚硬，使人难以接近。但合理地应用两者的对

42、将会显得冷漠坚硬，使人难以接近。但合理地应用两者的对比，能够使界面产生紧凑感，避免界面的生硬。比，能够使界面产生紧凑感，避免界面的生硬。在界面中位置的不同和变化能够产生对比。如在界面中位置的不同和变化能够产生对比。如在界面两侧放置对象，可以强调同时产生对比。在界面的四在界面两侧放置对象，可以强调同时产生对比。在界面的四个角和对角线方向上放置照片、大标题和标识号能够显出对个角和对角线方向上放置照片、大标题和标识号能够显出对比关系，使界面更加紧凑。比关系，使界面更加紧凑。在界面设计中，应该巧妙应用质感上的对比。在界面设计中，应该巧妙应用质感上的对比。界面上的元素间采用质感方式来使对比加强。如大理石

43、背景界面上的元素间采用质感方式来使对比加强。如大理石背景和蓝色天空的对比能够获得冷静坚实之外的活泼和自由的感和蓝色天空的对比能够获得冷静坚实之外的活泼和自由的感受。受。11.3.2 界面设计的基本原则界面设计的基本原则2协调原则协调原则所谓的协调，指的是界面上各所谓的协调，指的是界面上各个元素之间关系统一，结构搭配合理，个元素之间关系统一，结构搭配合理，能够构成一个和谐统一的整体。能够构成一个和谐统一的整体。在界面创建时，应首先注意界在界面创建时，应首先注意界面上的主从关系的统一，两者关系的模面上的主从关系的统一，两者关系的模糊将会造成使用者的无所适从。同时，糊将会造成使用者的无所适从。同时，

44、要注意动态对象和静态对象的有机结合要注意动态对象和静态对象的有机结合，当动态元素占用了界面的大部分，静，当动态元素占用了界面的大部分，静态元素的面积小一些，在界面四周适当态元素的面积小一些，在界面四周适当留白，能够起到强调各自独立性，吸引留白，能够起到强调各自独立性，吸引用户。用户。11.3.2 界面设计的基本原则界面设计的基本原则3平衡的原则平衡的原则界面是否平衡是界面设计中一个很重要的界面是否平衡是界面设计中一个很重要的问题。平衡并不意味着对称，对称能获得庄严感但却缺问题。平衡并不意味着对称，对称能获得庄严感但却缺乏活力，因此在界面的设计上，一般不使用对称的布局乏活力，因此在界面的设计上，

45、一般不使用对称的布局方式。方式。4趣味性原则趣味性原则界面中注意趣味性，能够起到寓教于乐的界面中注意趣味性，能够起到寓教于乐的作用。使用形象、直观和生动的界面能够增强多媒体软作用。使用形象、直观和生动的界面能够增强多媒体软件的趣味性，使操作者乐于使用，很容易达到软件设计件的趣味性，使操作者乐于使用，很容易达到软件设计的基本目的。的基本目的。总之，界面设计体现了创意和技术的融合总之，界面设计体现了创意和技术的融合，灵活使用基本设计原则，巧妙使用各种应用技巧，就，灵活使用基本设计原则，巧妙使用各种应用技巧，就能设计出高水准的界面作品，使多媒体软件发挥最大的能设计出高水准的界面作品，使多媒体软件发挥

46、最大的作用，获得最大的成功。作用，获得最大的成功。1、用爱心来做事，用感恩的心做人。2、人永远在追求快乐，永远在逃避痛苦。3、有多大的思想，才有多大的能量。4、人的能量=思想+行动速度的平方。5、励志是给人快乐，激励是给人痛苦。6、成功者绝不给自己软弱的借口。7、你只有一定要，才一定会得到。8、决心是成功的开始。9、当你没有借口的那一刻，就是你成功的开始。10、命运是可以改变的。11、成功者绝不放弃。12、成功永远属于马上行动的人。13、下定决心一定要，才是成功的关键。14、成功等于目标，其他都是这句话的注解。15、成功是一个过程，并不是一个结果。16、成功者学习别人的经验，一般人学习自己的经

47、验。17、只有第一名可以教你如何成为第一名。18、学习需要有计划。19、完全照成功者的方法来执行。20、九十九次的理论不如一次的行动来得实际。21、一个胜利者不会放弃，而一个放弃者永远不会胜利。22、信心、毅力、勇气三者具备，则天下没有做不成的事。23、如果你想得到，你就会得到，你所需要付出的只是行动。24、一个缺口的杯子，如果换一个角度看它，它仍然是圆的。25、对于每一个不利条件，都会存在与之相对应的有利条件。26、一个人的快乐，不是因为他拥有的多，而是他计较的少。27、世间成事，不求其绝对圆满，留一份不足，可得无限美好。28记住：你是你生命的船长；走自己的路，何必在乎其它。29、你要做多大

48、的事情，就该承受多大的压力。30、如果你相信自己，你可以做任何事。31、天空黑暗到一定程度，星辰就会熠熠生辉。32、时间顺流而下，生活逆水行舟。33、生活充满了选择，而生活的态度就是一切。34、人各有志，自己的路自己走。35、别人的话只能作为一种参考，是不能左右自己的。36、成功来自使我们成功的信念。37、相互了解是朋友，相互理解是知己。38、没有所谓失败，除非你不再尝试。39、有时可能别人不在乎你，但你不能不在乎自己。40、你必须成功，因为你不能失败。41、羡慕别人得到的，不如珍惜自己拥有的。42、喜欢一个人，就该让他（她）快乐。43、别把生活当作游戏，谁游戏人生，生活就惩罚谁，这不是劝诫，

49、而是-规则！44、你要求的次数愈多，你就越容易得到你要的东西，而且连带地也会得到更多乐趣。45、把气愤的心境转化为柔和，把柔和的心境转化为爱，如此，这个世间将更加完美。46、一份耕耘，一份收获，付出就有回报永不遭遇过失败，因我所碰到的都是暂时的挫折。47、心如镜，虽外景不断变化，镜面却不会转动，这就是一颗平常心，能够景转而心不转。48、每件事情都必须有一个期限，否则，大多数人都会有多少时间就花掉多少时间。49、人，其实不需要太多的东西，只要健康地活着，真诚地爱着，也不失为一种富有。50、生命之长短殊不重要，只要你活得快乐，在有生之年做些有意义的事，便已足够。51、活在忙与闲的两种境界里，才能俯仰自得，享受生活的乐趣，成就人生的意义。52、一个从来没有失败过的人，必然是一个从未尝试过什么的人。53、待人退一步，爱人宽一寸，人生自然活得很快乐。54、经验不是发生在一个人身上的事件，而是一个人如何看待发生在他身上的事。55、加倍努力，证明你想要的不是空中楼阁。胜利是在多次失败之后才姗姗而来。