2.2 网页中图标的设计原则

网页界面的设计趋向于精美和细致，设计精良的图标可以使网页界面脱颖而出，这样网站的各个页面更加连贯、富于整体感、交互性更强。在设计网页图标的过程中，需要遵循一定的设计原则，这样才能使所设计的图标更加实用和美观。

1. 可识别性

图标是具有指代功能的图像，存在的目的就是为了帮助用户快速识别和找到网站中相应的内容，所以必须要保证每个图标都可以很容易地和其他图标区分开，即使是同一种风格也应该如此。

试想一下，如果网页界面中有几十个图标，其形状、样式和颜色全都一模一样，那么该网页浏览起来一定会很不便。如图2-61所示的网页图标虽然颜色是一样的，但形状差异很明显，具有很高的可识别性。

2. 风格统一性

设计和制作一套风格一致的图标会使人们从视觉上感觉网页界面的完整和专业。如图2-62所示为一套网页中的卡通图标，该网页界面采用了卡通涂鸦的设计风格，导航栏上的各菜单选项搭配相应风格的图标设计，网页界面的整体风格统一，并且导航菜单的表现效果更加形象。

3. 与环境协调

独立存在的图标是没有意义的，只有被真正应用到界面中才能实现自身的价值，这就要考虑图标与整个界面风格的协调性。如图2-63所示为网页界面中图标的应用效果，将产品设计为卡通图标的形式，与卡通风格的网页界面相结合，自然的表现方式使人们更容易接受。

4. 创意性

随着网络的不断发展，近几年国内UI设计快速崛起，网页中各种图标的设计更是层出不穷，要想让浏览者注意到网页的内容，对图标设计者提出了更高的要求，即在保证图标实用性的基础上，提高图标的创意性，只有这样才能和其他图标相区别，给浏览者留下深刻的印象，如图2-64所示。

【自测3】设计水晶质感图标

视频：光盘\视频\第2章\水晶质感图标.swf 源文件：光盘\源文件\第2章\水晶质感图标.psd

● 案例分析

案例特点：本案例设计一款水晶质感图标，通过图层样式和滤镜的运用体现出该图标的水晶通透感。

制作思路与要点：水晶质感的图标是在网页界面中经常能够看到的一种图标设计风格，其质感很强烈，设计细密。本案例水晶质感图标的制作，主要是通过为图形添加相应的图层样式，并应用各种高光和阴影效果完成的。图标具有很强烈的层次感、通透感，能够给用户一种很强烈的视觉冲击力。

● 色彩分析

本案例所设计的水晶质感图标以绿色为主色调，通过搭配使用不同明度和纯度的绿色，给人一种很好的视觉体验。绿色还可以给人宁静、安全、可靠、信息的感觉，该图标的整体配色让人感觉温和、舒服。

● 制作步骤

步骤01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-65所示。使用“渐变工具”，在选项栏上单击“渐变预览条”，弹出“渐变编辑器”对话框，具体设置如图2-66所示。

步骤02 完成渐变颜色的设置后 ，在画布中填充径向渐变，效果如图2-67所示。新建名称为“背景”的图层组，选择“圆角矩形工具”，在选项栏上设置“工具模式”为“形状”、“半径”为50像素，在画布中绘制任意颜色的圆角矩形，如图2-68所示。

提示

选择“渐变工具”，在其选项栏上提供了5种不同类型的渐变填充效果，分别是“线性渐变”、“径向渐变”、“角度渐变”、“对称渐变”和“菱形渐变”。径向渐变是指从起点到终点颜色从内到外进行圆形填充的渐变效果。

步骤03 为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-69所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-70所示。

步骤04 继续添加“投影”图层样式，对相关选项进行设置，如图2-71所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-72所示。

步骤05 使用相同的制作方法，完成相似图形的绘制，效果如图2-73所示。复制“圆角矩形1拷贝”图层，得到“圆角矩形1拷贝2”图层，清除该图层的图层样式，双击该图层，弹出“图层样式”对话框，选择“混合选项：自定”选项，具体设置如图2-74所示。

