2.6 配色案例

Version:CS4 CS5 CS6 CC

没有一种单一的设计元素会比颜色效果更能吸引人。颜色能吸引人的注意，表达一种情绪，能传达一种潜在的信息。那么什么样的调色搭配才是最合适的呢？关键是颜色之间的关系。色彩总是和周围其他颜色一起出现。因此，可以在页面中通过基色设计一个色板文件。下面我们将介绍这种色板文件的建立方法。

这里要制作一个具有浪漫色彩的电影海报，画面中模特的面部表情比较放松，面色比较白净。我们的目的是使设计效果看起来令人耳目一新，充满活力，个性十足，同时又要传达一种商业气息。客户还要求整个设计效果显得潮流时尚，这些要求全部和颜色有关。

1．将照片中的颜色精简出来

首先要找出这个自然的色板，并把它组织为调色板文件。尽量地放大照片，你会发现照片有很多颜色。在正常的视图中我们只会看到很少的一些颜色，皮肤的色调、栗色的头发、蓝色的衣服、粉红的花朵。但是把它们放大来看时，会发现这里面有着数以百万计的颜色。所以首先要精简这些颜色，让它成为一个易处理的颜色版本。在Photoshop中，首先复制一个图层（这样就不会丢失原始图片了），然后选择“滤镜”→“像素化”→“马赛克”后，一个颜色被精简过的图片就会出现了。假如不满意它的默认值，需要更多一点的颜色，可以减少“马赛克”命令中的单元格大小值。

2．提取颜色成为色板

现在使用吸管工具将颜色提取出来放到色板中。从最明显的颜色开始（你看到的最多的颜色），到最少的颜色。为了对比效果，可选择一些暗调、中调及浅调的颜色。从最多的颜色开始，如一眼就可以看到的皮肤、头发、上衣的颜色。然后处理较少的颜色，如眼睛、嘴唇、头发较亮部分及一些阴影，这就是非常细小的颜色，所以需要非常专心，从而归类好每一部分的颜色。对颜色进行仔细观察，然后对选取的颜色重新排序。丢弃那些相似的颜色，接下来你就会兴奋于自己的发现了。

3．逐个对颜色进行尝试

将照片放到那些颜色样板上面，结果都是很漂亮的，不是吗？这是一件非常有趣的事，无论你怎么做，都是不错的搭配，奥妙就在于我们使用的颜色其实是照片中已经存在的某一种颜色。

▲暖色调：粉红、棕色、红褐色、橙红色，这些是暖色调的，这些颜色来自模特的头发和面部。暖色调时这个女孩更温和、更娇柔，所以暖色调用来传达温馨的画面较为合适。

▲冷色调：冷色调主要是蓝色调，产生一种商业气氛，有比较直接的效果。当我们使用越暗的颜色，照片中女孩的面孔就越有一种突出页面向你靠近的感觉。

4．利用色相环

色相环是用来反映一种颜色和其他颜色相互关系的工具，选择任何一种颜色之后，在色相环上找到它相应的位置。

任何一种颜色，比如我们选择了图中的蓝色，然后在色相环上查找它相邻的颜色。我们把这种颜色称为基色。前面已经知道这些基色与照片中的颜色是互补协调的。现在要做的就是要寻找与这个基色相配的其他颜色。要记住：如果设计时需要用到其他文字和图形，那么和它们的颜色也是相关的，需要选择暗色调及浅色调来形成对比。

由于色相环中的颜色是基于基色的（并不包含所有颜色值），因而在你配色时，并不能做到百分之百的精确，这只是一个方法指南。

5．创建调色板

现在可以创建一个令人激动的协调色的调色板了，例如，中间蓝色可以和深蓝色以及深色的紫罗兰相协调。

▲单色：首先是一种基色的深色、中间色和浅色。这是一种单色调板。这里没有色相的变化，但通过明暗对比可以产生非常好的设计。

▲近似色：一种色环上的颜色的任意两边的颜色都是近似色。近似色共享同一种色相（这里是湖蓝色、蓝色和紫罗兰色），可以产生一种漂亮的，低于对比度的和谐效果。

▲对比色（补色）：在色相环上与一种颜色在完全的对立面，称为对比色（本例中为橙色）。对比色有很强的对比效果，两种互为补色的颜色应用在一起，可以传达一种活力生机的效果。一般来说，补色要产生好看的效果一般是一个大一个小，如一个橙色的圆点用在一个蓝色的区域中时，效果非常好。

▲分裂补色：一种颜色与另一种颜色既不是补色又不是相邻色，则这些颜色称为分裂补色。在相邻色的低对比度搭配中加入这些颜色，会使这个效果变得生动。要注意的是，加入的这些分裂补色的面积不宜过大，本例中的蓝色看起来更像是一个重音符。

但要注意的是，对比色比例要一大一小，主色为一个面，而它的对比色是一个点。还有配色上明度的变换，如果同在一个明度上，颜色是会 “打架”的。

▲对比色/近似色：这个混合调色板看起来很像分裂补色调色板，但它含有更多的颜色。在暖色调部分有着柔和色调，可以产生丰富的色彩色调。但在对比色方面又可以产生强烈的对比，这种调色板会让人产生强烈的兴奋感。

▲近似色/对比色：用冷色调创建相似色再加上一点暖色的对比色。请记住不同的明度值会产生不同的对比效果，如果明度值相同，那么在视觉上就会相互“打架”，争夺读者的视觉，但如果明度值不同的话就不会有这种感觉了。所以要用吸管工具去提取颜色的不同明度值来搭配使用。

6．校对及应用

现在来使用颜色搭配。该怎样选择颜色来搭配？关键是要看你想传达什么样的信息。回忆一下刚开始提出的设计要求是什么，然后再来选择配色。

商业气息：蓝色是人人都喜欢的颜色。有趣的是这里的蓝色和橙色是从照片中来的，这就产生了一种自然的对比效果。蓝色的背景色与照片中女人的蓝色衣服融为一体，使女人的目光更容易吸引人的注意，既漂亮又有商业气息。

如果忘了我们的设计要求，就回到2.6节刚开始看一下：我们的目的是要使设计效果看起来令人耳目一新，充满活力，个性十足，同时又要传达一种商业气息。

权威气息：这个调色板中的深红色来自她的头发，从色环中我们知道，这个颜色与橙色是一种近似色。蓝色的眼睛和衣服显得不再重要，而是成为了一种点缀性的对比。

热情气息：人物头发的亮色在页面中变得更加突出，而蓝色衣服使画面产生了对比和层次感。另一个焦点是黄色的标题，给人的感觉像是从照片中剪出来一样。整个空间显得比较平淡，这种颜色搭配产生一种热情迷人的效果（如果是在设计比赛中，这个设计可能会胜出，因为它比较特立独行），但只有那些大胆的客户才会选择这个设计。

休闲气息：采用了蓝色的相邻色——青色，这种青色在该照片中并不存在，使得整个设计融入了一种轻松、活泼的气氛。整个效果看起来带着时尚、更平易近人的气息。而英文字母仍采用了橙色，是一种较温和的对比。

浪漫气息：同样是蓝色的另一种近似色，紫罗兰色在照片中也是不存在的。从色相环中知道，紫色与红色靠得较近，而整个效果看起来有点夸张，因为照片中的女人的面孔、头发与背景的颜色显得比较接近。紫罗兰色是一种冷色，通常与温柔、女性联系在一起（也包含着清新和精神饱满的感觉）。