模块三网页美工技术 单元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 所示。 六、网页色彩使用中面的对比 面积对比：指各种色彩在画面中所占的面积比例变化和差别引起的色相、明度、纯度、 冷暖等方面的对比。相同色彩的面积对比，面积相同对比效果弱，面积差别越大对比效果越 强；不同色彩的面积对比：两色面积相差不多对比相对强烈，面积差别越大，对比效果越弱， 大面积会对面积较小的起到烘托或者融合的作用。 通过明度、纯度、面积的对比，在不同颜色间寻求调和点。什么样的色彩构成算是调 和了的呢？ 色彩搭配在一起，既不过分刺激，也不过分平板。也就是说， 看起来“舒服不 舒服？舒服就说明调和了
【课后小结】 本讲首先对色影对网页的影响及网页配色常见月愿进行了分析，然后从网页色影基础 出发，介绍了网页色影构成中，色相、明度、饱和度之间的关系
【课后小结】 本讲首先对色彩对网页的影响及网页配色常见问题进行了分析，然后从网页色彩基础 出发，介绍了网页色彩构成中，色相、明度、饱和度之间的关系