Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. Fan Art

如何使用AI制作一组星球大战主题图标

by
Read Time:30 minsLanguages:

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

今天的教程有点特殊,至少对我来说是这样,因为我们要使用日常工作中用到的基础工具和几何图形创建一些在星球大战里最具标志性的太空飞船。

还有,别忘了你可以去 GraphicRiver 扩充你的太空飞船图标组,那里有众多的矢量太空飞船图形供你选择。

好的,该说的都说完了,现在,戴上 Chewbacca 帽子,让我们直奔主题吧!

1. 新建文件

我敢肯定你已经启动并在后台运行了 Illustrator,现在让我们把它的窗口调到前方来,建立一个新的文档 (文件 > 新建Control-N ),参数已经在下面罗列出来了︰

画板数量︰ 1

  • 宽度︰ 800 px
  • 高度︰ 600 px
  • 单位︰ 像素

高级选项卡︰

  • 颜色模式︰ RGB
  • 栅格效果︰ 屏幕 (72ppi)
  • 预览模式︰ 默认值
setting up a new documentsetting up a new documentsetting up a new document

2. 自定义网格设置

既然我们决心要使用像素级别的完美工作流程创建图标,那就意味着要先创建细致的网格,这样我们才能完全掌控形状。

第 1 步

编辑 > 首选项 > 参考线和网格,进入子菜单,然后调整以下参数︰

  • 网格线间隔︰ 1 px
  • 次分割线︰ 1
setting up a custom gridsetting up a custom gridsetting up a custom grid

小贴士︰ 你可以通过阅读这篇关于Illustrator网格系统的工作原理的文章深入了解更多关于网格的相关内容。

第 2 步

一旦设置好了网格参数之后,接下来我们需要打开视图菜单,勾选对齐网格像素预览,这样可以确保之后创建的图形看起来清晰明了,而后每次你开启像素预览模式软件会自动启用对齐网格(如果您正在使用旧版本的Illustrator) 。

如果你现在对像素级完美工作流还知之甚少的话,我强烈推荐你去看一下如何创建像素级完美杰作这篇教程,我想它一定对你的技能提升有所帮助。

3. 图层的设置

新建文档完毕,接下来我们需要新建几个图层,这样做的好处是我们可以一次只将注意力放在一个图标上而不必担心被紊乱的工作流程分心。

现在让我们调出图层面板并创建四个新图层,按以下方式对其进行重命名︰

  • 图层 1︰reference grids
  • 图层 2︰ tie fighter
  • 图层 3︰millennium falcon
  • 图层 4︰x-wing
setting up the layerssetting up the layerssetting up the layers

4.创建参考网格

参考网格(或基础网格)就是由精确限定了的图形构成的辅助作图的工具,有了参考网格我们可以将注意力持续集中在图标的创建上。

一般说来,参考网格的大小确定了实际的图标大小,这也就是为什么当你新建一个项目文件时参考网格是你首要考虑的问题,因为你会总是想从可能的最小的尺寸开始制作项目文件。

现在让我们回到正题,在我的这个教程案例中,我决定将所有的图标尺寸都同一设置为 128 x 128 px,说实话这个尺寸其实还蛮大的。

步骤1

