多媒体界面的设计

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,第,11,章 综合实训案例,1,多媒体界面的设计,案例简介,案例制作步骤,背景知识介绍,本章主要内容：,Photoshop平面设计实用教程(第二版),清华大学出版社,11.1,案例简介,本案例介绍用,Photoshop,进行多媒体软件界面的设计和制作的方法。通过本案例的制作读者将对多媒体软件界面各个构成要素的制作过程有一个深入的了解。,11.1.1,案例设计思路,本案例制作的是一个多媒体软件的主界面。在设计时要求满足相应功能的需要，界面结构设计合理且尽可能简洁，在视觉上要求富于设计感。本案例在设计时，以蓝色作为整个界面的主色调，容易让使用者产生心灵的感应。标题适当使用特效，以便对软件的主体有清晰明确的认识，突出重点。按钮设计实用简单，但又不失美观，并且与背景搭配合理。按钮在布局上做到内部结构布局合理，简单明了，便于用户操作，方便用户灵活的运用。界面整体风格与软件本身的结合度强，使之合乎现代的时尚感和大局观。,11.1.2,案例制作说明,本案例在制作中没有使用复杂的操作。案例的制作分为背景的制作，标题的制作、按钮的制作和最终效果图的制作这几步。,1,背景制作,制作过程中使用背景素材图片来构建界面背景，这样能减小制作工作量，提高制作效率。在制作过程中使用了图层蒙板和,【,切变,】,滤镜来创建图像背景效果。同时使用矢量工具来绘制主体部分的装饰线，并通过添加,【,图层样式,】,来获得透明的水晶效果，使背景更富有现代感。,2,标题的制作,在创建标题后，分别对标题的不同文字部分创建不同的效果。对标题中的英文字符，采用了,【,马赛克,】,滤镜和,【,描边,】,特效创建边缘像素文字效果。同时对标题中的汉字字符应用,【,图层样式,】,创建水晶字体效果。,11.1.2,案例制作说明,3,按钮制作,多媒体软件中的按钮分为常态、鼠标滑过和鼠标按下这,3,种状态，为了便于按钮在具体软件中使用，按钮采用单独的文件形式制作。按钮的制作使用,【,图层样式,】,创建特效。,4,效果图的制作,效果图的制作是在制作时放置功能按钮和说明文字的过程，使用,【,移动工具,】,来移动对象进行界面的布局，使用,【,自由变换,】,命令调整对象的大小，使之符合界面的要求。,11.2 案例制作步骤,下面，详细介绍本案例的制作步骤。,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）为图层添加图层蒙板。选择【渐变工具】，渐变设置为【从背景色到前景色】，选择【径向渐变】。在图层蒙板中创建从中心向外侧的径向渐变效果，如图11-3所示。,图,11-3,在图层蒙板中创建径向渐变,制作背景,（4）将“,底,底纹.jpg” 拖放,到,到图像中来,，,，如图11-4所示。,【,【高斯模糊,】,】参数设置,，,，如图11-5所示。,应,应用滤镜，,图,图像的效果,如,如图11-6所示。,图,11-4,放置第二张,图,图片,图,11-5,【,【,高斯模糊,】,图,11-6,应用后效果,制作背景,（5）在【,切,切变】对话,框,框中对滤镜,效,效果进行设,置,置，如图11-7所示,。,。应用滤镜,，,，此时图像,的,的效果如图11-8所,示,示。,图,11-7,【,【,切变,】,对话框,图,图,11-8,应用,【,切变,】,滤镜后的图,像,像效果,制作背景,（6）为图,层,层添加图层,蒙,蒙板，在蒙,板,板中创建由,左,左上角到右,下,下角的线性,渐,渐变效果，,如,如图11-9所示。,（7）在【,波,波浪】对话,框,框中对滤镜,效,效果进行设,置,置，如图11-10所,示,示。应用滤,镜,镜，图像的,效,效果如图11-11所,示,示。,图,11-9,蒙板中渐变,效,效果,图,图,11-10,【,【,波浪,】,参数设置,图,11-11,应用后效果,制作背景,（8）选择,【,【图层1】,。,。打开【色,阶,阶】对话框,，,，在对话框,中,中调整中间,灰,灰色滑块位,置,置将图像适,当,当加亮，如,图,图11-12所示。此,时,时图像效果,如,如图11-13所示。,图,11-12,调整中间灰,色,色滑块的位,置,置,图,图,11-13,调整,色,色阶,后,后的,图,图像,效,效果,制作,背,背景,2,制,制作,装,装饰,物,物,（1,）,）选,择,择【,椭,椭圆,工,工具,】,】，,在,在选,项,项栏,中,中对,工,工具,进,进行,设,设置,，,，如,图,图11-14,所,所示,。,。使,用,用【,椭,椭圆,工,工具,】,】绘,制,制2,个,个圆,形,形路,径,径，,如,如图11-15所,示,示。,图,11-14,【,【,椭圆,工,工具,】,选项,栏,栏的,设,设置,图,图,11-15,绘制,2,个圆,形,形路,径,径,制作,背,背景,（2,）,）打,开,开路,径,径调,板,板，,单,单击,【,【路,径,径】,调,调板,下,下的,【,【将,路,路径,作,作为,选,选区,载,载入,】,】按,钮,钮，,获,获得,选,选区,，,，如,图,图11-16,所,所示,。,。选,择,择【,选,选择,】,】,【,【变,换,换选,区,区】,命,命令,，,，对,选,选区,进,进行,变,变换,，,，如,图,图11-17,所,所示,。,。,图,11-16,将路,径,径转,换,换为,选,选区,图,图,11-17,变换,选,选区,制作,背,背景,（3,）,）创,建,建一,个,个新,层,层，,选,选择,【,【渐,变,变工,具,具】,，,，打,开,开【,渐,渐变,编,编辑,器,器】,对,对渐,变,变进,行,行编,辑,辑，,选,选择,左,左侧,颜,颜色,为,为当,前,前图,像,像中,深,深蓝,色,色区,域,域颜,色,色，,中,中间,颜,颜色,为,为当,前,前图,像,像中,浅,浅蓝,色,色区,域,域颜,色,色，,右,右侧,颜,颜色,为,为白,色,色，,如,如图11-18所,示,示。,使,使用,【,【渐,变,变工,具,具】,从,从下,向,向上,在,在选,区,区创,建,建线,性,性渐,变,变效,果,果，,如,如图11-19所,示,示。,图,11-18,使用,【,渐变,编,编辑,器,器,】,编辑,渐,渐变,图,图,11-19,在选,区,区中,创,创建,线,线性,渐,渐变,效,效果,制作,背,背景,（4,）,）取,消,消选,区,区，,在,在【,图,图层,样,样式,】,】对,话,话框,中,中选,中,中【,投,投影,】,】复,选,选框,，,，对,投,投影,进,进行,设,设置,，,，如,图,图11-20,所,所示,（5,）,）选,中,中【,内,内阴,影,影】,复,复选,框,框，,对,对内,阴,阴影,效,效果,进,进行,设,设置,，,，如,图,图11-21,所,所示,。,。,图,11-20,投影,效,效果,的,的设,置,置,图,图,11-21,设置,内,内阴,影,影效,果,果,制作,背,背景,（6,）,）选,中,中【,外,外发,光,光】,复,复选,框,框，,对,对外,发,发光,效,效果,进,进行,设,设置,，,，如,图,图11-22,所,所示,。,。,（7,）,）选,中,中【,内,内发,光,光】,复,复选,框,框，,对,对内,发,发光,效,效果,进,进行,设,设置,，,，如,图,图11-23,所,所示,。,。,图,11.22,设置,外,外发,光,光效,果,果,图,图,11-23,设置,内,内发,光,光效,果,果,制作,背,背景,（8,）,）选,中,中【,斜,斜面,和,和浮,雕,雕】,复,复选,框,框，,对,对斜,面,面和,浮,浮雕,效,效果,进,进行,设,设置,，,，如,图,图11-24,所,所示,。,。选,中,中【,等,等高,线,线】,复,复选,框,框，,对,对等,高,高线,参,参数,进,进行,设,设置,，,，如,图,图11-25,所,所示,。,。,图,11-24,设置,斜,斜面,和,和浮,雕,雕效,果,果,图,图,11-25,等高,线,线参,数,数的,设,设置,制作,背,背景,（9,）,）选,中,中【,光,光泽,】,】复,选,选框,，,，同,时,时对,参,参数,进,进行,设,设置,，,，如,图,图11-26,所,所示,。,。,（10）,选,选中,【,【颜,色,色叠,加,加】,复,复选,框,框，,同,同时,对,对参,数,数进,行,行设,置,置，,如,如图11-27所,示,示。,图,11-26,【,【,光泽,】,的参,数,数设,置,置,图,图,11-27,【,【,颜色,叠,叠加,】,的参,数,数设,置,置,制作,背,背景,（,11,）完,成,成所,有,有参,数,数设,置,置后,，,，单,击,击,【,确定,】,按钮,关,关闭,【,图层,样,样式,】,对话,框,框，,此,此时,图,图像,效,效果,如,如图,11-28,所示,。,。,图,11-28,添加,图,图层,样,样式,后,后的,图,图像,效,效果,创建,标,标题,1,“,“PhotoshopCS5,”,”文,字,字效,果,果的,创,创建,（1,）,）创,建,建文,字,字PhotoshopCS5,，,，打,开,开【,字,字符,】,】调,板,板设,置,置字,符,符样,式,式，,如,如图11-29所,示,示。,（2,）,）将,文,文字,图,图层,栅,栅格,化,化。,打,打开,【,【马,赛,赛克,】,】对,话,话框,。,。在,对,对话,框,框中,对,对滤,镜,镜进,行,行设,置,置，,如,如图11-30所,示,示。,应,应用,滤,滤镜,，,，此,时,时文,字,字的,效,效果,，,，如,图,图11-31,所,所示,。,。,图,11-31,应用,滤,滤镜,后,后效,果,果,图,11-30,对话,框,框,图,11-29,设置,字,字符,样,样式,创建,标,标题,（3,）,）打,开,开【,图,图层,样,样式,】,】对,话,话框,。,。选,中,中【,描,描边,】,】复,选,选框,，,，对,其,其参,数,数进,行,行设,置,置，,如,如图11-32所,示,示。,（4,）,）,选,选,中,中,【,【,投,投,影,影,】,】,复,复,选,选,框,框,，,，,对,对,其,其,参,参,数,数,进,进,行,行,设,设,置,置,，,，,如,如,图,图11-33,所,所,示,示,。,。,此,此,时,时,文,文,字,字,效,效,果,果,如,如,图,图11-34,所,所,示,示,。,。,图,11-32,【,【,描,边,边,】,图,11-33,【,【,投,影,影,】,图,11-34,应,用,用,后,后,的,的,文,文,字,字,效,效,果,果,创,建,建,标,标,题,题,2,标,标,题,题,中,中,“,“,平,平,面,面,设,设,计,计,技,技,巧,巧,详,详,解,解,”,”,文,文,字,字,效,效,果,果,的,的,创,创,建,建,（1,）,）,创,创,建,建,文,文,字,字,“,“,平,平,面,面,设,设,计,计,技,技,巧,巧,详,详,解,解,”,”,，,，,使,使,用,用,【,【,字,字,符,符,】,】,调,调,板,板,设,设,置,置,字,字,符,符,样,样,式,式,，,，,如,如,图,图11-35,所,所,示,示,。,。,（2,）,）,选,选,【,【,投,投,影,影,】,】,、,、,【,【,内,内,发,发,光,光,】,】,、,、,【,【,斜,斜,面,面,和,和,浮,浮,雕,雕,】,】,、,、,【,【,颜,颜,色,色,叠,叠,加,加,】,】,，,，,并,并,分,分,别,别,对,对,投,投,影,影,样,样,式,式,进,进,行,行,设,设,置,置,。,。,创,创,建,建,的,的,文,文,字,字,标,标,题,题,效,效,果,果,，,，,如,如,图,图11-36,所,所,示,示,。,。,图,11-35,创,建,建,文,文,字,字,并,并,设,设,置,置,字,字,符,符,样,样,式,式,图,图,11-36,创,建,建,的,的,文,文,字,字,标,标,题,题,效,效,果,果,制,作,作,导,导,航,航,图,图,标,标,1,制,制,作,作,图,图,标,标,（1,）,）,打,打,开,开,图,图,标,标1.jpg,文,文,件,件,。,。,选,选,择,择,【,【,裁,裁,切,切,工,工,具,具,】,】,，,，,对,对,图,图,片,片,进,进,行,行,裁,裁,切,切,操,操,作,作,，,，,如,如,图,图11-37,所,所,示,示,。,。,（2,）,）,打,打,开,开,【,【,图,图,像,像,大,大,小,小,】,】,对,对,话,话,框,框,，,，,在,在,对,对,话,话,框,框,中,中,设,设,置,置,新,新,图,图,像,像,的,的,大,大,小,小,，,，,如,如,图,图11-38,所,所,示,示,。,。,单,单,击,击,【,【,确,确,定,定,】,】,按,按,钮,钮,缩,缩,小,小,图,图,像,像,，,，,如,如,图,图11-39,所,所,示,示,。,。,图,11-37,裁,切,切,素,素,材,材,图,图,片,片,图,图,11-38,【,【,图,像,像,大,大,小,小,】,设,置,置,图,11-39,缩,小,小,图,图,像,像,制,作,作,导,导,航,航,图,图,标,标,（3,）,）,使,使,用,用,【,【,移,移,动,动,工,工,具,具,】,】,将,将,缩,缩,小,小,后,后,的,的,图,图,像,像,放,放,置,置,到,到,当,当,前,前,处,处,理,理,的,的,图,图,像,像,中,中,，,，,并,并,在,在,【,【,图,图,层,层,】,】,调,调,板,板,中,中,将,将,该,该,图,图,像,像,所,所,在,在,的,的,图,图,层,层,命,命,名,名,为,为,“,“,图,图,标,标1,”,”,，,，,如,如,图,图11-40,所,所,示,示,。,。,图,11-40,放置图,像,像,制作导,航,航图标,2制,作,作装饰,线,线,（1）,创,创建一,个,个新图,层,层，命,名,名为“,图,图标1,线,线条”,。,。使用,【,【钢笔,工,工具】,创,创建矢,量,量路径,，,，如图11-41所,示,示。,（2）,在,在【画,笔,笔】调,板,板中对,画,画笔进,行,行设置,。,。这里,将,将画笔,笔,笔尖的,直,直径设,置,置为1,个,个像素,，,，同时,选,选中【,形,形状动,态,态】复,选,选框，,如,如图11-42所示,。,。,图,11-41,创建矢,量,量路径,图,图,11-42,设置画,笔,笔笔尖,制作导,航,航图标,（,3,）前景,色,色为白,色,色，,【,用画笔,描,描绘路,径,径,】,。在,【,路径,】,调板中,将,将路径,删,删除。,在,在,【,图层,】,调板中,将,将,【,图标,1,线条,】,图层放,置,置到,【,图标,1】,图层的,下,下方。,此,此时的,图,图像效,果,果，如,图,图,11-43,所示。,3,制作,其,其他图,标,标效果,：,：采用,相,相同方,式,式添加,图,图标，,并,并为图,标,标添加,装,装饰性,线,线条，,如,如图,11-44,所示。,图,11-43,绘制线,条,条,图,图,11-44,添加其,他,他图标,制作导,航,航按钮,按钮一,般,般有正,常,常状态,、,、鼠标,滑,滑过状,态,态、按,下,下状态,这,这3种,状,状态。,下,下面，,介,介绍本,实,实例中,的,的导航,按,按钮的,制,制作。,1制,作,作常态,时,时的按,钮,钮,（1）,打,打开【,新,新建】,对,对话框,，,，在【,新,新建】,对,对话框,中,中对新,建,建文档,进,进行设,置,置，如,图,图11-45,所,所示。,图,11-45,【,【,新建,】,对话框,的,的设置,制作导,航,航按钮,（2）,选,选择【,圆,圆角矩,形,形工具,】,】，在,选,选项栏,中,中对工,具,具进行,设,设置，,如,如图11-46所示,。,。使用,该,该工具,在,在新文,档,档中绘,制,制一个,圆,圆角矩,形,形，如,图,图11-47,所,所示。,（3）,将,将路径,转,转换为,选,选区，,用,用蓝色,填,填充选,区,区，如,图,图11-48,所,所示。,图,11-46,选项栏,中,中工具,的,的设置,图,11-47,绘制一,个,个圆角,矩,矩形,图,图,11-48,用蓝色,填,填充选,区,区,制作导,航,航按钮,（4）,取,取消选,区,区，为,图,图层添,加,加【投,影,影】样,式,式，其,参,参数设,置,置，如,图,图11-49,示,示。,（5）,为,为图层,添,添加【,描,描边】,图,图层样,式,式，如,图,图11-50,所,所示。,图,图像的,效,效果如,图,图11-51,所,所示。,图,11-49,设置,【,投影,】,图,11-50,设置,【,描边,】,图,11-51,图像效,果,果,制作导,航,航按钮,（6）,选,选择【,直,直排文,字,字工具,】,】，在,图,图像中,输,输入文,字,字，并,使,使用【,字,字符】,调,调板设,置,置文字,样,样式，,如,如图11-52所示,。,。,（7）,保,保存文,件,件，完,成,成第一,个,个按钮,的,的制作,。,。,图,11-52,创建文,字,字并设,置,置文字,样,样式,制作导,航,航按钮,2制,作,作鼠标,滑,滑过状,态,态按钮,（1）,在,在“按,钮,钮常态1.psd”,文,文件中,按,按Ctrl键,单,单击【,图,图层1,】,】图层,载,载入选,区,区，如,图,图11-53,所,所示。,（2）,前,前景色,设,设置为,浅,浅蓝色,（,（其颜,色,色值为R：197，G：223，B：249）,，,，使用,【,【油漆,桶,桶工具,】,】填充,选,选区，,如,如图11-54所示,。,。,图,11-53,载入选,区,区,图,图,11-54,填充选,区,区,制作导,航,航按钮,3制,作,作鼠标,按,按下状,态,态按钮,（1）,打,打开“,按,按钮常,态,态1.psd,”,”文件,。,。【图,层,层样式,】,】对话,框,框中取,消,消选中,【,【投影,】,】，如,图,图11-55,所,所示。,（2）,此,此时图,像,像的效,果,果，如,图,图11-56,所,所示。,将,将文件,保,保存为,“,“按钮,按,按下1.psd”。,至,至此，,按,按钮1,的,的3种,状,状态按,钮,钮制作,完,完成。,图,11-55,取消,【,投影,】,复选框,的,的选中,图,图,11-56,取消,【,投影,】,样式效,果,果后的,图,图像效,果,果,制作导,航,航按钮,4其,他,他按钮,的,的制作,（1）,打,打开“,按,按钮常,态,态1.psd,”,”文件,，,，在按,钮,钮标签,文,文字所,在,在的图,层,层中将,文,文字改,为,为新按,钮,钮的标,签,签文字,，,，并适,当,当调整,文,文字的,大,大小，,如,如图11-57所示,。,。,图,11-57,修改文,字,字并调,整,整文字,大,大小,制作导航,按,按钮,（2）将,文,文档保存,为,为“按钮,常,常态2.psd”,完,完成第2,个,个常态下,的,的按钮制,作,作。打开,“,“按钮滑,过,过1.psd”文,件,件，将按,钮,钮标签改,为,为“素材,与,与源文件,”,”， 同,样,样修改文,字,字大小。,（3）按,相,相同的方,法,法制作第2个按钮,按,按下状态,时,时的按钮,。,。完成第2个按钮,的,的制作。,（4）按,照,照上面介,绍,绍的方法,完,完成本案,例,例的其他2个按钮,的,的制作，,完,完成本案,例,例的所有,按,按钮的制,作,作。,制作导航,按,按钮,5圆形,水,水晶按钮,的,的制作,（1）打,开,开【新建,】,】对话框,，,，如图11-58,所,所示。将,文,文件保存,为,为“水晶,按,按钮常态.psd,”,”。,（2）在,【,【工具箱,】,】中选择,【,【椭圆选,框,框工具】,在,在图像中,绘,绘制一个,圆,圆形选区,，,，以蓝色,的,的前景色,填,填充选区,，,，如图11-59,所,所示。,图,11-58 【,新建,】,对话框的,设,设置,图,图,11-59,绘制圆形,选,选区,制作导航,按,按钮,（3）取,消,消选区。,打,打开【图,层,层样式】,对,对话框，,采小,小节中相,同,同的步骤,和,和设置为,图,图层添加,样,样式效果,。,。再为图,层,层添加一,个,个【描边,】,】效果，,其,其参数设,置,置，如图11-60所示。,（4）此,时,时获得一,个,个水晶按,钮,钮，如图11-61所示。,保,保存文件,，,，完成水,晶,晶按钮常,态,态的制作,。,。,图,11-60,增加,【,描边,】,效果,图,图,11-61,水晶球效,果,果,制作导航,按,按钮,（5）打,开,开【图层,样,样式】对,话,话框，颜,色,色全改为,绿,绿色，如,图,图11-62所示,。,。,（6）将,文,文件保存,为,为“水晶,按,按钮滑过.psd,”,”，完成,按,按钮在鼠,标,标滑过状,态,态的制作,。,。,（7）使,用,用相同的,方,方法将颜,色,色改为蓝,色,色，得到,一,一个蓝色,水,水晶按钮,，,，如图11-63,所,所示。将,按,按钮保存,为,为“水晶,按,按钮按下.psd,”,”文件。,图,11-62,制作绿色,水,水晶按钮,图,图,11-63,制作蓝色,水,水晶按钮,制作界面,效,效果图,1添加,导,导航按钮,（1）切,换,换到“多,媒,媒体界面.psd,”,”文件窗,口,口。打开,“,“按钮常,态,态1.psd”文,件,件。在【,图,图层】调,板,板只能够,选,选择最上,面,面的图层,，,，合并图,层,层，如图11-64所示。,（2）选,择,择【移动,工,工具】将,合,合并后的,图,图层拖到,“,“多媒体,界,界面.psd”文,档,档窗口中,，,，如图11-65,所,所示。,图,11-64,合并图层,图,图,11-65,拖放到文,档,档窗口中,制作界面,效,效果图,（3）按Ctrl+T键，,调,调整对象,大,大小和位,置,置。按Enter,键,键确认变,换,换操作，,添,添加按钮,后,后的图像,效,效果，如,图,图11-66所示,。,。,（4）按,相,相同的方,法,法一次添,加,加其他按,钮,钮，图像,效,效果如图11-67所示。,图,11-66,添加按钮,后,后的图像,效,效果,图,图,11-67,添加按钮,后,后的界面,效,效果,制作界面,效,效果图,2制作,退,退出按钮,效,效果,（1）打,开,开“水晶,按,按钮常态.psd,”,”文件，,将,将其拖放,到,到“多媒,体,体界面.psd”,文,文件窗口,中,中，同时,调,调整其位,置,置并将其,缩,缩小，如,图,图11-68所示,。,。,（2）输,入,入文字“,退,退出”，,使,使用【字,符,符】调板,设,设置文字,样,样式，如,图,图11-69所示,。,。,图,11-68,将水晶按,钮,钮缩小,图,图,11-69,创建文字,并,并设置字,符,符样式,制作界面,效,效果图,（3）将,水,水晶按钮,所,所在的图,层,层【图层8】复制4份，将,它,它们按图11-70所示的,位,位置放置,。,。,（4）分,别,别在这些,按,按钮后面,创,创建文字,，,，如图11-71,所,所示。,图,11-70,复制并放,置,置按钮,图,图,11-71,创建文字,制作界面,效,效果图,（5）在,【,【字符】,调,调板中调,整,整文字的,大,大小，对,文,文字和按,钮,钮的位置,进,进行适当,的,的调整，,如,如图11-72所,示,示。,（6）对,图,图像的各,个,个组成元,素,素进行适,当,当的调整,，,，效果满,意,意后，保,存,存文件，,完,完成本案,例,例的制作,。,。本案例,的,的最终效,果,果如图11-73,所,所示。,图,11-72,调整文字,和,和按钮的,位,位置,图,图,11-73,本案例的,最,最终效果,11.3,背,背景,知,知识简介,在多媒体,技,技术迅速,发,发展的今,天,天，多媒,体,体技术逐,渐,渐被广泛,应,应用到社,会,会各个领,域,域，这使,得,得创造美,的,的界面的,重,重要性和,必,必要性也,越,越来越得,到,到大家的,认,认识。将,美,美学原理,应,应用到多,媒,媒体界面,的,的设置，,能,能够加强,界,界面的气,氛,氛，增强,界,界面的吸,引,引力，突,出,出作品的,重,重点，提,高,高美感。,界面的构,成,成,界面是一,个,个窗口，,它,它是将不,同,同的元素,编,编排在一,起,起，并形,成,成一个连,贯,贯的整体,。,。从实质,上,上说，界,面,面是设计,者,者才艺、,技,技能和软,件,件人工智,能,能的体现,，,，是软件,设,设计者设,计,计理念的,体,体现。就,目,目前多媒,体,体软件来,说,说，界面,主,主要包括,两,两类：一,类,类是控制,元,元素，这,指,指的是界,面,面上的菜,单,单、按钮,、,、图标和,各,各种交互,热,热区或热,字,字。另一,类,类是内容,元,元素，这,指,指的是反,映,映有关信,息,息的界面,元,元素，如,文,文字、图,片,片、声音,和,和动画等,。,。,界面的构,成,成,好的程序,界,界面，实,际,际上是一,个,个集多种,视,视觉和听,觉,觉元素的,综,综合体，,其,其中的视,觉,觉元素占,了,了很重要,的,的地位。,界,界面的设,计,计既考虑,到,到信息的,呈,呈现，又,要,要最大限,度,度地实现,操,操作的简,单,单性。可,见,见，多媒,体,体界面的,设,设计是一,个,个思维过,程,程，也是,一,一个组织,过,过程，将,控,控制元素,和,和内容元,素,素有机结,合,合，充分,体,体现出了,创,创意、设,计,计和制作,的,的三合一,。,。,界面设计,的,的基本原,则,则,要想获得,良,良好的人,机,机界面，,需,需要注意,遵,遵循一定,的,的设计原,则,则，这些,原,原则包括,：,：对比原,则,则、协调,原,原则、平,衡,衡原则和,趣,趣味性原,则,则。,1,对比原,则,则,从平面设,计,计的角度,来,来看，对,比,比能够使,特,特征更加,鲜,鲜明，使,画,画面更富,有,有色彩和,表,表现力。,在,在界面设,计,计时，通,过,过对比可,以,以在界面,形,形成兴趣,中,中心，能,够,够将主体,从,从背景中,突,突出出来,。,。在应用,对,对比构建,界,界面时，,可,可以通过,大,大小的对,比,比来突出,界,界面布局,，,，使使用,者,者获得无,法,法忘怀的,最,最初基本,印,印象。,在界面中,使,使用明暗,对,对比，将,背,背景设置,暗,暗一些，,重,重点元素,设,设置亮一,些,些，可以,突,突出元素,在,在界面中,的,的地位。,在,在字体的,应,应用上可,以,以注重粗,细,细对比的,应,应用，如,增,增加细体,字,字，减少,粗,粗体字能,使,使界面给,人,人以明快,的,的感觉。,重,重要的文,字,字使用粗,体,体字，能,给,给人一种,气,气魄感，,比,比较柔情,的,的词语可,以,以使用较,为,为纤细的,斜,斜体字。,界面设计,的,的基本原,则,则,在线条的,使,使用上，,曲,曲线富有,柔,柔和感，,直,直线富有,硬,硬度感和,锐,锐利感。,两,两种线条,的,的搭配使,用,用能够产,生,生较为和,谐,谐的效果,。,。线条中,的,的水平线,能,能够给人,以,以稳定和,平,平静的感,觉,觉，而垂,直,直线则具,有,有坚忍和,理,理智的意,向,向。不合,理,理地强调,垂,垂直线，,界,界面将会,显,显得冷漠,坚,坚硬，使,人,人难以接,近,近。但合,理,理地应用,两,两者的对,比,比，能够,使,使界面产,生,生紧凑感,，,，避免界,面,面的生硬,。,。,在界面中,位,位置的不,同,同和变化,能,能够产生,对,对比。如,在,在界面两,侧,侧放置对,象,象，可以,强,强调同时,产,产生对比,。,。在界面,的,的四个角,和,和对角线,方,方向上放,置,置照片、,大,大标题和,标,标识号能,够,够显出对,比,比关系，,使,使界面更,加,加紧凑。,在界面设,计,计中，应,该,该巧妙应,用,用质感上,的,的对比。,界,界面上的,元,元素间采,用,用质感方,式,式来使对,比,比加强。,如,如大理石,背,背景和蓝,色,色天空的,对,对比能够,获,获得冷静,坚,坚实之外,的,的活泼和,自,自由的感,受,受。,界面设计,的,的基本原,则,则,2协调,原,原则,所谓的协,调,调，指的,是,是界面上,各,各个元素,之,之间关系,统,统一，结,构,构搭配合,理,理，能够,构,构成一个,和,和谐统一,的,的整体。,在界面创,建,建时，应,首,首先注意,界,界面上的,主,主从关系,的,的统一，,两,两者关系,的,的模糊将,会,会造成使,用,用者的无,所,所适从。,同,同时，要,注,注意动态,对,对象和静,态,态对象的,有,有机结合,，,，当动态,元,元素占用,了,了界面的,大,大部分，,静,静态元素,的,的面积小,一,一些，在,界,界面四周,适,适当留白,，,，能够起,到,到强调各,自,自独立性,，,，吸引用,户,户。,界面设计,的,的基本原,则,则,3,平衡的,原,原则,界面是否,平,平衡是界,面,面设计中,一,一个很重,要,要的问题,。,。平衡并,不,不意味着,对,对称，对,称,称能获得,庄,庄严感但,却,却缺乏活,力,力，因此,在,在界面的,设,设计上，,一,一般不使,用,用对称的,布,布局方式,。,。,4,趣味性,原,原则,界面中注,意,意趣味性,，,，能够起,到,到寓教于,乐,乐的作用,。,。使用形,象,象、直观,和,和生动的,界,界面能够,增,增强多媒,体,体软件的,趣,趣味性，,使,使操作者,乐,乐于使用,，,，很容易,达,达到软件,设,设计的基,本,本目的。,总之，界,面,面设计体,现,现了创意,和,和技术的,融,融合，灵,活,活使用基,本,本设计原,则,则，巧妙,使,使用各种,应,应用技巧,，,，就能设,计,计出高水,准,准的界面,作,作品，使,多,多媒体软,件,件发挥最,大,大的作用,，,，获得最,大,大的成功,。,。,谢 谢,1月-2320:39:3720:3920:391月-231月-2320:39,20:3920:39:371月-231月-2320:39:37,2023/1/520:39:37,9,、静,夜,夜四,无,无邻,，,，荒,居,居旧,业,业贫,。,。1月-231月-23,Thursday,January5,2023,10,、雨中黄,叶,叶树，灯,下,下白头人,。,。20:39:3820:39:3820:39,1/5/20238:39:38PM,11,、以我,独,独沈久,，,，愧君,相,相见频,。,。1月-2320:39:3820:39,Jan-2305-Jan-23,12,、故人江海,别,别，几度隔,山,山川。20:39:3820:39:3820:39,Thursday,January 5,2023,13,、乍见,翻,翻疑梦,，,，相悲,各,各问年,。,。1月-231月-2320:39:3820:39:38,January 5, 2023,14,、他乡生白,发,发，旧国见,青,青山。05 一月20238:39:38 下午20:39:381月-23,15,、比不了,得,得就不比,，,，得不到,的,的就不要,。,。一月 238:39,下,下午1月-2320:39,January5, 2023,16,、,行,行,动,动,出,出,成,成,果,果,，,，,工,工,作,作,出,出,财,财,富,富,。,。,。,。2023/1/520:39:3820:39:38,05 January2023,17,、做前，能,够,够环视四周,；,；做时，你,只,只能或者最,好,好沿着以脚,为,为起点的射,线,线向前。8:39:38 下午8:39,下,下午20:39:381月-23,9,、没,有,有失,败,败，,只,只有,暂,暂时,停,停止,成,成功,！,！。1月-231月-23,Thursday,January5,2023,10,、很多,事,事情努,力,力了未,必,必有结,果,果，但,是,是不努,力,力却什,么,么改变,也,也没有,。,。20:39:3820:39:3820:39,1/5/20238:39:38 PM,11,、成功,就,就是日,复,复一日,那,那一点,点,点小小,努,努力的,积,积累。,。,。1月-2320:39:3820:39,Jan-2305-Jan-23,12,、,世,世,间,间,成,成,事,事,，,，,不,不,求,求,其,其,绝,绝,对,对,圆,圆,满,满,，,，,留,留,一,一,份,份,不,不,足,足,，,，,可,可,得,得,无,无,限,限,完,完,美,美,。,。,。,。20:39:3820:39:3820:39,Thursday,January5,2023,13,、不知香积,寺,寺，数里入,云,云峰。1月-231月-2320:39:3820:39:38,January 5,2023,14,、意志坚,强,强的人能,把,把世界放,在,在手中像,泥,泥块一样,任,任意揉捏,。,。05 一,月,月 20238:39:38,下,下午20:39:381月-23,15,、楚塞,三,三湘接,，,，荆门,九,九派通,。,。一月238:39 下,午,午1月-2320:39,January 5, 2023,16,、少年,十,十五二,十,十时，,步,步行夺,得,得胡马,骑,骑。2023/1/520:39:3820:39:38,05January 2023,17,、空山,新,新雨后,，,，天气,晚,晚来秋,。,。8:39:38 下,午,午8:39 下,午,午20:39:381月-23,9,、杨柳散和,风,风，青山澹,吾,吾虑。1月-231月-23,Thursday,January 5,2023,10,、,阅,阅,读,读,一,一,切,切,好,好,书,书,如,如,同,同,和,和,过,过,去,去,最,最,杰,杰,出,出,的,的,人,人,谈,谈,话,话,。,。20:39:3820:39:3820:39,1/5/20238:39:38PM,11,、,越,越,是,是,没,没,有,有,本,本,领,领,的,的,就,就,越,越,加,加,自,自,命,命,不,不,凡,凡,。,。1,月,月-2320:39:3820:39,Jan-2305-Jan-23,12,、越,是,是无,能,能的,人,人，,越,越喜,欢,欢挑,剔,剔别,人,人的,错,错儿,。,。20:39:3820:39:3820:39,Thursday,January5,2023,13,、知人,者,者智，,自,自知者,明,明。胜,人,人者有,力,力，自,胜,胜者强,。,。1月-231月-2320:39:3820:39:38,January 5, 2023,14,、意志,坚,坚强的,人,人能把,世,世界放,在,在手中,像,像泥块,一,一样任,意,意揉捏,。,。05,一,一月20238:39:38 下,午,午20:39:381月-23,15,、,最,最,具,具,挑,挑,战,战,性,性,的,的,挑,挑,战,战,莫,莫,过,过,于,于,提,提,升,升,自,自,我,我,。,。,。,。一,月,月238:39,下,下,午,午1,月,月-2320:39,January5,2023,16,、业余,生,生活要,有,有意义,，,，不要,越,越轨。2023/1/520:39:3820:39:38,05January 2023,17,、一,个,个人,即,即使,已,已登,上,上顶,峰,峰，,也,也仍,要,要自,强,强不,息,息。8:39:38,下,下午8:39,下,下,午,午20:39:381月-23,MOMODA POWERPOINT,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id urna blandit, eleifend nulla ac, fringilla purus. Nulla iaculis tempor felis ut cursus.,感谢,您,您的,下,下载,观,观看,专家,告,告诉,