网页设计色彩搭配-PPT精选课件.ppt

1、第第6章章 网页设计的色彩搭配网页设计的色彩搭配6.1 6.1 色彩的基本知识色彩的基本知识 6.1.1 6.1.1 色彩的产生色彩的产生 在中学的物理课中我们可能做过棱镜的试验，在中学的物理课中我们可能做过棱镜的试验，白光通过棱镜后被分解成多种颜色逐渐过渡的色白光通过棱镜后被分解成多种颜色逐渐过渡的色谱，颜色依次为红、橙、黄、绿、青、蓝、紫，谱，颜色依次为红、橙、黄、绿、青、蓝、紫，这就是可见光谱。其中人眼对红、绿、蓝最为敏这就是可见光谱。其中人眼对红、绿、蓝最为敏感，人的眼睛就像一个三色接收器的体系，大多感，人的眼睛就像一个三色接收器的体系，大多数的颜色可以通过红、绿、蓝三色按照不同的比数

2、的颜色可以通过红、绿、蓝三色按照不同的比例合成产生。同样绝大多数单色光也可以分解成例合成产生。同样绝大多数单色光也可以分解成红绿蓝三种色光。这是色度学的最基本原理。红绿蓝三种色光。这是色度学的最基本原理。6.1.26.1.2颜色分非彩色和彩色两类。颜色分非彩色和彩色两类。非彩色是指黑色、白色和灰色。彩色是指除非彩色是指黑色、白色和灰色。彩色是指除了非彩色以外的所有色彩。任何色彩都有饱和度了非彩色以外的所有色彩。任何色彩都有饱和度和透明度两种属性，由于属性的变化产生不同的和透明度两种属性，由于属性的变化产生不同的色相，所以至少可以制作几百万种色彩。色相，所以至少可以制作几百万种色彩。网页制作用彩

3、色还是非彩色好呢？根据专业网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面比黑倍。也就是说，在一般情况下，彩色页面比黑白页面更加吸引人。我们通常的做法是：主要内白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色容文字用非彩色“黑色黑色”，边框，背景，图片用，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会彩色。这样页面整体不单调，看主要内容也不会混乱。混乱。6.2 6.2 颜色的原理与传达颜色的原理与传达 艺术家和设计师将颜色复制到画布或纸张上，艺术家和设计师将

4、颜色复制到画布或纸张上，利用颜料吸收了某个部分的光波、反射出其它光利用颜料吸收了某个部分的光波、反射出其它光波，这一过程是仿真过程。此过程是所有绘画与波，这一过程是仿真过程。此过程是所有绘画与印刷媒体的色彩模式基础。例如要产生绿色，我印刷媒体的色彩模式基础。例如要产生绿色，我们可使用会吸收红、蓝光波的颜料即可。们可使用会吸收红、蓝光波的颜料即可。6.2.1 6.2.1 视觉效果视觉效果 光波是来自于物体的反射还是光源本身发射光波是来自于物体的反射还是光源本身发射的，我们处理光波的能力都是靠视网膜和脑部的的，我们处理光波的能力都是靠视网膜和脑部的视觉皮质区。视网膜内有三个接收器（或者说是视觉皮质

5、区。视网膜内有三个接收器（或者说是锥细胞）可响应某些光波的频率。红色锥细胞能锥细胞）可响应某些光波的频率。红色锥细胞能感应低频率的波长，绿色锥细胞感应的是中频率感应低频率的波长，绿色锥细胞感应的是中频率的波长，蓝色锥细胞感应的是高频率的波长。这的波长，蓝色锥细胞感应的是高频率的波长。这些锥细胞的运作并非二元性的，而是类似于电视些锥细胞的运作并非二元性的，而是类似于电视频道一样，可将刺激分别传达至脑部的视觉皮质频道一样，可将刺激分别传达至脑部的视觉皮质区，经过处理后才产生出我们所看到的颜色。区，经过处理后才产生出我们所看到的颜色。6.2.2 6.2.2 加色法和减色法加色法和减色法 设计师处理颜

