多媒体艺术设计培训网设计与制作

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,多媒体艺术设计培训,北京华夏大地教育网,艺术总监 陈金良,多媒体艺术设计培训,第1讲 网站策划,第2讲 网站界面的艺术设计,第3讲 网页色彩设计,第4讲 网站建设所用到的软件,第1讲 网站策划,1.网站策划意义,2.企业网站要明确自己的营销主体,3.网站策划流程,4.如何建立企业网站？,5.网站架构,多媒体艺术设计培训,第2讲 网站界面的艺术设计,2.1设计的概念,2.2界面设计的形态,2.3基于信息的网络界面设计,第3讲,网页色彩设计,3.1 色彩基础,3.2 色系和色调,第4讲 网站建设所用到的软件,1.Photoshop 图形制作软件,2.Flash MX 动画制作软件,3.Dreamweaver 网页制作软件,第1讲 网站策划,1.网站策划意义,成功的企业网站，是,技术、艺术与营销策略,的有机组合。,网页技术,与,美术设计,都是具体的表现手法，而整个网站的,架构、层次、栏目和超联接,都是服务于企业营销战略的。,第1讲 网站策划,2.企业网站要明确自己的营销主体,一个好的企业网站，在策划时都应其,网站架构、页面风格、层级关系,等要素都要做合理的安排。,企业明确这些要点后，站点承建部门才能决定网站建设的,技术表现手段,和,艺术表现形式,，,以及网站的整体,架构、层级关系和联接关系,。,企,业,业,需,需,求,求,信,信,息,息-,企,企,业,业,网,网,站,站,整,整,体,体,策,策,划,划-,策,策,划,划,方,方,案,案,研,研,讨,讨-,策,策,划,划,方,方,案,案,定,定,位,位-,网,网,站,站,制,制,作,作,部,部,门,门,需,需,求,求,分,分,析,析-,网,网,站,站,艺,艺,术,术,设,设,计,计-,网,网,站,站,制,制,作,作-,网,网,站,站,发,发,布,布,第1讲,网,网站,策,策划,3.网,站,站策划流,程,程,策划者必,须,须了解网络媒体,特,特点。,企业网站,的,的建设，,应,应充分利,用,用网站是分帧分层的架构方,式,式。,在明确企,业,业营销主,题,题的基础,上,上，将企,业,业文化、,企,企业品牌,、,、市场定,位,位、服务,承,承诺、产,品,品优势等,企,企业传达,要,要素采用,先,先进的技术手段和高品位,的,的艺术表现,力,力，并通过,网,网页形式,表,表现出来,。,。,第1讲,网,网站,策,策划,4.如,何,何建立企,业,业网站？,片头-首页-,一,一级界面-二,级,级界面-三级,界,界面,第1讲,网,网站,策,策划,5.网,站,站架构,艺术设计,，,，,就是设计,具,具有一定,艺,艺术成分,和,和艺术意,义,义而言的,，,，它不等,同,同于艺术,创,创作（纯,艺,艺术），,而,而是非艺,术,术的或者,说,说非纯艺,术,术的物质,产,产品表现,形,形式。是,一,一种商品,化,化了的艺,术,术，它的,产,产品对象,主,主要是批,量,量生产的,工,工业化产,品,品。,第2讲,网,网站,界,界面的设,计,计,2.1,设,设计的概,念,念,2.2界,面,面设计的,形,形态,2.2.1形态的,概,概念,2.2.2形态的,内,内容,第2讲,网,网站,界,界面的设,计,计,2.2界,面,面设计的,形,形态,2.2.1形态的,概,概念,通过视觉,而,而产生的,一,一种生理,、,、心理过,程,程，它通,常,常与感觉,、,、构成、,结,结构、材,质,质、色彩,、,、空间、,功,功能等紧,密,密联系。,第2讲,网,网站,界,界面的设,计,计,2.2界,面,面设计的,形,形态,2.2.2形态的,内,内容,点、线、,面,面、是艺,术,术形态的,基,基本架构,和,和表现形,式,式。,点、线、面,第2讲,网,网站,界,界面的设,计,计,2.2界,面,面设计的,形,形态,点,在造型设,计,计中，点,是,是最简洁,的,的形，不,单,单单是几,何,何意义上,的,的两线相,交,交生成的,点,点。,造型设计,中,中，在一,定,定范围内,往,往往把产,品,品的按键,、,、旋钮、,开,开关、螺,钉,钉、指示,灯,灯、商标,、,、文字、,把,把手等元,素,素作为点,来,来处理，,以,以不同的,形,形式在空,间,间上进行,安,安排，起,到,到点缀、,呼,呼应、平,衡,衡视觉的,作,作用。,第2讲,网,网站,界,界面的设,计,计,2.2界,面,面设计的,形,形态,线,几何意义,上,上的线是,点,点运动的,轨,轨迹，没,有,有粗细，,只,只有长度,和,和方向；,而,而在造型,意,意义上，,线,线不仅具,有,有了“一,度,度空间”,，,，而且具,有,有了宽度,和,和深度。,各种线条,均,均表现为,不,不同的性,格,格与表情。,直线：给,人,人以速度,、,、紧张、,锐,锐利、明,快,快、简洁,之,之感。,细长直线,：,：纤细、,锐,锐利、流,畅,畅。,粗短直,线,线：厚,重,重、朴,实,实、雄,浑,浑、不,流,流畅。,水平线,：,：稳定,、,、沉着,、,、冷峻,。,。,垂线：,端,端正、,挺,挺拔、,温,温暖。,斜线：,散,散射、,不,不安定,、,、温暖,与,与冷峻,的,的结合,。,。,曲线：,活,活力、,动,动势、,自,自由、,丰,丰满。,第2讲,网,网站界,面,面的设,计,计,2.2,界,界面设,计,计的形,态,态,面,几何意,义,义上的,面,面是线,移,移动的,轨,轨迹，,是,是一种,平,平静的,、,、客观,的,的声音,。,。以不,同,同的线,作,作为母,线,线（素,线,线），,按,按特定,的,的方式,移,移动，,就,就可构,成,成不同,的,的二度,空,空间，,即,即面。,第2讲,网,网站界,面,面的设,计,计,网络界,面,面设计,是,是人与,计,计算机,交,交互方,式,式的演,变,变。是,随,随着计,算,算机技,术,术的发,展,展而发,展,展的。,现,现在科,技,技体现,“,“以人,为,为本”,，,，人性,化,化的设,计,计是网,络,络界面,设,设计的,核,核心，,如,如何根,据,据人的,心,心理、,生,生理特,点,点，运,用,用合理,的,的技术,手,手段，,创,创造简,单,单、友,好,好的界,面,面，是,网,网络界,面,面设计,的,的重点,网络,界,界面,具,具体,一,一点,讲,讲就,是,是网,页,页界,面,面设,计,计。,网,网页,界,界面,设,设计,与,与传,统,统平,面,面设,计,计的,关,关系,2.3.2网,页,页设,计,计的,原,原则,2.3.3网,页,页界,面,面的,布,布局,2.3.4几,种,种常,见,见的,构,构图,第2讲,网,网站,界,界面的设,计,计,2.3,基于信息,的,的网络界,面,面设计,2.3,基于信息,的,的网络界,面,面设计,2.3.1 网页,界,界面设计,与,与传统平,面,面设计的,关,关系,由于计算,机,机及其网,络,络技术的,特,特点和条,件,件，对网,页,页设计是,有,有限的。,网,网页设计,与,与传统的,平,平面设计,主,主要区别,有,有4个方,面,面：,1.,介,介质的不,同,同,传统平面,设,设计-印刷,品,品（分辨,率,率可变，,）,）,网页界面-计算,机,机显示器,（,（分辨率,低,低72线,即,即可、较,细,细的线不,易,易看见）,2.,页,页面大小,的,的限制,传统平面,设,设计-印刷,品,品尺寸可,调,调整大小,网页界面-计算,机,机显示器,（,（800,600,、,、1024768等）,3.交,互,互性区别,传统平面,设,设计-无,网页界面-联接,、,、按钮等bbs,聊,聊天室，,电,电子商务,4.多,媒,媒体功能,传统平面,设,设计-无,网页界面-文字、,声,声音、视,频,频、动画,、,、虚拟现,实,实,第2讲,网,网站,界,界面的设,计,计,2.3,基于信息,的,的网络界,面,面设计,2.3.2网页设,计,计的原则,1.,内,内容与形,式,式的统一,内容：网,站,站的信息,数,数据和文,字,字,形,形,式,式：网页,的,的设计版,式,式、构图,、,、布局、,色,色彩和设,计,计风格,无论是个,体,体还是组,织,织，设立,网,网站都应,有,有自己的,目,目的，不,同,同内容的,网,网页要求,不,不同的设,计,计形式,2.,特,特色明确,特色鲜明,的,的网站是,精,精心策划,的,的结果，,只,只有创意,新,新颖、赏,心,心悦目的,网,网页设计,才,才能在瞬,间,间打动浏,览,览者。,3.整,体,体形象统,一,一,为了保持,网,网站各网,页,页的形象,统,统一，一,般,般需要有,一,一定的同,类,类元素出,现,现在网站,的,的各级页,面,面上，一,般,般常用到,是,是企业的logo,或,或代表该,企,企业形象,的,的图片或,者,者企业理,念,念、文化,等,等。,4.层级,关,关系合理,合理化的,层,层级关系,设,设计，对,浏,浏览者提,供,供了便捷,，,，为企业,的,的信息传,达,达提供了,条,条件。力,求,求网页的,层,层级简要,化,化，以最,少,少的点击,次,次数传达,更,更多的企,业,业信息。,5.,了,了解浏览,者,者的心理,从心理学,角,角度分析,浏,浏览者心,理,理状态，,有,有助于网,站,站的网页,设,设计。,第2讲,网,网站,界,界面的设,计,计,2.3,基于信息,的,的网络界,面,面设计,2.3.3 网页,界,界面的布,局,局,在布局过,程,程中，可,以,以遵循下,列,列原则：,平衡：页面上的,文,文字、图,像,像的视觉,分,分量在上,下,下、左右,几,几个方位,基,基本相当,。,。,呼应：同一画面,元,元素，在,画,画面的不,同,同位置同,时,时出现。,对比：不同色彩,、,、图片和,线,线条等视,觉,觉元素相,互,互并置，,造,造成画面,的,的对比效,果,果。,疏密：利用画面,元,元素的疏,密,密搭配，,使,使画面产,生,生节奏感,。,。,第2讲,网,网站,界,界面的设,计,计,几种常见,的,的构图,（1）“,同,同”字型,结,结构布局,“同”字,型,型结构布,局,局，就是,指,指页面顶,部,部为主菜,单,单，下方,左,左侧为二,级,级栏目条,，,，右侧为,链,链接栏目,条,条，屏幕,中,中间显示,具,具体的内,容,容。,优点：页,面,面结构清,晰,晰，左右,对,对称，主,次,次分明，,因,因而得到,广,广泛的应,用,用。缺点,是,是太过规,矩,矩呆板，,需,需要善于,运,运用细节,色,色彩的变,化,化来调剂,。,。,（2）“,国,国”字型,结,结构布局,“国”字,型,型结构布,局,局在“同,”,”字型结,构,构布局的,基,基础上，,在,在页面下,方,方增加一,横,横条菜单,或,或广告，,其,其优点是,：,：充分利,用,用版面，,信,信息量大,，,，切换方,便,便。还有,的,的网站将,页,页面设计,成,成镜框的,样,样式，显,示,示出网站,设,设计师的,品,品味。,（3）左,右,右对称布,局,局,采取左右,分,分割屏幕,的,的方法形,成,成对称布,局,局。优点,是,是自由活,泼,泼，可显,示,示较多文,字,字和图像,。,。缺点是,两,两者有机,结,结合较为,困,困难。,（4）自,由,由式布局,自由式布,局,局打破上,述,述两种布,局,局的框架,结,结构，常,用,用于文字,信,信息量少,的,的时尚类,和,和设计类,网,网站。,第2讲,网,网站,界,界面的设,计,计,第3讲,网,网页,色,色彩设计,3.1,色,色彩基,础,础,3.2色系和色,调,调,多媒体艺,术,术设计培,训,训,3.1,色,色彩基,础,础,色彩关系,色彩的构,成,成,色彩的对,比,比,色彩的表,现,现手法,色彩的特,性,性,色彩和性,格,格,第3讲,网,网页,色,色彩设计,多媒体艺,术,术设计培,训,训,3.1,色,色彩基,础,础,色彩关系,黑白灰关,系,系,最基本的,色,色彩关系,第3讲,网,网页,色,色彩设计,多媒体艺,术,术设计培,训,训,3.1,色,色彩基,础,础,3.