2.5　网站UI设计配色方法

不同色彩的网页给人的感觉会有不同，可见网页的配色对于整个网站的重要性。一般在选择网页色彩时，会选择与网页类型相符的颜色，而且尽量少用几种颜色，调和这些颜色，使其具有稳定感。

2.5.1　主色

色彩作为视觉信息，无时无刻不在影响着人类的生活。美妙的自然色彩，刺激和感染着人们的视觉和心理情感，给人们提供丰富的视觉空间。

主色是指在网页中最主要的颜色，包括大面积的背景色、装饰图形颜色等构成视觉中心的颜色。主色是网页配色的中心色，通常以此为基础搭配其他颜色。如图2-66所示为使用明度较高的紫红色作为网页主色。

网页主色的选择通常有两种方式：要产生鲜明、生动的效果，则选择与背景色或者辅色呈对比的色彩；要整体协调、稳重，则应该选择与背景色、辅色相近的同色相的颜色或邻近色。如图2-67所示为采用主色与背景色的对比配色。

2.5.2　背景色

背景色是指网页中大块面积的颜色，即使是同一组网页，如果背景色不同，带给人的感觉也截然不同。背景色由于占绝对的面积优势，支配着整个空间的效果，是网页配色首先关注的重点地方。

目前网页背景常使用的颜色主要包括白色、纯色、渐变颜色等。网页背景色也被称为网页的“支配色”，网页背景色是决定网页整体配色印象的重要因素。如图2-68所示为使用渐变绿色作为背景色的网页。

网页的背景色对网页整体空间影响比较大，因为网页背景在网页中占据的面积最大。如图2-69所示为使用柔和的蓝色作为背景色的网页。

2.5.3　辅色

一个网站页面通常都不止一种颜色。除了处于视觉中心的主色，还有一类陪衬主色或与主色相呼应而产生的辅色。辅色的视觉重要性和体积次于主色和背景色，常常用于陪衬主色，使主色更加突出。辅色通常应用于网页中较小的元素，如按钮、图标等。

辅色衬托主色，可以令网页瞬间充满活力，给人以鲜活的感觉。辅色与主色的色相相反，起突出主题的作用。若辅色面积太大或是纯度过强，都会弱化主色，所以相对暗淡、适当面积的辅色才会达到理想的效果。如图2-70所示为在网页中搭配红色和黄色的辅色。

在网页中为主色搭配辅色，可以使网页画面产生动感，活力倍增。网页辅助色通常与网页主色保持一定的色彩差异，既能突显网页主色，又能够丰富网页整体的视觉效果。如图2-71所示为在网页中搭配红色的辅色。

2.5.4　点缀色

点缀色是指网页中较小的一处面积颜色或者易于变化物体的颜色，如图片、文字、图标和其他网页装饰颜色。点缀色常常采用强烈的色彩，常用对比色或高纯度色彩来加以表现。

为了营造出生动的网页空间氛围，点缀色应选择较鲜艳的颜色。如图2-72所示为使用蓝色作为点缀色。

在不同的网页位置上，对于网页点缀色而言，主色、背景色和辅色都可能是网页点缀色的背景。如图2-73所示为使用绿色作为点缀色。

◎ 【自我测评】制作珠宝网站导航

本案例是设计一款珠宝网站页面，运用广告页面的布局形式，重点突出表现产品，在页面中使用高光等使网站界面产生光芒效果，如图2-74所示。

? 制作思路与要点

珠宝首饰类网站页面的重点是产品，需要突出产品的表现效果。在本案例的珠宝网站页面中，在页面中心位置运用大图轮换的方式展示珠宝产品，突出珠宝的显示效果，而导航菜单等其他内容则放置在页面中面积相对较小的区域，使得界面具有很强的感染力，提升产品的宣传效果。

? 色彩分析

该珠宝网站页面使用黑色和深灰色作为页面的主色，在深灰色的界面背景上放置精美的珠宝首饰图片，可以有效地凸显珠宝首饰的产品效果，使产品璀璨夺目。搭配明度和纯度较低的黄色文字，体现出产品的尊贵品质，整个网站界面给人一种高档、华贵的视觉印象。

? 操作步骤

步骤 01　执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，设置“前景色”为RGB（12、12、12），为画布填充前景色，如图2-75所示。

步骤 02　打开并拖入素材图像“资源包\源文件\第2章\素材\301.jpg”，效果如图2-76所示。为该图层添加图层蒙版，使用“画笔工具”，在蒙版中涂抹，设置该图层的“混合模式”为“颜色减淡”，“填充”为90%，效果如图2-77所示。

步骤 03　新建名称为“顶层”的图层组，使用“矩形工具”，设置“填充”颜色为RGB（19、19、18），在画布中绘制一个矩形，效果如图2-78所示。新建“图层2”，使用“画笔工具”，设置“前景色”为RGB（102、93、72），在画布相应的位置涂抹，效果如图2-79所示。

步骤 04　执行“图层>创建剪贴蒙版”命令，为“图层2”创建剪贴蒙版，设置该图层的“填充”为40%，效果如图2-80所示。使用“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，如图2-81所示。

步骤 05　使用相同的制作方法，完成其他文字内容的输入，效果如图2-82所示。使用“矩形工具”，设置“填充”颜色为RGB（136、122、90），在画布中绘制一个矩形，效果如图2-83所示。

