在今天的教程中，我们将深入了解在Adobe Illustrator和Affinity Designer中创建线条图标的过程。你会看到如何使用一些我们各处调整过的基本形状来制作可用的成品。
我在几年前探索了
我们将使用两个不同的软件创建完全相同的图标，更准确地说是Adobe Illustrator和Affinity Designer，这样每个人都可以参与。
话虽这么说，让我们开始吧！
如何在 Adobe Illustrator 中创建线条图标
1. 如何设置新的项目文件
与任何新项目一样，我们将通过快速完成设置新文档的过程来解决问题。因此，请转到 文件>新建 (或使用 Control – N 键盘快捷键)，然后按如下方式调整：
- 文件：网页
- 画板数量：1
- 宽度：128px
- 高度: 128 px
- 单位: 像素
在高级选项卡中：
- 颜色模式: RGB
- 光栅效果: 屏幕 (72 ppi)
- 预览模式: 默认值
2. 如何设置图层
创建文档之后，我们需要花几分钟的时间，使用几个图层来构建项目，这样就可以将参考网格与实际图标分离开，实现并保持清晰稳定的工作流程。
为此，只需打开图层面板，然后使用创建新图层按钮创建两个图层，命名如下:
- 底层: 参考网格
- 顶层: 图标
3. 如何创建参考网格
一旦我们完成了文档的分层，我们就可以集中精力构建参考网格，这将帮助我们定义最终图标的实际大小，同时允许我们添加一个小的保护填充。
步骤1
选择底层，然后使用128 x 128 像素正方形创建主参考曲面（基本尺寸），我们将使用＃F15A24进行着色，然后使用对齐面板的水平和垂直居中对齐选项，放置在底层画板的中心位置。
步骤2
使用较小的112 x 112像素添加方形活动绘图区域，用白色（#FFFFFF）进行着色，然后与较大的底层中心对齐，这将导致全面的8像素填充。
步骤3
两个形状都准备就绪后，使用Control-G快捷键将它们选择并组合在一起，确保在继续下一步之前锁定当前图层。
4. 如何创建报纸图标
完成项目文件的设置后，就可以开始处理实际的图标了，我们每次做一部分。
步骤1
使用椭圆工具（L），创建一个112 x 112 像素的圆形背景，使用#AEEDEA进行着色，然后与底层的画板中心对齐。
步骤2
使用40 x 44像素的矩形为报纸前面的部分创建主要形状，使用#FFFFFF进行着色，然后将其放置在距活动绘图区域左边缘30像素、距离顶部边缘34像素处。
你可能已经注意到，即使间隙值是偶数（因为它们可以除以2），它们只能在变为奇数之前减半。 通常情况下，我会尽量避免这种类型的数字，但是因为我们正在制作线条图标，所以只要我们添加实际轮廓就会立即修复，正如你稍后会看到的那样。
步骤3
通过在变换面板的矩形属性中将其左下角的半径设置为6个像素，调整我们刚刚创建的形状。我又用了一个奇怪的数值，但是一旦我们添加了轮廓，一切就都说得通了。
步骤4
复制所创建的形状（Control-C> Control-F），并放在其右侧，使其路径最终重叠，如参考图像中所示。
步骤5
通过使用直接选择工具 (A) 逐个选择每个右锚点来打开这两个路径，然后通过按Delete删除它们。
步骤6
当两条路径仍处于选中状态时，通过按两次Control-J（连接）快捷键将它们合并为一个更大的形状。
步骤7
现在，我们已经完成了调整前面部分的主形状，我们可以添加轮廓了。这部分实际上比你想象的更重要，因为描边的宽度最终会直接影响到周围的间隙值，以及拐角半径的可见部分，正如你将在下面看到的那样。
一般情况下，你总是希望使用偶数数值（例如，2，4，6，8等），因为我们要将描边与中心对齐。 这样会确保形状完全与基础像素网格对齐，因为对齐最终会将其宽度平分。
若要添加实际轮廓，首先要创建生成的形状的副本（Control-C），将其粘贴到前面（Control-F），然后将其颜色更改为＃43435B，进行调整。 完成后，使用Shift-X快捷键将其填充和描边一同翻转，然后打开描边面板并将其宽度设置为4个像素，确保描边与中心对齐。
由于轮廓的一半将最终落在填充形状的路径之外，这实际上会将间隙值减少2个像素，使得圆角看起来不那么圆。
如果我们使用奇数（例如3，5，7，9等），描边最终会生成一些令人讨厌的抗锯齿，当打开像素预览模式（Alt-Control-Y）时，它们会清晰可见。发生这种情况是因为软件找不到完美的中心，因为一旦分成两半，奇数就变成十进制数。
更糟糕的是，如果你尝试使用完美像素选项（右键单击> 完美像素），描边的路径将最终因中心对齐而脱离像素网格。
步骤8
因为我们希望图标感觉更界面友好，我们把所有的描边拐点设置为圆形联接，这是一个简洁有用的小技巧。对于当前的形状来说，这也修复了右下方锚点的外观，否则看起来好像被错误地切碎了。
步骤9
当我们完成对轮廓的所有小调整后，就要同时选择轮廓和底层填充的形状，然后使用Control-G快捷键或者稍微慢一点的右键单击>组合的方法将它们组合在一起。
我通常会把填充形状和轮廓组合在一起, 因为如果我稍后要移动其中一个，另一个会自动跟随它改变。此外，如果你需要对两者中的任何一个进行调整，可以通过隔离组来轻松地完成修改。
步骤10
使用 12 x 36 像素的矩形创建侧面的主形状，使用#59C9C9 着色，然后放到刚刚组合的形状的右侧，确保它们的路径重叠。重叠部分是非常重要的，因为它能确保你添加的所有轮廓完美地相互覆盖，而不会增加最终设计的厚度。
步骤11
通过将底角的半径设置为6个像素来调整我们刚刚创建的形状，这与前面部分使用的值相同。在处理线条图标时，一致性会在路径的完美重叠上发挥关键的作用，因此要始终关注数值，这样稍后就不必来回修改了。
步骤12
使用6 x 36像素的正方形添加细微阴影，放置在当前部分的左侧，使用与轮廓相同的值（＃43435B）对其进行着色，并确保将其不透明度降低到24％。 这是我经常使用的另一个小技巧，不是选择更暗的颜色来作为阴影，而是简单地取样描边的颜色，然后降低不透明度，直到得到我想要的东西。
步骤13
使用较大底层形状的副本（Control-C）遮罩阴影，我们把它放在前面，然后都选中它们，只需右键单击>制作剪切蒙版。
步骤14
一旦覆盖了阴影，就可以创建它的副本（Control-C> Control-F），然后使用吸管工具（I）对现有轮廓进行采样，从而为当前部分创建4个像素宽的轮廓。
这是我一直使用的另一个小技巧，因为它可以帮助我将轮廓的所有现有属性（颜色，宽度）复制到当前的形状。除此之外，它还可以确保所使用的颜色值是前后一致的，这在设计线条图标时非常重要，因为在添加体积时，是使用较深的颜色来填充形状，而不是它们的轮廓。
快速提示：这里有一个快速图片，说明如果你做了一些我强调不能做的步骤会发生什么（不正确的路径重叠，重叠形状的角半径不一致，轮廓的颜色值不同）。
步骤15
回到报纸的前面部分，我们开始添加一些小细节，使用12 x 12 像素的圆角矩形与2个像素的角半径创建照片框，使用 #43435B 着色，然后放在距前轮廓右边缘4个像素、距前顶轮廓8个像素的距离。
此时，你可能想知道为什么我没有在指定的间距值中包含轮廓中的那2个像素，答案是因为在这种情况下我们无法使用对齐面板分布形状，这些值是无关的。每当我们将形状放置在轮廓的内部时，我们总是会关注轮廓宽度的内部边缘，从而忽略它的内半部分。
如果我们要将形状放在轮廓表面之外，那么需要将它们添加到最后的距离，因为软件将始终将它们定位在与中心对齐的轮廓路径上。
步骤16
使用宽8像素、厚4像素的圆端描边 (#43435B) 创建第一个伪文本行，与图片的上边缘对齐， 距离左侧为4像素。
正如你所看到的，我选择了描边而不是圆角矩形，当厚度与轮廓的宽度相同时，我会一直尝试这样做，因为如果需要改变它们的颜色，我可以轻松地使用选择>相同>描边颜色来实现。
请注意，我使用了“放置”这个词而不是“对齐”，因为如果我们使用对齐面板的垂直对齐选项，软件将根据描边的中心对指定的关键对象进行对齐，这会产生完全不同的结果。
步骤17
复制 (Control-C > Control-F)刚刚创建的文本行，创建第二行文本，把它放在第一行文本下面4个像素处。
这是描边定位的一个很好的例子，因为我们有两种方法。第一种方法依赖于使用方向箭头键逐渐移动，每次移动一个像素，直到到达所需要的位置。
第二个涉及使用对齐面板的垂直分布间距选项，该选项需要调整间距值，因为需要包含两个描边宽度的下半部分和上半部分。因此，你要使用8个像素(2 + 4 + 2)，而不是使用 4个像素。 就个人而言，我建议在较小距离时使用第一种方法，在处理较大距离时使用对齐面板，老实说这种情况并不常见。
步骤18
使用上一步骤的副本（Control-C> Control-F）创建更宽的文本行，放置于其下方4个像素处，然后将其宽度从8像素调整到24像素。 要执行此操作，请打开转换面板，然后取消缩放描边和效果，否则在调整时会增加描边的宽度。 然后，将参考点设置为左方，只需在W（宽度）输入字段中输入指示值（24 px）。
步骤19
使用我们调整过的副本（Control-C> Control-F）添加最终文本行，放在下面同样4个像素处。所有的文本行都就位后， 一旦你掌握了所有的线路，全选并将它们合并（Control-G），稍后对整个报纸图标也这么做。
步骤20
使用高8像素、宽4像素的描边（＃43435B）为中心图像添加参考线，同时在两侧添加两个较短的4个像素的参考线，将它们定位在参考图像中，完成图标。慢慢来，一旦完成，不要忘记全选并把它们组合在一起（Control-G），稍后对它所组成的图形也做同样的操作。
如何在Affinity Designer中创建线条图标
既然我们对创建线条图标的注意事项有了更好的了解，让我们看看如何在Affinity Designer中构建相同的作品。
1. 如何设置新的项目文件
正如我们在Illustrator中所做的那样，首先创建一个新文档，然后转到文件> 新建（或使用Control-N快捷键），作下列调整：
- 类型: 网页
- 文档单位: 像素
- 创建画板: 选中
- 透明背景: 选中
- 页面宽度: 128 像素
- 页面高度: 128 像素
- DPI:72
2. 如何设置图层
花点时间构建项目文件，方法是打开图层面板，然后使用添加图层按钮创建两个图层，命名如下：
- 底层: 参考网格
- 顶层: 图标
3. 如何创建参考网格
完成文档分层后, 就可以继续构建小参考网格了。
步骤1
首先选择底层，然后使用128 x 128像素的正方形创建主参考曲面（基本尺寸），使用＃F15A24进行着色，然后使用对齐面板的中心对齐和居中选项，放置在底层画板的中心。
步骤2
使用较小的112 x 112 像素正方形添加活动绘图区域，我们将使用白色（#FFFFFF）进行着色，然后将中心对齐到主参考曲面，这将为我们提供相同的8个像素的保护填充。
步骤3
两个形状就位后，使用Control-G快捷键选择并将它们组合在一起，使用小开关锁定/解锁锁定到当前图层，然后再转到下一个。
4. 如何创建报纸图标
定位在顶层，让我们开始处理小报纸图标。
步骤1
首先使用112 x 112像素的圆形创建背景，使用#AEEDEA对其进行着色，然后中心对齐到底层的画板。
步骤2
使用40 x 44像素的矩形添加报纸前部的主形状，使用白色 (#FFFFFF)进行着色，然后将其放置在距活动绘图区域左边缘30像素、距离顶部边缘34像素的位置。
步骤3
首先取消选中单个半径选项，然后将其左下角 (BL) 设置为圆角，确保赋予其绝对值为6像素的值，从而调整形状。
步骤4
创建生成的形状的副本（Control-C> Control-V），然后将其定位在活动绘图区域的右侧，使它们的路径最终重叠。
步骤5
选择两个形状后，使用转换为曲线选项，以便调整其路径，然后通过使用节点工具 (A) 和打断曲线操作选择右上节点来单独打开它们。打开它们的路径后，使用 Delete 键选择并删除其所有右节点。
步骤6
使用节点工具的联接曲线和闭合曲线操作将生成的路径段合并为一个较大的形状。
步骤7
使用Stroke方法为最终形状赋予轮廓，将它的副本（Control-C）粘贴在前面（Control-V），然后将其颜色更改为＃43435B，使用描边（Shift-X）翻转其填充，将其宽度设置为4磅。 完成后，请确保使用Control-G快捷键选择并将两者组合在一起。
快速提示：在Illustrator中，你必须手动设置描边的联接为圆形，而Affinity Designer会自动执行此操作，因为它是使用的默认选项。
步骤8
使用12 x 36像素的矩形（＃59C9C9）为报纸的侧面部分创建主形状，通过将其底角的半径设置为6像素进行调整，将生成的形状置于前部的右侧， 确保他们的路径完全重叠。
步骤9
使用6 x 36像素的正方形（＃43435B）添加细微阴影，置于当前部分的左侧，确保将其不透明度降低到24％。
步骤10
通过打开图层面板并首先将侧面部分的填充形状的副本 (Control-C) 添加到剪贴板，然后只需在其顶部拖动较小的形状来覆盖阴影。
步骤11
通过使用Control-V快捷键从剪贴板粘贴副本来添加轮廓，然后将其颜色更改为＃43435B，并使用描边（Shift-X）翻转其填充，确保将其宽度设置为4磅。 完成后，不要忘记选择并合并（Control-G）所有侧面部分的构图形状，然后再继续下一步。
步骤12
将焦点移回到报纸的正面部分，使用12 x 12像素的圆角矩形（＃43435B）创建照片框，角半径为2像素，将其置于距离较大轮廓右边缘4像素、距离顶部8像素的位置处。
步骤13
使用8 像素宽、4 磅粗的描边（＃43435B）添加第一条文本行，将其置于照片的顶部边缘相匹配的位置，距离左侧的4像素。
步骤14
使用上一步骤中的副本（Control-C> Control-V）创建第二个文本行，置于其下方4个像素处。
步骤15
添加更宽的文本行，使用我们刚刚创建的副本 (Control-C > Control-V)，置于其下方4个像素处，将其宽度增加到 24像素。要执行此操作，请打开转换面板，首先通过单击锚点选择器的左框，然后在 W (宽度) 中输入指定值 (24像素)，以确保调整与左锚点相对应。
步骤16
使用我们刚刚调整过的副本 (Control-C > Control-V) 创建最终文本行，确保将其置于下方同样4像素处。所有的文本行都到位后，全选并将它们组合(Control-G) 到一起，稍后对整张报纸图标做同样的操作。
步骤17
使用高8像素、宽4磅的描边（＃43435B）为中心图像添加参考线，同时在两侧添加两个较短的4个像素的参考线，将它们定位在参考图像中，完成图标。慢慢来，一旦完成，不要忘记全选并把它们组合在一起（Control-G），稍后对它所组成的图形也做同样的操作。
回顾
在结束之前，我想对我们在创建基于笔划的线条图标时学到的关键点进行一些回顾，防止有些人遗漏一些部分
应该做的：
- 当您开始布置图标的不同构图形状时，请务必进行数学计算，并确保在执行此操作时包含其轮廓（描边）值，因为它将帮助您确定与画板相关的位置的关键方面。
- 选择描边宽度时，尽量使用偶数（例如2，4，6，8等）而不是奇数（例如3，5，7，9等），否则你的轮廓将从像素网格中删除。
- 定位形状时，务必确保它们的路径完全重叠，尤其是在处理具有圆角或更多有机线条的对象时。
- 为形状添加轮廓时，请确保选择并将它们组合在一起，以便它们作为一个单元运行，使得以后需要时更容易重新定位它们。
- 当开始构建图标时，请确保所有描边保持相同的颜色值和宽度，以实现一致性。
- 在轮廓内定位形状时，始终从描边的内边缘而不是中心进行定位。
- 将基于笔划的对象与非基于笔划的对象对齐时，如果使用对齐面板，确保调整其最终位置，因为软件将根据描边的中心而不是其外边缘进行对齐。
- 当将多个基于笔划的对象相对于彼此定位时，请使用对齐面板进行数学运算并包括其顶部和/或下半部的值，否则将无法获得所需的结果。
