
模块三网页美工技术 单元1:美工基础网页配色 一、色彩构成对网页的影响 网页配色在网页设计中起着非常关键的作用,不同的色卷搭配会给人不同的心理感受, 好的色影搭配能够在鲜间吸引浏览者的目光,给河览者美感和愉悦感,从面轻松阅览网页。 如图03011两个网站界面配色,好的网页色彩构成对页面可以起到划分视觉区线、引导主 次关系、营造网站主题气场的作用。 图0301-1 二、网页配色常见的问题 图001-2看起米没有什么问题,界面设计还不错的网站,但如果你仔饵推藏,很容易得 出以下结论: 1.图0301-2(右):色彩杂乱、没有规律。 2.图0301-2(左):色彩明度和纯度单一,没有层次 3.图03012〔中):色彩的而积比例不协调
模块三 网页美工技术 单元 1:美工基础·网页配色 一、色彩构成对网页的影响 网页配色在网页设计中起着非常关键的作用,不同的色彩搭配会给人不同的心理感受, 好的色彩搭配能够在瞬间吸引浏览者的目光,给浏览者美感和愉悦感,从而轻松阅览网页。 如图 0301-1 两个网站界面配色,好的网页色彩构成,对页面可以起到划分视觉区域、引导主 次关系、营造网站主题气场的作用。 图 0301-1 二、网页配色常见的问题 图 0301-2 看起来没有什么问题,界面设计还不错的网站,但如果你仔细推敲,很容易得 出以下结论: 1. 图 0301-2(右):色彩杂乱、没有规律。 2. 图 0301-2(左):色彩明度和纯度单一,没有层次 3. 图 0301-2(中):色彩的面积比例不协调

能名原 位名称哪也名利 网站名梅 单收名称 偶站名摩 图0301.2 三、色彩的基础知识 颜色是由于光的折射产生的。可分为原色、间色和复色。原色,是混合产生各种色彩 的最基本的色,是任何色彩无法调制出来的。也称为一次色。色光三原色:朱红光、翠绿 光、蓝光。。色料三原色,红(品红成玫瑰红),黄〔柠檬黄)蓝(湖萱)·间色·是 两种单色的等量混合,在伊镜的十二色相环中,间色处于两种源色之间。间色也称为二次色: 复色:在间色的基础上产生,是两种间色或三原色的适当混合,复色也称为再间色或三次 色. 常见的色彩表述HSB、RGB、CMYK。HSB是色相、纯度和明度的缩写,在业界使用 较多。RGB是光的三原色,三原色等比例混合为白色,叫加色混合,CMYK是料的三原色 混合,等比例混合后的结果为黑色,为问色混合,如图0303所示: CMYK混合 RGB混合 图0301-3 大自然颜色是丰富的。而RGB,CMYK只能表现出其中的一部分,知图0301-4所示
图 0301-2 三、色彩的基础知识 颜色是由于光的折射产生的。可分为原色、间色和复色。原色,是混合产生各种色彩 的最基本的色,是任何色彩无法调制出来的。也称为一次色。 色光三原色:朱红光、翠绿 光、蓝紫光。; 色料三原色:红(品红或玫瑰红)、黄(柠檬黄)蓝(湖蓝)。间色 :是 两种原色的等量混合。在伊顿的十二色相环中,间色处于两种原色之间。间色也称为二次色; 复色 :在间色的基础上产生,是两种间色或三原色的适当混合。复色也称为再间色或三次 色。 常见的色彩表述 HSB、RGB、CMYK。HSB 是色相、纯度和明度的缩写,在业界使用 较多。RGB 是光的三原色,三原色等比例混合为白色,叫加色混合。CMYK 是料的三原色 混合,等比例混合后的结果为黑色,为间色混合,如图 0301-3 所示。 大自然颜色是丰富的,而 RGB、CMYK 只能表现出其中的一部分,如图 0301-4 所示

