• 分享

    程序员来进行网页色彩搭配

    by on 2013年05月15日

多数写程序出身的人对色彩都非常不敏感,但实际上对色彩的认识我觉得并不是天生的,很多时候都是靠我们自己去观赏很多东西,去留意很多设计和细节,日积月累才能获得一个比较大众的色彩观。

做一个具有良好色彩感官的人可以通过以下方式去实践:

1、访问并收藏大量酷站,搜索时的关键词 酷站

2、留意任意给我们感觉不错的页面设计,注意观察色彩搭配

3、自己动手做设计,可以通过photoshop或者用css来写没有设计图的页面

4、留意生活中的任意物品的色彩

接下来,我讲一些粗浅的色彩理论知识。

一、光的三原色

人眼所见的各种色彩是因为光线有不同的波长所产生。经过实验发现,人的眼球对红光,绿光与蓝光三种波长的光线感受特别强烈,只要适当调整这三种光线的强度.几乎就可以让人感受到自然界中所有的颜色。

三种波长的光线所对应的三种颜色,即红(red)、绿(green)、蓝(blue)被称为光的三原色(RGB)。所有的彩色荧幕都具备产生上述三种基本光线的发光装置,因此计算机就依据R、G、B三个数值的大小来表示每种颜色。RGB这三种颜色的组合,几乎形成所有的颜色,每一种原色使用8位(bit)数据记录,就是28=256,而这也正是人们常听到的24位全彩:

因为光线越加越亮,所以两两混合后可以得到更亮的中间色:黄(yellow)、青(cyan)、洋红(magenta),而将光的三原色等量相加,可以得到白色,如图所示。当某一颜色完全不含另一颜色时,二者成为补色。例如,黄色一定是由红、绿二色合成,完全不含蓝色,所以黄色被称为蓝色的补色;从图中可以看到,两个补色之间隔着白色相对,若将其相加也会得到白色。

二、印刷的三原色

颜料的特征刚好和光线相反,颜料是吸收光线,而非增强光线,因此印刷的三原色(CMY)必须是可以吸收红、绿、蓝的颜色,也就是它们的补色:青(cyan)、洋红(magenta)与黄(yellow),以浓度O~100来表示。

因为黄色颜料会吸收蓝色光,青色颜料会吸收红色光,最后剩下的绿色光可以透过反射而得,从理论上说,将印刷三原色混合之后,应该可以吸收所有的红、绿、蓝光而得到黑色,如图所示,但实际上找不到光线吸收、反射特征都完美的颜料,导致结果呈现暗灰色或深褐色。此外,这三种颜料也无法混合产生许多暗色系的色彩。为了弥补这个缺点,印刷时会额外加入黑色(black)颜料,以解决无法产生纯黑色的问题,也就有了CMYK色彩模式,K表示黑色。

加入黑色之后,虽然可以增加可印刷颜色的范围,但也使颜色的调整方式更为复杂。例如.各使用50%浓度的青、洋红、黄色可以混合成灰色,也可以直接使用50%黑色颜料来产生相同的灰色。当一个颜色有不同的混合方法,若再加上颜料的透明度、干燥速度、纸张吸墨程度等条件,颜色的控制就成为印刷品品质好坏的关键。

上面这两段摘自http://www.dabaoku.com/jiaocheng/wangye/peise/2013010117717.shtml

从上面内容了解到,我们做网页的设计时使用的是RGB颜色,我们在浏览器上看到的颜色也都是RGB颜色,因此我们之后说的颜色都将是以RGB颜色来说的。

三、色系

色系是指网页的一系列色彩,也是对网页的最直观的感受,通常包括暖色系、中性色系、冷色系三种。

    暖色系:红紫、红、橙、黄、绿。
    冷色系:蓝、紫、粉
    中性色系:黑、白、灰

