下载掌阅APP，畅读海量书库
立即打开
（1）正确识读任务书；
（2）掌握图标绘制的方法和步骤；
（3）根据上一任务分析大广赛官网的图标修改方案，制作大广赛官网的图标。
表1-7 任务书
（1）仔细阅读工作任务书，进行分析和讨论并填写进度表；
（2）充分了解项目背景，确定图标制作软件安装完成；
（3）结合任务书分析图标制作的难点和常见技术问题。
目前常用的绘制图标的软件有AI和PS。AI绘制图标的优点是AI的矢量图形是一种基于人工智能技术的图形，网格比较规范，容易转换图标的线面，其中直角一键转圆角的功能非常实用；其缺点是调色困难，只能调整普通色块，调整复杂的色块会耗费较多时间。PS的优点是调色功能显著，图标的形状剪切功能中规中矩；其缺点是设计线性图标时需要进行布尔运算，描边操作不方便。
我通常是将二者结合起来绘制图标：首先用AI构造基本的形状。如果图标作品要进行展示，就用PS软件对图标作品进行调色和展示；如果图标作品放在界面中使用，就需要用Sketch对图标作品进行调色。
这里采用的是AI绘制图标的参数设置和参考线绘制方法。
参数设置：首先，在首选项—参考线和网格，网格线间隔为10 px，次分隔线为10，勾选显示像素网格；其次，在画布框内单击鼠标右键，显示网格；最后，在视图中打开“对齐网格”“对齐像素”“对齐点”。图1-14、图1-15为参数设置步骤。
图1-14 参数设置
图1-15 显示网格
参数设置完成后新建画布，画布一般为800 px×600 px（Dribbble展示的尺寸），图标应小且精致。参考线是为了规范图标而存在的，其一般有两种画法，即按照图标的复杂规范进行绘制与按照图标的简单规范进行绘制。
下面以44 px的图标为例（图1-16）：
图1-16 对齐网格
1）图标的复杂规范
画一个44 px×44 px的正方形，颜色调为灰色，描边选择0.25 px（72 ppi下的1 px等于1px），然后画一个42 px×42 px的正方形居于其中。这个42 px×42px的界线为安全界线，图标不能超过这个界线，以避免贴边切图，导致图标边界不自然。图1-17为绘制参考线的步骤。
图1-17 绘制参考线的步骤
那么，参考线应该怎么使用？我们在画图标时，物体有圆有方、有长有短，若要统一体量，就需要用到内部的一些参考线。绘制完参考线后，根据个人感觉对其进行微调，直至其在个人视觉上的体量感达到一致（图1-18）。
图1-18 在视觉上具有统一体量感的图标
2）图标的简单规范
如果你已经能在图标的复杂规范下熟练绘制参考线，那么你就可以用较简单的参考线限制图标范围。简单的绘制方法是先画三个正方形，同样的线性选择灰色，描边选择0.25 pt。这里有个口诀可以参考：长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体小。图1-19展示了如何建立简单参考线。
图1-19 建立简单参考线
在画布中用描边0.25 pt绘制参考线，然后选中参考线，单击右键建立参考线（图1-20）。
图1-20 参考线的复用步骤
参考线是为了限制图标的大小，从而让图标整体美观与规范。在绘制了很多图标后，本书总结出两个诀窍：①当你知道要绘制物体的形状时，只要不影响图标的辨识度，你就可以适当改变图标中物体的形状，确保图标中物体的形状尽可能饱满；②当图标中物体的形状不宜饱满时，可以将其上下或左右部分绘制饱满，然后旋转45度，以提升图标整体的美感。在绘制图标的过程中要注意以下几点（图1-21）：
图1-21 绘制图标的要点
①绘制图标时要对齐网格或改变图标大小时要注意是否需要两边同时缩放，有没有产生半像素，如果有的话就手动拖动图标对齐网格。
②通过内描边的方式绘制线性图标更容易对齐网格，但是在内描边时只要通过加点进行断点的话，就会自动变为居中描边。那么内描边时怎样断点呢？可以对边进行对象—扩展，将其转换为形状，然后用布尔运算对其进行剪切。一般尽量居中描边，但经过检验，只要线对齐网格就不会影响图标的清晰度。
用PS绘制图标的简单规范如图1-22。
图1-22 用PS绘制图标的简单规范
首先每位学生根据表1-8完成相关任务，然后教师根据学生的任务完成情况提出改进意见。
表1-8 工作计划
图1-23 大广赛官网图标改版电子稿1
（1）认真阅读任务书和“引导性问题”中的知识点。
（2）根据上一任务中的草图，制作图标电子稿；也可以选择AI或者PS进行图标绘制；二者结合使用也可以。
图1-23、图1-24是蓝瑶同学设计制作的大广赛官网图标改版电子稿。
按学生自评、小组互评、教师评价三种方式评定每位学生完成学习任务的情况，并将学生自评成绩占总成绩的20%、小组互评成绩占总成绩的30%、教师评价成绩占总成绩的50%作为每位学生的综合评价结果（表1-9）。
图1-24 大广赛官网图标改版电子稿2
表1-9 评价表
续表
扫描下方二维码，获取更多UI资讯。
图标设计
通过完成项目1中的3个实训任务，从接受大广赛官网图标改版任务，对原官网图标优缺点进行分析，进而提出修改方案并绘制草图，再选择合适的软件绘制图标电子稿，形成了一个完整的工作闭环。3个实训任务分别对应了解UI图标基本规范、明确图标风格和设计原则、掌握图标绘制规范3项工作内容。
在3个实训任务中，学生可以针对自己的薄弱点加强练习。比如有的学生在制作图标时发现自己还不能熟练地运用AI技术，这就需要其加强对AI技术的学习。
选择一套自己喜欢的经典图标，进行半临摹半创作练习。