图0301-4 白然界中除了影色外还有无影色,是指白色、■色或由这2种色调合形成的各种深, 浅不同的灰色:按型一定的变化规律,它们可以排成一个系列,由白色渐变到浅灰、中灰, 深灰到黑色,色度学上称此谓黑白系列, 出001-5 网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是 黑白的35倍。也就是说,在一般情况下,彩色页面较完全黑白页面更如吸引人 色相一一是色影的最大特征。所请色相是指色彩的相较,区别各种不同色彩的名称, 也就是辩别色影的差异,指不同被长的光给人的不同的色彩感受。色影的色相是按照一定的 规律推移的。人们给这些可以相互区别的色彩设定名称并把简单的色彩如红,橙,黄,绿, 青,蓝。紫,定为基本色粗,而且排列形成一种秩序称为色相推移。 纯度(德和度)一一纯度是指硕色的纯净度,有时我们也称之为色彩的饱和度。纯度 的高低是硕色色感的决定因素。所谓纯度就是色影鲜速、饱和和纯净的程度 明度一指色影的明暗程度,对光源来说可以称为光度,对物体色来说指明哈程度
自然界中除了彩色外还有无彩色,是指白色、黑色或由这 2 种色调合形成的各种深、 浅不同的灰色:按照一定的变化规律,它们可以排成一个系列,由白色渐变到浅灰、中灰、 深灰到黑色,色度学上称此谓黑白系列。 网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是 黑白的 3.5 倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。 色相一一是色彩的最大特征。所谓色相是指色彩的相貌,区别各种不同色彩的名称, 也就是辩别色彩的差异,指不同波长的光给人的不同的色彩感受。色彩的色相是按照一定的 规律推移的。人们给这些可以相互区别的色彩设定名称,并把简单的色彩如红,橙,黄,绿, 青,蓝,紫,定为基本色相,而且排列形成一种秩序.称为色相推移。 纯度(饱和度)一一纯度是指颜色的纯净度,有时我们也称之为色彩的饱和度。纯度 的高低是颜色色感的决定因素。所谓纯度就是色彩鲜浊、饱和和纯净的程度。 明度——指色彩的明暗程度,对光源来说可以称为光度,对物体色来说指明暗程度

