第0章网页配色教程.ppt

配色的基本技巧 技巧 1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。如用蓝色和黄色,，整个页面色彩丰富但不花稍。 3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。 4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很跳。 网页色彩的搭配 忌讳 不要将所有颜色都用到，尽量控制在三种色彩以内。 背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。 边框和背景的颜色应相似，且边框的颜色较深，背景的颜色较浅 一些网页配色方案 柔和、明亮、温和 柔和、洁净、爽朗 可爱、快乐、有趣 轻快、华丽、动感 狂野、充沛、动感 华丽、花哨、女性化 回味、女性化、优雅 高尚、自然、安稳 学习网页设计的建议 善于观察，发现细微的不同 注重细节，追求完美 重视网页的源代码，达到知其然，而且知其所以然 抓住重点，表格和CSS的灵活运用是重点 勤于实践，只有在自己做的过程中才能发现很多书本上没讲到的问题 参考书籍 Learning Web Design(3rd) 别具光芒－DIV CSS网页布局与美化 精通CSS+DIV网页样式与布局 精通CSS－高级Web标准解决方案 CSS设计彻底研究（温谦） 网页设计与配色实例分析（黎芳） 网页选色的考虑 从 以上例子可看出三原色视觉冲击力最强，也最是刺目的，容易制造冲突、烦燥、不舒适的心情，所以是较难掌握的配色，大面积大范围使用要慎重。 间色是由三原色 中的两色调配二次，间于原色和复色之间，属于中性色，视觉冲击力次之，颜色的刺激缓和不少，给人舒适、愉悦的心情，是较容易掌握的配色，也是在设计中使用 得比较多的颜色。 复色是由两种间色或原色与间色相混合而产生的颜色，呈灰色阶，视觉冲击力更弱，柔和但是使人沉闷压抑。复色调配好了，能体现出高层次高素 养的成熟特性魅力，也称为高级灰，是很经看的颜色。 色彩的4种角色 ■ 主色调　　页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉影响 ■ 辅色调　　仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。 ■ 点睛色 　　在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。 ■ 背景色 　　衬托环抱整体的色调，协调、支配整体的作用。 网页中色彩的角色示例 色彩搭配的方案 同类色搭配 邻近色搭配 互补色搭配 对比色搭配 同类色 　　比邻近色更加接近的颜色，色环中距离为0－60度的颜色。它主要指在同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一，又有微妙变化的作用。 同类色搭配 邻近色 　　是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系，只是范围扩大了一点。例如红色和黄色，绿色和蓝色，互为邻近色。 邻近色搭配 补色 补色(分离补色）：　　色轮上的任意颜色，以及它的补色的两边颜色，当使用在同个版面上的时候被称为“分离补色”。分离补色的运用可以造成很强烈的对比。 补色搭配 对比色 对比色是指在色环中的直接位置相对的颜色，如果想要使网站中的色彩强烈突出、富有冲击力的话，可以选择对比色搭配。 对比色搭配 对比色搭配 对比色搭配 色彩的对比 对比与调和就是形式美的变化与统一规律 在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。　　很多人都以为色彩对比主要是红绿、橙蓝、黄紫色的对比，实际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添了许多变化、页面更加丰富多彩。 色相对比 是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。越接近补色，对比效果越强烈。 色相对比 纯度对比 是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。 纯度对比 补色对比 纯度对比 面积对比 同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色