6、色的方法通常有两种：加色法，设计师处理颜色的方法通常有两种：加色法，混合不同颜色的光波用来形成白光；减色法，使混合不同颜色的光波用来形成白光；减色法，使用颜料来减少光波。用颜料来减少光波。6.2.3 6.2.3 色彩的传达色彩的传达 在色彩调和过程中，发现感官在色彩运用上在色彩调和过程中，发现感官在色彩运用上扮演了很重要的角色。除了感官反应与识别调和扮演了很重要的角色。除了感官反应与识别调和色彩外，人类内在对色彩的反应还有更深层的一色彩外，人类内在对色彩的反应还有更深层的一面。不管是正面或负面。在选定颜色组合时，确面。不管是正面或负面。在选定颜色组合时，确定所选择的颜色能引起强烈的生理和心理共

7、鸣。定所选择的颜色能引起强烈的生理和心理共鸣。6.3 6.3 网页色彩的搭配技巧网页色彩的搭配技巧 网站选择颜色可不是一件容易的事，很多网站选择颜色可不是一件容易的事，很多公司还特别聘请专业咨询人员，使其色彩组合搭公司还特别聘请专业咨询人员，使其色彩组合搭配得十分巧妙配得十分巧妙 从而强化整体的品牌形象。但是，从而强化整体的品牌形象。但是，如果已经具有色彩调和感，并且了解某些颜色可如果已经具有色彩调和感，并且了解某些颜色可能会引起什么样的反应，只需按方法进行，做出能会引起什么样的反应，只需按方法进行，做出有效的色彩组合。有效的色彩组合。6.3.1 6.3.1 网页色彩的特性与色彩搭配的技巧网页

8、色彩的特性与色彩搭配的技巧 随着网页制作经验的积累，我们用色有这样随着网页制作经验的积累，我们用色有这样的一个规律，单色的一个规律，单色五彩缤纷五彩缤纷标准色标准色单色。单色。开始因为技术和知识缺乏，只能制作出简单的网开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；当有一定基础和材料后，希望制页，色彩单一；当有一定基础和材料后，希望制作一个漂亮的网页，将收集的最好的素材，最满作一个漂亮的网页，将收集的最好的素材，最满意色彩堆砌在页面上；但是时间一长，却发现色意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；重新定位网站，选择彩杂乱，没有个性和风格；重新定位网站，选择切合

9、的色彩，此时推出的站点往往比较成功；当切合的色彩，此时推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的用单一色彩甚至非彩色就可以设计出简洁精美的站点。站点。6.3.2 6.3.2 非色彩的搭配非色彩的搭配 黑白是最基本和最简单的搭配，白字黑底，黑白是最基本和最简单的搭配，白字黑底，黑字白底都非常清晰明了。另外灰色色性比较稳黑字白底都非常清晰明了。另外灰色色性比较稳定，可以和任何彩色搭配，也可以帮助两种对立定，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩，

10、的色彩和谐过渡。如果实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。那么用灰色试试，效果绝对不会太差。6.3.3 6.3.3 色彩的搭配色彩的搭配 色彩千变万化，色彩的搭配是研究的重点。色彩千变万化，色彩的搭配是研究的重点。下面介绍一些色彩搭配的知识。下面介绍一些色彩搭配的知识。我们将色彩按我们将色彩按“红红”-“-“黄黄”-“-“绿绿”-“蓝蓝”-“-“红红”依次过渡渐变，就可以得到一个依次过渡渐变，就可以得到一个色彩环。色环的两端是暖色和冷色，当中是中性色彩环。色环的两端是暖色和冷色，当中是中性色。色。6.3.4 6.3.4 色彩的使用技巧色彩的使用技巧 1.1.加强颜色对比加强颜

