图标设计与制作（全彩慕课版）-PPT2

第2章图标绘制方法本章介绍：绘制规范的图标是图标设计的基础，遵循图标的规范与规则可以保证图标的像素清晰、视觉统一以及效率提升。本章对图标标准尺寸系统、图标绘制像素完美、图标的绘制思路、布尔运算的使用、图标等比例缩放、图标的网格系统以及图标的视觉调整进行系统讲解。通过本章的学习，读者可以对绘制图标的规范有一个基本的认识，有助于高效便利地进行图标设计工作。掌握图标标准尺寸系统掌握图标绘制像素完美掌握图标的绘制思路掌握布尔运算的使用掌握图标等比例缩放掌握图标的网格系统掌握图标的视觉调整学习目标尺寸系统图标尺寸图标放大图标布局2.1图标标准尺寸系统图标的应用场景不同尺寸也不同，其中以4倍数和8倍数为基准是目前最灵活的设计尺寸系统。2.1.1尺寸系统图标的设计尺寸系统24px是目前最常用的图标尺寸。而20px则应用于紧凑型的页面布局中，因此也经常被使用。2.1.2图标尺寸最常用的图标尺寸如果需要更大尺寸的图标，可以直接成倍数放大24px或20px尺寸的图标进行使用。2.1.3图标放大被放大成不同尺寸的图标图标设计时留出一定的出血位，可以预防图标边缘被切掉以及把握图标的设计平衡。设计24px和20px图标时，通常在四边会各留出2px作为出血位。

红色为出血位，图标的设计尽量不要到红色区域2.1.4图标布局图标像素完美的概念软件实现图标像素完美课堂案例-用软件实现图标像素完美2.2图标绘制像素完美图标像素完美指图标的每一个像素位都可以精确对应到一个像素。通常我们会将图标的坐标位置设置为整数，尺寸设置为偶数，以保证图标更加清晰。2.2.1图标像素完美的概念

像素完美的图标像素不完美的图标1.设计原则在软件中，我们会将图标的坐标X和坐标Y设置为整数，宽和高设置为偶数，角度以45度为单位进行旋转，以实现图标像素完美。2.2.2软件实现图标像素完美

经调整后像素完美的图标像素不完美的图标2.软件设置有时即使遵循了像素完美的设计原则，但还是会出现像素不完美的情况，这是因为软件没有进行正确的设置。通过正确的软件设置，才能绘制出像素完美的图标。2.2.2软件实现图标像素完美

使用属性面板中的“X”、“Y”、“宽”和“高”选项实现图标的像素完美。2.2.3课堂案例-用软件实现图标像素完美

效果图图标结构拆解图标绘制工具课堂案例-用纸笔进行图标结构的分解2.3图标的绘制思路

绘制图标和搭积木有着异曲同工之处，其实每一个图标都是有不同的形状共同组合而成的。2.3.1图标结构拆解

图标的结构拆解1.矢量形状矢量形状是绘制图标的基本工具。运用矢量形状绘制的图标有着放大不失真的特点，不同软件里的矢量形状工具原理一致，展现会略有不同。2.3.2图标绘制工具

Photoshop矢量形状工具Illustrator矢量形状工具Sketch矢量形状工具XD矢量形状工具2.贝塞尔曲线贝塞尔曲线是绘制图标的辅助支撑。它在绘制矢量图形时，可以轻松地绘制出准确的造型，在软件中我们通常运用钢笔等工具进行贝塞尔曲线的绘制。2.3.2图标绘制工具

PS钢笔等工具截图3.布尔运算布尔运算是绘制图标的核心功能。它可以将绘制的基本形状，通过合并、减去、相交、排除等数学计算变成新的形状，从而制作出不同造型的图标。2.3.2图标绘制工具

经过布尔运算得到新的形状分析出图标的结构，用纸笔绘制图形形状，实现布尔运算，制作出不同造型的图标。2.3.3课堂案例-用纸笔进行图标结构的分解

需要分解结构的图标不同软件的使用不同颜色的使用课堂案例-绘制基础面性图标课堂案例-绘制基础线性图标2.4布尔运算的使用

不同软件在使用布尔运算绘制图标的操作上会有微小区别，其中由于Photoshop是图像处理软件，因此在使用布尔运算绘制图标方面，和其他软件区别较为明显。我们通过示意图将区别形象地进行了展示。2.4.1不同软件的使用

