Advertisement
  1. Design & Illustration
  2. Icon Design
Design

创建线条图标的注意事项

by
Difficulty:BeginnerLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by infoVision_Jason (you can also view the original English article)

Final product image
What You'll Be Creating

在今天的教程中,我们将深入了解在Adobe Illustrator和Affinity Designer中创建线条图标的过程。你会看到如何使用一些我们各处调整过的基本形状来制作可用的成品。

所以,如果你想知道制作这种类型的图标的注意事项,一定要读一下这篇文章。

此外,不要忘记,你可以随时前往GraphicRiver来扩展资料库,你可以找到很多可供选择的矢量图标包

我在几年前探索了用于创建线条图标的两种主要方法,并对它们进行了比较,以便了解哪种方法更适合你。

今天,我们将扩展其中一种方法,更准确地说是 Stroke 方法,并讨论注意事项,这样你就可以在创建这些类型的图标时完善你的技能。

我们将使用两个不同的软件创建完全相同的图标,更准确地说是Adobe Illustrator和Affinity Designer,这样每个人都可以参与。

话虽这么说,让我们开始吧!

如何在 Adobe Illustrator 中创建线条图标

1. 如何设置新的项目文件

与任何新项目一样,我们将通过快速完成设置新文档的过程来解决问题。因此,请转到 文件>新建 (或使用 Control - N 键盘快捷键),然后按如下方式调整:

  • 文件:网页
  • 画板数量:1
  • 宽度:128px
  • 高度: 128 px
  • 单位: 像素

高级选项卡中:

  • 颜色模式: RGB
  • 光栅效果: 屏幕 (72 ppi)
  • 预览模式: 默认值
setting up a new document in ai

2. 如何设置图层

创建文档之后,我们需要花几分钟的时间,使用几个图层来构建项目,这样就可以将参考网格与实际图标分离开,实现并保持清晰稳定的工作流程。

为此,只需打开图层面板,然后使用创建新图层按钮创建两个图层,命名如下:

  • 底层: 参考网格
  • 顶层: 图标
setting up the layers in ai

3. 如何创建参考网格

一旦我们完成了文档的分层,我们就可以集中精力构建参考网格,这将帮助我们定义最终图标的实际大小,同时允许我们添加一个小的保护填充。

步骤1

选择底层,然后使用128 x 128 像素正方形创建主参考曲面(基本尺寸),我们将使用#F15A24进行着色,然后使用对齐面板的水平垂直居中对齐选项,放置在底层画板的中心位置。

creating the base grid in ai

步骤2

