线性图标一般是以纯描线方式画出来，它比拟物化图标简单很多，但却很实用，特别适用于扁平化设计。线性图标可以方便地转换成SVG（可缩放矢量图形）、图标字体，体积小，支持自由缩放且不模糊，非常适合在手机APP上使用。

尺寸规格：一般线条为2　px，如图2‑93所示，也有的加强为3　px，如图2‑94所示。

图2‑94 3px线性图标

风格：线条简单，图形指示意义明确。

提示：在采用图层样式做描边效果时，如果用到较大的数值，描边会产生分块曲线，边缘有锯齿感，而通过矢量描边处理可得到完美的结果，如图2‑95所示。

图2‑95 样式描边与路径描边

1.设计思路

在制作图标前需要分析图标的作用是什么？放在哪里？什么风格？在对这些需求进行分析后找到具体的图形来表达抽象或具体的意义，最后进行图形设计，在绘制草图后使用Photoshop完成图标的设计，如图2‑96所示。

图2‑96 设计思路

2.制作步骤

线性图标可以通过描边直接绘制，这里介绍如何使用布尔运算来制作线性图标，制作流程如图2‑97所示。

图2‑97 制作流程

01 在Photoshop中新建一个空白文档，如图2‑98所示。

02 填充背景色为绿色，然后选择“椭圆工具”，如图2‑99所示。

图2‑98 新建空白文档

图2‑99 选择“椭圆工具”

03 在画面中单击鼠标弹出对话框，设置宽度和高度参数，单击“确定”按钮，如图2‑100所示。

04 创建圆后按Ctrl+C组合键复制，按Ctrl+V组合键粘贴，粘贴后按Ctrl+T组合键将其缩小2px，如图2‑101所示。

图2‑100 设置参数

图2‑101 复制并缩小

05 在选项栏中单击“路径操作”按钮，在下拉列表中选择“减去顶层形状”选项，如图2‑102所示。

06 执行操作后图形效果如图2‑103所示。

图2‑102 选择“减去顶层形状”选项

图2‑103 图形效果

07 在工具箱中选择“矩形工具”如图2‑104所示。

08 在画面中单击鼠标，在弹出的对话框中设置宽、高参数，如图2‑105所示。

　　　图2‑104 选择“矩形工具”

图2‑105 设置宽、高参数

09 单击“确定”按钮后在选项栏中选择“合并形状”选项，如图2‑106所示。

10 将矩形移至圆的中心，如图2‑107所示。

图2‑106 选择“合并形状”选项

图2‑107 移至中心

提示：按Ctrl+T组合键调出自由变换框，找到圆的中心点，按Ctrl+R组合键打开标尺，从标尺中拖出参考线来标记中心点的位置。

11 再次绘制椭圆，椭圆的宽度和高度为58　px，如图2‑108所示。(www.daowen.com)

12 复制该椭圆，缩小2　px后进行“减去顶层形状”的操作，并移动右边缘到第一个圆的中心处，如图2‑109所示。

图2‑108 设置宽度和高度参数

图2‑109 复制并移动

13 按键盘上的方向键，将圆向左移动7px，如图2‑110所示。

14 复制图层，向右移动复制的圆，使左边缘对齐中心，然后向右移动7px，使两边对称，如图2‑111所示。

图2‑110 向左移动

图2‑111 复制并移动

15 再次复制图层，将圆的下边缘移至参考线的中心点，如图2‑112所示。

16 按方向键向下移动7　px，如图2‑113所示。

图2‑112 复制并调整位置

图2‑113 向下移动

17 在选项栏中单击“路径操作”按钮，在下

18 拉列表中选择“合并形状组件”选项，如图2‑114所示。在弹出的对话框中单击“是”按钮，如图2‑115所示。

图2‑114 选择“合并形状组件”选项

图2‑115 单击“是”按钮

19 在“图层”面板中选择上面三个图层，单击鼠标右键，执行“合并形状”命令，如图2‑116所示。

20 再次单击“路径操作”按钮，在下拉列表中选择“合并形状组件”选项，如图2‑117所示。

图2‑116 执行“合并形状”命令

图2‑117 选择“合并形状组件”选项

21 在“图层”面板中选择“椭圆1”图层，如图2‑118所示。 22 使用“路径选择工具”选择外圆，按Ctrl+C组合键复制。然后选择“椭圆2”所在的图层，按Ctrl+V组合键粘贴，如图2‑119所示。

图2‑118 选择“椭圆1”图层

图2‑119 复制并粘贴

23 在选项栏中选择“与形状区域相交”选项，如图2‑120所示。

图2‑120 选择“与形状区域相交”选项

24 在选项栏中选择“与形状区执行操作后图像效果如图2‑121所示。

　　图2‑121 图像效果

提示：在进行旋转时，按住Shift键可以精准控制旋转角度为15度的倍数，即15度、30度、45度、60度等。线性图标等比例缩放会导致线条粗细改变，会破坏页面的视觉统一性，因此对同一图标的多种尺寸均需重新绘制。

25 选择“合并形状组件”选项完成篮球图标的绘制，如图2‑122所示。

26 为了使其具有动感，选择图形，按Ctrl+T组合键，将其旋转30度，如图2‑123所示。

图2‑122 完成绘制

图2‑123 旋转效果