Web Graphic Design Skill

成为一个顶级设计师的第二准则

2009-10-19T10:54:00.000-07:00

限制你的色彩

成为一个顶级设计师的7个简单原则的第二部分

限制使用你的色彩。好象上个准则是让你限制用你的字体，对吗？非常对！我们限制用我们的色彩的原因和我们限制使用字体的原因一样。在我们的设计当中减少色彩的数目将使之变的谐调。基本上，每件东西看起来将很一致，就像一个体育队伍的运动服或者是一个公司的商标那样。—我们想使制服（运动服）整体看上去是一个色彩的。

和选择字体一样，限制使用你的色彩数目只是一个参考指南，不是一条准则。你可以在你的设计中很好的使用彩虹的颜色，那将非常好看。但是一开始，你需要一个使用色彩的策略，并且坚持用这个策略。使之始终贯穿在你的设计中。

对于初学者，让我们来说一下色值吧。一个颜色的色值就是它的亮暗程度。例如一个黄色是非常亮的颜色，紫色就是很暗的颜色。当然一个颜色可以有它的色彩值域。例如，紫色是一个使我们大多数人联想到暗色的颜色，但是紫色也有很亮的紫色。这里有个例子关于一些颜色和它们相关的色值。然后，你可以看到的是一个颜色的色值范围。

所以当我在采用的色彩方案时我会用一条准则：确保在你的色彩方案中有一个色值的范围。在任何设计中你都需要一些淡色和一些深色去形成对比。如果要举例的话，你设计的背景是深色的，你就需要一个淡颜色的文字，图画。这样的话文字，图画就容易被阅览。反过来，如果你有一个淡色的背景，你就需要一个深色的图画，文字或是其它什么的。

我也会代表性的只采用2-5种颜色去完善我的色彩方案。减少选择的数目，那么你就会在你的设计中得到一个好结果。这里有个色彩方案的例子我将它们放在一起。就像你看见的，我采用了一个深色，一个中间调子的颜色和一个淡色。就从右边开始，我为每一个颜色建立了一个色值范围。这些色彩组合就像我的调色板，我会将它们运用到我的设计项目中去。一旦我有了这个调色板，我就会尽全力只用这些颜色。

好了，我们刚才说到了一些色彩采用方面的技巧，像你需要选择多少种颜色，它们的色值应该是多少；那么下一步是什么呢？我将告诉你什么是下一步，也是最难的部分；那就是如何决定这2-5个颜色！我个人认为这是项有时候有点难的活儿。这里有张表，是帮助我采用我的色彩方案的技巧的表：

确定一个冷暖色调的范围。
就是采用暖色调或冷色调。暖色有红，橙，黄，棕色等。冷色是蓝色和紫色。我认为绿色是一个相当中间的颜色。如果你将所有你选用的颜色处于一个色调中，他们将肯定非常和谐。
到www.colourlovers.com 网站上汲取灵感
这个精彩的网站全是关于色彩方案。你只需一页页的点击色彩方案。
留意你的周围
色彩方案在你的周围到处都是。看一下食品店的包装，看一下你们当地的星巴克咖啡店的油漆颜色，看一下大自然！如果你看到一些令人愉快的色彩，只要在脑海中作个笔记，看看是否可以复制到你的电脑里去。
留心一些已有的公司商标色彩
我常常运用一些已有的商标色彩，我会看一下他们的logo，色彩方案并且将之成为我最初的想法。然后可能只加上一个或两个颜色。

这里是一个我已经完成的设计，它展示了被限制的色彩方案。

如你所见，紧凑的色彩方案和统一的字体真的使所有的东西都井井有条。

我知道这些课程都很基础……但是这就是设计的基石。所以，它永远不会伤到一个恢复精神的人。下面5个准则马上就要出来了，我保证下5个要更加有趣。谢谢！

成为一个顶级设计师的第三准则

2009-10-19T10:51:00.000-07:00

成为一个顶级设计师的第三准则：对比，对比，对比

在设计里面，好的对比和你对颜色选择是密切相关的。对比是指在你的设计里面，颜色之间的明度不同。明度是这个颜色看起来有多亮或有多暗。曾经看到一个以空白画布为题的笑话，有人说：“看，这是一头白色的牛在暴风雪里面！”这就是一个没有对比的例子。白色在白色上面是没有反差，你看不到任何东西。

很幼稚吗？我的意思是这条指南看起来是不是很愚蠢？我在解释的东西有需要吗？这个概念是不是很迟钝？

相反。

因为很不幸的是，我一直看到设计师在对比上有很多问题。不仅仅因为这样，当对比使用恰当的话，能成为一个很重要的设计手法。

