网页美术设计知识

17
色彩基础
分裂补色（互补类似色配色）：以三个类似色为基础，再加上色环对面的一个对比色构成一种既不 失优雅又能强调重点的有效配色法。这种颜色搭配既具有类似色的低对比度的美感，又具有补色的 力量感，形成了一种既和谐又有重点的颜色关系。如在下图三种颜色中，红色就显得更加突出。
18
色彩基础
19
色彩基础
美术设计知识
ቤተ መጻሕፍቲ ባይዱ
1
色彩基础
2
色彩的秘密
3
页面布局
目录 / CONTENTS
色彩
色彩运用
图像
第一部分
文字
色彩基础
色彩沟通
色彩基础
色彩运用是门学问，它在设计中占的位置极其重要。一件设计作品，一般包含三个元素：色彩、图像、文字。这三个元素中，
以色彩较为重要。人对色彩是相当敏感的，当我们接触一件设计作品，最先攫取注意力的就是作品的颜色，其次是图像，最后
膨胀色与收缩色
冷色系列会收缩；暖色系列会膨胀； 女性丝袜、衣服；黑色（红色）沙发；
1 3
2 4
前进色与后退色
有些颜色看起来向上凸出（前进色），有些颜色看起来凹陷（后退色） 前进色包括红色、橙色、黄色（高彩度）暖色； 后退色包括蓝色、紫蓝色等（低彩度）冷色； 广告牌（红色与蓝色）、宣传单张的优惠日期（红色与黄色） 汽车安全；（蓝、绿、灰、白、红） 食欲颜色（红色、黄色、绿色 / 紫色、黄绿色）
24
色彩基础
蓝色
蓝色有沉稳的特性、具有理智、准确的意象，同时还表示希望。在商业设计中，强调科技，效率的商品 或企业形象，大多选用蓝色当标准色，企业色，如科技、知识、计算机、企业、政府、银行和门户等。 蓝色还代表了“可信”的心理感受，很多企业做网站时都选择了蓝色。腾讯公司官网就是其中之一。
25
冷色暖色 催眠 色
15
色彩基础
原色搭配（三分色配色）：除了在一些儿童的产品中，三原色同时使用是比较少见的。但是，无论 是在中国还是美国的文化中，红黄搭配都是非常受欢迎。红黄搭配应用的范围很广，从快餐店到加 油站，我们都可以看到这两种颜色在一起。
16
色彩基础
互补色配色：在色轮上直线相对的两种颜色称为补色，在下图中，是红色及绿色形成强烈的对比效 果，传达出活力、能量、兴奋等意义。补色要达到最佳的效果，最好是其中一种面积比较小，另一 种比较大。
34
页面布局
35
页面布局
36
页面布局
均衡，平衡整体
37
谢谢!
20
色彩基础
红色
在网页设计中，以红色为主色的并不多，在大量信息的页面里有大量面积的红色是不易于阅读的。但若 搭配好的话，也可以起到振奋人心的作用。过纯的红色容易使人疲劳，引起人的心理反感，所以一般只 有在以活动节庆为主题的网站中才会大面积使用纯红色，而在其他主题的网站中，要使用大面积的红色 就需要加白或调暗。
才是文字。所以设计师最容易通过色彩去表达设计意念，最需要懂得和色彩沟通。
4
色彩基础
明暗、色相、饱和度的强烈与否，甚至其他一切设计元素，取决于我们所表达的情感基调。
5
色彩基础
色相：色相即各类色彩的相貌称谓。
6
色彩基础
明度：明度就是色彩的明暗差别；也可以简单理解为颜色的亮度。
7
色彩基础
纯度：纯度通常是指色彩的鲜艳度，也称为色彩的饱和度。
22
色彩基础
黄色
黄色是在网页设计配色中使用极为广泛的颜色之一，它具有明朗愉快的感觉，在各类信息网站中都可以 使用。但纯黄色很少大面积使用，同纯红色一样，过于强烈了，但小面积点缀用得颇多。比如用暗清色 的黄与其他色彩的暗清色调和使用，页面就会多一些典雅和奇特的感觉。
23
色彩基础
蓝色
蓝色属于色彩三原色之一，它是最冷的色彩，非常纯净，给人一种美丽、宁静、清洁、理智、安详与广 阔的感觉，产生对浩瀚宇宙、万里晴空、碧波海洋的联想； 蓝色是大海与天空的颜色，在自然界中也非 常常见。蓝色是永恒的象征，它的种类很繁多，每一种蓝色又代表着不同的政治或其他含义。蓝色有着 勇气、冷静、理智、永不言弃的含义，所以许多国家警察的制服是蓝色的，警察和救护车的灯一般是蓝 色的。
反射色 与吸收色
第二部分
虚实对比 加强节奏
色彩的秘密
色彩的秘密
色彩有什么之分？ 冷色与暖色
色彩有冷暖之分、时间快慢 之分、轻重之分、反射与吸 收之分、膨胀与收缩、前进 与后退、催眠等 红色、橙色、粉色等为 暖色；蓝色、绿色、蓝 绿色等为冷色；
保险柜、包装纸箱
色彩可以使人的时间感混淆，人看 红色会感觉时间比实际要长； 例如：红色的房间、蓝色的房间； 例子：潜水员; 荧光灯与白炽灯; 会议室；
红色
红色是三原色之一，红色的纯度高、注目性高、刺激作用大，是视觉效果最强烈的色彩。 红色是中华民 族最喜爱的颜色，甚至成为中国人的文化图腾和精神皈依，中国人近代以来的历史就是一部红色的历史， 承载了国人太多红色的记忆。红色代表着平安、喜庆、福禄、康寿、尊贵、和谐、团圆、成功、忠诚、 勇敢、兴旺、浪漫、性感、热烈、浓郁、委婉的感受；意味着百事顺遂、驱病除灾、逢凶化吉、弃恶扬 善…… 在生活中，也随处可见红色的存在，由于红色容易吸引人眼的注意，因此许多警告符号与提示符号都使 用红色来表示，例如红绿灯中的红色表示停止、路边的维修灯号、车辆的煞车灯都使用红色来表示警告、 提醒行人注意等等。在消防设备、消防栓、灭火器都使用红色，方便在必要的时候能够快速的找到它们。
21
色彩基础
黄色
黄色属于色彩三原色之一，是所有色彩中最明亮的色彩。作为暖色调的基准色彩之一，黄色给人一种快 乐、轻快、通透、辉煌、充满希望与活力的色彩印象，给人一种庄重、高贵、明亮的心理感受。但也由 于黄色的明度相当高，黄色很容易受到其他颜色的影响，色相稍微偏红、绿一点就会被觉得是橙色或绿 色，明度降低时就容易被认为是土色，所以某方面而言，黄色是一个相当难以掌握的色彩。 黄色会令人想起太阳，而且在自然界及人类世界中都非常常见。这是一种会引起人注意的颜色。从大黄 蜂到校车，从交通灯到荧光笔，到处都有醒目的黄色出现。严重犯规的足球运动员会被出示黄牌作为警 告，而在环法自行车赛中穿黄色领骑衫的选手是所有人追逐的目标。
色彩使时间 变快或变慢
明度低的颜色比明度 高的感觉要重
27
色彩的秘密
色彩是有重量的
大家看下下面这几个盒子，哪个感觉重些？
28
色彩的秘密
反射色与吸收色
颜色可以反射光线而不吸热量，使物体实际温度比较低，而有些颜 色吸收光线的同时吸收热量，使物体实际温度比较高。 如：放大镜聚焦、太阳伞、BB霜、安全帽、黑色衣服； 黄色与白色热反射率比较高，可视性高，远远就能看到。因此适合 小孩与安全级别高的物品
8
色彩基础
明度对比推移效果
哇，美女
尚能看清 是一个女人
压根看不清
9
色彩基础
色相对比推移效果
鲜花
花的形态 不是非常明显
比较难辨认
10
色彩基础
饱和度对比推移效果
一件绿色T恤
穿绿色T恤 美女和一群人
一群人
11
色彩基础
清晰度对比推移效果
有一颗 蓝色玻璃珠
有一堆玻璃珠
无法辨清
结论：人眼容易区别：明暗对比强，色相反差大，饱和度高，细节丰富的图片。 结论：人眼容易区别：明暗对比强，色相反差大，饱和度高，细节丰富的图片。 结论：人眼容易区别：明暗对比强，色相反差大，饱和度高，细节丰富的图片。 结论：人眼容易区别：明暗对比强，色相反差大，饱和度高，细节丰富的图片。
结论：人眼容易区别：明暗对比强，色相反差大，饱和度高，细节丰富的图片。
12
色彩基础
13
色彩基础
单色配色：以单一颜色做为基础色，再以饱和度、亮度变化出其它搭配的色。因为是属于同一色系， 所以这种配色法较能调配出舒适的色彩感受。
14
色彩基础
类似色配色：以一个主色搭配在它两旁等距的两个颜色。类似色都有共同的颜色 （在下图中是黄色），这种颜色搭配产生了一张令人悦目、低对比度的和谐美感。
页面布局
页面布局
版面布局，内容组成，主次之分
31
页面布局
构建主体、陪体、环境（分前景和背景）和空白组成
32
页面布局
对比“大小对比、明暗对比、形状对比，色彩对比，动静对比”
33
页面布局
虚实对比，加强节奏
留白形成虚实对比，设计中空间分为两种：虚空间，实空间 实空间由元素组成； 虚空间由留白形成，看似无形之境，实为设计者的独具一格的产物，留白还可以切割平面中空间，达到“疏可 走马，密不透风——原用于书法”感觉，增强节奏感。
催眠色
蓝色具有催眠的作用；降低血压、消除紧迫感；但 太多蓝色会产生孤独感，适合与白色搭配； 绿色也具有催眠的作用，使人从心理上得到放松； 淡淡暖色（米黄、白炽灯、淡橙）具有安全感，也 具有催眠作用； 提神（红色）（红色的咖啡包装） 使血压上升、增强紧迫感！
29
版面布局 内容组成 虚实 主次之分
第三部分