《网页美工设计》教案-第1节 网页配色技巧1 教案

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 周国宝铜陵职业技术学院制PAGE1第二部分技能提升篇第一章网页配色技巧标题第一节网页配色技巧1课时2课时教学目标教学内容与过程一．色彩的基本原理英国科学家牛顿的三棱镜实验，解开了色彩之谜色彩是光照射在物体上反射到人眼的一种视觉效应。它分为无彩色与有彩色两个系统,无彩色只有黑、白、灰性质。有彩色是除了无彩色区域以外的具有不同色彩倾向的区域，如红黄蓝等色彩，在Photoshop软件中填充与调整色彩有以下几种常用模式

RGB模式代表红绿蓝的色光三原色CMYK模式中CMY为青色，洋红，黄色是色料三原色，K为黑色HSB是色彩的色相、饱和度、明度在色彩中色相，明度，饱和度（纯度），色调是色彩搭配最重要的元素1.色相：即色彩的相貌，类似于人名，这是色彩最基本的特征，也是一种色彩区别于另一种色彩的最主要的因素，如红、橙、黄、绿、青、蓝、紫构成了网站色彩体系中最基本的色相。2.明度：色彩的明暗程度。在我们感觉颜色差别的同时，还会感觉到它们之间的明暗差异，这就是色彩的明度关系。例如：巧虎乐智小天地儿童网站用的是明度最高的颜色，黄色，白色为主，红色，绿色，蓝色为辅让人感觉绚丽多姿，生气勃勃。游戏类网站，背景色明度低，衬托游戏主题，让游戏充满神秘感。3.饱和度(也称之为纯度)：指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。列如正红色。纯度底的色彩暗淡，浑浊列如：深紫色。在photoshop软件中常运用快捷键ctrl+u调出色相饱和度等工具来调整网页的色相，明度与纯度4.色调：网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。它分为■主色调

页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉面积。

仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅色调。

其次是■点睛色

在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。

最后衬托整体的色调，协调、支配整体的作用为背景色二.网页配色原则1.色彩的特色性：

2.色彩主题突出：

3.色彩的艺术性：

4.色彩搭配的合理性：

案例：洛杉矶旅游网站以紫色为主色调，色彩搭配鲜明，展示洛杉矶城市魅力个性，给浏览者耳目一新的感觉。其次以明度纯度低的洛杉矶夜景为背景色，以实际需求为基础，进行色彩搭配，达到突出主题的效果，并且合理的按照网站内容，特点，结合红黄蓝绿辅助色，白色点睛色，优化色彩搭配，增加网站设计的艺术感。三.网页色彩搭配方式1.根据页面风格以及产品本身的诉求确定主色色彩有心理暗示的作用，很多行业都有其行业色，很多品牌都有其品牌色。可口可乐公司选择了红色作为主基调。红色代表热情、活力；绿色代表希望、春天可用于环保网站；橙色代表活跃和快乐可用于儿童餐厅网站；紫色代表华丽、妖艳、神秘可用于化妆品网站色彩搭配设计。2.根据主色确定配色，网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。2.1合理调配冷暖色调，其中暖色调主要包括红、黄、橙，给人以温暖、热情的感觉，充满活力。冷色调主要包括青、灰、白、紫等，给人以稳重、高贵的感觉，充满清凉气息。2.2同色彩搭配方式：同色彩搭配方式是在选定一种色彩基础上，对其饱和度和透明度进行合理调试，适当调淡色彩或加深色彩，达到产生新色彩的目的，使得页面色彩统一，且具有一定层次感。该种搭配方式使整个页面显得干净、朴素，具有一定的格调。

2.3邻色彩搭配方式：主要通过色环上相邻的颜色进行网页色彩搭配，例如，绿色与蓝色、红色与黄色。该种色彩搭配方式可有效避免色彩杂乱现象，可实现页面效果的和谐统一，是使用较为广泛的色彩搭配方式。2.4对比色搭配方式：红色、黄色、蓝色作为色料三原色，最能体现色彩之间的差别。对比色搭配方式使得页面色彩对比强烈，增加视觉诱惑力，达到吸引眼球的效果。合理采用对比色搭配方式，有利于突出网站的特色和重点，增加网站设计艺术感。与此同时，对比色搭配方式并非将几种色彩差别大的颜色以同等地位进行搭配，而是选取一种颜色作为主色调，其他对比颜色作为点缀，达到画龙点睛的效果。2.5互补色对比：用蓝橙，红绿，黄紫互补色，极赋视觉冲击力、所表现出的性格异常鲜明。。

2.6.混合色彩搭配方式：混合色彩搭配方式的前提是有主色，在主色基础上，通过混合其他色彩辅助主色，从而达到颜色缤