不同软件在进行布尔运算的操作示意图当两个形状颜色不同时，使用布尔运算会只保留一种形状颜色。其中合并、相交和排除会保留顶部形状颜色，相减则会保留底部形状颜色。2.4.2不同颜色的使用

当两个形状颜色不同时经过布尔运算，保留的形状颜色示意图使用椭圆工具、路径选择工具和减去顶层形状命令绘制基础图形，使用快捷键变换图形，使用填充工具为图形填充颜色。2.4.3课堂案例-绘制基础面性图标

图标最终效果图使用圆角矩形工具绘制图形，使用属性面板的变换功能旋转图形，使用路径查找器命令，实现基础线性图标。2.4.4课堂案例-绘制基础线性图标

图标最终效果图图标等比例缩放问题图标等比例缩放方法课堂案例-将图标通过缩放置入界面2.5图标等比例缩放

在软件中，将图标等比例缩放，通常会出现圆角弧度和线条粗细两个问题。比如将一个图标等比例缩小，该图标的线条会变粗，弧度会变大，甚至变成圆形。2.5.1图标等比例缩放问题

细线条的圆角矩形通过等比例缩小变成了粗线条的正圆想要对图标进行不变形的等比例缩放，不同的软件有不同的实现方法。2.5.2图标等比例缩放方法

不同软件的等比例缩放的实现方法使用矩形工具绘制矩形框，使用变换命令，实现图标等比例缩放。2.5.3课堂案例-将图标通过缩放置入界面

效果图网格系统的定制意义网格系统的定制规范网格系统的使用方法课堂案例-运用网格系统调整图标2.6图标的网格系统

通过物理尺寸绘制的图标通常会失去视觉平衡，比如相同宽高尺寸下的方形和圆形，方形会比圆形大。因此为了达到图标与图标的视觉平衡，我们需要通过制定网格系统运用视觉尺寸进行一组图标的绘制。2.6.1网格系统的定制意义

物理尺寸和视觉尺寸下的对比不同形状的图标可以根据网格系统来进行规范，以实现一组图标的视觉平衡。网格系统中的形状可以分为四种，即方形、圆形、垂直矩形和水平矩形。在24px下的网格系统中，方形的宽高尺寸为18px，圆形的直径尺寸为20px，垂直矩形的高度尺寸为20px,宽度尺寸为16px，水平矩形的高度尺寸为16px,宽度尺寸为20px。2.6.2网格系统的定制规范

24px下的网格系统一组图标如果完全贴合网格系统的四种形状进行绘制，一定会出现单个图标的变形、不自然、比例不协调的现象。正确使用网格系统的方法是，将对应网格系统形状的图标放入该网格。根据图标自身的比例，做出轻微调整，可以使图标溢出网格或者未充满网格。这样既实现了一组图标的视觉平衡，又保证了单个图标的比例协调。2.6.3网格系统的使用方法

网格系统的使用方法使用选择工具移动图标的位置，使用属性面板中的“X”、“Y”和“宽”、“高”选项实现视觉平衡。2.6.4课堂案例-运用网格系统调整图标

需要置入网格的图标重心调整线条调整颜色调整课堂案例-进行图标的重心调整课堂案例-进行图标的线条调整课堂案例-进行图标的颜色调整2.7图标的视觉调整

如果粗暴的对图标重心进行物理对齐和物理平衡，会造成个别图标的比例失衡和整体排版的视觉错乱。图标的重心应该根据不同形状进行对齐调整。2.7.1重心调整

图标重心调整示意图同等厚度的线条，因为视错觉会使得竖线看起来要比横线薄。在进行图标绘制时，有时我们会通过适当调整线条尺寸来避免视错觉现象，保证图标的视觉平衡。2.7.2线条调整

图标线条调整示意图相同颜色下，由于文本所占的视觉面积小，因此颜色会比图标的颜色看起来轻。在进行图标绘制时，我们会通过适当加深文本的颜色，保证图标的视觉平衡。2.7.3颜色调整

图标的文字颜色调整示意图使用属性面板中的“X”选项进行图标的重心调整。2.7.4课堂案例-进行图标的重心调整

重心调整前重心调整后使用属性栏中的“描边粗细”选项进行图标的线条调整。2.7.5课堂案例-进行图标的线条调整

重心调整前重心调整后使用颜色填充工具调整文字颜色，实现图标与文字颜色视觉平衡。2.7.6课堂案例-进行图标的颜色调整

红色叉号为颜色调整前的图