11、色对比2.2.颜色的不同反应颜色的不同反应3.3.使用颜色不易过多使用颜色不易过多4.4.使用灰色阶增加对比使用灰色阶增加对比5.5.选择颜色要注意时效性选择颜色要注意时效性6.6.选择色盘时请考虑功能性的颜色选择色盘时请考虑功能性的颜色7.7.颜色的使用颜色的使用6.3.5 6.3.5 色彩管理色彩管理 色彩管理系统可包含在操作系统中。视觉设色彩管理系统可包含在操作系统中。视觉设计最大的困难是找出有效的调和色彩方法，让色计最大的困难是找出有效的调和色彩方法，让色系既不单调，也不夸大，另外，要想了解色彩平系既不单调，也不夸大，另外，要想了解色彩平衡之间的关系，可从了解色环开始。色环呈现出衡之间

12、的关系，可从了解色环开始。色环呈现出某一色彩模式中所有可能的色相，每个色彩模式某一色彩模式中所有可能的色相，每个色彩模式都包含了一组三原色，然后经由这一组三原色的都包含了一组三原色，然后经由这一组三原色的相互混合而产生不同的颜色。相互混合而产生不同的颜色。在传统色彩学中，三原色指的是红、黄、蓝；在传统色彩学中，三原色指的是红、黄、蓝；而在而在 RGB 色彩模式中，色光的三原色是指红、色彩模式中，色光的三原色是指红、绿、蓝。任何两个色光的组合会产生一组次颜色。绿、蓝。任何两个色光的组合会产生一组次颜色。我们用色环来呈现颜色的逻辑性。我们用色环来呈现颜色的逻辑性。6.3.6 6.3.6 色彩模式色

13、彩模式RGBRGB色彩模式色彩模式 显示器就是光学原理的三原色，颜色是通过显示器就是光学原理的三原色，颜色是通过三色的不同量的叠加产生的。在三色的不同量的叠加产生的。在 PhotoshopPhotoshop的的 RGBRGB颜色模式中，可通过对红、绿和蓝的各种数值颜色模式中，可通过对红、绿和蓝的各种数值进行组合来改变像素的颜色。这三种基色中的每进行组合来改变像素的颜色。这三种基色中的每一种都有一个从一种都有一个从02550255的值的范围。当的值的范围。当256256种红色种红色值、值、256256种绿色值、种绿色值、256256种蓝色值进行组合时，所种蓝色值进行组合时，所有能够得到的颜色之和

14、将为大约有能够得到的颜色之和将为大约 1.67 1.67 千万（千万（256 256 X 256 X 256X 256 X 256）种。看起来这好像已经是许多种颜）种。看起来这好像已经是许多种颜色了，但是这些仅是自然界中可见颜色的一部分。色了，但是这些仅是自然界中可见颜色的一部分。CMYK颜色模式颜色模式 CMYK颜色模式与颜色模式与RGB颜色模式完全不同。颜色模式完全不同。RGB颜色的创建是通过增加光线来实现的，颜色的创建是通过增加光线来实现的，而而CMYK颜色的创建则是减去光线。在四色处颜色的创建则是减去光线。在四色处理打印过程中，颜色是通过在一台印刷机上使理打印过程中，颜色是通过在一台印

15、刷机上使用四种不同的四色印刷板来产生的；这四种不用四种不同的四色印刷板来产生的；这四种不同的印刷板是同的印刷板是C（cyan青），青），M（magenta洋洋红），红），Y（yellow黄色）和黄色）和K（black黑色黑色black之所以用之所以用K表示，是因为表示，是因为B也可能表示也可能表示blue蓝色）。蓝色）。6.4 6.4 课后习题课后习题（1 1）什么是颜色？）什么是颜色？（2 2）各种颜色在心理感觉上有什么不同？）各种颜色在心理感觉上有什么不同？（3 3）色彩是如何搭配的？）色彩是如何搭配的？（4 4）网页色彩搭配的原理是什么？）网页色彩搭配的原理是什么？（5 5）色彩的使用技巧是什么？）色彩的使用技巧是什么？