四、色彩的心里感受 色彩有冷暖之分,不同的颜色会给测览者不同的心理感受,如图03017所示。 1,红色一是一种激奋的色彩。能使人产生冲动,慎忽,热情,活力的感觉。 2.绿色一介于冷暖两种色彩的中间,显得和睦,宁静,健康,安全的感凭。它和金黄, 淡白搭配,可以产生优雅,舒适的气航。橙色一也是一种激奋的色彩,具有轻快, 攻欧。热烈,温馨。时尚的效果。 3.橙色一也是一种激查的色彩。具有轻快,欢欣,热烈,温馨,时尚的效果。 4.黄色一具有快乐,希望,智慧和轻快的个性,它的明度最高。 5.蓝色一是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,流漫 的气氛(象天空的色影》 6.紫色一具有神格,忧都,深邃的感受 7.自色一具有洁白,明快,纯真,清洁的感受 8.黑色一具有深沉,神秘,复静,悲哀,压抑的感受。 9.灰色一具有中庸,平凡,温和,谦让,中立和高雅的感爱。 10.每种色彩在饱和度。透明度上略微变化就会产生不同的感觉。以绿色为例,黄餐色 有青春,旺经的祝觉意境。而蓝绿色则显得m宁,阴深。 五、网页的色彩构成 色相环中的色相是有固定的度数的。并且不同色相之间的搭配可以分为同类色、类似色, 互补色的搭配。如图0301-8. 120° 60 类假色 180 同类 240 300° 图0301-t 同类色相构成:在色相环上的距离角度在5度以内的色相。如红色与橙红色、黄色与 黄绿色、蓝色与蓝紫色。如图03019所示
四、色彩的心里感受 色彩有冷暖之分,不同的颜色会给浏览者不同的心理感受,如图 0301-7 所示。 1. 红色---是一种激奋的色彩。能使人产生冲动,愤怒,热情,活力的感觉。 2. 绿色---介于冷暖两种色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄, 淡白搭配,可以产生优雅,舒适的气氛。橙色---也是一种激奋的色彩,具有轻快, 欢欣,热烈,温馨,时尚的效果。 3. 橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。 4. 黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。 5. 蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫 的气氛(象天空的色彩 ) 6. 紫色---具有神秘,忧郁,深邃的感受。 7. 白色---具有洁白,明快,纯真,清洁的感受 8. 黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。 9. 灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。 10. 每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色 有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。 五、网页的色彩构成 色相环中的色相是有固定的度数的,并且不同色相之间的搭配可以分为同类色、类似色、 互补色的搭配。如图 0301-8。 同类色相构成: 在色相环上的距离角度在 5 度以内的色相,如红色与橙红色、黄色与 黄绿色、蓝色与蓝紫色。如图 0301-9 所示

SPA u一 ●●●● 类似色相构成:们度以内,和谐、安详、耐看可通过变化明度、纯度如强对比。如红 色与橙色、蓝色与绿色、蓝色与紫色。如图0301-10所示。 【synch RHNOCORT: 10 对比色相构成:120度左右,对比强烈,鲜明、饱满、华丽、活跃,如图0301-11所 示。 ·4中表至0301-11宝陆4 互补色相构成:180度左右,为最强色相对比。如图0302所示
类似色相构成: 60 度以内,和谐、安详、耐看可通过变化明度、纯度加强对比。如红 色与橙色、蓝色与绿色、蓝色与紫色。如图 0301-10 所示。 对比色相构成: 120 度左右,对比强烈、鲜明、饱满、华丽、活跃,如图 0301-11 所 示。 互补色相构成: 180 度左右,为最强色相对比。如图 0301-12 所示

DINIS" forthose 器部 ie 圆0301-11 无彩色构成 1.黑白:对比强烈、分明、弦目、制激,具有阴阳互补效果 2.■灰:深沉、模制。具有神程感 3.灰白:轻飘、软弱。具有爱味感 4.黑灰白:如果等级间隔适当,最具层次感和明快感 无彩色点缓有影色构图:无影色与任何有影色括配都能取得调和感很强的。如图 0301-12所示。 六、网页色彩使用中面的对比 面积对比:指各种色彩在面面中所占的国积比例变化和差别引起的色相、明度、,她度 冷暖等方面的对比。相同色彩的面积对比,面积相同对比效果弱,面积差别越大对比效果越 强:不同色影彩的面积对比:两色雨积相差不多对比相对强烈,面积差别越大,对比效果越雨, 大面积会对面积较小的起到烘托或者融合的作用。 通过明度、纯度、面积的对比,在不同颜色间寻求调和点。什么样的色影构成算是调 和了的呢?色彩搭配在一起,既不过分刺徽,也不过分平板。也就是说,看起来“舒服不 舒服?舒服斌说明调和了
无彩色构成 1. 黑白:对比强烈、分明、眩目、刺激,具有阴阳互补效果 2. 黑灰:深沉、模糊,具有神秘感 3. 灰白:轻飘、软弱,具有暧昧感 4. 黑灰白:如果等级间隔适当,最具层次感和明快感 无彩色点缀有彩色构图:无彩色与任何有彩色搭配都能取得调和感很强的。如图 0301-12 所示。 六、网页色彩使用中面的对比 面积对比:指各种色彩在画面中所占的面积比例变化和差别引起的色相、明度、纯度、 冷暖等方面的对比。相同色彩的面积对比,面积相同对比效果弱,面积差别越大对比效果越 强;不同色彩的面积对比:两色面积相差不多对比相对强烈,面积差别越大,对比效果越弱, 大面积会对面积较小的起到烘托或者融合的作用。 通过明度、纯度、面积的对比,在不同颜色间寻求调和点。什么样的色彩构成算是调 和了的呢? 色彩搭配在一起,既不过分刺激,也不过分平板。也就是说, 看起来“舒服不 舒服?舒服就说明调和了

【课后小结】 本讲首先对色影对网页的影响及网页配色常见月愿进行了分析,然后从网页色影基础 出发,介绍了网页色影构成中,色相、明度、饱和度之间的关系
【课后小结】 本讲首先对色彩对网页的影响及网页配色常见问题进行了分析,然后从网页色彩基础 出发,介绍了网页色彩构成中,色相、明度、饱和度之间的关系