设计中的颜色搭配技巧

作为专业的设计师必定对颜色的使用十分敏感，不管是设计网页，平面图，标志等。我们都会使用各种不同的颜色。比如经常会用白色，黑色，灰色作为主色调。

当前位置: 思缘首页 > 其他教程 > 网页设计教程 > 

设计中的颜色搭配技巧

时间:2009-10-27    来源:logo设计在线    作者:陈汉聪    点击: 295次

作为专业的设计师必定对颜色的使用十分敏感，不管是设计网页，平面图，标志等。我们都会使用各种不同的颜色。比如经常会用白色，黑色，灰色作为主色调。

作为专业的设计师必定对颜色的使用十分敏感，不管是设计网页，平面图，标志等。我们都会使用各种不同的颜色。比如经常会用白色，黑色，灰色作为主色调。搭配其他的鲜艳颜色进行相关设计，本文讨论的内容主要也是关于如何在设计中应用颜色搭配，使最后获得的效果不乱，不呆板。并且具有美感。

利用色轮，我们可以将一张度假酒店的宣传卡片轻易变成一系列不同颜色搭配的设计。

你是否曾经想过，要如何才能让你付出越少，收获更多?在本文中，我们将讨论一个系列卡片的设计，每一张卡片色调完全不一样，但却让人感觉是一个系列的设计，这种设计我们可以轻易完成，设计起来所花的时间和精力都不多。我们利用了一张矢量图片来产生不同视觉效果的设计，看一下我们是如何实现的。

从矢量格式图片开始：

矢量图片是利用绘制的程序产生而成，它与照片不一样，矢量格式的线条及形状是对象，而不是象素。

有两种图片格式：

栅格格式：

一般的照片是由栅格中的微小象素构成，其优点是它色泽丰富逼真，而且渐变丰富。而缺点则是图片修改起来非常麻烦。Raster一词来源于德语，意思就是栅格。

矢量格式：

矢量格式是利用定位点将直线及曲线连接起来，象Adobe Illustrator软件，就是处理矢量格式的软件。矢量格式的优点是对图片的修整非常轻松，而且你可以任意放大缩小都不会降低图片质量，而且存储的文件也非常小。“矢量”是一个数学术语，意思是空间中的一个点与其它对象的关系。

矢量格式非常容易调整：

矢量格式的特点使它非常容易进行移动元素、改变形状、填充颜色等操作。

仔细观察：在你开始工作前，让我们先花些时间来看一下我们所要面对的这个图案的构成及各个元素之间的关系。

放置并裁剪图案：

在开始时我们要处理好构图，在这个设计中，为了传达一种茂盛及花园气息，我们的花朵图案大概占了设计版面的60%，超出的部分，我们可以不要。

观察颜色：为了使我们对这张卡片的上色能够轻松达到漂亮的效果，我们不能随随便便地挑选一些颜色。我们需要明白颜色之间的关系，为此，我们需要利用到色轮，色轮是将无数种颜色简化为12种基本色相。 12种基本色相，观察颜色：为了使我们对这张卡片的上色能够轻松达到漂亮的效果，我们不能随随便便地挑选一些颜色。我们需要明白颜色之间的关系，为此，我们需要利用到色轮，色轮是将无数种颜色简化为12种基本色相。

12种基本色相，再加上明色及暗色。中间的色环是12种基色，而上方：(1)黄红蓝，是三原色，只有这三种颜色不是由其它的颜色调合而成。(2)二次色是三原色中间的颜色，每一种二次色都是由相邻的两种原色等量调合而成的颜色。(3)剩余的颜色中，则是三次色。他们是由相邻的原色及二次色调合而成。而内环及外环则是明色及暗色，是通过增加白色及黑色调合而成。

选择色域：真实世界中有无数中漂亮的颜色变化，但为了使设计变得简单，我们只选择色轮中已有的颜色。我们将会用到类比色来达到和谐的效果，然后用补色来产生对比及差异。

相同/相反：上图中，相邻色(即类比色)搭配总是能够产生和谐的视觉效果，因为他们都含有大量相同的颜色。在上面示意图所示区域中，每一种颜色都是黄色作为主导。而与其相对的另一边，则是补色，互为补色的两种颜色意味着它们没有共同的颜色，所以补色搭配能够产生强烈的对比。

明色及暗色：为了使我们在设计中所选择的色域范围更广，我们将整个色轮通过增加白色或黑色来变亮或变暗。这些就是不饱和颜色，不饱和颜色通常给人一种柔和、低调、朦胧及更意味深长的感觉。有趣的是，虽然我们是从三个色轮中取色，但所选择的颜色都可以互相交换，因为它们都具有相同的基色。

开始填色

现在我们要做的是，利用色轮分成十二个步骤及明暗两种色调来设计卡片。花纹图案将会采用类比色搭配，而文字则采用与其相对的补色，看一下效果如何：

第一种：

点击上图看大图

第二种：

点击上图看大图

第三种：

点击上图看大图

第四种：

点击上图看大图

第五种：

点击上图看大图

第六种：

点击上图看大图

第七种：

点击上图看大图

第八种：

点击上图看大图

第九种：

点击上图看大图

