1、第 1 章网页设计中色彩的应用Photoshop 网页设计艺术21.1 相近色的应用相近色是在网页设计中常用的色彩搭配，它的特点是画面统一和 谐。下面主要 讲解暖色调与冷色调中相近色的应用方法。1暖色调暖色主要由红色调组成，比如红 色、橙色和黄色。暖色调给人温暖、舒适和活力的感觉，因此在网页设计中可以突出视化效果。在网页中应用相近色时，要注意色 块的大小和位置。例如，设置三种暖色调（R:120、G:40、B:15，R:160、G:90、B:40 和 R:180、G:130、B:90），如图 1-1 所示。图 1-1不同的亮度会对人们的视觉产生不同的影响， 颜色重的会显得面 积小， 颜色浅的会显
2、得面积大。将同样面积和形状的三种 颜色摆放在画面中，如 图 1-2 所示，画面显得单调、乏味，这种过于平均化的摆放在网页设计中是不可取的。 设定颜色最重的褐色 为主要色，因此面 积最大，中间色稍小，浅色面积最小，如图 1-3 所示，画面马上就显得丰富了。图 1-2 图 1-3插入图片的颜色一定要与基本色和谐，在 Photpshop CS 中调节插入图片的色调，所有冷色调的颜色都要用暖褐色中和。2冷色调青，蓝，紫都属于冷色系，冷色 调可以给人明快、硬朗的感 觉。例如，设定两种颜色（R:50 、G:80、B:110 和 R:140、G:170、B:180），一深一浅，一个稍微偏蓝，一个稍微偏绿，虽
3、然颜色的倾向略有不同，但两种颜色放在一起非常和谐，理解了这种颜色关系，就可以在网页设计中创造出和 谐的颜色搭配。第 1 章 网页设计中色彩的应用3执行“图像”“ 调整” “色彩平衡 ”命令， 调节要导入图片的颜色，注意保持 图片色彩和所选色的和谐，掌握好分寸，如图 1-4 所示。图 1-4最终效果如图 1-5 所示。导航条也要使用 纯度不高的浅蓝色。 这 种和谐的冷色调会使人感受到科技和未来。图 1-51.2 对比色的应用对比色在网页中的应用是很普遍的，它的特点是使画面生动有活力。1冷暖色的对比人们通过生活中的经验积累，对 色彩有一种心理上的冷暖感觉，一般把橘红色定为暖色极、天蓝色定为冷色极。
4、凡与暖色极相近的色和色组为暖色，如橙色、黄色、 红色等；而与冷色极相近的色和色组为冷色，如蓝绿、蓝、 蓝紫等。黑色偏暖，白色偏冷，灰、绿、紫为中性色。在网页中应用对比色时，首先要注意的是定下整个画面的基本色 调，是以暖色 调为主还是以冷色调为主。所有网页设计都是在 统一中寻求对比变化的。例如设定两种对比色（R:255、 G:207、B:0 和 R:0、G:96、B:208），如图 1-6 所示。Photoshop 网页设计艺术4图 1-6将同样形状和大小的两个色块平均摆放在画面中，如 图 1-7 所示，画面显着单调、呆板。但若把暖色的面积加大，冷色的减小，如图 1-8 所示，画面构图看起来变得
5、和谐了。图 1-7 图 1-8在色彩上二种颜色的衔接有些生硬，所以需要使用灰色进行中和，这样颜色过渡得更自然、使整个画面和谐统一。在网页的中间画一条曲线，这就定下了整个画面构 图的版式，所有网页元素的布局必须围绕该版式来排列，如图 1-9 所示。根据构图的需要排列其他网页元素，注意要考 虑好标题的位置、大小和颜色，内文的大小和灰度。最终的效果如图 1-10 所示。图 1-9 图 1-102，互 补色的对比在色相环上 180的两种颜色是互 补色。 使用互补色进行网页设计的步骤如下。第 1 章 网页设计中色彩的应用51 设 定互 补色（ R:116、G:117、B:137 和 R:242、G:17
6、2、B:0），如图 1-11 所示。图 1-11 2 使用 （渐变 ）工具制作一个冷色调的渐变背景，如图 1-12 所示。 3 紫色的 纯度不要太高，因 为在网 页中若有一种颜色的纯度高，那么另一种就不能太高，否则会使画面很难控制，显得混乱。画几条分割画面的线，并且在黄金分割线的位置做一条辅助线，如 图 1-13 红线所示。 这 条线在最终画面中并不显示，但需要使用它分割文字和图片在画面中的比例关系。图 1-12 图 1-13 4 在分割的区域内填上互为补色的两种颜色，根据所定的基本色调来填充色块，如 图 1-14 所示。 5 单纯 互补色的搭配让人感觉到过于简单，而且生硬，所以 应该添加一些
7、同种色相、不同明度的过渡色，使得画面更有层 次感，如 图 1-15 所示。图 1-14 图 1-15 6 根据画面颜色的色调、明度和构 图来调整文字图片的大小和颜色，最 终效果如图 1-16所示。Photoshop 网页设计艺术6图 1-161.3 无色系颜色与有色系颜色在网页制作中的搭配应用一般来说，无色与有色的搭配主要目的是强调主体或是控制画面色彩平衡。1无色系颜色在突出主体时所起到的作用我们通常所说的无色系是和有色系相对来定义的，即黑、灰、白为无色色系，其余颜色均属于有色色系。无色系颜色的色彩 纯度和饱和度与有色系颜色的颜 色相比都是最低的。所以在混合运用中，无色系颜色与有色系 颜色的对
8、比能够使有色系的颜色 纯度在视觉上更高，突出有色系颜色。 1 设置颜色。黑色（R:0、 G:0、B:0），灰色（R:175 、G:175、B:175）和蓝紫色（R:130、G:135、B:175），如图 1-17 所示。图 1-17 2 在使用颜色时，要注意整个网 页的色彩明暗对比以及明暗的区域划分。如果把明暗平均划分就会使画面过于平均，找不到重点，如图 1-18 所示。所以一般不主张把有色的区域与无色的区域在面积上等同划分，如 图 1-19 所示。第 1 章 网页设计中色彩的应用7图 1-18 图 1-19 3 在版式确定后，就应该导入图 片了。要注意的是，所 导入的图片必须和事先想好的版式
9、颜色统一。所以，在 导入图片后，还要对图片的颜色作一定的修改。一般采用“图像”“ 调整”“色彩平衡”命令修改图片的颜 色，效果如 图 1-20 所示。 4 这个网页的主要目的是突出主 题图片。 现在黑色的背景已经把带有颜色的主体突出得很明显。在添加文字的时候应该 考虑使文字的视觉冲击力不要高 过主体的图片，所以将文字的颜色设为灰色，最终效果如图 1 21 所示。同样，除了黑色以外，灰色和白色也同样可以使色彩明显的物体更加突出，如图 1-22 所示。图 1-20 图 1-21图 1-22Photoshop 网页设计艺术8设置颜色 R:150、G:150、B:150 和 R:124、G:168、B
10、:223，如图 1-23 所示，灰色与有色系颜色的搭配效果如图 1-24 所示。图 1-23图 1-24以上的三个例子是在介绍无色系与有色系搭配时突出有色系颜色的方法。注意在选配颜色时要注意所选颜色的明度与色彩倾向尽量做到和谐。有色系与无色系搭配的另一个重点是在 调和画面颜色时的运用，也就是说 在平衡网页中色彩关系时的运用。2无色系颜色在控制平衡色彩关系时的应用设置颜色（R:255、 G:207、B:49；R:255、G:155、B:49；R:83、G:66、B:108；R:213、G:0、B:0）。若是以两种高纯度的颜色为主，就会使画面的 颜色纯度过高，缺乏对比，网页中缺乏层次，如图 1-2
11、5 所示。在此，我们就可以使用无色系的颜色来对网页中的色彩进行控制，如图 1-26 所示。图 1-25 图 1-26这样就可以使画面的层次显得更加丰富，制作完成后效果如图 1-27 所示。同样的，黑色和灰色也可以起到 这样的作用，如 图 1-28、图 1-29 所示。第 1 章 网页设计中色彩的应用9图 1-27图 1-28图 1-29Photoshop 网页设计艺术101.4 高调色的应用高调色是在网页设计中常用的色彩搭配，它的特点是给人一种素雅、亮丽、清新的感觉。每个页面都应该有一个主色调，高调是指高明度的色块在页面中面 积大，占主 导地位，其他色块面积小，起丰富页面的作用。下面举两个例子
12、来说明高调 色在网页中的运用。1冷高调 1 网页中要非常注意各色 块的面积大小和位置的设置。 设定三种颜色（R:63、G:187、B:239；R:223、G:241、B:253 和 R:255、G:255、B:255），如 图 1-30 所示。图 1-30 2 用白色、浅 蓝色填充分割画面，白色面 积大，浅蓝色面积小，如图 1-31 所示。 这样画面的主色调就定为高调。但画面显 得单调，再填充 纯度稍高的蓝色分割画面，如图 1-32 所示。 画面就显得丰富了。图 1-31 图 1-32 3 在网 页中加入几条黑线，画面更显丰富、充 实了，如图 1-33 所示。 4 根据上面的画面色块分布做网页，注意加入的文字、 图像形成的点、线、面的因素。要考虑好标题的位置和大小，内文的大小和灰度。最终的效果如图 1-34 所示。在网页中插入图片的颜色一定要与基本色和谐，在 Photpshop CS 中执行“ 图像”菜单中“调整”下的命令可以 调节图片的色调 。