使用较小的112 x 112像素添加方形活动绘图区域,用白色(#FFFFFF)进行着色,然后与较大的底层中心对齐,这将导致全面的8像素填充。

creating the active drawing area in ai

步骤3

两个形状都准备就绪后,使用Control-G快捷键将它们选择并组合在一起,确保在继续下一步之前锁定当前图层。

locking the layers in ai

4. 如何创建报纸图标

完成项目文件的设置后,就可以开始处理实际的图标了,我们每次做一部分。

步骤1

使用椭圆工具(L),创建一个112 x 112 像素的圆形背景,使用#AEEDEA进行着色,然后与底层的画板中心对齐。

creating the background in ai

步骤2

使用40 x 44像素的矩形为报纸前面的部分创建主要形状,使用#FFFFFF进行着色,然后将其放置在距活动绘图区域左边缘30像素、距离顶部边缘34像素处。

你可能已经注意到,即使间隙值是偶数(因为它们可以除以2),它们只能在变为奇数之前减半。 通常情况下,我会尽量避免这种类型的数字,但是因为我们正在制作线条图标,所以只要我们添加实际轮廓就会立即修复,正如你稍后会看到的那样。

creating the front section in ai

步骤3

通过在变换面板的矩形属性中将其左下角的半径设置为6个像素,调整我们刚刚创建的形状。我又用了一个奇怪的数值,但是一旦我们添加了轮廓,一切就都说得通了。

adjusting the corner of the front section in ai

步骤4

复制所创建的形状(Control-C> Control-F),并放在其右侧,使其路径最终重叠,如参考图像中所示。

creating a duplicate of the front section in ai

步骤5

通过使用直接选择工具 (A) 逐个选择每个右锚点来打开这两个路径,然后通过按Delete删除它们。

opening up the paths of the front section in ai

步骤6

当两条路径仍处于选中状态时,通过按两次Control-J(连接)快捷键将它们合并为一个更大的形状。

uniting the path segments in ai

步骤7

现在,我们已经完成了调整前面部分的主形状,我们可以添加轮廓了。这部分实际上比你想象的更重要,因为描边的宽度最终会直接影响到周围的间隙值,以及拐角半径的可见部分,正如你将在下面看到的那样。

一般情况下,你总是希望使用偶数数值(例如,2,4,6,8等),因为我们要将描边与中心对齐。 这样会确保形状完全与基础像素网格对齐,因为对齐最终会将其宽度平分。

若要添加实际轮廓,首先要创建生成的形状的副本(Control-C),将其粘贴到前面(Control-F),然后将其颜色更改为#43435B,进行调整。 完成后,使用Shift-X快捷键将其填充描边一同翻转,然后打开描边面板并将其宽度设置为4个像素,确保描边与中心对齐。

由于轮廓的一半将最终落在填充形状的路径之外,这实际上会将间隙值减少2个像素,使得圆角看起来不那么圆。

adding the outline to the front section in ai

如果我们使用奇数(例如3,5,7,9等),描边最终会生成一些令人讨厌的抗锯齿,当打开像素预览模式(Alt-Control-Y)时,它们会清晰可见。发生这种情况是因为软件找不到完美的中心,因为一旦分成两半,奇数就变成十进制数。

example of stroke using odd numbers

更糟糕的是,如果你尝试使用完美像素选项(右键单击> 完美像素),描边的路径将最终因中心对齐而脱离像素网格

using the make pixel perfect option on odd strokes

步骤8

因为我们希望图标感觉更界面友好,我们把所有的描边拐点设置为圆形联接,这是一个简洁有用的小技巧。对于当前的形状来说,这也修复了右下方锚点的外观,否则看起来好像被错误地切碎了。

setting the corner join to round in ai

步骤9

当我们完成对轮廓的所有小调整后,就要同时选择轮廓和底层填充的形状,然后使用Control-G快捷键或者稍微慢一点的右键单击>组合的方法将它们组合在一起。

我通常会把填充形状和轮廓组合在一起, 因为如果我稍后要移动其中一个,另一个会自动跟随它改变。此外,如果你需要对两者中的任何一个进行调整,可以通过隔离组来轻松地完成修改。

grouping the main shapes of the front section in ai

步骤10

使用 12 x 36 像素的矩形创建侧面的主形状,使用#59C9C9 着色,然后放到刚刚组合的形状的右侧,确保它们的路径重叠。重叠部分是非常重要的,因为它能确保你添加的所有轮廓完美地相互覆盖,而不会增加最终设计的厚度。

creating the main shape for the side section in ai

步骤11

通过将底角的半径设置为6个像素来调整我们刚刚创建的形状,这与前面部分使用的值相同。在处理线条图标时,一致性会在路径的完美重叠上发挥关键的作用,因此要始终关注数值,这样稍后就不必来回修改了。

adjusting the shape of the side section in ai

步骤12

使用6 x 36像素的正方形添加细微阴影,放置在当前部分的左侧,使用与轮廓相同的值(#43435B)对其进行着色,并确保将其不透明度降低到24%。 这是我经常使用的另一个小技巧,不是选择更暗的颜色来作为阴影,而是简单地取样描边的颜色,然后降低不透明度,直到得到我想要的东西。

adding the shadow to the side section in ai

步骤13

使用较大底层形状的副本(Control-C)遮罩阴影,我们把它放在前面,然后都选中它们,只需右键单击>制作剪切蒙版

masking the shadow in ai

步骤14

一旦覆盖了阴影,就可以创建它的副本(Control-C> Control-F),然后使用吸管工具(I)对现有轮廓进行采样,从而为当前部分创建4个像素宽的轮廓。

这是我一直使用的另一个小技巧,因为它可以帮助我将轮廓的所有现有属性(颜色,宽度)复制到当前的形状。除此之外,它还可以确保所使用的颜色值是前后一致的,这在设计线条图标时非常重要,因为在添加体积时,是使用较深的颜色来填充形状,而不是它们的轮廓。

adding the outline to the side section in ai

快速提示:这里有一个快速图片,说明如果你做了一些我强调不能做的步骤会发生什么(不正确的路径重叠,重叠形状的角半径不一致,轮廓的颜色值不同)。

example of bad shape overlapping in ai

步骤15

回到报纸的前面部分,我们开始添加一些小细节,使用12 x 12 像素的圆角矩形与2个像素的角半径创建照片框,使用 #43435B 着色,然后放在距前轮廓右边缘4个像素、距前顶轮廓8个像素的距离。

positioning the main shape for the photo in ai

此时,你可能想知道为什么我没有在指定的间距值中包含轮廓中的那2个像素,答案是因为在这种情况下我们无法使用对齐面板分布形状,这些值是无关的。每当我们将形状放置在轮廓的内部时,我们总是会关注轮廓宽度的内部边缘,从而忽略它的内半部分。

如果我们要将形状放在轮廓表面之外,那么需要将它们添加到最后的距离,因为软件将始终将它们定位在与中心对齐的轮廓路径上。

example of positioning shapes inside an outline in ai

步骤16

使用宽8像素、厚4像素圆端描边 (#43435B) 创建第一个伪文本行,与图片的上边缘对齐, 距离左侧为4像素

正如你所看到的,我选择了描边而不是圆角矩形,当厚度与轮廓的宽度相同时,我会一直尝试这样做,因为如果需要改变它们的颜色,我可以轻松地使用选择>相同>描边颜色来实现。

positioning the first text line in ai

请注意,我使用了“放置”这个词而不是“对齐”,因为如果我们使用对齐面板的垂直对齐选项,软件将根据描边的中心对指定的关键对象进行对齐,这会产生完全不同的结果。

example of stroke aligning in ai

步骤17

复制 (Control-C > Control-F)刚刚创建的文本行,创建第二行文本,把它放在第一行文本下面4个像素处。

这是描边定位的一个很好的例子,因为我们有两种方法。第一种方法依赖于使用方向箭头键逐渐移动,每次移动一个像素,直到到达所需要的位置。

adding the second text line in ai

第二个涉及使用对齐面板的垂直分布间距选项,该选项需要调整间距值,因为需要包含两个描边宽度的下半部分和上半部分。因此,你要使用8个像素(2 + 4 + 2),而不是使用 4个像素。 就个人而言,我建议在较小距离时使用第一种方法,在处理较大距离时使用对齐面板,老实说这种情况并不常见。

example of multiple stroke aligning in ai

步骤18

使用上一步骤的副本(Control-C> Control-F)创建更宽的文本行,放置于其下方4个像素处,然后将其宽度8像素调整到24像素。 要执行此操作,请打开转换面板,然后取消缩放描边和效果,否则在调整时会增加描边宽度。 然后,将参考点设置为左方,只需在W(宽度)输入字段中输入指示值(24 px)。

example of increasing of the length of a stroke in ai

步骤19

使用我们调整过的副本(Control-C> Control-F)添加最终文本行,放在下面同样4个像素处。所有的文本行都就位后, 一旦你掌握了所有的线路,全选并将它们合并(Control-G),稍后对整个报纸图标也这么做。

adding the last text line in ai

步骤20

使用高8像素、宽4像素描边#43435B)为中心图像添加参考线,同时在两侧添加两个较短的4个像素的参考线,将它们定位在参考图像中,完成图标。慢慢来,一旦完成,不要忘记全选并把它们组合在一起(Control-G),稍后对它所组成的图形也做同样的操作。

finishing off the icon in ai

如何在Affinity Designer中创建线条图标

既然我们对创建线条图标的注意事项有了更好的了解,让我们看看如何在Affinity Designer中构建相同的作品。

1. 如何设置新的项目文件

正如我们在Illustrator中所做的那样,首先创建一个新文档,然后转到文件> 新建(或使用Control-N快捷键),作下列调整:

  • 类型: 网页
  • 文档单位: 像素
  • 创建画板: 选中
  • 透明背景: 选中
  • 页面宽度: 128 像素
  • 页面高度: 128 像素
  • DPI:72
setting up a new document in ad

2. 如何设置图层

花点时间构建项目文件,方法是打开图层面板,然后使用添加图层按钮创建两个图层,命名如下:

  • 底层: 参考网格
  • 顶层: 图标
setting up the layers in ad

3. 如何创建参考网格

完成文档分层后, 就可以继续构建小参考网格了。

步骤1

首先选择底层,然后使用128 x 128像素的正方形创建主参考曲面(基本尺寸),使用#F15A24进行着色,然后使用对齐面板的中心对齐居中选项,放置在底层画板的中心。

creating the base grid in ad

步骤2

使用较小的112 x 112 像素正方形添加活动绘图区域,我们将使用白色(#FFFFFF)进行着色,然后将中心对齐到主参考曲面,这将为我们提供相同的8个像素的保护填充。

adding the active drawing area in ad

步骤3

两个形状就位后,使用Control-G快捷键选择并将它们组合在一起,使用小开关锁定/解锁锁定到当前图层,然后再转到下一个。

locking the layers in ad

4. 如何创建报纸图标

定位在顶层,让我们开始处理小报纸图标。

步骤1

首先使用112 x 112像素的圆形创建背景,使用#AEEDEA对其进行着色,然后中心对齐到底层的画板。

creating the background in ad

步骤2

使用40 x 44像素的矩形添加报纸前部的主形状,使用白色 (#FFFFFF)进行着色,然后将其放置在距活动绘图区域左边缘30像素、距离顶部边缘34像素的位置。

creating the main shape for the front section in ad

步骤3

首先取消选中单个半径选项,然后将其左下角 (BL) 设置为圆角,确保赋予其绝对值为6像素的值,从而调整形状。

adjusting the corner of the front section in ad

步骤4

创建生成的形状的副本(Control-C> Control-V),然后将其定位在活动绘图区域的右侧,使它们的路径最终重叠。

creating a duplicate of the front section in ad

步骤5

选择两个形状后,使用转换为曲线选项,以便调整其路径,然后通过使用节点工具 (A)打断曲线操作选择右上节点来单独打开它们。打开它们的路径后,使用 Delete 键选择并删除其所有右节点。

opening up the paths of the front section in ad

步骤6

使用节点工具联接曲线闭合曲线操作将生成的路径段合并为一个较大的形状。

uniting the paths of the front section in ad

步骤7

使用Stroke方法为最终形状赋予轮廓,将它的副本(Control-C)粘贴在前面(Control-V),然后将其颜色更改为#43435B,使用描边(Shift-X)翻转其填充,将其宽度设置为4磅。 完成后,请确保使用Control-G快捷键选择并将两者组合在一起。

adding the outline to the front section in ad

快速提示:在Illustrator中,你必须手动设置描边联接圆形,而Affinity Designer会自动执行此操作,因为它是使用的默认选项。

步骤8

使用12 x 36像素的矩形(#59C9C9)为报纸的侧面部分创建主形状,通过将其底角的半径设置为6像素进行调整,将生成的形状置于前部的右侧, 确保他们的路径完全重叠。

creating the main shape for the side section in ad

步骤9

使用6 x 36像素的正方形(#43435B)添加细微阴影,置于当前部分的左侧,确保将其不透明度降低到24%

adding the shadow to the side section in ad

步骤10

通过打开图层面板并首先将侧面部分的填充形状的副本 (Control-C) 添加到剪贴板,然后只需在其顶部拖动较小的形状来覆盖阴影。

masking the shadow in ad

步骤11

通过使用Control-V快捷键从剪贴板粘贴副本来添加轮廓,然后将其颜色更改为#43435B,并使用描边(Shift-X)翻转其填充,确保将其宽度设置为4磅。 完成后,不要忘记选择并合并(Control-G)所有侧面部分的构图形状,然后再继续下一步。

adding the outline to the side section in ad

步骤12

将焦点移回到报纸的正面部分,使用12 x 12像素的圆角矩形(#43435B)创建照片框,角半径为2像素,将其置于距离较大轮廓右边缘4像素、距离顶部8像素的位置处。

positioning the main shape for the photo in ad

步骤13

使用8 像素宽、4 磅粗的描边(#43435B)添加第一条文本行,将其置于照片的顶部边缘相匹配的位置,距离左侧的4像素

positioning the first text line in ad

步骤14

使用上一步骤中的副本(Control-C> Control-V)创建第二个文本行,置于其下方4个像素处。

adding the second text line in ad

步骤15

添加更宽的文本行,使用我们刚刚创建的副本 (Control-C > Control-V),置于其下方4个像素处,将其宽度增加到 24像素。要执行此操作,请打开转换面板,首先通过单击锚点选择器的左框,然后在 W (宽度) 中输入指定值 (24像素),以确保调整与左锚点相对应。

example of increasing the length of a stroke in ad

步骤16

使用我们刚刚调整过的副本 (Control-C > Control-V) 创建最终文本行,确保将其置于下方同样4像素处。所有的文本行都到位后,全选并将它们组合(Control-G) 到一起,稍后对整张报纸图标做同样的操作。

adding the last text line in ad

步骤17

使用高8像素、宽4磅描边#43435B)为中心图像添加参考线,同时在两侧添加两个较短的4个像素的参考线,将它们定位在参考图像中,完成图标。慢慢来,一旦完成,不要忘记全选并把它们组合在一起(Control-G),稍后对它所组成的图形也做同样的操作。

finishing off the icon in ad

回顾

在结束之前,我想对我们在创建基于笔划的线条图标时学到的关键点进行一些回顾,防止有些人遗漏一些部分

应该做的:

  • 当您开始布置图标的不同构图形状时,请务必进行数学计算,并确保在执行此操作时包含其轮廓(描边)值,因为它将帮助您确定与画板相关的位置的关键方面。
  • 选择描边宽度时,尽量使用偶数(例如2,4,6,8等)而不是奇数(例如3,5,7,9等),否则你的轮廓将从像素网格中删除。
  • 定位形状时,务必确保它们的路径完全重叠,尤其是在处理具有圆角或更多有机线条的对象时。
  • 为形状添加轮廓时,请确保选择并将它们组合在一起,以便它们作为一个单元运行,使得以后需要时更容易重新定位它们。
  • 当开始构建图标时,请确保所有描边保持相同的颜色值和宽度,以实现一致性。
  • 在轮廓内定位形状时,始终从描边的内边缘而不是中心进行定位。
  • 将基于笔划的对象与非基于笔划的对象对齐时,如果使用对齐面板,确保调整其最终位置,因为软件将根据描边的中心而不是其外边缘进行对齐。
  • 当将多个基于笔划的对象相对于彼此定位时,请使用对齐面板进行数学运算并包括其顶部和/或下半部的值,否则将无法获得所需的结果。

不应该做

  • 当涉及到不应该做的时,几乎就是前面列表中项目的对立面,所以只要你记住这些关键概念,就能做好。

一如既往,我真心希望你在这个项目上获得乐趣,最重要的是在这个过程中学会了一两件事。

也就是说,如果你有任何问题,请随时评论,我会尽快回复!

finished project preview

扩展你的图标创建技能!

想要了解有关创建图标的更多信息?我们精心挑选了一些很棒的教程,应该对你有所帮助!

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.