第十种： 第十一种： 第十二种： 内页设计： 一般来说，内页的设计应该比外页更简洁，我们从原图案中采用一至两个元素，调整好大小，改变位置即可。 相同的背景及图案：在上面这个内页设计中，我们从原图案中采用其第十种：

第十一种：

第十二种：

内页设计：

一般来说，内页的设计应该比外页更简洁，我们从原图案中采用一至两个元素，调整好大小，改变位置即可。

相同的背景及图案：在上面这个内页设计中，我们从原图案中采用其中两个元素来设计，并且放大;其中一个元素将其镜像翻转并且旋转。最简单的上色办法就是直接采用外页的颜色用在内页上，这使到内外两页的颜色自然形成良好的搭配效果。

使用同一种字体：内页的正文与外页的标题内容并不一样，但我们还要是要遵从延续性的原则，内页的文字应该要与外页的文字形成和谐搭配。在这个例子中，下沉字母我们采用了外页的大标题字体(Didot HTF 24 Light Roman字体)，而正文则采用了外页“Siganus Island”所使用的字体(Mrs Eaves Italic字体)。

本文所使用的颜色数值：

　　色彩是设计者的得力助手，前提是应用得当。对于网站设计而言，色彩的重要性尤其突出，不过经常被粗心的站长忽视。我们经常说“第一映像最重要”，于是设计网站时，设计者经常会花很多精力制作一个“富于冲击力”的LOGO或者BANNER，当然，它们很重要。但是，访问者访问网站时的第一映像实际上并不来自这些LOGO或者BANNER，而是——色彩！

　　好了，在了解了色彩对于网站设计的重要性之后，我们开始探寻色彩的奥秘。

　　色彩入门

　　首先让我们熟悉一下色彩的一些基本概念。

　　三原色

　　一切颜色都来自三原色：红、黄、蓝。

　　在这个圆环中，相邻的两个原色相混合可以得到另外三个比较重要的颜色（下文将其称为二级原色）：红+黄=橙，红+蓝=紫，蓝+黄=绿

　　让我们再深入一步，三原色和三种二级原色可以进一步混合得到更多的颜色，分别是橙红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色。这六种颜色可以称为三级原色。

　　按照同样的方式不断进行下去，这个圆环中颜色之间的分隔线就会消失，得到下图所示的“色彩圆环”，在一些绘图程序的调色板中我们可以看到这样的色彩圆环。

　　但是这个圆环仍然没有涵盖所有的颜色，对于圆环中的每一种颜色还有饱和度、亮度和灰度等的变化。也就是说，将上述圆环中的任意一种颜色和黑色、白色、灰色按照不同比例混合就可以得到更多的颜色，下面将详细介绍。

常用的色彩术语

　　饱和度

　　某种颜色的饱和度是指这种颜色所包含的基本颜色的多少。例如RGB值为（0，0，255）的蓝色是纯蓝色，他的饱和度是100%。随着饱和度的降低，颜色会越来越接近灰色。

　　灰度

　　基本色彩和黑色进行不同程度的混合可以得到不同的灰度，例如

　　亮度

　　基本颜色和白色进行不同程度的混合可以得到不同的亮度，例如：:

　　色调

　　基本颜色和灰色进行不同程度的混合可以得到不同的色调，例如：

　　 色彩方案的种类

　　不同网站应当使用不同的色彩方案，与站点的主题相吻合的色彩方案决不仅仅可以让网站“更加好看”，更重要的是在访问者心目中建立对这个网站的感性认识。所以，色彩方案的选择决不能草率，而且色彩方案绝对是网站建设的第一个步骤。如果选择色彩方案时过于草率，甚至根本不对网站进行色彩方案的整体规划，你将不可能制作出一个真正优秀的网站。

　　例如，一个销售婴儿用品的网站应当使用比较活泼的色彩方案，而一个艺术网站则应当使用比较执重的方案。

　　按照色彩方案中色彩使用方式的不同，我们可以将色彩方案划分成多种类型，单色方案、相似色方案、补色方案和三合一色方案。

　　单色方案

　　单色方案是指在网站设计中终止使用一种基本颜色，为避免单调，我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色，由于整个颜色方案中事实上只有一种基色，因此这种方案称为单色方案。例如：

　　在Photoshop的色彩选择窗口中，我们可以这样进行建立单色方案。首先调整H（也就是Hue的缩写）后面的值来调整色调。注意，H的单位是度，也就是基本颜色在颜色环上所处位置的角度。

　　设置好H的值之后，再调整B后面的数字调整亮度以及S后面的数字调整饱和度。注意，其中B和S的单位是百分比，也就是向基本颜色中添加白色和黑色的百分比。这样就可以得到一个单色方案了。

　　下面来看两个使用单色方案的成功实例。

　　单色方案实例之一：

　　这是一个女性网站，因此其基本颜色为粉红色，并通过调整粉红色的饱和度得到了其余几种颜色。总体颜色趋于淡雅，访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。

　　单色方案实例之二：

　　这个色彩方案使用的基色颜色较深，并通过修改其亮度获得其他两种颜色，并用最浅的颜色作为主体部分的背景，使其突出出来。

　　总的来说，单色方案是一种比较稳重的方案，或者说比较保守的方案。单色方案给人整洁、经典的感觉，最适合于内容比较严肃的网站，比如网站，学术网站，企业网站，高雅艺术网站。