将 “reference grids” 以外的图层全部锁定,使用矩形工具(M)创建一个128 x 128 px的橙色 (#F15A24) 正方形,这个正方形将作为我们后面创建的图标的边界界限。

create the main shape for the reference gridcreate the main shape for the reference gridcreate the main shape for the reference grid

步骤2

添加一个更小的正方形 120 × 120 px (#FFFFFF),我们会将其放置在之前创建的正方形的上方,它将充当我们绘图区域,这样四周就还各剩下 4 px 的填充区域。

creating the main shape for the active drawing areacreating the main shape for the active drawing areacreating the main shape for the active drawing area

步骤3

将之前创建的两个正方形进行编组Control-G),然后对齐到画板的中心。复制两个副本 (Control-C > Control-F),将其进行水平分布,水平分布间距设置为40 px锁定当前图层。

creating the remaining reference gridscreating the remaining reference gridscreating the remaining reference grids

5. 创建钛战机图标

假设你已经将参考网格建好了,下一步我们会把注意力转移到下一个图层,创建我们的第一个图标。

步骤 1

要创建双离子引擎战斗机的图标,我们先从左太阳能电池翼的一个小部位开始入手,新建一个5 x 40 px 填充色#7C6663的矩形,将其中心对齐到距离有效绘画区域左边界2px距离的地方。

creating the main shape for the outer section of the tie fighters left solar array wingcreating the main shape for the outer section of the tie fighters left solar array wingcreating the main shape for the outer section of the tie fighters left solar array wing

步骤 2

复制在上一步中创建的矩形(Control-C)并将其贴在前面 (Control-F) ,将填充色变为#3A2E2A,将填充色描边色互换 (Shift-X),描边宽度增加到4px,最后将其与上一步创建的矩形进行编组Control-G)。

adding the outline to the left solar array wings outer sectionadding the outline to the left solar array wings outer sectionadding the outline to the left solar array wings outer section

步骤 3

创建一个8 x 116 px 的矩形,填充色#AF9994,描边色#3A2E2A,描边宽度设置为4px,将上一步创建的编组 (Control-G)设为关键对象,垂直居中对齐,水平分布间距设置为0。。

creating the main shapes for the thicker section of the tie fighters left wingcreating the main shapes for the thicker section of the tie fighters left wingcreating the main shapes for the thicker section of the tie fighters left wing

步骤 4

添加一个垂直方向的细节,新建一个填充色(#3A2E2A)的2 x 116 px的矩形,将其中心对齐到上一步创建的矩形,最后使用快捷键Control-G与上一步骤创建的图形进行编组

adding the vertical detail line to thicker section of the tie fighters left wingadding the vertical detail line to thicker section of the tie fighters left wingadding the vertical detail line to thicker section of the tie fighters left wing

步骤 5

新建一个5 x 40 px,填充色(#7C6663)的矩形,将描边颜色设置为 (#3A2E2A),描边宽度设置为4px。我们会在之后对齐进行编组(Control-G)。现在先将其垂直居中对齐至下图所示的图形并将水平分布间距设置为0,最后将所有图形编组(Control-G)。

adding the thinner inner section to the tie fighters left wingadding the thinner inner section to the tie fighters left wingadding the thinner inner section to the tie fighters left wing

步骤 6

这一步我们要创建机翼的附属能量塔。新建一个 8 x 20 px 的矩形,将填充色设置 #5E4A49,将上一步的图形设置为关键对象,将矩形垂直居中对齐到关键对象,并将水平分布间距设置为0px。

creating and positioning the main shape for the left section of the tie fighters left wing pyloncreating and positioning the main shape for the left section of the tie fighters left wing pyloncreating and positioning the main shape for the left section of the tie fighters left wing pylon

步骤 7

对上一步创建的矩形进行一定的调整。使用直接选择工具 (A)选择矩形右侧的锚点,然后使用移动工具将其垂直移动4 px的距离(右键单击 > 变换 > 移动 > 垂直 > + / - 4 px取决于你所选择的点)

adjusting the main shape of the left section of the tie fighters left wing pylonadjusting the main shape of the left section of the tie fighters left wing pylonadjusting the main shape of the left section of the tie fighters left wing pylon

步骤 8

为调整后的图形添加 4 px (#3A2E2A) 的描边,添加一个 4 x 6 px 的矩形 (#3A2E2A) ,使用对齐工具将其置于下图所示的位置。选择编组工具 (Control-G) 将所有图形进行编组。

adding the outline to the left section of the tie fighters left wing pylonadding the outline to the left section of the tie fighters left wing pylonadding the outline to the left section of the tie fighters left wing pylon

步骤 9

这一步我们要创建能量塔的右侧部分,创建一个 6 x 12 px 的矩形 (# 7 6663) 和一个 14 x 12 px 的矩形 (# 7 6663),按下图所示放置他们的位置,然后选中这两个矩形,使用路径查找器形状模式将它们进行联集。

creating the right section of the tie fighters left wing pyloncreating the right section of the tie fighters left wing pyloncreating the right section of the tie fighters left wing pylon

步骤 10

对上一步生成的形状进行一定的调整。使用直接选择工具 (A)单独选择最右边的锚点,使用移动工具分别将它们垂直移动 6px 的距离 (右键单击 > 变换 > 移动 > 垂直 > + /-6 px 正负取决于你所选择的锚点)。

adjusting the right section of the tie fighters left wing pylonadjusting the right section of the tie fighters left wing pylonadjusting the right section of the tie fighters left wing pylon

步骤 11

为调整后的图形添加4 px 的描边(#3A2E2A),然后将所有图形进行编组(Control-G) 。

adding the outline to the right section of the tie fighters left wing pylonadding the outline to the right section of the tie fighters left wing pylonadding the outline to the right section of the tie fighters left wing pylon

步骤 12

这一步我们要为下图所示的两个矩形相接的地方添加一个垂直的分割线 ,新建一个长度为12px的直线,将描边设置为4 px (#3A2E2A)。

adding the vertical divider line to the right section of the tie fighters left wing pylonadding the vertical divider line to the right section of the tie fighters left wing pylonadding the vertical divider line to the right section of the tie fighters left wing pylon

步骤 13

新建一个 8 x 20 px 的矩形 (#3A2E2A),按下图所示位置垂直居中对齐,将其置于底层 (右键单击 > 排列 > 置于底层)。

adding details to the back of the tie fighters left wing pylonadding details to the back of the tie fighters left wing pylonadding details to the back of the tie fighters left wing pylon

步骤 14

新建两个 3 x 2 px的矩形 (#3A2E2A),将它们的垂直分布间距设置为 2 px 后进行编组 (Control-G) ,按下图所示垂直居中对齐到分割线。

adding the horizontal insertions to the tie fighters left wing pylonadding the horizontal insertions to the tie fighters left wing pylonadding the horizontal insertions to the tie fighters left wing pylon

步骤 15

新建一个 4 x 4 px 的矩形 (#3A2E2A),垂直居中对齐到分割线,将水平分布间距设置为 4 px

adding the little detail square to the tie fighters left wing pylonadding the little detail square to the tie fighters left wing pylonadding the little detail square to the tie fighters left wing pylon

步骤 16

现在我们进入能量塔部件创建的最后一步,新建两个 2 x 3 px 的矩形 (#3A2E2A) ,将它们的垂直分布距离设置为 8 px ,将它们编组(Control-G) ,垂直居中对齐到分割线,将水平分布距离设置为3 px。 将所有图形选中并编组(Control-G),这样左侧的机翼就创建好了。

adding vertical insertions to the tie fighters left wing pylonadding vertical insertions to the tie fighters left wing pylonadding vertical insertions to the tie fighters left wing pylon

步骤 17

现在我们来添加钛战机的右翼,复制左翼并将其贴在前面 (Control-C > Control-F) ,对其进行垂直对称的变换 (右键单击 > 变换 >对称 > 垂直) ,水平移动至下图所示放置。

adding the tie fighters right wingadding the tie fighters right wingadding the tie fighters right wing

步骤 18

现在我们要创建钛战机的尾部,新建一个 20 x 10 px 的矩形(#7C6663),我们要对其进行一些调整,将下面的两个锚点分别向内推进4 px 的距离(右键单击 > 变换 > 移动 > 水平 > + / - 4 正负取决于你所选取的锚点)。 调整完毕为其添加一个 4 px 宽的描边 (#3A2E2A),编组 (Control-G) 然后将其放置在距离绘制区域底端 34 px 的垂直距离上,水平居中对齐到白色活动绘制区域,如下图所示。

creating the main shapes for the tie fighters rear endcreating the main shapes for the tie fighters rear endcreating the main shapes for the tie fighters rear end

步骤 19

现在为刚才创建的图形添加一个嵌入部件,新建一个 6 x 3 px 的矩形 (#3A2E2A) ,然后按下图所示将其水平居中对齐到上一步中所创建的图形的底端,选中它们并进行编组 (Control-G) 。

adding the bottom insertion to the tie fighters rear endadding the bottom insertion to the tie fighters rear endadding the bottom insertion to the tie fighters rear end

步骤 20

添加离子引擎,新建两个 4 x 6 px 矩形 (#3A2E2A), 将它们的水平分布距离设置为 24 px编组 (Control-G) 然后将其水平居中对齐到钛战机尾部的顶端。

adding the ion engines to the tie fighters rear endadding the ion engines to the tie fighters rear endadding the ion engines to the tie fighters rear end

步骤 21

现在开始控制舱的创建,新建一个36 x 36 px 的圆形(#AF9994),描边宽度设置为 4 px (#3A2E2A) ,编组 (Control-G) 然后将它中心对齐到活动绘制区域。

creating the main shapes for the tie fighters command podcreating the main shapes for the tie fighters command podcreating the main shapes for the tie fighters command pod

步骤 22

绘制控制舱的交叉部分图形,绘制两条描边宽度为4 px 的线段(#3A2E2A),将它们编组 (Control-G)并中心对齐到控制舱的主体。

adding the cross section to the tie fighters command podadding the cross section to the tie fighters command podadding the cross section to the tie fighters command pod

步骤 23

复制 (Control-C) 控制舱的主体并将它贴在交叉线段的前面(Control-F),右键单击建立剪切蒙板

masking the tie fighters cross sectionmasking the tie fighters cross sectionmasking the tie fighters cross section

步骤 24

绘制控制舱的视口部分,新建一个36 x 8 px的矩形(#5E4A49) ,将描边宽度设置为 4 px (#3A2E2A),编组 (Control-G),然后水平居中对齐到主体外圆的顶端。

creating the main shapes for the tie fighters viewportcreating the main shapes for the tie fighters viewportcreating the main shapes for the tie fighters viewport

步骤 25

我们需要将视口限定在控制舱之内,选定视口并剪切(Control-X),将其粘贴(Control-F) 在交叉线断蒙板内部。

masking the tie fighters viewportmasking the tie fighters viewportmasking the tie fighters viewport

步骤 26

绘制出入舱,新建一个 12 x 12 px的圆形 (#7C6663) ,将它的描边宽度设置为4 px (#3A2E2A),编组(Control-G)然后将它中心对齐到控制舱的主体部分。

adding the access hatch to the tie fighters command podadding the access hatch to the tie fighters command podadding the access hatch to the tie fighters command pod

步骤 27

为出入舱添加一些细节,新建一个2 x 6 px的矩形(#3A2E2A),将它水平居中对齐到出入舱的底端,新建一个4 x 4 px的正方形 (#3A2E2A),将它垂直居中对齐到出入舱的右端。选中出入舱主体及其细节并进行编组(Control-G)。

adding details to the tie fighters access hatchadding details to the tie fighters access hatchadding details to the tie fighters access hatch

步骤 28

新建一个4 x 2 px的矩形(#3A2E2A) ,水平居中对齐至出入舱,并将垂直分布距离设置为4 px

adding the bottom detail to the tie fighters command podadding the bottom detail to the tie fighters command podadding the bottom detail to the tie fighters command pod

步骤 29

创建控制舱最后的一点细节,创建一个1 x 2 px的矩形 (#3A2E2A) 和一个2 x 4 px的矩形 (#3A2E2A),将它们的位置按下图所示放置,编组(Control-G)并将其垂直居中对齐至出入舱,将水平分布距离设置为5px。将所有图形选中并编组 (Control-G) 。

adding the final detail to the tie fighters podadding the final detail to the tie fighters podadding the final detail to the tie fighters pod

步骤 30

在完成钛战机图标之前,我们还需要为其添置一些细节即钛战机的轨迹部分。新建一对2 px宽度描边的线段(#3A2E2A),按照下图所示放置它们的位置。位置摆放妥当后将所有图形编组(Control-G) ,这样我们就完成钛战机图标的绘制了。

finishing off the tie fighter iconfinishing off the tie fighter iconfinishing off the tie fighter icon

6. 创建千年隼号图标

假设你已经完成了钛战机图标的绘制,将除第三个图层即millennium falcon以外的所有图层锁定,现在我们开始千年隼号图标的创建。

步骤 1

我们首先从创建Corellian轻货船类似下颌骨的前货舱的左半部分开始,新建一个 22 x 44 px 的,填充色设置为 #B58E71,然后将其放置在距离活动绘图区域顶端 2 px 和左端 26 px的位置。

creating the main shape for the millennium falcons left mandiblecreating the main shape for the millennium falcons left mandiblecreating the main shape for the millennium falcons left mandible

步骤 2

创建一个比之前更小的22 x 20 px的矩形 (#B58E71),将其放置在上一步创建的矩形的下方,同时选中两个矩形,打开路径查找器窗口,使用形状模式联集将它们合并为一个路径。

adding the bottom section to the millennium falcons left mandibleadding the bottom section to the millennium falcons left mandibleadding the bottom section to the millennium falcons left mandible

步骤 3

对上一步创建的图形进行一定的调整,使用直接选择工具(A)选中左上的锚点,使用移动工具将其向右推进14px的距离(右键单击 > 变换> 移动 > 水平 > 14 px)。

adjusting the shape of the millennium falcons left mandibleadjusting the shape of the millennium falcons left mandibleadjusting the shape of the millennium falcons left mandible

步骤 4

为步骤3中创建的图形添加4px描边 (#3A2E2A) ,选中所有图形并编组(Control-G)。

adding the outline to the millennium falcons left mandibleadding the outline to the millennium falcons left mandibleadding the outline to the millennium falcons left mandible

步骤 5

在左前货舱上创建两个小的出入口,新建两个 4 x 4 px 的正圆(#3A2E2A),调整它们的斜向距离差为2 px,同时选中两个正圆编组(Control-G) 并将其放置在距离左前货舱顶端 10 px和右端 2 px的位置上。

adding the little access holes to the millennium falcons left mandibleadding the little access holes to the millennium falcons left mandibleadding the little access holes to the millennium falcons left mandible

步骤 6

要完成左前货舱的创建我们还需为其添加一个小的饰边。新建一个4 x 10 px 的矩形(#3A2E2A),将其按下图所示放置在距离大图形顶端4px紧靠右端的位置,将所有图形选中并编组,也可以使用快捷键Control-G

adding the inner facing rectangle to the millennium falcons left mandibleadding the inner facing rectangle to the millennium falcons left mandibleadding the inner facing rectangle to the millennium falcons left mandible

步骤 7

现在我们要创建前货舱的右半部分,将步骤6中创建的图形复制并贴在前面 (Control-C > Control-F) ,对其进行垂直对称变换,将它们之间的水平分布距离设置为16 px。同时选中所有图形将它们编组Control-G)。

adding the millennium falcons right mandibleadding the millennium falcons right mandibleadding the millennium falcons right mandible

步骤 8

这一步我们要开始创建千年隼号的上半部份,新建一个 82 x 82 px 的正圆(#E0BFA0)和一个82 x 49 px的矩形(红色高亮部份),选中圆形和矩形,用像素预览的方式确定圆形和矩形的下边界的中心锚点是重叠的,打开路径查找器,使用形状模式的减去顶层减去正圆和矩形交叉的部份。

creating the main shape for the millennium falcons upper bodycreating the main shape for the millennium falcons upper bodycreating the main shape for the millennium falcons upper body

步骤 9

在步骤8中所创建的图形的下方添加一个 82 x 5 px的矩形(#E0BFA0),同时选中步骤8和步骤9中创建的图形,使用路径查找器联集形状模式将它们合并

adding the smaller section to the bottom of the millennium falcons upper bodyadding the smaller section to the bottom of the millennium falcons upper bodyadding the smaller section to the bottom of the millennium falcons upper body

步骤 10

分别选中步骤9中所创建的图形的下端锚点(译者注:按照个人的实际操作情况来看,在进行此步的操作前应该删除矩形上端两个多余的锚点,否则后面添加描边会产生尖角,与作者所创建的结果有差异),使用移动工具将它们分别向内水平推进8 px的距离(右键单击 > 变换 > 移动 > 水平> + / - 8 px正负取决于你所选择的锚点)。

adjusting the bottom section of the millennium falcons upper bodyadjusting the bottom section of the millennium falcons upper bodyadjusting the bottom section of the millennium falcons upper body

步骤 11

为步骤10中所创建的图形添加一个 4 px 的描边 (#3A2E2A),选中图形并编组Control-G)。

adding the outline to the millennium falcons upper bodyadding the outline to the millennium falcons upper bodyadding the outline to the millennium falcons upper body

步骤 12

为当前所创建的图形添加一些细节,新建一个 48 x 48 px 的圆环(#3A2E2A)(译者注:作者没有说明描边粗细,目测描边粗细为4px),将圆环水平居中对齐到千年隼号的上半部分,并使其顶端之间的距离设置为14 px

adding the center ring to the millennium falcons upper bodyadding the center ring to the millennium falcons upper bodyadding the center ring to the millennium falcons upper body

步骤 13

接下来我们需要花点时间绘制下图所示的叉角图形,为其添加4 px描边 (#3A2E2A),确保它的底端锚点和大圆的中心点是重叠的,完成叉角图形的绘制之后,将其和圆环同时选中然后进行编组Control-G)。

adding the cross section to the millennium falcons upper bodyadding the cross section to the millennium falcons upper bodyadding the cross section to the millennium falcons upper body

步骤 14

为步骤13创建的图形添加剪切蒙板,选中步骤11所创建的图形,复制(Control-C)并将其贴在步骤13所创建图形的前面(Control-F),将其同时选中之后右键 > 建立剪切蒙板。同时选中剪切蒙板及千年隼号的上半部分,对它们进行编组(Control-G) 。

masking the millennium falcons cross section and center ringmasking the millennium falcons cross section and center ringmasking the millennium falcons cross section and center ring

步骤 15

现在我们来创建震荡导弹管部份。新建一个 12 x 48 px 的矩形 (#C69F7F) ,描边宽度设置为 4 px (#3A2E2A),在矩形的中心添加两个水平分布间距为2px 2 x 40 px 的矩形 (#3A2E2A) 。将前面三个矩形全部选中并编组(Control-G) ,居中对齐到千年隼号上半部份的底端。

adding the concussion missile tubes to the millennium falcons upper bodyadding the concussion missile tubes to the millennium falcons upper bodyadding the concussion missile tubes to the millennium falcons upper body

步骤16

现在我们开始驾驶舱的绘制。新建一个 12 x 10 px 的矩形 (#C69F7F),将它放置在距离活动绘制区域顶端18 px 、右端20 px的位置,如下图所示。

creating the main shape for the upper section of the millennium falcons cockpitcreating the main shape for the upper section of the millennium falcons cockpitcreating the main shape for the upper section of the millennium falcons cockpit

步骤 17

在上一步创建的矩形的下方添加一个12 x 8 px 的矩形(#C69F7F)。

creating the main shape for the center section of the millennium falcons cockpitcreating the main shape for the center section of the millennium falcons cockpitcreating the main shape for the center section of the millennium falcons cockpit

步骤 18

新建一个26 x 20 px 矩形 (#C69F7F),按下图的位置将其放置,确保右端对齐。同时选中三个矩形,打开路径查找器面板,使用联集形状模式将它们合并为一个图形。

uniting the composing shapes of the millennium falcons cockpit into a single larger shapeuniting the composing shapes of the millennium falcons cockpit into a single larger shapeuniting the composing shapes of the millennium falcons cockpit into a single larger shape

步骤 19

参照下图使用直接选择工具对步骤18创建的图形进行适当的调整,这可能需要点耐心,完成之后我们进入下一步的操作。

adjusting the shape of the millennium falcons cockpitadjusting the shape of the millennium falcons cockpitadjusting the shape of the millennium falcons cockpit

步骤 20

为驾驶舱添加窗户,新建一个 12 x 10 px 的矩形 (#7A655C), 按下图所示居中对齐到驾驶舱的顶端,为矩形添加蒙板复制驾驶舱图形并将它贴到矩形的前面(Control-C > Control-F) ,建立剪切蒙板(右键单击 > 建立剪切蒙板)

adding the window section to the millennium falcons cockpitadding the window section to the millennium falcons cockpitadding the window section to the millennium falcons cockpit

步骤 21

为上一步创建的图形添加 4 px描边 (#3A2E2A) ,然后添加两条分隔线并为它们添加相同的描边。

adding the outline to the millennium falcons cockpitadding the outline to the millennium falcons cockpitadding the outline to the millennium falcons cockpit

步骤 22

我们还需要为驾驶舱的前端添加一个4 x 6 px的矩形(#3A2E2A) ,另外再在它的中部绘制一条描边2 px 的斜向线段(#3A2E2A) ,如图所示。慢慢来不要着急,一旦你完成以上操作之后,选中驾驶舱相关的所有图形对它们进行编组Control-G)。

adding the final details to the millennium falcons cockpitadding the final details to the millennium falcons cockpitadding the final details to the millennium falcons cockpit

步骤 23

我们开始创建千年隼号的防护盾,新建两个 4 x 10 px的矩形(#3A2E2A),将它们的水平分布距离设置为32 px然后编组 (Control-G),将其放置在距离出入口底端2 px的位置上,如图所示。

adding the deflector shield protectors to the millennium falcons upper bodyadding the deflector shield protectors to the millennium falcons upper bodyadding the deflector shield protectors to the millennium falcons upper body

步骤 24

在这步中我们要完成传感器碟形天线的绘制,新建一个 4 x 4 px 正圆(#3A2E2A)和一个10 x 8 px 的椭圆 (#3A2E2A),使用直接选择工具选择椭圆的顶端锚点将它删除,这样我们就得到了半个椭圆,将正圆和半椭圆的位置按照下图所示摆放后编组 (Control-G) ,然后将它放置在千年隼号的左边、距离防护盾4 px 的距离的位置。 完成之后,将主体的所有上半部份选中并编组 (Control-G) 。

adding the sensor dish to the millennium falcons upper bodyadding the sensor dish to the millennium falcons upper bodyadding the sensor dish to the millennium falcons upper body

步骤 25

开始千年隼号中部的绘制。新建一个 68 x 8 px 的矩形(#B58E71),将它放置于千年隼号上部主体的下方。

creating the main shape for the millennium falcons center sectioncreating the main shape for the millennium falcons center sectioncreating the main shape for the millennium falcons center section

步骤 26

新建两个 8 x 8 px 的正方形 (#B58E71),将它们分别放置在千年隼号中部矩形的两端,同时选中三个矩形,打开路径查找器面板,使用联集形状模式将它们合并为一个形状。

creating the side sections to the millennium falcons center bodycreating the side sections to the millennium falcons center bodycreating the side sections to the millennium falcons center body

步骤 27

对上一步创建的图形作适当的调整,使用直接选择工具分别选中四个顶点的锚点,使用移动工具将它们在垂直方向上向内推进1 px 的距离(右键单击 > 变换 > 移动 > 垂直 > + / - 1 px,正负取决于你所选取的锚点)。 为变换之后的图形t添加4 px 的描边 (#3A2E2A), 选择所有图形并编组(Control-G)。

adding the outline to the millennium falcons center bodyadding the outline to the millennium falcons center bodyadding the outline to the millennium falcons center body

步骤 28

为上一步创建的图形添加两条垂直分隔线。新建两条长度为8px描边宽度为4px的线段(#3A2E2A),将它们分别放置在距离左右两端4 px距离的位置上。

adding the vertical dividers to the millennium falcons center bodyadding the vertical dividers to the millennium falcons center bodyadding the vertical dividers to the millennium falcons center body

步骤 29

新建三个2 x 2 px 的正圆 (#3A2E2A),垂直居中对齐到下方的大图形,将它们的位置按下图所示放置,最后对中区的所有图形进行编组(Control-G)。

adding the little circles to the millennium falcons center bodyadding the little circles to the millennium falcons center bodyadding the little circles to the millennium falcons center body

步骤 30

我们开始千年隼号主体的下半部份的绘制。复制上半部份的一部份并将其贴在前面 (Control-C > Control-F) ,对它进行水平镜像变换的操作(右键单击 > 变换 > 镜像 > 水平), 然后jiang将它放置于中部图形的下方。

creating the shapes for the millennium falcons bottom bodycreating the shapes for the millennium falcons bottom bodycreating the shapes for the millennium falcons bottom body

步骤 31

开始千年隼号推进器部份的绘制。新建一个 68 x 22 px的矩形 (#C69F7F), 使用移动工具对它进行适当的调整,分别选中上端的两个锚点,将它们向内水平推进22px的距离 (右键单击 > 变换 > 移动 > + / - 22 px 正负取决于你所选取的锚点). 完成上述操作之后,将其居中对齐到飞船底部的上端。

creating the main shape for the upper section of the millennium falcons drive unitscreating the main shape for the upper section of the millennium falcons drive unitscreating the main shape for the upper section of the millennium falcons drive units

步骤 32

新建一个68 x 8 px 的矩形 (#C69F7F),将它按图所示放置于上一步创建的矩形的下方。

creating the main shape for the center section of the millennium falcons drive unitscreating the main shape for the center section of the millennium falcons drive unitscreating the main shape for the center section of the millennium falcons drive units

步骤 33

为推进器绘制弧形状尾部,新建一个 96 x 96 px 的正圆 (#C69F7F) ,在它的上方新建一个 96 x 82 px 的矩形(红色高亮显示),使用像素预览的方式确保它们的顶端锚点是重叠的,将正圆和矩形同时选中,使用路径查找器减去顶层得到我们想要的图形。将其水平居中对齐到画板,并将其放置在距离活动绘制区域底端2px距离的位置上。

creating the main shape for the circular section of the millennium falcons drive unitscreating the main shape for the circular section of the millennium falcons drive unitscreating the main shape for the circular section of the millennium falcons drive units

步骤 34

将以上三个图形选中合并为一个大的图形,为其添加一个 4 px 的描边(#3A2E2A), 然后将它们编组 (Control-G) 。

adding the outline to the millennium falcons drive unitsadding the outline to the millennium falcons drive unitsadding the outline to the millennium falcons drive units

步骤 35

为上一步创建的图形添加一些小细节。新建两个 4 x 4 px 的正圆(#3A2E2A),它们的水平分布距离设置为20 px编组 (Control-G),然后将其中心对齐到上一步所创建的图形,将它们放置在距离大图形顶端 6 px 距离的位置上。

adding the little circles to the millennium falcons drive unitsadding the little circles to the millennium falcons drive unitsadding the little circles to the millennium falcons drive units

步骤 36

开始进行引擎冷却套管的绘制。绘制6个 6 x 6 px 的正圆 (#3A2E2A), 按照下图所示的位置放置它们,然后对它们进行编组 (Control-G) 。

adding the cooling chambers to the millennium falcons drive unitsadding the cooling chambers to the millennium falcons drive unitsadding the cooling chambers to the millennium falcons drive units

步骤 37

为千年隼号的底端添加一些细节。新建5个描边宽度为4 px的线段 (#3A2E2A), 按下图所示放置它们的位置(译者注:实际上五个线段的长度并不完全相同,而且长度也暂未可知,所以译者的做法是使用参考线定位线段锚点的位置,然后使用钢笔工具创建线段)。完成以上步骤之后对它们进行编组Control-G)。

adding detail lines to the millennium falcons drive unitsadding detail lines to the millennium falcons drive unitsadding detail lines to the millennium falcons drive units

步骤 38

为千年隼号的中心添加一个小一点的圆形,新建一个 24 x 24 px 的正圆 (#E0BFA0) ,将描边宽度设置为 4px (#3A2E2A),编组(Control-G)然后居中对齐到如下图所示位置。

adding a circular section to the millennium falcons bodyadding a circular section to the millennium falcons bodyadding a circular section to the millennium falcons body

步骤 39

为千年隼号添加四联装涡轮激光炮塔。新建一个 8 x 8 px的正圆 (#3A2E2A), 将其水平居中对齐到中圆形,并使其顶端相距4 px的距离,如下图所示。

creating the shape for the millennium falcons quad laser cannoncreating the shape for the millennium falcons quad laser cannoncreating the shape for the millennium falcons quad laser cannon

步骤 40

添加加农炮。新建两个 2 x 7 px 的矩形 (#3A2E2A), 将它们的水平分布距离设置为 2 px编组 (Control-G),将它按下图所示位置放置。

adding the cannons to the millennium falcons circular sectionadding the cannons to the millennium falcons circular sectionadding the cannons to the millennium falcons circular section

步骤 41

新建一个 4 x 4 px 的正方形 (#3A2E2A), 将它放置在中心点与ji激光炮塔底端锚点重合的位置,选中炮塔所有相关图形进行编组 (Control-G) 。

adding the small rectangle to the millennium falcons quad laser cannonadding the small rectangle to the millennium falcons quad laser cannonadding the small rectangle to the millennium falcons quad laser cannon

步骤 42

使用钢笔工具绘制一个不规则梯形(译者注:这里作者没有给出具体的参数,请大家参照下图自行摸索),为其添加 2 px 宽度的描边 (#3A2E2A)。选中当前区域的所有图形,对它们进行编组 (Control-G) 。

adding the trapezoidal detail line to the millennium falcons circular sectionadding the trapezoidal detail line to the millennium falcons circular sectionadding the trapezoidal detail line to the millennium falcons circular section

步骤 43

最后我们来为千年隼号的尾部添加轨迹细节。新建三组长度不等的线段,描边宽度同一设置为 2 px (#3A2E2A),按照下图所示的位置进行摆放,将轨迹所有线段编组 (Control-G) 然后同时选中轨迹及千年隼号的主体部份将它们编组 (Control-G) ,至此我们就完成了第二个图标的绘制。

finishing off the millennium falcon iconfinishing off the millennium falcon iconfinishing off the millennium falcon icon

7. 创建X翼战斗机图标

我们开始第三个也就是最后一个图标的绘制,现在让我们把注意力放到x-wing这个图层上来,我们依然需要借助参考网格辅助完成图标的创建。

步骤 1

分别在距离活动绘制区域左端 10 px 和底端 32 px 的地方新建两条参考线,以参考线交点为左下锚点,新建一个42 x 14 px 的矩形 (#AF9994)。

creating the main shape for the x-wings left wingcreating the main shape for the x-wings left wingcreating the main shape for the x-wings left wing

步骤 2

新建一个 42 x 8 px 的矩形(#AF9994),将它放置在上一步创建的矩形的下方,使用路径查找器联集形状模式将它们合并为一个图形。

uniting the x-wings two rectangles into a single larger shapeuniting the x-wings two rectangles into a single larger shapeuniting the x-wings two rectangles into a single larger shape

步骤 3

选中左下角锚点,我们将使用移动工具来对上一步生成的形状进行适当的调整 (右键单击 > 变换 > 移动 > 水平 > 34 px > 垂直 > 6 px),然后删除中间偏右的锚点。

adjusting the shape of the x-wings left wingadjusting the shape of the x-wings left wingadjusting the shape of the x-wings left wing

步骤 4

为调整后的图形添加4 px 描边 (#3A2E2A) ,然后将两个图形选中并编组 (Control-G) 。

adding the outline to the x-wings left wingadding the outline to the x-wings left wingadding the outline to the x-wings left wing

步骤 5

为机翼的左端添加一个饰边,新建一个 4 x 8 px 的矩形 (#3A2E2A),选中矩形右端的锚点,分别将它们在垂直方向上向内推进 2 px 的距离(右键单击 > 变换 > 移动 > 垂直 > + / - 2 px 正负取决于你所选择的锚点)。

adding the small insertion to the x-wings left wingadding the small insertion to the x-wings left wingadding the small insertion to the x-wings left wing

步骤 6

添加“y”-字形细节。新建两个描边宽度为 4 px 的线段 (#3A2E2A),如下图所示,然后选中当前所有图形并编组(Control-G) 。

adding the detail lines to the x-wings left wingadding the detail lines to the x-wings left wingadding the detail lines to the x-wings left wing

步骤 7

开始绘制镭射炮,新建一个 8 x 22 px的矩形 (#7C6663) ,为其添加 4 px 的描边 (#3A2E2A),编组 (Control-G)然后如下图所示将其放置在机翼的左边。

creating the main shape for the x-wings left laser cannoncreating the main shape for the x-wings left laser cannoncreating the main shape for the x-wings left laser cannon

步骤 8

添加一个矩形的嵌入物。新建一个 4 x 4 px 的正方形 (#3A2E2A),将其对齐到大图形的左边,并使其底端之间的距离保持为 2 px ,将三个图形同时选中并编组Control-G )。

adding the rectangular insertion to the x-wings left laser cannonadding the rectangular insertion to the x-wings left laser cannonadding the rectangular insertion to the x-wings left laser cannon

步骤 9

绘制镭射炮的上部份,新建一个 8 x 6 px的矩形 (#DDC0BA), 为其添加4 px 宽度的描边 (#3A2E2A),编组 (Control-G) 然后将其放置在步骤7所创建的矩形的上方。

creating the main shapes for the upper section of the x-wings left laser cannoncreating the main shapes for the upper section of the x-wings left laser cannoncreating the main shapes for the upper section of the x-wings left laser cannon

步骤 10

绘制镭射炮的后方部份。新建一个 8 x 4 px 的矩形 (#3A2E2A) ,紧随其后新建一个 4 x 4 px 的矩形 (#3A2E2A),将它们编组(Control-G),然后按下图所示位置放置。

adding the back end to the x-wings left laser cannonadding the back end to the x-wings left laser cannonadding the back end to the x-wings left laser cannon

步骤 11

绘制镭射炮的前方部份。新建一个 8 x 6 px的矩形(#3A2E2A),对其进行适当的调整,使用直接选择工具分别将上端锚点水平向内推进 2 px的距离(右键单击 >变换 >移动 > 水平 > + / - 2 px正负取决于你所选取的锚点)。 将调整后的图形水平居中对齐到下方的矩形,如下图所示。

adding the cone section to the x-wings left laser cannonadding the cone section to the x-wings left laser cannonadding the cone section to the x-wings left laser cannon

步骤 12

绘制镭射炮的炮筒部份。新建一个 4 x 8 px的矩形(#3A2E2A) ,紧随其上新建一个2 x 16 px 的矩形 (#3A2E2A), 将它们编组(Control-G) 后按下图所示位置放置。

adding the arm section to the x-wings left laser cannonadding the arm section to the x-wings left laser cannonadding the arm section to the x-wings left laser cannon

步骤 13

我们开始镭射炮最后一步的绘制。垂直方向上依次从下至上新建四个矩形: 6 x 2 px(#3A2E2A) 、2 x 2 px (#3A2E2A)、4 x 4 px (#3A2E2A)、 2 x 8 px (#3A2E2A),将四个矩形编组(Control-G),然后按下图所示放置它们的位置,最后将整个镭射炮编组。

adding the tip to the x-wings left laser cannonadding the tip to the x-wings left laser cannonadding the tip to the x-wings left laser cannon

步骤 14

我们开始创建X翼战斗机的引擎部份。新建一个12 x 10 px的矩形 (#5E4A49) ,为其添加 4 px的描边(#3A2E2A),在其内部靠近上方的位置添加一条12px宽、描边粗细为2px的线段(#3A2E2A),将三个图形编组 (Control-G),按下图所示将其放置在距离左翼右端2 px距离的位置上。

creating the shapes for the upper section of the x-wings left enginecreating the shapes for the upper section of the x-wings left enginecreating the shapes for the upper section of the x-wings left engine

步骤 15

绘制引擎的中部。新建一个12 x 12 px 的矩形 (#DDC0BA) ,为其添加4 px 的描边 (#3A2E2A),在它的内部我们添加描边宽度为 2 px的线段(#3A2E2A)。将三个图形编组(Control-G)并按下图所示位置进行摆放。

adding the center section to the x-wings left engineadding the center section to the x-wings left engineadding the center section to the x-wings left engine

步骤 16

绘制附件。新建一个8 x 6 px 的矩形 (#3A2E2A),将它放置在下面,如图所示。

adding the connecting segment to the x-wings left engineadding the connecting segment to the x-wings left engineadding the connecting segment to the x-wings left engine

步骤 17

绘制引擎的尾部。新建一个 8 x 8 px的矩形 (#7C6663) ,为其添加 4 px宽度的描边 (#3A2E2A),新建一个4 x 2 px 的矩形(#3A2E2A),将它垂直居中对齐至前一矩形的右边。将三个图形同时选中并编组(Control-G) ,将它们放置在连接部件的下方,如下图所示。

adding the upper section to the rear end of the x-wings left engineadding the upper section to the rear end of the x-wings left engineadding the upper section to the rear end of the x-wings left engine

步骤 18

绘制引擎后面的部位。新建一个8 x 14 px 的矩形 (#DDC0BA) ,添加 4 px 宽度的描边 (#3A2E2A),在它的底端和左端分别添加一个2 x 3 px 的矩形(#3A2E2A)以及一个4 x 4 px 的正方形(#3A2E2A) 。 编组 (Control-G) 然后将其放置在下方。

adding the rear end to the x-wings left engineadding the rear end to the x-wings left engineadding the rear end to the x-wings left engine

步骤 19

现在进入引擎也即机翼最后一步的绘制。在上方新建一个 12 x 6 px 的矩形 (#3A2E2A),对其进行适当的调整,将上端的两个锚点分别水平向内推进2 px的距离(右键单击 > 变换 > 移动 > 水平 > + / - 2 px正负取决于你所选择的锚点)。 将调整后的图形放置在引擎的上方,将其所有组成图形选中并编组 (Control-G) ,对整个机翼也执行同样的操作。

adding the cone section to the x-wings left engineadding the cone section to the x-wings left engineadding the cone section to the x-wings left engine

步骤 20

我们开始X翼战斗机右翼的创建。将左翼选中并复制 (Control-C > Control-F) ,将它放置在相反方向的位置,使用镜像工具对其进行一定的变换(右键单击 > 变换 > 镜像 > 垂直)。

creating and positioning the x-wings right wingcreating and positioning the x-wings right wingcreating and positioning the x-wings right wing

步骤 21

开始X翼战斗机主干前端部份的绘制。新建一个8 x 10 px的矩形(#7C6663),紧随其后新建一个8 x 2 px 的矩形 (#7C6663),使用路径查找器联集形状模式将其合并为一个图形,居中对齐到画板,并使其顶端距离活动绘制区域顶端2 px

creating the main shapes for the x-wings nosecreating the main shapes for the x-wings nosecreating the main shapes for the x-wings nose

步骤 22

对图形进行适当的调整,将其上端的锚点分别在水平方向向内推进 2 px的距离 (右键单击 > 变换 > 移动 > 水平 > + / - 2 px 正负取决于你所选取的锚点),为其添加宽度为 4 px 的描边 (#3A2E2A),在其中上部份添加一个 2 x 6 px 的矩形 (#3A2E2A) ,选择当前所有图形并编组(Control-G)。

adding the outline to the x-wings noseadding the outline to the x-wings noseadding the outline to the x-wings nose

步骤 23

开始战斗机主体部分的绘制。在垂直方向上从上往下一次新建三个矩形 16 x 46 px (#DDC0BA)、 16 x 44 px (#DDC0BA)、16 x 6 px (#DDC0BA),将三个矩形同时选中,使用联集形状模式将它们合并成一个图形并放置于上一步所创建图形的下方。

creating the main shapes for the x-wings bodycreating the main shapes for the x-wings bodycreating the main shapes for the x-wings body

步骤 24

对战斗机主体进行适当的调整,将上端的锚点分别在水平方向上向内推进4px的距离 (右键单击 > 变换 > 移动 > 水平 > + / - 4 px 正负取决于你所选取的锚点),将下端的锚点分别在水平方向上向内推进2px的距离 (右键单击 > 变换 > 移动 > 水平 > + / - 2 px 正负取决于你所选取的锚点)。 为调整后的图形添加4px的描边(#3A2E2A),将主体部分的图形编组 (Control-G) 。

adding the outline to the x-wings bodyadding the outline to the x-wings bodyadding the outline to the x-wings body

步骤 25

在主体内部添加一条宽度为 16 px描边4 px 的分隔线(#3A2E2A),在其底部添加一个6 x 4 px 的矩形 (#3A2E2A)。

adding the horizontal divider line to the bottom of the x-wings bodyadding the horizontal divider line to the bottom of the x-wings bodyadding the horizontal divider line to the bottom of the x-wings body

步骤 26

再在主体的上部添加一条宽度为 12 px 描边 4 px的分隔线(#3A2E2A),将其放置在距离主体顶端18px距离的地方。

adding the horizontal divider line to the upper section of the x-wings bodyadding the horizontal divider line to the upper section of the x-wings bodyadding the horizontal divider line to the upper section of the x-wings body

步骤 27

在分隔符至主体前端添加连接图形。在分隔线的上方新建一个4 x 4 px 的正方形 (#3A2E2A) ,在正方形的上方新建一个 2 x 18 px 的矩形 (#3A2E2A),将它们编组(Control-G) 并按下图所示放置。

adding the vertical divider segments to the upper section of the x-wings bodyadding the vertical divider segments to the upper section of the x-wings bodyadding the vertical divider segments to the upper section of the x-wings body

步骤 28

新建一个 4 x 2 px 的矩形 (#3A2E2A),将它水平居中对齐至距离分隔线4px的地方。

adding the small rectangular insertion to the x-wings upper bodyadding the small rectangular insertion to the x-wings upper bodyadding the small rectangular insertion to the x-wings upper body

步骤 29

绘制X翼战斗机的驾驶舱部份。新建一个 8 x 16 px的矩形 (#3A2E2A) ,在其下方绘制一个 8 x 4 px 的矩形 (#3A2E2A),使用联集形状模式将它们合并为一个图形,将其放置在距离上一步所创建图形下方2px的地方。

creating the main shapes for the x-wings cockpitcreating the main shapes for the x-wings cockpitcreating the main shapes for the x-wings cockpit

步骤 30

对上一步所创建的图形进行适当的调整,使用移动工具分别将其上端及下端的锚点在水平方向上向内推进2 px的距离, (右键单击 > 变换 >移动 > 水平 > + / - 2 px 正负取决于所选取的锚点)。

adjusting the shape of the x-wings cockpitadjusting the shape of the x-wings cockpitadjusting the shape of the x-wings cockpit

步骤 31

为驾驶舱添加窗户。新建两个宽度为 2px的矩形 (2 x 4 px; 2 x 1 px > #7C6663) ,将它们之间的垂直分布距离设置为2px编组 (Control-G)并将其放置在距离驾驶舱底端3 px距离的位置,将三个图形选中编组Control-G)。

adding the windows to the x-wings cockpitadding the windows to the x-wings cockpitadding the windows to the x-wings cockpit

步骤 32

我们开始绘制偏导护盾发生器。新建一个6 x 26 px的矩形 (#6B5451),通过变换面板的矩形属性对话框将上端的圆角半径设置为 3 px,为调整后的图形添加 4 px的描边(#3A2E2A),编组 (Control-G)然后将其放置在距离驾驶舱4px的地方。

creating the main shapes for the x-wings deflector shield generatorcreating the main shapes for the x-wings deflector shield generatorcreating the main shapes for the x-wings deflector shield generator

步骤 33

添加一些细节。新建一组填充色为 (#3A2E2A)的矩形,如下图所示,完成之后将所有组成部分编组 (Control-G)。

adding the little detail rectangles to the x-wings deflector shield generatoradding the little detail rectangles to the x-wings deflector shield generatoradding the little detail rectangles to the x-wings deflector shield generator

步骤 34

添加小细节。新建一个 6 x 6 px 的正圆 (#ABBDCE) ,为其添加4 px的描边 (#3A2E2A),编组(Control-G)然后水平居中对齐到偏导防护盾的顶端。将所有主体构成部份选中并编组(Control-G),对整个战斗机图形也执行同样的操作。

adding the little droid to the x-wings main bodyadding the little droid to the x-wings main bodyadding the little droid to the x-wings main body

步骤 35

我们开始X翼战斗机图形最后一步即其运动轨迹的绘制。新建三组描边粗细为2px的线段 (#3A2E2A),将它们的位置按下图所示放置,完成之后对它们进行编组 (Control-G), 然后框选整个图形将其编组Control-G)。

finishing off the x-wing iconfinishing off the x-wing iconfinishing off the x-wing icon

愿力量与你同在!

至此,我们绘制图标的旅程终于结束了,年轻的学习者们,但愿你们不虚此行。

我希望你在本教程的学习过程中从始至终都和我刚开始创建这些标志性的航天器图形一样保持兴奋的心情,如果你们能在练习的过程中学习到一些新的有用的技巧那就再好不过了。

Star Wars Icons Adobe Illustrator TutorialStar Wars Icons Adobe Illustrator TutorialStar Wars Icons Adobe Illustrator Tutorial
关注我们的公众号
One subscription.
Unlimited Downloads.
Get unlimited downloads