13无色系颜色与有色系颜色在网页制作中的搭配应用.doc

第1章 网页设计中色彩的应用 1.1 相近色的应用 相近色是在网页设计中常用的色彩搭配，它的特点是画面统一和谐。下面主要讲解暖色调与冷色调中相近色的应用方法。 1．暖色调 暖色主要由红色调组成，比如红色、橙色和黄色。暖色调给人温暖、舒适和活力的感觉，因此在网页设计中可以突出视化效果。 在网页中应用相近色时，要注意色块的大小和位置。例如，设置三种暖色调（R:120、G:40、B:15，R:160、G:90、B:40和R:180、G:130、B:90），如图1-1所示。 图1-1 不同的亮度会对人们的视觉产生不同的影响，颜色重的会显得面积小，颜色浅的会显得面积大。将同样面积和形状的三种颜色摆放在画面中，如图1-2所示，画面显得单调、乏味，这种过于平均化的摆放在网页设计中是不可取的。设定颜色最重的褐色为主要色，因此面积最大，中间色稍小，浅色面积最小，如图1-3所示，画面马上就显得丰富了。 图1-2 图1-3 插入图片的颜色一定要与基本色和谐，在Photpshop CS中调节插入图片的色调，所有冷色调的颜色都要用暖褐色中和。 2．冷色调 青，蓝，紫都属于冷色系，冷色调可以给人明快、硬朗的感觉。 例如，设定两种颜色（R:50、G:80、B:110和R:140、G:170、B:180），一深一浅，一个稍微偏蓝，一个稍微偏绿，虽然颜色的倾向略有不同，但两种颜色放在一起非常和谐，理解了这种颜色关系，就可以在网页设计中创造出和谐的颜色搭配。 执行“图像”→“调整”→“色彩平衡”命令，调节要导入图片的颜色，注意保持图片色彩和所选色的和谐，掌握好分寸，如图1-4所示。 图1-4 最终效果如图1-5所示。导航条也要使用纯度不高的浅蓝色。这种和谐的冷色调会使人感受到科技和未来。 图1-5 1.2 对比色的应用 对比色在网页中的应用是很普遍的，它的特点是使画面生动有活力。 1．冷暖色的对比 人们通过生活中的经验积累，对色彩有一种心理上的冷暖感觉，一般把橘红色定为暖色极、天蓝色定为冷色极。凡与暖色极相近的色和色组为暖色，如橙色、黄色、红色等；而与冷色极相近的色和色组为冷色，如蓝绿、蓝、蓝紫等。黑色偏暖，白色偏冷，灰、绿、紫为中性色。 在网页中应用对比色时，首先要注意的是定下整个画面的基本色调，是以暖色调为主还是以冷色调为主。所有网页设计都是在统一中寻求对比变化的。 例如设定两种对比色（R:255、G:207、B:0和R:0、G:96、B:208），如图1-6所示。 图1-6 将同样形状和大小的两个色块平均摆放在画面中，如图1-7所示，画面显着单调、呆板。但若把暖色的面积加大，冷色的减小，如图1-8所示，画面构图看起来变得和谐了。 图1-7 图1-8 在色彩上二种颜色的衔接有些生硬，所以需要使用灰色进行中和，这样颜色过渡得更自然、使整个画面和谐统一。 在网页的中间画一条曲线，这就定下了整个画面构图的版式，所有网页元素的布局必须围绕该版式来排列，如图1-9所示。 根据构图的需要排列其他网页元素，注意要考虑好标题的位置、大小和颜色，内文的大小和灰度。最终的效果如图1-10所示。 图1-9 图1-10 2，互补色的对比 在色相环上180°的两种颜色是互补色。 使用互补色进行网页设计的步骤如下。 设定互补色（R:116、G:117、B:137和R:242、G:172、B:0），如图1-11所示。 图1-11 使用（渐变）工具制作一个冷色调的渐变背景，如图1-12所示。 紫色的纯度不要太高，因为在网页中若有一种颜色的纯度高，那么另一种就不能太高，否则会使画面很难控制，显得混乱。画几条分割画面的线，并且在黄金分割线的位置做一条辅助线，如图1-13红线所示。 这条线在最终画面中并不显示，但需要使用它分割文字和图片在画面中的比例关系。 图1-12 图1-13 在分割的区域内填上互为补色的两种颜色，根据所定的基本色调来填充色块，如图1-14所示。 单纯互补色的搭配让人感觉到过于简单，而且生硬，所以应该添加一些同种色相、不同明度的过渡色，使得画面更有层次感，如图1-15所示。 图1-14 图1-15 根据画面颜色的色调、明度和构图来调整文字图片的大小和颜色，最终效果如图1-16所示。 图1-16 1.3 无色系颜色与有色系颜色在网页制作中的搭配应用 一般来说，无色与有色的搭配主要目的是强调主体或是控制画面色彩平衡。 1．无色系颜色在突出主体时所起到的作用 我们通常所说的无色系是和有色系相对来定义的，即黑、灰、白为无色色系，其余颜色均属于有色色系。无色系颜色的色彩纯度和饱和度与有色系颜色的颜色相比都是最低的。所以在混合运用中，无色系颜色与有色系颜色的对比能够使有色系的颜色纯度在视觉上更高，