网页版式设计-7 淡色调.ppt

网页设计中常用色调格局讲解训练 2 淡色调的表现 什么是色调 网页页面中总是由具有某种内在联系的各种色彩 组成一个完整统一的整体 形成画面色彩总的趋向 称为色调 也可以理解为色彩状态 色彩给人的感觉与氛围 是影响配色视觉效果的决定因素 对比与调和就是形式美的变化与统一规律在一定条件下 不同色彩之间的对比会有不同的效果 在不同的环境下 多色彩给人一种印象 色彩单一给人另一种印象 各种纯色的对比会产生鲜明的色彩效果 很容易给人带来视觉与心理的满足 红 黄 蓝三种颜色是最极端的色彩 它们之间对比 哪一种颜色也无法影响对方 很多朋友都以为色彩对比主要是红绿 橙蓝 黄紫色的对比 实际色彩对比范畴不局限于这些 是指各种色彩的界面构成中的面积 形状 位置以及色相 明度 纯度之间的差别 使网页色彩配合增添了许多变化 页面更加丰富多彩 何为淡色调 在我看来 淡色调应属于网页设计色彩中 颜色亮度偏高的色调称为淡色调 而这并不代表网页设计中的谈色调就是纯粹的高亮度 我们所表现的淡色 是所有适合这一色调的网页设计模式中以淡色为主色调 色彩对比分析纯度对比 是指不同色彩之间纯度的差别而形成的对比 色彩纯度可大致分为高纯度 中纯度 低纯度三种 未经调和过的原色纯度是最高的 而间色多属中纯度的色彩 复色其本身纯度偏低而属低纯度的色彩范围 纯度的对比会使色彩的效果更明确肯定 纯度对比网页例图 纯度对比分析 整个页面看起来异常艳丽刺激然而又非常的协调 以上数值主要选取了几种较有代表性的颜色 大家注意看 以上色彩除了粉红色 其他几组颜色都是高饱和度高亮度的颜色 因此充分的发挥出了色彩的艳丽程度 包括粉红色在内的几种灰色阶 在中间起到了和谐作用 白色能拉开相近色阶的空间及明快页面的作用 在这里可以说是功不可没 结论 页面实际上用了不少颜色 配色大胆 抓住颜色主次冷暖的安排 适度再加上和谐的过渡色灰色 实现了作者对该页面的轻松配色 从多种高纯度的搭配协调能力上看 足可见作者对色彩设计搭配不一般的功底 这类网页配色非常能够体现出一个网站页面产品个性 配色难度大 让人过目难忘 明度对比 明度对比可分为 彩色差的明度对比及非彩色差的明度对比是指色彩之间明暗程度的差别而形成的对比 是页面形成恰当的黑 白 灰效果的主要手段 明度对比在视觉上对色彩层次和空间关系影响较大 例如柠檬黄明度高 蓝紫色的明度低 橙色和绿色属中明度 红色与蓝色属中低明度 明度对比网页例图 面积调整 主次的面积区分 根据设计主题的需要 在画面的面积上以一方为主色 于是就掌控画面的色调作用 其他的颜色在使用面积上拉开距离 使画面的主次关系更突出 在统一的同时富有变化 面积调整网页例图 紫色浅紫色网页例图 http www oopsy 紫色系分析 浅紫色 该页面使用特性最高的紫色提亮为100 高明度的主色调 很容易抓住人们的视线成为聚焦点 是非常大胆又时尚的配色 辅色调则是使用冷色系代表的深蓝色 明度较低 主要是为了烘托左边导航菜单 凸显上面的内容信息 由于人们对网页已然形成了视觉惯性 也起到了很好的视觉引导作用 主 辅色的搭配运用构成了较强烈的视觉对比效果 另一辅色调浅蓝色 在主色调浅紫色的烘托下呈现稚嫩的感受 里面的白色块起到浅紫的背景和浅蓝色调和 明快的作用 点睛色的使用实际有不少 这里只选几种起到主要作用的颜色做举例分析 中黄色运用得很珍贵 只在左上区域出现 旨在突出主题文字的效果 其他配色主要是根据左下文字字母而来 红和绿色出现在页面的浅紫色较为宽敞的位置 小范围的做色彩对比效果 其他点睛色则极少的零星分布 既调和呼应又起到活跃于页面的角色作用 以上这些都是点缀和渲染页面气氛不可缺少的配色元素 结论 在紫色中加入白色 可使紫色略显沉闷的特征消失 变得清秀 优雅 娇气 并充满女性的魅力 白色 粉紫色 天蓝色的颜色搭配 是比较稚嫩的配色 同时也是最受少女欢迎的配色方案 这里运用也较得体 紫色低纯度配色应用网页例图 紫色系分析 低纯度配色 紫色 绿色 该页面除了点睛色外 整体配色饱和度都很低 所以在视觉上呈柔和状态 主色调紫色的HSB模式H色相为308 数值稍向红色倾斜 由于饱和度及明度降低 颜色呈现很平和 空间感增强 辅助色绿色H色相为167 数值稍向蓝色偏移 从RGB模式上看 G为125 正绿色时为255 R为0 B为0 R为82 B116 有这两色混合 因此饱和度和明度都很低 然而在雅致的紫色背景的烘托下 较为突出了绿色的产品这一主角 达到配色目的 另一辅助色灰色 为整体的柔和状态增添了雅致的气息 点睛色黄色的特质因素 无疑是这页面最响亮耀眼的颜色尽管使用的面积较小 它是紫色的对比色 高纯度的黄色与低纯度的紫色形成较强烈的视觉反差对比效果 也因此使得页面的沉闷得到一定程