平面设计中色彩的搭配必需要注意的事项(二)
8 [3 {% U! _6 \- C. ^ 网页色彩的搭配
0 [( P/ C0 h7 u" E3 D/ t( E9 y* j9 [, y# v: D
网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?阿捷这里谈一些心得,希望对你有所启发。
: E8 f; e/ i) f/ J# P
/ \: S4 t/ X- e$ q& g 首先我们先来了解一些色彩的基本知识:
: `9 Q9 H, } C* y% Y, [
) g M6 k! _* ^ 1.颜色是因为光的折射而产生的。
. B* c- p. w# ?# \4 O& w. O9 v- ^
2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color
# j" q3 d8 D- `
(255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。
) ?3 Z2 [; r; E- l+ o+ ?
% G% ~8 j. p6 f9 Z6 U: C 3.颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。
. m, W) A5 I1 ~/ j# P; h: N
% t7 n* i. d8 v1 e
4.任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。
3 r" D `# u3 I: n
& { K4 }; ~$ d( P' Z0 L& V 网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。
, I: v, K( Y7 W* X1 P6 M/ I: N# z2 b8 |" y& m' M |+ p
我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。
6 t& D$ t9 X4 C; M
& S; {8 g/ x. m ●非彩色的搭配
' b) R9 M4 p, a5 ?" q l& c" Y0 X
. r+ ~/ P* j1 |4 P( c 黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。
1 q/ ^) t; b1 n: y
灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。
2 f4 |! }: _9 O0 T; b
& F$ l5 ~, }7 t
●彩色的搭配
& k- D2 H# ?, J
. o# o3 G# U! B7 T4 K! l
色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。
# ~ y; H! n" g: L: U/ g
7 c/ Z+ T) p* w2 w+ I; H
一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。色环的两端是暖色和寒色,当中是中型色。(如下图)
! d4 e& V- U7 ]' ~5 T# a3 m9 f6 g- r4 i+ \0 a0 j$ z# Y; a/ K3 P
红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红
/ h: S% ^/ p& D/ J e6 K0 f
7 R; i3 j$ F! _/ G+ } |___________| |____| |_________| |_________| | | | |
4 {5 c( n% E0 m# I
J0 a4 Q3 S0 s; o8 Z6 T+ c
暖色系 中性系 寒色系 中性系
% J3 p; P) |. |/ }0 [6 @* b- T. K# k* y# r5 D4 r
二.色彩的心理感觉
; q( m8 q) `" |% K0 `2 O
6 k8 E% ?. Z- H1 {; t8 V; o
不同的颜色会给浏览者不同的心理感受。
' Y( B& Q% ~7 m% @
6 _: N/ D i2 X* \! S 红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
, N4 g1 Z* E3 ]9 L# O
6 t- Z! J+ b7 k+ F4 A 绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
: {/ @7 l2 F4 Q' y
( o; b' a" h; L" l7 Y* O
橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
# A4 t: h6 O3 `) R+ L6 F4 n
! y( Z7 F. X# U/ {# q 黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。
7 @" A7 z* D6 h' h% R4 \
# h# u% J- h) r+ ?# V6 S
蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩
$ C/ F* L; Z- k
4 N! d8 D; m) W8 X; e* U( v 白色---具有洁白,明快,纯真,清洁的感受。
5 D1 u( y2 E( m' z* B3 q4 n
# M% b# b/ L5 J& |, s) V. B 黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。
6 z+ j6 s. v1 k# h; y( E) Q
}2 r2 k/ O0 S0 X* K k 灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。
' }" _0 H- ~. U; y7 y5 B; P! J c+ p- G- T) v3 ^! X& M m
每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。
8 |! e' ~6 [0 i- k* @
0 }9 y9 m8 \0 v+ k! E8 a `2 n8 j
●网页色彩搭配的原理
: l9 t" k! i+ x2 d4 O
J2 S% w# W- d- U' k b& e# e* i 1.色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。
- ^; `" M- T: S$ n" b5 L
) B& L% B. J$ F6 X" @! F) u0 ?) m* d 2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)
# S8 v, G8 z: K+ X" S2 F) v( ]( O6 y( P" ~; R$ e+ s! `8 Q Z! |; J% p
3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
, u' R* f) @5 f8 n$ i% k8 n
- g& Y7 O0 s/ b" b/ D2 j9 T, a 4.色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。
3 n+ d: u8 ]0 w" O5 i
2 ?, }: e& U0 U ●网页色彩掌握的过程
$ O k0 k- N3 [ ~$ x0 [' a
5 Q5 t: Y, H% d 随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。
! n) A0 ?3 k) G+ h# V! T5 p
$ `1 \# e) j7 [& J; X. L4 Z
○网页色彩搭配的技巧
! ?& G0 f5 `. c: |- H2 V) p
7 G! v S; a1 k, E
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将
% Q5 a: D) P' G' _! [2 o0 b5 K8 s色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。
5 W: y7 J \! f3 c# {2 b
1 @' D: a1 T( [" k1 } E2 W7 N/ J
2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
2 Z+ e2 _6 ~* }+ q$ ~- U
4 X; j/ K2 }% P9 ]6 J2 X 3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了
, J) o: g B" Q4 l! q: a& ^7 j- Y
) f5 L, ?1 g7 Q9 x2 j) j
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。
4 s7 x% Y2 `1 W% x' c& t, t
/ b! ?! O7 ]% U* b! j 在网页配色中,忌讳的是:
7 @6 t5 v7 D1 S4 J; t+ B- T: }, h* ^: N( v3 [2 i# o( i
1.不要将所有颜色都用到,尽量控制在三种色彩以内。
" ~) @( V5 a: m1 }! F
% @7 j4 t- @0 Q4 w 2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。