我常看到这样的错误：设计师用不同的颜色去产生对比而不是用不同的明度。比如，用一个中值的蓝色放到一个中值的红色上面来产生对比。你可以看到这两个之间的不同。但是，当你把两个不同颜色同一个色值放到一起，它产生了“颤动感”(由于巧妙的对比也会形成非常显著的、生动有力的色彩效果)。你会注意到，当蓝色和红色相遇的时候，你的眼球就会在这两个颜色之间来回颤动。几乎能感觉到文本的脉动。

如果你的目标是让某些东西充满活力，你可以使用这个技术。但是这样对眼睛来说是很困难的，并且大部分人都会觉得它令人厌烦。这里有另一个用不同颜色但有更强对比的例子：

第二个很明显对眼睛来说更容易接受。

成为一个顶级设计师的第一准则

2009-10-19T10:45:00.000-07:00

成为一个顶级设计师的第一准则：限制你的字体

让你成为设计大的七个基本原则之一

好~设计大师，或者也太吹牛了吧，但根据下面七个基本原则至少你可以成为一个熟练的设计师。
这将是最短的最详实的系列博客文章，你看过后就会知道如何成为一名更优秀的设计师。
请记住：这些原则不是定律，是可以打破的。它们只是些通用的指导，我在设计的时候通常会遵循它们，遵循这些简单的设计原则，你就会找到一条你属于你自己的优秀艺术道路。

原则一：限制你的字体。

你会看到一个好的设计很大一部分看起来非常协调。一个最好的方法是用少量的元素去完成一个看起来非常协调的设计。
你最先选择的字体可能是你想要删掉的，我常常的做法是一个作品剔除2种字体。第一种字体可能会是很有思想力或艺术感，将给你的设计带来第六感，特征或个性。这些字体集合了当时所有心情的片段，这个扭着腰枝的有趣字体像女孩们的舞会，这个蹩脚邪恶的字体是一个摇滚乐队？我将使用这个花哨的字体人为文本的标题，在任何地方它都需要足够大，这个花哨的字体将是这块的重点。你通常很少再用这字体，但它又大得多，所以这就是人们看到的重点内容

第二种字体要非常普通，读者在整篇当中都不会感觉到它的存在。这种字体需要有很高的易读性，它会占据这篇文本相当大的篇幅，显然，那些大手大脚的艺术字体占据文本的大篇幅的话会非常影响阅读的。

这有一个正确使用字体的设计例子。正如你所看到的，这里只用了两种字体，花哨的艺术字体作为标题出现，内容就是很基本的字体。这样看起来整洁，协调。

这里还有一个失败的例子，这里我用了很多花哨的艺术字体，这样很不协调，分节看起来并不是配合主标题。

在一个设计中有太多的字体是大忌，没有什么事比用8种字体来印他们的传单看起来更糟的了，同样使用艺术字作为正文也更糟。这是一个错误使用字体的例子。

在我让你亲自动手之前的最后一个思路。如果你的艺术字看起来非常时髦有现代感，那正文部分就使用无衬线字体；如果你的艺术字看起来很正规化，那就用衬线字体作为第二字体吧。。

PS1：第一次翻译东西，有些地方可能并不一定正确，看懂原文的还是看原文吧。最后感谢我的父母，感谢谷歌，感谢金山，感谢CCTV，感谢所有TV。。。。

PS2：衬线字体与无衬线字体

Serif 或 San Serif？
Serif 是一个字笔画的结尾，例如 M 的起点与终点。Serif 是由罗马刻印字母所发展出来的，用以改良字体的优雅程度与易读性。它们是先用毛笔写在石头上，然后再刻出来的。Serif 会活存到现在，是因为它们十分美丽及古典，而且它们阅读起来比较容易。对于细小的文本字体，非常适合用 Serif 字体，相反地您可用 Sans Serif（Sans 是法文里的“无”），来当标题或是供短篇文章的字体使用。

不同字体的分类

拉丁文字方块字
衬线字体 (Serif)
笔划粗幼对比明显，阅读时较省目力
Times New Roman
Architect
BalletEngraved
Creedmore
Benjamin
Capshc
新细明体
宋体
标宋

无衬线字体 (Sans Serif)
笔划粗幼平均、对比不太明显
字型较突出，阅读时较费目力
Alberta
ANNSTONE
Garamond
Nimbus Script
黑体

《色彩解答》之三色彩对比

2009-10-19T10:40:00.000-07:00

