行业应用案例1多媒体界面的设计.ppt
第11章 Photoshop CS3行业应用案例1多媒体界面的设计 随着计算机的普及，各种多媒体教学软件也逐渐走向普及，本章将介绍一个多媒体软件的界面制作过程，主要包括以下内容。,Photoshop平面设计实用教程 清华大学出版社,案例简介 案例制作步骤 背景知识介绍,11.1 案例简介 本实例介绍一个多媒体界面的设计制作过程。通过本实例的制作读者将对多媒体软件界面各个构成要素的制作过程有一个深入的了解。11.1.1 案例设计思路 本实例制作的是一个多媒体教学软件的主界面。本实例在设计时要求满足功能的需要，界面结构设计合理且尽可能简洁，在视觉上要求富于设计感。本实例在设计时，以蓝色作为整个界面的主色调，容易让使用者产生心灵的感应。标题适当使用特效，以给对软件的主体有清晰明确地认识，突出重点。按钮设计实用简单，但又不失美观，并且与背景搭配合理。按钮在布局上做到内部结构布局合理，简单明了，便于用户操作，方便用户灵活的运用。界面整体风格与软件本身的结合度强，使之合乎现代的时尚感和大局观。,Photoshop平面设计实用教程 清华大学出版社,11.1.2 案例制作说明 本实例在制作中没有使用复杂的操作。实例的制作分为背景的制作，标题的制作、按钮的制作和最终效果图的制作这几步。1背景制作 制作过程中使用背景素材图片来构建界面背景，这样能减小制作工作量，提高制作效率。在制作过程中使用了图层蒙版和【切变】滤镜来创建图像背景效果。同时使用是矢量工具来绘制主体部分的装饰线，并通过添加【图层样式】来获得透明的水晶效果，使背景更富有现代感。2标题的制作 在创建标题后，分别对标题的不同文字部分创建不同的效果。对标题中的英文字符，采用了【马赛克】滤镜和【描边】特效创建边缘像素文字效果。同时对标题中的汉字字符应用【图层样式】创建水晶字体效果。3按钮制作 多媒体软件中的按钮分为常态、鼠标滑过和鼠标按下这3种状态，为了便于按钮在具体软件中使用，这3中状态的按钮采用单独的文件形式制作。按钮的制作使用【图层样式】来创建特效。4效果图的制作 效果图的制作是将制作是放置功能按钮和说明文字的过程，制作过程中使用【移动工具】来移动对象进行界面的布局，使用【自由变换】命令调整对象的大小，使之符合界面的要求,Photoshop平面设计实用教程 清华大学出版社,Photoshop平面设计实用教程 清华大学出版社,11.2 案例制作步骤 下面，详细介绍本案例的制作步骤。11.2.1 制作背景 1添加并处理素材图片,图11-13 调整色阶后的图像效果,2制作装饰物,图11-28 添加图层样式后的图像效果,11.2.2 创建标题 下面介绍界面标题文字及其效果的创建。1“Photoshop CS3”文字效果的创建 2标题中“平面设计技巧详解”文字效果的创建,Photoshop平面设计实用教程 清华大学出版社,图11-34 应用图层样式后的文字效果,图11-36 创建的文字标题效果,11.2.3 制作导航图标 下面在背景上添加导航图标。1制作图标 2制作装饰线 3制作其他图标效果,Photoshop平面设计实用教程 清华大学出版社,图11-40 放置图像,图11-43 绘制线条,图11-44 添加其他图标,11.2.4 制作导航按钮 在对媒体软件界面中的一个重要元素就是按钮，按钮的作用是导航，将程序带动需要的位置。按钮一般有正常状态、鼠标滑过状态、按下状态这3种状态。下面，介绍本实例中的导航按钮的制作。1制作常态时的按钮,Photoshop平面设计实用教程 清华大学出版社,图11-52 创建文字并设置文字样式,2制作鼠标滑过状态按钮,3、其他按钮的制作,4、圆形水晶按钮的制作,图11-63 制作蓝色水晶按钮,图11-62 制作绿色水晶按钮,图11-61 水晶球效果,图11-57 修改文字并调整文字大小,图11-56 取消【投影】样式效果后的图像效果,Photoshop平面设计实用教程 清华大学出版社,11.2.5 制作界面效果图 为了展示程序界面在程序中的效果，这里制作出主界面中添加各个按钮后的效果图。1添加导航按钮,图11-67 添加按钮后的界面效果,2制作退出按钮效果,图11-74 本实例的最终效果,11.3 背景知识简介 在多媒体技术迅速发展的今天，多媒体技术逐渐被广泛应用到社会各个领域，这使得创造美的界面的重要性和必要性也越来越得到大家的认识。将美学原理应用到多媒体界面的设置，能够加强界面的气氛，增强界面的吸引力，突出作品的重点，提高美感。11.3.1 界面的构成 界面是一个窗口，它是将不同的元素编排在一起，并形成一个连贯的整体。从实质上说，界面是设计者才艺、技能和软件人工智能的体现，是软件设计者的设计理念的体现。就目前的多媒体软件来说，界面主要包括两类：一类是控制元素，这指的是界面上的菜单、按钮、图标和各种交互热区或热字。另一类是内容元素，这指的是反映有关信息的界面元素，如文字、图片、声音和动画等。好的程序界面，实际上是一个集多种视觉和听觉元素综合体，其中的视觉元素占了很重要的地位。界面的设计即考虑到信息的呈现，又要最大限度的实现操作的简单性。可见，多媒体界面的设计是一个思维过程，也是一个组织过程，将控制元素和内容元素有机结合，充分体现出了创意、设计和制作的三合一。,Photoshop平面设计实用教程 清华大学出版社,Photoshop平面设计实用教程 清华大学出版社,11.3.2 界面设计的基本原则 要想获得良好的人机界面，需要注意遵循的一定的设计原则，这些原则原则包括：对比原则、协调原则和趣味原则。1对比原则 2协调原则 3平衡的原则 4趣味性原则,
