设计师谈网页配色---读书笔记

      关于视觉设计 2004-6-25 15:29
相信来这里的很多朋友都和我是一样的,都不是专门学美术专业的出身,很多是学工科的朋友。两门学科之间的区别决定了思维模式的区别,不可否认我们思维有时太过理性化和模式化,以至于作品的僵化,没有太多出彩的地方。而又有太多的时候我们是单凭一种模糊的感觉在设计,学习一些版面和色彩的知识相当必要。

这里的内容主要是来自书上的内容,部分加入个人理解。搞的不好不要打我~~~

我们最终要达到的目的是,当下次别人(客户、老板…)问起“为什么你这里要用这个颜色”的时候,我们将不在是毫无说服力的说“我感觉这样很漂亮”,而是很拽的说“这种类似的色调的搭配可以凝造出幽雅的氛围”

另外,由于我自身水平的局限,可能会有谬误的出现,希望高手的指正。另外的另外,还是希望大家去买这本书,多多支持书商们多出,多引进好书。

web color design----设计师谈网页配色(全彩)
电子工业出版社
韩国I.R.I色彩研究所著
书号:isbn 7-5053-7931-3/yp.4614
定价:38

这次贴的主要是关于一些概念的基础知识(如果已经了解的,可能觉得没有什么意思),没有过多的个人言语,基本是搬上来的。

颜色知识的入门

构成颜色的三要素:光源,物体和人的视觉系统。
这3个要素的差异将会导致颜色信息产生差异,其中,光源和物体是判断颜色种类的标准。

光源色和物体色
会发出光的物体发出的光属于光源色。
光照射到一个物体经过反射或穿透显示出的效果就是物体色。

三原色
原色是说它是无法通过混合其他颜色来得到的颜色。
依据上面的光源色和物理色的区分,原色的种类和配色方案也是不同的。
光源色的三原色:红色red、绿色green、蓝色blue(即RGB颜色)
物体色的三原色:洋红magenta、黄色yellow、青色Cyan(即CMY颜色,即即CMYK颜色)

RGB颜色-----加法混合
当最大能量的红、绿、蓝混合的时候我们将得到纯白色,通过适当调整三原色的能量数值,我们能够得到其他的色调的颜色(不同亮度和对比度)。
RGB颜色属于加法混合,即颜色的混合后的结果颜色亮度将高于原有颜色亮度。
例如混合红色和绿色时得到的黄色的亮度要比原色的红和绿的亮度高。
红+绿=黄
绿+蓝=青
蓝+红=洋红
红+绿+蓝=白

CMYK颜色-----减法混合(就是CMY颜色,里面的K是Black的K,即CMY混合后得到的黑颜色)
当混合了物体色的三原色的时候,可视范围内的颜色全部被吸收而显示出黑色。
CMYK颜色属于减法混合,即颜色的混合将降低结果颜色的亮度。
例如混合洋红和黄色时得到红色的亮度要比原来两个颜色的亮度低。
洋红+黄=红
黄+青=绿
青+洋红=蓝
洋红+黄+青=黑


不同环境决定颜色不尽相同

颜色的信息在数字环境中的保存主要是通过对模拟颜色信息的采样和量化实现的(工科的理解比较容易,学计算机的可以找当时的多媒体教材看一看,讲的比较细),最终以0和1的形式进行存储。当含有颜色的数据信息到来时,系统会在预先定义的地址范围(系统内置的调色板)内寻找相应的颜色代码,并通过转换信号的形式来显示出最终的颜色。

我们在制作网页的时候需要考虑的影响颜色的主要因素有3点。
1.不同的操作系统间的颜色会有差异,即使用同一台显示器也会有差异。这主要因为不同的操作系统内置的调色板之间存在差异。
2.显卡的优劣直接影响显示效果,如支持的颜色的多寡。
3.我们浏览网页用的浏览会去解释网页中的颜色信息,而不同的浏览器也会内置不尽相同的调色板。
另外,我觉得不同的显示器的设置也会引起颜色浏览效果的差异,如显示器的亮度,对比度,色温等。

216网页安全色(后简称为216色)
为了尽量避免上部分所述的问题,人们发现了216色,它可以在不同硬件环境,不同的操作系统,不同的浏览器中正常显示,可以避免出现颜色时失真的问题。
它的构成
红,绿,蓝的颜色数字信号值由0,51,102,153,204,255(以51为量阶,为了便于记忆)混合构成。或者以16进制表示为00,33,66,99,cc,ff表示。
一共有6x6x6=216种颜色(6为每种颜色的数字信号的六个数值)。
其中彩色为210种,非彩色为6种。

如果使用了非216色的时,而且在浏览器的内置调色板中没有一致的颜色时,浏览器会用内置调色板中与目标颜色最相近的颜色进行替换,而替换的方法是Dithering方法。

Dithering方法主要是利用两个与目标颜色相近的216色来进行横纵交叉来模拟目标颜色,显示效果通常比较模糊。

但是现在设计网站也不一定局限于216色,许多优秀的网站都是在主要内容上合理使用了216色后搭配了非216色,做到了新颖独特的设计风格。

不同的216色调色板
这里主要谈了以下3种调色板
Browser-Safe Color Palette
216-Color Webmaster’a Palette
I.R.I Web Color Sense Palette Seires(其实还是主要讲的这个,可以在www.iridesign.co.kr下载到供PS和AI使用的调色板)

我觉得它们的区别主要是不同的颜色排列方式,有的突出亮度对比度,有的是横向排列色相然后纵向排列相对应的色调。

总之,不同的调色板主要是方便不同的设计师按照自己喜欢的方式选择颜色。
标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}
}