我们知道在设计中有很多对比，大小的对比，形状的对比，长短的对比，多少的对比，这些对比都比较容易理解，因为大小、长短、多少是很容易看得出来的，也是可以量化的，我们可以彩用黄金分割比的方式来限定我们设计中的这些长短多少比例。但是色彩没办法用黄金分割比来进行限定，所以色彩之间的对比就变得仁者见仁知者见智了。我时常听一些美院的朋友跟我说这样一句话：“素描靠功夫，色彩靠天赋”这句话虽说出来让人觉得不那么舒服，不过也能反应出一些问题，那就是说色彩是靠感悟出来的，关是练习是没用的。

色彩太多了如果一一匹配分析也不现实，如果色彩只有256种那么也就没有色彩的烦恼了。不过我们可以从另一个角度来分析，我们从色调、明暗、饱和度三个方面来进行对比，这样色彩的对比就会显得比较的容易理解了。首先来解释这三个关键词：色调，指每种色彩独特的性质。比如红、黄蓝，也就是一种色彩的基调。比如“酒红色”就是红色调的怎么也能把他划到绿色与蓝色上。明暗这个很清楚，就是指色彩的深浅之分。换句话说，就是晚上与白天看同样一个色彩，其色彩的明暗是不一样的，因为他所反应的光线的强度也是不一样的。或者这样解释，在一种色彩中加入不同剂量的黑色那么这个色彩的明暗就会产生不同的变化。饱和度，就是指色彩的“纯度”或是亮度。这个饱和度很有意思，他的特性有时会与色调与明暗之间变得很模糊不太容易分辨。

解释了三个关键词，下面要讲的是什么样的对比是可性的。我们都明白配色时需要有对比不然就不好看。但是很多时间大家都不明白怎么样对比才是可行的。其实我们只要注意避开“灰”“邪”的配色就可以了。什么叫“灰”呢，就是对比性太差，没有精神，显得灰、脏。那什么叫“邪”呢，就是指对比极度的不和谐，有点针眼，让人很不舒服。

如何避开呢，这里有一个小窍门，只要寻求色彩、明暗、饱和度三者之间有一个是统一的。这样的色彩对比通常不会出现什么问题，我们可以通过下面的图示来直观的感觉一下。

《色彩解答》之二色彩比例

2009-10-19T10:37:00.000-07:00

这次我们将深入进去了解一下众多色彩在一起之后所存在的“比例”关系。

我们在使用色彩的时候不可能把所有的色彩都做得一样大小，当然如果你是在排色谱，那是例外。我们在设计网页或是平面作品时我们大多会想好用什么色彩为主色，并找到相关的色彩为辅色。但是往往到实际工作的时候就主辅不分了，也不清楚什么是主什么是辅。结出做出来的东西，色彩杂乱，没有主次！

学习设计的人都想做出好东西，但是往往却事与愿违，从手下出来的作品总是不能达到自己的要求。其中对色彩比例的取舍上总是犹豫不决，结果往往是做出错误的判断。到底我们要怎么做才能做出漂亮的色彩呢。从比例的安排上可以帮助我们得到部分答案！下面看图：以下是一外国网站的截图，这个网站用的色彩不多，白色，黑色，橙红色。不用我说大家都知道什么色彩最多，什么彩色最少！

白色最多，黑色其次，橙红色最少，但是大家有没有发现一个问题，最醒目的不是黑白色，而是橙红色。这至少证明了：色彩多并不一定醒目，色彩少反应容易吸引注意力。

另也是因为黑白色都是无彩色，所以橙红就会显得更加的鲜艳。大家注意到了，这里的比例目测大约是　白70%，黑22%，橙8%

这里我们得到一个结论：越是鲜艳的色彩越是少用，所占的比例一定要少一点！

那什么样的色彩比较要大一点呢？我们可以看一上图与下面的图片，大家一定会有一个比较感性的认识。亚光色、无彩色的比例要战占得多一点。高亮色是不适合大面积出现的而高亮色最好是以很少的比例出现。

《色彩解答》之一色彩层次

2009-10-19T10:32:00.000-07:00

敢写这样的文章真是有点胆大包天了，但是面对很多没有接受专业美术教育的网页设计人员来说，色彩问题真是让他们头疼的事。也许只是因为在这个方面没办法开悟结果放弃了这个行业。所以我也就冒天下之大不违，斗胆写这篇系列文章。希望能过这篇文章为那些需要帮助的朋友进一点微薄之力。但是由于色彩涉及内容很多，不知写什么样的东西会让大家觉得很实用，所以这篇系列文章需要大家提出自己的问题，然后我会整理所有的问题，分类之后逐一解答。第一篇我就按我自己认为最有必要写的一个题目来写《网站配色中的色彩层次》