了解色系的存在,对我们进行页面设计起着非常重要的作用。一个网站通常由主色调、辅色调、点睛色、背景色组成。一个大众化的设计通常需要使用同一个色系的颜色,而且颜色不宜多,一般控制三种颜色内。一般说来一个网站可以根据自身的情况来选择是用暖色系还是冷色系,假如选择了暖色系,那么冷色系的颜色就要非常慎重地加入进去。我列举几条没有扎实理论的个人心得:

1、网站选择了其中一种颜色作为主色之后,其他的颜色都最好接近与这个主色,或者不要偏离太远,比如选的主色是暗红色,俺么你的辅助色就可以选择淡红色,或者更深的红色(photoshop中可以通过调整饱和度、亮度等方式来获得),搭配的背景色可以是白色、灰色、黑色

2、如果是做个性化的设计,那么很可能需要点睛色,我们也叫做对比色,但是需要防止红与绿、黄与紫这种生活中都比较忌讳的搭配,当然如果在如果在个性化的设计中中间还有别的过渡色彩还是可能获得较好的效果的

3、中国人喜欢蓝色系、红色系、橙色系,这个告诉我们,仅仅是在做一些demo的时候可以首选这三种颜色系列之一就可以获得较好的效果,不要轻易使用绿色、紫色、黄色、这些不是一般设计师可以很好处理的

5、灰色和黑色的使用需要注意灰度问题,灰色用作背景要淡,作为文字要黑,把灰色使用好也将大大提高你的设计水平

6、一般说来不要用底纹图片作为背景,特别是纹路粗扩、清晰的底纹

四、同色调的搭配原则

上面已经大概提到了这个搭配方式,首先,我们要明白,这样的设计并不是否定多色调的搭配,只是让我们这些并非专业的网页设计师明白一个粗浅的知识,进行同色调的搭配可以满足非专业的设计需求。我们随便来欣赏几个蓝色调的网站,看看是不是与上面说的一致:

我们可以看到,腾讯网logo就是以蓝色为主色调,以红黄绿为辅色调。但网页部分到处都是蓝色,只有少数的特殊内容使用了红色和灰色。导航部分是需要突出的,所以使用的蓝色背景图片颜色较亮,文字链接是有点接近黑色的蓝色,内容区域的边框使用较淡的背景色和边线,总之这些内容都是围绕着蓝色。这是冷色系蓝色调的效果

我们再看一下人人网的例子:

还是导航部分由于要重点突出因此是较深的蓝色,文字链接使用的是蓝色,普通文字使用较深的灰色,或者一些不太黑的灰色,边框用蓝色和灰色。这是冷色系蓝色调、中性色系灰色调的搭配效果

再看看淘宝网的例子:

淘宝是以橙色为主色调的网站,普通文字使用灰色,链接使用灰色和蓝色,边框颜色有橙色和灰色,这是典型的暖色系橙色调、中性色系灰色调的互相搭配效果

五、如何才能对色彩敏感

1、多看、多用点心

2、多实践

3、会使用取色工具

这里说一下取色工具,屏幕截图,photoshop的取色工具,有的浏览器的工具、插件也可以做到、QQ的截图也可以。不管怎么样,我还是推荐一下我的取色方式。

工具名称:FastStone Capture 破解版

使用结果是:系统开机自动启动这个工具,自己设置了习惯的快捷键(F3)呼唤出来,上图中的HEX就是通常我们需要的颜色值。为什么要提到这个?

假如你手头有个页面需要设计,但是你一下子完全没有灵感,那好,你可以随便从屏幕上取一个你觉得还不错的颜色,再运用上面说到的一些技巧,然后继续吧。。。

下载地址

FSCaptureSetup65.zip

到这里我想说的已经说完了,接下来又是网络上搜集到的内容,我不相信你可以记得下面这些,但是只要让自己学会欣赏,知道怎样的才是“美”,那么就算你没有经过专业的学习也不要紧,相信你还是可以做出漂亮的页面的。