提示

在“图层样式”对话框中的“混合选项”设置界面中，如果选中“将内部效果混合成组”复选框，则将图层的混合模式应用于修改不透明像素的图层样式，例如“内发光”“颜色叠加”“渐变叠加”和“图案叠加”效果。

如果选中“将剪贴图层混合成组”复选框，则基底图层的混合模式应用于剪贴蒙版中的所有图层；取消选中该复选框，可以保持原有模式和组中每个图层的外观。

如果选中“透明形状图层”复选框，则将图层效果和挖空限制在图层的不透明区域；取消选中该复选框，可以在整个图层内应用这些效果。

如果选中“图层蒙版隐藏效果”复选框，则将图层效果限制在图层蒙版所定义的区域。

如果选中“矢量蒙版隐藏效果”复选框，则将图层效果限制在矢量蒙版所定义的区域。

步骤06 为该图层添加“内发光”图层样式，对相关选项进行设置，如图2-75所示。继续添加“外发光”图层样式，对相关选项进行设置，如图2-76所示。

步骤07 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-77所示。为该图层添加图层蒙版，在蒙版中填充黑白线性渐变，设置该图层的“填充”为0%，效果如图2-78所示。

步骤08 新建名称为“气泡”的图层组，使用“椭圆工具”在画布中绘制任意颜色的椭圆形，如图2-79所示。选择“钢笔工具”，在选项栏上设置“工具模式”为“形状”、“路径操作”为“合并形状”，在刚绘制的椭圆形上添加相应的形状图形，如图2-80所示。

步骤09 为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-81所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-82所示。

提示

“内阴影”图层样式可以在仅靠图层内容的边缘内添加阴影效果，使图层内容产生凹陷的视觉效果。

步骤10 单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-83所示。使用“钢笔工具”在画布中绘制形状图形，如图2-84所示。

步骤11 双击“形状1”图层，弹出“图层样式”对话框，选择“混合选项：自定”选项，具体设置如图2-85所示。为该图层添加“内发光”图层样式，对相关选项进行设置，如图2-86所示。

提示

在“内发光”图层样式设置界面中，“方法”选项用于控制发光的准确程度，在该选项的下拉列表中包括“柔和”和“精确”两个选项。设置该选项为“柔和”，则发光轮廓会应用经过修改的模糊操作，以保证发光效果与背景之间的柔和过渡；设置该选项为“精确”，则可以得到精确的发光边缘，但会比较生硬。

步骤12 继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-87所示。单击“确定”按钮，为该图层添加图层蒙版，选择“画笔工具”，设置“前景色”为黑色，并设置合适的笔触与大小，在画布中涂抹，设置该图层的“填充”为0%，效果如图2-88所示。

步骤13 将“形状1”图层复制两次，效果如图2-89所示。复制“形状1拷贝2”图层，得到“形状1拷贝3”图层，清除该图层的图层样式，为该图层添加“内阴影”图层样式，对相关选项进行设置，如图2-90所示。

步骤14 单击“确定”按钮，为该图层添加图层蒙版，在蒙版中填充黑白线性渐变，设置该图层的“填充”为0%，效果如图2-91所示。使用相同的制作方法，完成相似图形的绘制，如图2-92所示。

提示

设置图层的“填充”选项，可以控制图层的填充不透明度，只会影响图层中绘制的像素和形状图形的不透明度，而不会对图层样式产生影响。

步骤15 使用“椭圆工具”，在选项栏上设置“填充”为RGB（132，211，24），在画布中绘制椭圆形，如图2-93所示。执行“图层>智能对象>转换为智能对象”命令，将该图层转换为智能对象，执行“滤镜>模糊>高斯模糊”命令，弹出“高斯模糊”对话框，具体设置如图2-94所示。

提示

与普通图层相比，智能对象的优势在于智能对象可以进行非破坏性变换，可以根据设计过程中的实际需要按任意比例对图像进行缩放、旋转、变形等操作，并不会丢失图像数据或者降低图像的品质。并且用于智能对象的所有滤镜都是智能滤镜，智能滤镜可以随时修改参数或者撤销，并且不会对图像造成任何破坏。