网站配色中的色彩层次

很多网友在经典论坛里说自己的网站为什么色彩上总是有问题，总是看起来没什么精神，没办法吸引人注意。小毅观察了一些网友们设计的网站发现他们在用色上不够大胆，同时也缺乏对色彩层次的理解。

对于色彩的层次我记得我在《商业网站分析》有讲述过，当时没有听布鲁斯狼的劝告没做成文本形式，结果文章整体丢失。现在在这里正好重新讲述一下。

色彩的层次是指当我把作品去色之后，作品中有没有表现出从黑到灰到白的存在比例。如果一个作品的黑色比较多那么整体的效果就会显得很沉重，而如果白色很多的话那么整体效果就会显得很苍白，如果灰色很多，白色与黑色都很少，那么整个版面就显得很脏了！大家看一下下面的图片，这个是被去色的图。大家看到了很多地方并非只是一种色彩，所以会产生一种色彩的渐变。

很多人在制作网站时也会找到自己的主色与辅色，但是却没有把辅色用好。所表现的作品色彩上就显得那么的单调没有生气，那是因为没有注意主色与辅色之间色彩层次关系。丰富的色彩层次还可以帮助作品色彩艳丽。很多人想表现艳丽的色彩时总是在拾色器中找到个高饱和度，高亮度的色彩，可是做出来却发现并非是自己想得那样艳丽。看一下面的图片比较。大家会发现上面的图要比下面的图艳丽的多。好了，这次就讲到这里，希望大家多多提出宝贵意见以便小毅可以继续写出下一篇关于色彩的文章。

网页效果图设计之色彩索引 - 2

2009-10-19T10:09:00.000-07:00

3.4.2 橙色

橙色能促进食欲；橙色的房间代表了友善，带给人愉快，能促使人谈话和思考；橙色能够用来强化视觉，这就是为什么海滩救生员的救生服采用橙色的原因，如图3-30所示。

3.4.2.1 橙色的具象联想
秋天、桔子、胡萝卜、肉汁、砖头、灯光。

3.4.2.2 橙色的正面联想
温暖、欢喜、创造力、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美。

3.4.2.3 橙色的负面联想
粗鲁、时髦、喧嚣、嫉妒、焦躁、可怜、卑俗。

3.4.2.4 橙色的文化域

在爱尔兰，橙色代表新教运动。
在美洲土著文化里，橙色代表学习和血缘关系。
在荷兰，橙色是国家的颜色，因为荷兰的君主来自于Orange-Nassau家族。
在印度，橙色代表印度教。

3.4.2.5 实例说明

如图3-31所示，为韩国芬达网站（http://www.fanta.co.kr/）网页截图，整个页面使用橙色作为主色调，和其主打产品－橙味汽水紧密结合。

3.4.2.6 橙色系配色方案

橙色系的配色方案如下，如图3-32所示。

在橙色中混入大量的白，有一种干燥的气氛。
在橙色中混入少量的蓝，能够形成强烈的对比，有一种紧张的气氛。
在橙色中混入少量的红，给人以明亮、温暖的感受。

网页效果图设计之色彩索引 - 1

2009-10-19T10:03:00.000-07:00

人们用自己的眼睛和头脑来感受色彩。这不仅仅是物理层面上的，而且包含着精神和情感层面。当我们看色彩时常常想起以前与该色相联系的感受或事物，这种因某种色彩而出现的感受，我们就称之为色彩的联想。色彩的联想是通过过去的经验，记忆或知识而取得的。

这种感受的结果，就是让不同的色彩具有了其特定的意义。色彩的象征意义多数情况下也是一种文化认同。不同文化中色彩所代表的意义和给人产生的联想是大不相同的，有时可能甚至相反。设计师在应用某种色彩之前，要好好调查一下这种色彩的意义以及它在特定环境下将带给人们的联想。

3.4.1 红色

是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷，如图3-27所示。

3.4.1.1 红色的具象联想
火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。

3.4.1.2 红色的正面联想
激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。

3.4.1.3 红色的负面联想
侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。

3.4.1.4 红色的文化域

在非洲，红色代表死亡。
在法国，红色代表雄性。
在亚洲，红色代表婚姻、繁荣、快乐。
在印度，红色是士兵的颜色。
在南非，红色是丧服的色彩。

3.4.1.5 实例说明

如图3-28所示，为中企动力8周年主题网站（http://ex.ce.net.cn/8tm/index.html）网页截图，整个页面使用红色作为主色调，给人以喜庆、热闹的感受。

3.4.1.6 红色系配色方案

红色系的配色方案如下，如图3-29所示：

在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。