网页美工设计模块二网页色彩规划.pptxVIP

网页美工设计模块二网页色彩规划 第1页/共77页 １．认识色彩并区分色彩角色 ２．理解色彩情感及运用相关知识确立主色调 通过学习，学生能够： 1．能区分网页中不同色彩的色彩角色 2．能运用色彩情感知识确立主色调 第2页/共77页 新课导入 　　我们生活的世界充满了各种各样的色彩，色彩与人的情感有着密切的联系，不同的色彩被人们赋予不同的意义，表达特定的情感。运用色彩时，除了色彩与色调本身的美感外，也通过色彩传递着相应的色彩联想与情感象征。 　　如图所示，我们的生活中充满了不同色彩感觉的事物： 　　观察四张图片并思考：1.几张图片中的色彩带给你什么样的感受 2.生活中哪些颜色给你留下了深刻的印象 第3页/共77页 目标展示  主色调 辅助色 点睛色 背景色 一、色彩角色：以下图为例进行区分网页色彩角色的分析。 第4页/共77页 目标展示 二、色彩情感：如下图以白色为例，用不同主色调的网页帮助大家理解色彩情感在网页中的运用。 第5页/共77页 任务分解 一、色彩角色 　　网页中色彩的角色主要是根据其面积多少来区分主次关系，如果不同的颜色使用面积相当，会感觉页面主次不分、没有整体感；当使用颜色过多，会感觉页面过于琐碎、花俏，网页会显得轻浮而缺乏内涵。 　　为网页配色的时候，应根据主题内容主次需要，选择不同的颜色发挥不同的功能，让其扮演不同的角色，根据色彩的视觉主次关系分为： 　　1．主色调 　　在网页中面积最大，出现次数最多，贯穿网页中所有页面的色彩。主色调好似乐曲中的主旋律，在创造特定的气氛与意境上发挥主导作用，是整个网站的色彩表现力的灵魂。在描述网页是什么色调时也是特指其主色调。 　　2．辅助色 　　仅次于主色调视觉面积的色彩，是烘托、支撑主色调，起到调和画面色彩关系，融合画面色彩感觉的色彩。 　　3．点睛色 　　在小范围内用强烈的颜色来突出效果、活跃气氛，使页面更加鲜明生动的色彩。主要使用于占用范围较小的按钮、标签等。同一个画面的点睛色可能是一种色彩，也可能是多种色彩，点睛色的数量根据画面需要而定。 　　4．背景色 　　用于网站背景的颜色，起到协调、衬托整体色彩关系的作用。有的背景色作用不大，仅仅起到陪衬的作用，在画面中显露的面积很小，但有些网页的背景色对画面的影响很大，既是背景，也是主色调。 第6页/共77页 任务分解 一、色彩角色 　　图2-1-5使用了多种色彩，让我们来区分其中的色彩究竟扮演何种角色：  主色调 辅助色 点睛色 背景色 第7页/共77页 任务分解 二、色彩情感 　　1．白色 　　白色让人联想到： 　　正面的：纯粹、纯洁、洁净、正直、信赖、神圣、和平、单纯、成熟、优雅； 　　负面的：单调、恐惧、无力。 　　白色象征着纯洁、神圣、明快、虚无、贫乏。纯白色会带给别人寒冷、严峻的感觉。白色通常需和其他色彩搭配使用，白色是万能色，可以和任何颜色作搭配。 　　白色是所有色彩中亮度最高的，给人一种轻快的感觉。白色能使和它搭配的色彩显得更加鲜明、突出，可以让明亮的色彩更柔和、优雅。白色与暖色搭配时可以增添华丽的感觉,与冷色搭配时可以产生清爽轻快的感觉。白色常用来表达明亮、洁净的感觉，如清洁用品、卫生用品、家居用品等，如图所示，在网页设计中白色多用做背景色与过度色。 第8页/共77页 任务分解 二、色彩情感 　　2．灰色 　　灰色让人联想到： 　　正面的：知识、安定、斯文、气质、优雅、成熟、节制、谦逊、创造； 　　负面的：悲伤、无力、阴暗、荒凉、内向。 　　灰色象征谦虚、沉默、中庸、忧郁，不凸显自身。灰色具有柔和、高雅的意象，属于中间性格，男女皆能接受，是一种高格调的、有品位感的颜色。　　 　　使用灰色时，大多利用不同明度的灰色变化或搭配其他色彩来调和画面的朴素、沉闷。灰色是中性色，和白色、黑色一样是一种无色彩属性的色彩。给人一种柔和、细致、朴素、大方、舒适、优雅的感觉，灰色作为背景色彩非常理想，搭配其他色彩，可以有效中和华丽、张扬的感觉。如图所示，电子产品、商业经济、军事类网站常常用灰色作为其主色调。 第9页/共77页 任务分解 二、色彩情感 　　3．黑色 　　黑色让人联想到： 　　正面的：神秘、干练、威严、权威、教养、力量、强势、攻击； 　　负面的：恐怖、不安、绝望、悲伤、沉默、虚无、孤独。 　　黑色象征着崇高、严肃、粗莽、沉默、退缩、沉稳、黑暗，有消极、