明度推移色彩搭配.PPT

项目实训 实训二、 设计化妆品网站的子页 要求：在保持首页既定的色彩基调上，进行子页布局和色彩的设计。 【步骤分析】 1．将首页中的导航和图片，移到页面的左侧，中间部分的背景色选择淡紫色，增加整体色彩的统一，如图2-29所示。 2．网页右侧绘制白色矩形，添加外发光效果。页面上绘制圆环和灰线，作为放置文字内容的位置，圆环的色彩与导航条的颜色相呼应，如图2-30所示。 3．添加右上角的文字，丰富页面结构。 图2-30 完善页面 图2-29 子页导航 项目小结 本项目中主要学习了色彩的对比和调和，通过色彩在网页中的实际运用加强了对色彩的深入理解。通过本项目的学习可以使我们的色彩运用能力得到提高，在网页色彩设计上熟练运用各种颜色，制作出赏心悦目的网页效果。 思考与练习 思考与练习 根据对色彩的相关认识，试为环保网站设计布局和颜色。 网页色彩设计要求： 主要表现环境现状和未来努力方向两个方面，色彩选择能体现自然美和人造污染的色系，如绿色系和褐色系。 网页布局制作要求： 首页: 首页包括以下内容：Logo、Banner、导航菜单、环保宣传栏、网站重点栏目简介、投票栏、友情链接、版权说明等。 Logo：突出网站主题、符合网站形象。 Banner：符合网站主题，宣传效果明显；用Flash制作，并有动画效果。 导航菜单：导航菜单包括以下几项：首页、地球纪念日、地球家园、环保行为规范、环保机构、在线留言。 子页: 根据导航菜单进行设计，不同版面选择合适的色彩。 “ ” “ ” 网页设计与制作实训教程 重庆万州高级技工学校 网页色彩运用 项目二 学习目标： 了解色彩基本知识 掌握色彩的冷暖和情感表现 掌握网页色彩搭配的方法 熟悉Photoshop软件工具的应用 新授 任务一 认识色彩 一、色彩的三要素 1．明度，也叫亮度，指的是色彩的明暗程度，明度越高，色彩越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏类网站，充满神秘感，如图2-1所示。 图2-1 高明度和低明度网页 新授 任务一 认识色彩 一、色彩的三要素 2．色相，指的是色彩的基本相貌特征。它是区别色彩特征的最重要的因素。比如说紫色，绿色，黄色等等都代表了不同的色相。在同一网站中使用同一色相，不同明度和纯度的色彩可以使页面看起来色彩统一，具有层次感。如图2-2所示 图2-2 绿色相网页 新授 任务一 认识色彩 一、色彩的三要素 3．纯度，指色彩的纯净程度，也就是色的饱和度。在一种颜色中，包含的色彩成分越多，其纯度就越低。反之，包含的色彩成分少，纯度越高。纯度高的网页鲜活明快，纯度低的则显得高雅含蓄，如图2-3所示。 图2-3 高纯度和低纯度网页 新授 任务一 认识色彩 二、色彩对比 1．明度对比 每一种颜色都有自己的明度特征。例如黄色和蓝色，除色相不同外，还会感觉到明暗的差异，这就是色彩的明度对比。 在网页色彩构图中，突出布局结构主要靠色彩的明度对比。如图2-4所示 图2-4 橙色相网页 新授 任务一 认识色彩 二、色彩对比 2．色相对比 色相对比是指不同颜色并置时，在比较中呈现色相的差异，从而形成的对比现象。例如湖蓝和钴蓝相比，湖蓝偏绿，二钴蓝则偏蓝。如图2-5所示 图2-5 色相对比网页 新授 任务一 认识色彩 二、色彩对比 2．色相对比 （1）原色对比 原色对比是指红、黄、蓝三原色之间的对比，属于最强的色相对比，会使人感到一种极其强烈的色彩冲突。如图2-6所示 图2-6 原色对比网页 新授 任务一 认识色彩 二、色彩对比 2．色相对比 （2）补色对比 在色相环上色相距离180°的色彩对比，是最强的冷暖对比，如红与绿、蓝和橙、黄和紫。视觉冲极强，活跃而生动。补色对比是最具有美感价值的配色。如图2-7所示 图2-7补色对比网页 新授 任务一 认识色彩 二、色彩对比 2．色相对比 （3）间色对比 橙、绿、紫为原色相混所得的间色，其色相对比略显柔和。这样的对比都是活泼鲜明并具有天然美的配色。如图2-8所示。 图2-8 间色对比网页 新授 任务一 认识色彩 二、色彩对比 2．色相对比 （4）邻近色对比 在色相环上相邻近的颜色。邻近色之间往往是你中有我，我中有你。比如：朱红与桔黄，朱红以红为主，里面略有少量黄色；桔黄以黄为主，里面有少许红色，虽然它们在色相上有很大 差别，但在视觉上却比较 接近。属于弱对比，有明 显的统一协调性，在统一 中不失对比的变化，如图 2-9