线性图标一般是以纯描线方式画出来，它比拟物化图标简单很多，但却很实用，特别适用于扁平化设计。线性图标可以方便地转换成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所示。(https://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 旋转效果
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
