网页美工设计 第2章 网页配色设计.pptxVIP

第2章网页配色设计情景模拟配色是网页设计的关键，合理的配色可以使网页风格与网站定位相得益彰，使网页更具美感和吸引力。小张就读的学校采用的是工学结合的教学模式，这天，与学校合作的企业给了小张和其同学一个婴儿奶粉销售网站的网页设计项目。在对该项目做需求分析时，小张认为婴儿象征活力和希望，因此提议使用红色作为网站主色，但意见一出就遭到同学们的反对。下面，我们通过学习色彩基础知识、网页中的色彩运用和配色技巧等，来判断小张的意见是否正确。理解网页中色彩的角色和网页色调的概念理解色彩基础知识，包括色彩三要素、色彩的心理效应和色彩冷暖掌握网页的色彩搭配技巧，能够根据需要合理搭配网页色彩掌握选择网页色调的技巧，能够根据需要确定网页色调学习目标2.1色彩基础网页配色需要对色彩有清晰的认识和敏锐的判断。由于色彩知识过于抽象，不便于理解，本书从图2-1所示的二十四色色环图出发来讲解色彩的基础知识及网页配色设计，方便网页设计初学者直观地理解色彩的相关知识，掌握网页配色技巧。本节主要讲解色彩三要素、色彩的心理效应及色彩的冷暖，为网页配色打下基础。图2-1 二十四色色环图 2.1.1色彩三要素人眼观察到的任何色彩都具有色相、明度和纯度三个属性，它们被称为色彩三要素。1．色相色相是色彩的基本特征，是区别不同色彩的标准，可以将其理解为色彩的名称，如红、橙、黄、绿、青、蓝、紫等颜色。 2．明度明度是指色彩的明暗程度。同种色相的色彩在明度上有深浅之分。例如，在图2-1所示的色环图中，同一色相的颜色从内环到外环，明度逐渐降低，颜色越来越深。此外，不同色相的颜色其明度也有差别，如黄色明度高，紫色明度低。3．纯度纯度也被称为色彩饱和度，是指色彩的纯净程度。我们知道，所有颜色都是由原色（红、绿、蓝或青、品红和黄）混合而成的，色彩纯度主要取决于颜色中某种主要原色成分的比例，比例越大，纯度越高，颜色越鲜艳；反之纯度越低，颜色越暗淡，越不容易分辨。当色彩纯度降到最低时，将变为无彩色，即黑、白、灰色。图2-1所示的色环图中，中间一环的颜色纯度最高；内环的颜色因加入白色，在提高明度的同时降低了纯度；外环的颜色因加入黑色，在降低明度的同时也降低了纯度。提 示在使用Photoshop处理图像时，常用“色阶”“曲线”“亮度/对比度”等命令调节图像明度。适当提升图像明度可以增强图像的通透感，但图像不宜过亮，否则会损失图像细节。 图2-2 不同色彩纯度的图片观察图2-2，指出图中有几种颜色（色相）？哪幅图的色彩纯度最高？哪幅图的色彩纯度最低？此外，青、品红、黄、红、绿、蓝是否为纯度最高的颜色？课堂互动提 示在使用Photoshop处理图像时，常用“自然饱和度”“色相/饱和度”等命令调节图像色彩纯度。适当提升色彩纯度可增加图像的鲜艳度，吸引浏览者的目光。 2.1.2色彩的心理效应不同的色彩能带给人不同的心理感受，让人产生特殊的情感反应和联想。因此，在对网页进行配色设计时，除了需要注重色彩本身的美感外，还需要注意色彩带给人的情感反应和色彩的象征意义，使色彩符合网站的主题。 图2-3 不同色调的图片课堂互动图2-3所示为不同色调的两张图片。看到这两张图片，你分别会想到什么呢？1．红色红色具有很强的视觉冲击力，容易引起人注意。红色常让人联想到热情、活力、积极、主动、力量、爱情、温暖、开放、社交性等。在国内，红色还是一种代表喜庆的色彩，每逢节日，网络上都遍布以红色为主题色的广告，如图2-4所示。此外，红色也常用来做警告、危险、禁止、防火等标识的颜色。图2-4 红色Banner需要注意的是，在网页配色中，纯粹使用红色作为主色调的网站相对较少，通常都配以其他颜色进行调和。 提 示不同纯度和明度的红色给人的感觉是不同的。其中，粉红色明度高，纯度低，视觉柔和，女性特征明显，给人一种鲜嫩、温柔、纯真、诱惑的感觉，适用于以女性或婴儿等为主题的网站，如化妆品网站、内衣网站等，如图2-5所示；鲜红色纯度高，视觉刺激强，男性特征明显，适用于表现热情、活力、奔放，具有男性特征的网站，如图2-6所示；深红色明度低，容易营造出深邃、神秘的气氛；玫瑰红则营造的是一种娇媚、艳丽的气氛，适用于女性用品及服装网站。图2-5 化妆品网站主页图2-6 可口可乐公司网站主页 2．橙色橙色介于红色与黄色之间，常让人联想到能量、温暖、健康、活泼、快乐、创造力、社交性等。此外，由于橙色与许多食物的颜色类似，因此橙色容易引起人的食欲。当作品中需要加入上述特性时，橙色就成为设计师的首选，如图2-7所示。图2-7 餐厅网站主页 3．黄色黄色给人的感觉与橙色类似，但黄色明度更高，更为醒目。黄色常让人联想到快乐、轻快、撒娇、可爱、理解、智慧、幸福、食物等。在网页配色中，黄色常与冷色或明度低的颜色搭配，起到和谐对比的调和效果，如