步骤16 载入“椭圆1”选区，为“椭圆2”图层添加图层蒙版，效果如图2-95所示。使用相同的制作方法，完成相似图形的绘制，效果如图2-96所示。

步骤17 新建“图层1”，选择“画笔工具”，设置“前景色”为白色，并设置合适的笔触与大小，在画布中进行涂抹，如图2-97所示。载入“椭圆1”选区，为“图层1”添加图层蒙版，设置该图层的“混合模式”为“柔光”，效果如图2-98所示。

提示

设置图层的“混合模式”为“柔光”，将以图层中的颜色决定图像是变亮还是变暗，衡量的标准以50%的灰色为准，高于这个比例则图像变亮，低于这个比例则图像变暗。效果与发散的聚光灯照在图像上相似，混合后图像色调比较温和。

步骤18 使用相同的制作方法，完成相似图形的绘制，如图2-99所示。使用“椭圆工具”在画布中绘制白色的椭圆形，为该图层添加图层蒙版，在蒙版中填充黑白线性渐变，设置该图层的“不透明度”为15%，效果如图2-100所示。

步骤19 使用相同的制作方法，完成相似图形的绘制，如图2-101所示。在“背景”图层组下方新建名称为“阴影”的图层组，复制“椭圆1”图层，得到“椭圆1拷贝4”图层，清除该图层的图层样式，修改颜色为RGB（48，101，0），调整图形到合适的位置与大小，效果如图2-102所示。

步骤20 为该图层添加“颜色叠加”图层样式，对相关选项进行设置，如图2-103所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，效果如图2-104所示。

步骤21 执行“图层>智能对象>转换为智能对象”命令，将该图层转换为智能对象，执行“滤镜>模糊>高斯模糊”命令，弹出“高斯模糊”对话框，具体设置如图2-105所示。在智能滤镜的蒙版中填充黑白线性渐变，设置该图层的“不透明度”为90%，效果如图2-106所示。

步骤22 使用相同的制作方法，完成相似图形的绘制，效果如图2-107所示。在“气泡”图层组上方新建名称为“水滴”图层组，使用“椭圆工具”，在选项栏上设置“填充”为RGB（205，255，59），在画布中绘制正圆形，如图2-108所示。

步骤23 为该图层添加“描边”图层样式，对相关选项进行设置，如图2-109所示。继续添加“内阴影”图层样式，对相关选项进行设置，如图2-110所示。

步骤24 继续添加“内发光”图层样式，对相关选项进行设置，如图2-111所示。继续添加“渐变叠加”图层样式，对相关选项进行设置，如图2-112所示。

步骤25 继续添加“外发光”图层样式，对相关选项进行设置，如图2-113所示。单击“确定”按钮，完成“图层样式”对话框中各选项的设置，设置该图层的“填充”为0%，效果如图2-114所示。

步骤26 使用相同的制作方法，完成相似图形的绘制，效果如图2-115所示。复制“水滴”图层组，将复制得到的图形分别调整到合适的大小和位置，效果如图2-116所示。

步骤27 在“背景”图层组中复制“圆角矩形1”图层，得到“圆角矩形1拷贝3”图层，将其调整至所有图层下方，清除该图层的图层样式，修改图形颜色为黑色，将其向下移动，效果如图2-117所示。将该图层转换为智能对象，执行“滤镜>模糊>动感模糊”命令，弹出“动感模糊”对话框，具体设置如图2-118所示。

步骤28 单击“确定”按钮，完成“动感模糊”对话框中各选项的设置，效果如图2-119所示。执行“滤镜>模糊>高斯模糊”命令，弹出“高斯模糊”对话框，具体设置如图2-120所示。

步骤29 单击“确定”按钮，完成“高斯模糊”对话框中各选项的设置，设置该图层的“混合模式”为“正片叠底”、“不透明度”为42%，效果如图2-121所示。完成该水晶质感按钮的设计制作，最终效果如图2-122所示。