《多媒体界面的设计课件.ppt》由会员分享，可在线阅读，更多相关《多媒体界面的设计课件.ppt（52页珍藏版）》请在三一办公上搜索。
1、第11章 综合实训案例1多媒体界面的设计,案例简介案例制作步骤背景知识介绍,本章主要内容：,Photoshop平面设计实用教程(第二版)清华大学出版社,11.1 案例简介,本案例介绍用Photoshop进行多媒体软件界面的设计和制作的方法。通过本案例的制作读者将对多媒体软件界面各个构成要素的制作过程有一个深入的了解。,11.1.1 案例设计思路,本案例制作的是一个多媒体软件的主界面。在设计时要求满足相应功能的需要，界面结构设计合理且尽可能简洁，在视觉上要求富于设计感。本案例在设计时，以蓝色作为整个界面的主色调，容易让使用者产生心灵的感应。标题适当使用特效，以便对软件的主体有清晰明确的认识，突出
2、重点。按钮设计实用简单，但又不失美观，并且与背景搭配合理。按钮在布局上做到内部结构布局合理，简单明了，便于用户操作，方便用户灵活的运用。界面整体风格与软件本身的结合度强，使之合乎现代的时尚感和大局观。,11.1.2 案例制作说明,本案例在制作中没有使用复杂的操作。案例的制作分为背景的制作，标题的制作、按钮的制作和最终效果图的制作这几步。1背景制作制作过程中使用背景素材图片来构建界面背景，这样能减小制作工作量，提高制作效率。在制作过程中使用了图层蒙板和【切变】滤镜来创建图像背景效果。同时使用矢量工具来绘制主体部分的装饰线，并通过添加【图层样式】来获得透明的水晶效果，使背景更富有现代感。2标题的制
3、作在创建标题后，分别对标题的不同文字部分创建不同的效果。对标题中的英文字符，采用了【马赛克】滤镜和【描边】特效创建边缘像素文字效果。同时对标题中的汉字字符应用【图层样式】创建水晶字体效果。,11.1.2 案例制作说明,3按钮制作多媒体软件中的按钮分为常态、鼠标滑过和鼠标按下这3种状态，为了便于按钮在具体软件中使用，按钮采用单独的文件形式制作。按钮的制作使用【图层样式】创建特效。4效果图的制作效果图的制作是在制作时放置功能按钮和说明文字的过程，使用【移动工具】来移动对象进行界面的布局，使用【自由变换】命令调整对象的大小，使之符合界面的要求。,11.2 案例制作步骤,下面，详细介绍本案例的制作步骤
4、。,11.2.1 制作背景,背景的制作分为两步完成，先为作品添加素材并应用滤镜对素材进行处理。然后，使用路径工具创建背景装饰并为其添加图层样式效果。,11.2.1 制作背景,1添加并处理素材图片（1）打开【新建】对话框，设置如图11-1所示。将新文档保存为“多媒体界面.psd”文件。（2）打开水滴.jpg和底纹.jpg文件。将“水滴.jpg”拖放到新文档中，如图11-2所示。,图11-1【新建】对话框的设置 图11-2 放置素材图片,11.2.1 制作背景,（3）为图层添加图层蒙板。选择【渐变工具】，渐变设置为【从背景色到前景色】，选择【径向渐变】。在图层蒙板中创建从中心向外侧的径向渐变效果，
5、如图11-3所示。,图11-3 在图层蒙板中创建径向渐变,11.2.1 制作背景,（4）将“底纹.jpg”拖放到图像中来，如图11-4所示。【高斯模糊】参数设置，如图11-5所示。应用滤镜，图像的效果如图11-6所示。,图11-4 放置第二张图片,图11-5【高斯模糊】,图11-6 应用后效果,11.2.1 制作背景,（5）在【切变】对话框中对滤镜效果进行设置，如图11-7所示。应用滤镜，此时图像的效果如图11-8所示。,图11-7【切变】对话框 图11-8 应用【切变】滤镜后的图像效果,11.2.1 制作背景,（6）为图层添加图层蒙板，在蒙板中创建由左上角到右下角的线性渐变效果，如图11-9
6、所示。（7）在【波浪】对话框中对滤镜效果进行设置，如图11-10所示。应用滤镜，图像的效果如图11-11所示。,图11-9 蒙板中渐变效果 图11-10【波浪】参数设置,图11-11 应用后效果,11.2.1 制作背景,（8）选择【图层1】。打开【色阶】对话框，在对话框中调整中间灰色滑块位置将图像适当加亮，如图11-12所示。此时图像效果如图11-13所示。,图11-12 调整中间灰色滑块的位置 图11-13 调整色阶后的图像效果,11.2.1 制作背景,2制作装饰物（1）选择【椭圆工具】，在选项栏中对工具进行设置，如图11-14所示。使用【椭圆工具】绘制2个圆形路径，如图11-15所示。,图
7、11-14【椭圆工具】选项栏的设置 图11-15 绘制2个圆形路径,11.2.1 制作背景,（2）打开路径调板，单击【路径】调板下的【将路径作为选区载入】按钮，获得选区，如图11-16所示。选择【选择】【变换选区】命令，对选区进行变换，如图11-17所示。,图11-16 将路径转换为选区 图11-17 变换选区,11.2.1 制作背景,（3）创建一个新层，选择【渐变工具】，打开【渐变编辑器】对渐变进行编辑，选择左侧颜色为当前图像中深蓝色区域颜色，中间颜色为当前图像中浅蓝色区域颜色，右侧颜色为白色，如图11-18所示。使用【渐变工具】从下向上在选区创建线性渐变效果，如图11-19所示。,图11-
8、18 使用【渐变编辑器】编辑渐变 图11-19 在选区中创建线性渐变效果,11.2.1 制作背景,（4）取消选区，在【图层样式】对话框中选中【投影】复选框，对投影进行设置，如图11-20所示（5）选中【内阴影】复选框，对内阴影效果进行设置，如图11-21所示。,图11-20 投影效果的设置 图11-21 设置内阴影效果,11.2.1 制作背景,（6）选中【外发光】复选框，对外发光效果进行设置，如图11-22所示。（7）选中【内发光】复选框，对内发光效果进行设置，如图11-23所示。,图11.22 设置外发光效果 图11-23 设置内发光效果,11.2.1 制作背景,（8）选中【斜面和浮雕】复选
9、框，对斜面和浮雕效果进行设置，如图11-24所示。选中【等高线】复选框，对等高线参数进行设置，如图11-25所示。,图11-24 设置斜面和浮雕效果 图11-25 等高线参数的设置,11.2.1 制作背景,（9）选中【光泽】复选框，同时对参数进行设置，如图11-26所示。（10）选中【颜色叠加】复选框，同时对参数进行设置，如图11-27所示。,图11-26【光泽】的参数设置 图11-27【颜色叠加】的参数设置,11.2.1 制作背景,（11）完成所有参数设置后，单击【确定】按钮关闭【图层样式】对话框，此时图像效果如图11-28所示。,图11-28 添加图层样式后的图像效果,11.2.2 创建标
10、题,1“Photoshop CS5”文字效果的创建（1）创建文字Photoshop CS5，打开【字符】调板设置字符样式，如图11-29所示。（2）将文字图层栅格化。打开【马赛克】对话框。在对话框中对滤镜进行设置，如图11-30所示。应用滤镜，此时文字的效果，如图11-31所示。,图11-31 应用滤镜后效果,图11-30 对话框,图11-29 设置字符样式,11.2.2 创建标题,（3）打开【图层样式】对话框。选中【描边】复选框，对其参数进行设置，如图11-32所示。（4）选中【投影】复选框，对其参数进行设置，如图11-33所示。此时文字效果如图11-34所示。,图11-32【描边】,图11
11、-33【投影】,图11-34 应用后的文字效果,11.2.2 创建标题,2标题中“平面设计技巧详解”文字效果的创建（1）创建文字“平面设计技巧详解”，使用【字符】调板设置字符样式，如图11-35所示。（2）选【投影】、【内发光】、【斜面和浮雕】、【颜色叠加】，并分别对投影样式进行设置。创建的文字标题效果，如图11-36所示。,图11-35 创建文字并设置字符样式 图11-36 创建的文字标题效果,11.2.3 制作导航图标,1制作图标（1）打开图标1.jpg文件。选择【裁切工具】，对图片进行裁切操作，如图11-37所示。（2）打开【图像大小】对话框，在对话框中设置新图像的大小，如图11-38所
12、示。单击【确定】按钮缩小图像，如图11-39所示。,图11-37 裁切素材图片 图11-38【图像大小】设置,图11-39 缩小图像,11.2.3 制作导航图标,（3）使用【移动工具】将缩小后的图像放置到当前处理的图像中，并在【图层】调板中将该图像所在的图层命名为“图标1”，如图11-40所示。,图11-40 放置图像,11.2.3 制作导航图标,2制作装饰线（1）创建一个新图层，命名为“图标1线条”。使用【钢笔工具】创建矢量路径，如图11-41所示。（2）在【画笔】调板中对画笔进行设置。这里将画笔笔尖的直径设置为1个像素，同时选中【形状动态】复选框，如图11-42所示。,图11-41 创建矢
13、量路径 图11-42 设置画笔笔尖,11.2.3 制作导航图标,（3）前景色为白色，【用画笔描绘路径】。在【路径】调板中将路径删除。在【图层】调板中将【图标1线条】图层放置到【图标1】图层的下方。此时的图像效果，如图11-43所示。3制作其他图标效果：采用相同方式添加图标，并为图标添加装饰性线条，如图11-44所示。,图11-43 绘制线条 图11-44 添加其他图标,11.2.4 制作导航按钮,按钮一般有正常状态、鼠标滑过状态、按下状态这3种状态。下面，介绍本实例中的导航按钮的制作。1制作常态时的按钮（1）打开【新建】对话框，在【新建】对话框中对新建文档进行设置，如图11-45所示。,图11
14、-45【新建】对话框的设置,11.2.4 制作导航按钮,（2）选择【圆角矩形工具】，在选项栏中对工具进行设置，如图11-46所示。使用该工具在新文档中绘制一个圆角矩形，如图11-47所示。（3）将路径转换为选区，用蓝色填充选区，如图11-48所示。,图11-46 选项栏中工具的设置,图11-47 绘制一个圆角矩形 图11-48 用蓝色填充选区,11.2.4 制作导航按钮,（4）取消选区，为图层添加【投影】样式，其参数设置，如图11-49示。（5）为图层添加【描边】图层样式，如图11-50所示。图像的效果如图11-51所示。,图11-49 设置【投影】图11-50 设置【描边】,图11-51 图
15、像效果,11.2.4 制作导航按钮,（6）选择【直排文字工具】，在图像中输入文字，并使用【字符】调板设置文字样式，如图11-52所示。（7）保存文件，完成第一个按钮的制作。,图11-52 创建文字并设置文字样式,11.2.4 制作导航按钮,2制作鼠标滑过状态按钮（1）在“按钮常态1.psd”文件中按Ctrl键单击【图层1】图层载入选区，如图11-53所示。（2）前景色设置为浅蓝色（其颜色值为R：197，G：223，B：249），使用【油漆桶工具】填充选区，如图11-54所示。,图11-53 载入选区 图11-54 填充选区,11.2.4 制作导航按钮,3制作鼠标按下状态按钮（1）打开“按钮常态
16、1.psd”文件。【图层样式】对话框中取消选中【投影】，如图11-55所示。（2）此时图像的效果，如图11-56所示。将文件保存为“按钮按下1.psd”。至此，按钮1的3种状态按钮制作完成。,图11-55 取消【投影】复选框的选中 图11-56 取消【投影】样式效果后的图像效果,11.2.4 制作导航按钮,4其他按钮的制作（1）打开“按钮常态1.psd”文件，在按钮标签文字所在的图层中将文字改为新按钮的标签文字，并适当调整文字的大小，如图11-57所示。,图11-57 修改文字并调整文字大小,11.2.4 制作导航按钮,（2）将文档保存为“按钮常态2.psd”完成第2个常态下的按钮制作。打开“
17、按钮滑过1.psd”文件，将按钮标签改为“素材与源文件”，同样修改文字大小。（3）按相同的方法制作第2个按钮按下状态时的按钮。完成第2个按钮的制作。（4）按照上面介绍的方法完成本案例的其他2个按钮的制作，完成本案例的所有按钮的制作。,11.2.4 制作导航按钮,5圆形水晶按钮的制作（1）打开【新建】对话框，如图11-58所示。将文件保存为“水晶按钮常态.psd”。（2）在【工具箱】中选择【椭圆选框工具】在图像中绘制一个圆形选区，以蓝色的前景色填充选区，如图11-59所示。,图11-58【新建】对话框的设置 图11-59 绘制圆形选区,11.2.4 制作导航按钮,（3）取消选区。打开【图层样式】
18、对话框，采用11.2.2小节中相同的步骤和设置为图层添加样式效果。再为图层添加一个【描边】效果，其参数设置，如图11-60所示。（4）此时获得一个水晶按钮，如图11-61所示。保存文件，完成水晶按钮常态的制作。,图11-60 增加【描边】效果 图11-61 水晶球效果,11.2.4 制作导航按钮,（5）打开【图层样式】对话框，颜色全改为绿色，如图11-62所示。（6）将文件保存为“水晶按钮滑过.psd”，完成按钮在鼠标滑过状态的制作。（7）使用相同的方法将颜色改为蓝色，得到一个蓝色水晶按钮，如图11-63所示。将按钮保存为“水晶按钮按下.psd”文件。,图11-62 制作绿色水晶按钮 图11-
19、63 制作蓝色水晶按钮,11.2.5 制作界面效果图,1添加导航按钮（1）切换到“多媒体界面.psd”文件窗口。打开“按钮常态1.psd”文件。在【图层】调板只能够选择最上面的图层，合并图层，如图11-64所示。（2）选择【移动工具】将合并后的图层拖到“多媒体界面.psd”文档窗口中，如图11-65所示。,图11-64 合并图层 图11-65 拖放到文档窗口中,11.2.5 制作界面效果图,（3）按Ctrl+T键，调整对象大小和位置。按Enter键确认变换操作，添加按钮后的图像效果，如图11-66所示。（4）按相同的方法一次添加其他按钮，图像效果如图11-67所示。,图11-66 添加按钮后的
20、图像效果 图11-67 添加按钮后的界面效果,11.2.5 制作界面效果图,2制作退出按钮效果（1）打开“水晶按钮常态.psd”文件，将其拖放到“多媒体界面.psd”文件窗口中，同时调整其位置并将其缩小，如图11-68所示。（2）输入文字“退出”，使用【字符】调板设置文字样式，如图11-69所示。,图11-68 将水晶按钮缩小 图11-69 创建文字并设置字符样式,11.2.5 制作界面效果图,（3）将水晶按钮所在的图层【图层8】复制4份，将它们按图11-70所示的位置放置。（4）分别在这些按钮后面创建文字，如图11-71所示。,图11-70 复制并放置按钮 图11-71 创建文字,11.2.
21、5 制作界面效果图,（5）在【字符】调板中调整文字的大小，对文字和按钮的位置进行适当的调整，如图11-72所示。（6）对图像的各个组成元素进行适当的调整，效果满意后，保存文件，完成本案例的制作。本案例的最终效果如图11-73所示。,图11-72 调整文字和按钮的位置 图11-73 本案例的最终效果,11.3 背景知识简介,在多媒体技术迅速发展的今天，多媒体技术逐渐被广泛应用到社会各个领域，这使得创造美的界面的重要性和必要性也越来越得到大家的认识。将美学原理应用到多媒体界面的设置，能够加强界面的气氛，增强界面的吸引力，突出作品的重点，提高美感。,11.3.1 界面的构成,界面是一个窗口，它是将不
22、同的元素编排在一起，并形成一个连贯的整体。从实质上说，界面是设计者才艺、技能和软件人工智能的体现，是软件设计者设计理念的体现。就目前多媒体软件来说，界面主要包括两类：一类是控制元素，这指的是界面上的菜单、按钮、图标和各种交互热区或热字。另一类是内容元素，这指的是反映有关信息的界面元素，如文字、图片、声音和动画等。,11.3.1 界面的构成,好的程序界面，实际上是一个集多种视觉和听觉元素的综合体，其中的视觉元素占了很重要的地位。界面的设计既考虑到信息的呈现，又要最大限度地实现操作的简单性。可见，多媒体界面的设计是一个思维过程，也是一个组织过程，将控制元素和内容元素有机结合，充分体现出了创意、设计
23、和制作的三合一。,11.3.2 界面设计的基本原则,要想获得良好的人机界面，需要注意遵循一定的设计原则，这些原则包括：对比原则、协调原则、平衡原则和趣味性原则。1对比原则从平面设计的角度来看，对比能够使特征更加鲜明，使画面更富有色彩和表现力。在界面设计时，通过对比可以在界面形成兴趣中心，能够将主体从背景中突出出来。在应用对比构建界面时，可以通过大小的对比来突出界面布局，使使用者获得无法忘怀的最初基本印象。在界面中使用明暗对比，将背景设置暗一些，重点元素设置亮一些，可以突出元素在界面中的地位。在字体的应用上可以注重粗细对比的应用，如增加细体字，减少粗体字能使界面给人以明快的感觉。重要的文字使用粗
24、体字，能给人一种气魄感，比较柔情的词语可以使用较为纤细的斜体字。,11.3.2 界面设计的基本原则,在线条的使用上，曲线富有柔和感，直线富有硬度感和锐利感。两种线条的搭配使用能够产生较为和谐的效果。线条中的水平线能够给人以稳定和平静的感觉，而垂直线则具有坚忍和理智的意向。不合理地强调垂直线，界面将会显得冷漠坚硬，使人难以接近。但合理地应用两者的对比，能够使界面产生紧凑感，避免界面的生硬。在界面中位置的不同和变化能够产生对比。如在界面两侧放置对象，可以强调同时产生对比。在界面的四个角和对角线方向上放置照片、大标题和标识号能够显出对比关系，使界面更加紧凑。在界面设计中，应该巧妙应用质感上的对比。界
25、面上的元素间采用质感方式来使对比加强。如大理石背景和蓝色天空的对比能够获得冷静坚实之外的活泼和自由的感受。,11.3.2 界面设计的基本原则,2协调原则所谓的协调，指的是界面上各个元素之间关系统一，结构搭配合理，能够构成一个和谐统一的整体。在界面创建时，应首先注意界面上的主从关系的统一，两者关系的模糊将会造成使用者的无所适从。同时，要注意动态对象和静态对象的有机结合，当动态元素占用了界面的大部分，静态元素的面积小一些，在界面四周适当留白，能够起到强调各自独立性，吸引用户。,11.3.2 界面设计的基本原则,3平衡的原则界面是否平衡是界面设计中一个很重要的问题。平衡并不意味着对称，对称能获得庄严
26、感但却缺乏活力，因此在界面的设计上，一般不使用对称的布局方式。4趣味性原则界面中注意趣味性，能够起到寓教于乐的作用。使用形象、直观和生动的界面能够增强多媒体软件的趣味性，使操作者乐于使用，很容易达到软件设计的基本目的。总之，界面设计体现了创意和技术的融合，灵活使用基本设计原则，巧妙使用各种应用技巧，就能设计出高水准的界面作品，使多媒体软件发挥最大的作用，获得最大的成功。,1、用爱心来做事，用感恩的心做人。2、人永远在追求快乐，永远在逃避痛苦。3、有多大的思想，才有多大的能量。4、人的能量=思想+行动速度的平方。5、励志是给人快乐，激励是给人痛苦。6、成功者绝不给自己软弱的借口。7、你只有一定要
27、，才一定会得到。8、决心是成功的开始。9、当你没有借口的那一刻，就是你成功的开始。10、命运是可以改变的。11、成功者绝不放弃。12、成功永远属于马上行动的人。13、下定决心一定要，才是成功的关键。14、成功等于目标，其他都是这句话的注解。15、成功是一个过程，并不是一个结果。16、成功者学习别人的经验，一般人学习自己的经验。17、只有第一名可以教你如何成为第一名。18、学习需要有计划。19、完全照成功者的方法来执行。20、九十九次的理论不如一次的行动来得实际。21、一个胜利者不会放弃，而一个放弃者永远不会胜利。22、信心、毅力、勇气三者具备，则天下没有做不成的事。23、如果你想得到，你就会得
28、到，你所需要付出的只是行动。24、一个缺口的杯子，如果换一个角度看它，它仍然是圆的。25、对于每一个不利条件，都会存在与之相对应的有利条件。26、一个人的快乐，不是因为他拥有的多，而是他计较的少。27、世间成事，不求其绝对圆满，留一份不足，可得无限美好。28记住：你是你生命的船长；走自己的路，何必在乎其它。29、你要做多大的事情，就该承受多大的压力。30、如果你相信自己，你可以做任何事。31、天空黑暗到一定程度，星辰就会熠熠生辉。32、时间顺流而下，生活逆水行舟。33、生活充满了选择，而生活的态度就是一切。34、人各有志，自己的路自己走。35、别人的话只能作为一种参考，是不能左右自己的。36、
29、成功来自使我们成功的信念。37、相互了解是朋友，相互理解是知己。38、没有所谓失败，除非你不再尝试。39、有时可能别人不在乎你，但你不能不在乎自己。40、你必须成功，因为你不能失败。41、羡慕别人得到的，不如珍惜自己拥有的。42、喜欢一个人，就该让他（她）快乐。43、别把生活当作游戏，谁游戏人生，生活就惩罚谁，这不是劝诫，而是-规则！44、你要求的次数愈多，你就越容易得到你要的东西，而且连带地也会得到更多乐趣。45、把气愤的心境转化为柔和，把柔和的心境转化为爱，如此，这个世间将更加完美。46、一份耕耘，一份收获，付出就有回报永不遭遇过失败，因我所碰到的都是暂时的挫折。47、心如镜，虽外景不断变
30、化，镜面却不会转动，这就是一颗平常心，能够景转而心不转。48、每件事情都必须有一个期限，否则，大多数人都会有多少时间就花掉多少时间。49、人，其实不需要太多的东西，只要健康地活着，真诚地爱着，也不失为一种富有。50、生命之长短殊不重要，只要你活得快乐，在有生之年做些有意义的事，便已足够。51、活在忙与闲的两种境界里，才能俯仰自得，享受生活的乐趣，成就人生的意义。52、一个从来没有失败过的人，必然是一个从未尝试过什么的人。53、待人退一步，爱人宽一寸，人生自然活得很快乐。54、经验不是发生在一个人身上的事件，而是一个人如何看待发生在他身上的事。55、加倍努力，证明你想要的不是空中楼阁。胜利是在多次失败之后才姗姗而来。,