步骤 06　多次复制刚绘制的矩形，分别将复制得到的矩形调整到合适的大小和位置，并将相关图层合并，效果如图2-84所示。新建名称为“菜单”的图层组，使用“矩形工具”，在画布中绘制一个矩形，效果如图2-85所示。

步骤 07　为该图层添加“描边”图层样式，对相关选项进行设置，如图2-86所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-87所示。

步骤 08　单击“确定”按钮，完成“图层样式”对话框的设置，效果如图2-88所示。新建“图层3”，使用“椭圆选框工具”，在画布中绘制一个椭圆形选区，如图2-89所示。

步骤 09　执行“选择>修改>羽化”命令，弹出“羽化选区”对话框，参数设置如图2-90所示。单击“确定”按钮，羽化选区，为选区填充颜色为RGB（80、72、57）。取消选区，设置该图层的“填充”为80%，效果如图2-91所示。

步骤 10　多次复制该图层，并分别将复制得到的图像调整到合适的大小和位置，效果如图2-92所示。新建名称为“分割线”的图层组，使用“矩形工具”，设置“填充”为RGB（130、118、88），在画布中绘制一个矩形，效果如图2-93所示。

步骤 11　为该图层添加图层蒙版，使用“渐变工具”，在蒙版中填充黑白径向渐变，效果如图2-94所示。多次复制该图层，并分别将复制得到的图形调整到合适的大小和位置，效果如图2-95所示。

步骤 12　使用相同的制作方法，完成相似矩形效果的绘制，如图2-96所示。使用“圆角矩形工具”，设置“填充”颜色为RGB（183、168、127），“半径”为20像素，在画布中绘制一个圆角矩形，如图2-97所示。

步骤 13　将该圆角矩形所在图层栅格化为普通图层，对圆角矩形进行旋转操作，执行“滤镜>模糊>高斯模糊”命令，弹出“高斯模糊”对话框，参数设置如图2-98所示。单击“确定”按钮，执行“图层>创建剪贴图层”命令，为该图层创建剪贴蒙版，效果如图2-99所示。

步骤 14　复制该图层，并将复制得到的图像水平向右移动，调整到合适的位置，效果如图2-100所示。打开并拖入素材图像“资源包\源文件\第2章\素材\302.png”，如图2-101所示。

步骤 15　设置该图层的“混合模式”为“颜色减淡”，效果如图2-102所示。拖入素材图像“资源包\源文件\第2章\素材\303.png”，使用“横排文字工具”，在“字符”面板中设置相关选项，在画布中输入文字，效果如图2-103所示。

◎ 【随堂测评】制作完整珠宝网站

本案例是设计一款珠宝网站页面，运用广告页面的布局形式，重点突出表现产品，在页面中使用高光等使网站界面产生光芒效果，如图2-104所示。

? 制作思路与要点

珠宝首饰类网站页面的重点是产品，需要突出产品的表现效果。在本案例的珠宝网站页面中，在页面中心位置运用大图轮换的方式展示珠宝产品，突出珠宝的显示效果。导航菜单等其他内容则放置在页面中面积相对较小的区域，使得界面具有很强的感染力，提升产品的宣传效果。

? 色彩分析

该珠宝网站页面使用黑色和深灰色作为页面的主色，在深灰色的界面背景上放置精美的珠宝首饰图片，可以有效地凸显珠宝首饰的产品效果，使产品璀璨夺目。搭配明度和纯度较低的黄色文字，体现出产品的尊贵品质，整个网站界面带给人一种高档、华贵的视觉印象。

? 操作步骤

步骤 01　新建名称为“窗口”的图层组，使用相同的制作方法，完成二级导航菜单效果的制作，如图2-105所示。新建名称为“商品”的图层组，新建“图层6”，使用“画笔工具”，设置“前景色”为RGB（109、109、109），在选项栏中设置“不透明度”为60%，在画布中相应的位置涂抹，效果如图2-106所示。

步骤 02　执行“滤镜>模糊>高斯模糊”命令，弹出“高斯模糊”对话框，对相关选项进行设置，单击“确定”按钮，为图像添加“高斯模糊”滤镜效果，如图2-107所示。

步骤 03　使用相同的制作方法，完成相似图形效果的绘制，如图2-108所示。使用“自定形状工具”，在“形状”下拉面板中选择相应形状，在画布中绘制形状图形。按快捷键【Ctrl+T】，将形状图形调整到合适的大小和位置，效果如图2-109所示。

步骤 04　为该图层添加“渐变叠加”图层样式，对相关选项进行设置，如图2-110所示。单击“确定”按钮，完成“图层样式”对话框的设置，效果如图2-111所示。

步骤 05　复制该图层，将复制得到的图形水平翻转，并向左移至合适的位置，如图2-112所示。新建名称为“广告”的图层组，使用相同的制作方法，完成相似部分内容的制作，效果如图2-113所示。

步骤 06　新建名称为“2”的图层组，使用“圆角矩形工具”，设置“填充”颜色为RGB（49、44、34），“半径”为3像素，在画布中绘制一个圆角矩形，效果如图2-114所示。为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-115所示。

步骤 07　单击“确定”按钮，完成“图层样式”对话框的设置，效果如图2-116所示。使用相同的制作方法，完成相似图形效果的绘制，如图2-117所示。

步骤 08　完成该珠宝网站界面的设计制作，最终效果如图2-118所示。