如何在Adobe Illustrator中创建太阳系行星图标包

 

                                                          （本教程由寻图标icon.52112.com提供）

宇宙是广袤空间和其中存在的各种天体以及弥漫物质的总称，宇宙起源是一个极其复杂的问题。 千百年来，科学家们一直在探寻宇宙是什么时候、如何形成的。直到今天，许多科学家认为，宇宙是由大约137亿年前发生的一次大爆炸形成的。今天我们就着手用AI中基础的绘图工具绘制太阳系中的行星。

1.设置新文档

在我们开始创建行星之前，我们要花几秒钟的时间来设置项目的“参数”。

首先，打开文件>新建或使用Control-N键盘快捷键创建 新文档，并进行以下设置：

画板数量： 1

宽度： 800像素

高度： 600像素

单位：像素

进入“ 高级”选项卡：

色彩模式： RGB

光栅效果：屏幕（72 ppi）

选中对象与像素网格对齐

2.设置图层 

一旦我们获得了文档，我们就可以参与分层项目，这将通过一次关注一个图标来帮助我们保持稳定的工作流程。

因此，使用“ 图层”面板，共创建九个图层，我们将按以下方式重命名：

1.reference grids参考网格

2.mercury水星

3.venus金星

4.earth地球

5.mars火星

6.jupiter木星

7.saturn土星

8.uranus天王星

9.neptune海王星

需要注意的是在开始绘制图像前，我们都需要单击眼睛图标旁边的小圆圈（Toggles Lock）锁定除我们当前正在处理的图层之外的所有图层。

 

3.设置自定义网格 

我们进入编辑>首选项>参考线和网格子菜单，并做如下方式进行调整：

网格线： 1 px

细分： 1

4.创建参考网格

参考网格的建立可以方便我们绘制过程中观察图形的水平和对齐，通常，网格的大小决定了图标的大小，每个图标创建的基础就是以参考网格为准则。

第1步

锁定除参考网格之外的所有其他图层，选择矩形工具（M）绘制一个128 x 128像素的红色（#f97373）方块，定义图标的整体大小。

 

第2步

然后添加另一个较小的116 x 116 px 矩形（#f2f2f2），作为我们的活动绘图区域，从而为我们提供6 px的边缘填充。

第3步

使用Control-G键盘快捷键将两个矩形组合在一起，然后创建七个彼此间隔40 px的副本 。

将它们堆叠在两行（每行四个）上，并将它们与画板的中心对齐。

                                                            （本教程由寻图标icon.52112.com提供）

5.创建默认“空白”图标 

正如预览图像中观察到的那样，所有图标都遵循相似但不完全相同的构图或基础，八个图标中存在一些共同的元素。

这意味着我们可以构建一个“空白”图标，然后我们可以通过添加或删除其组成元素中的细节来创建剩余的图标，从而使创作过程非常方便快捷。

第1步

选择第一个参考网格上，放大它，以便你可以更好地查看绘制图形的细节。

然后，使用圆角矩形工具（M），创建一个22 x 14像素，7像素角半径的形状。颜色设置为#656370，然后定位在绘图区域的左上角，左侧留下6像素，顶部留下11像素的距离。

 

快速提示：建议打开“ 像素预览”模式（“ 视图”>“像素预览”或“ Alt-Control-Y”），以便于我们更轻松地根据基础像素网格确定形状。

第2步

创建7 px 角半径68 x 14 px的圆角矩形（#656370），并将其放置在先前创建的形状的右侧，在它们之间留出4 px的间隙。

第3步

创建云中间连接的形状

首先，创建3 px角半径58 x 6 px的圆角矩形，使用#656370进行着色，然后两个6 x 6 px圆圈（用红色突出显示），使用路径查找器的减去功能减去圆形进行调整。

第4步

将调整后的形状放在先前创建的形状下方， 水平居中 使用“ 对齐”面板对齐它们。

第5步

创建7 px角半径110 x 14 px的圆角矩形#656370，将其放置在连接器段下方，将其对齐到可绘制区域的左侧。

第6步

添加另一个86 px x 6 px 的连接形状，并将其放置在前一个形状下方，放置在可绘制区域右侧14 px的位置。

第7步

使用圆角矩形工具，创建一个108 x 14像素7 px角半径的形状，使用#656370进行着色，然后将其放置在我们刚刚创建形状的下方，将其对齐到可绘制区域的右侧。

第8步

留出6 px的间隙，然后添加一个90 x 14 px、7 px 角半径的圆角矩形（#656370），然后再绘制一个18 x 14 px 的圆角矩形（#656370）。

将它们之间的距离调整为4像素 ，将它们对准到可绘制区域的左侧。

第9步

创建一个52 x 6 px连接形状，使用#656370进行着色，并将其放置在我们前一步创建的形状下方（朝向右侧），放置在距离右侧32 px的位置。

第10步

创建一个76 x 14、7 px角半径的圆角矩形（#656370），将它放置在第三个连接形状的下方，距离可绘制区域右侧6 px。

                                                                 （本教程由寻图标icon.52112.com提供）

第11步

使用椭圆工具（L），创建一个16 x 16像素的圆圈，使用#e2d388进行着色，然后将其放置在背景的左上角，距离可绘制区域顶部5 px的位置。

第12步

制作它的副本（Control-C> Control-F），然后对其应用-2 px 位移，为我们刚刚创建的小太阳添加一个微妙的高光（选择副本并选择 对象>路径>偏移路径> - 2 px），然后选择路径查找器的减去选项。

第13步

然后，选择生成的形状并将其颜色更改为白色（#FFFFFF），将其混合模式更改为柔光，将不透明度更改为80％。

第14步

添加高光后，使用4像素偏移为太阳提供外部阴影（选择黄色形状并选择“ 对象”>“路径”>“偏移路径”> 4像素）。

使用黑色（#000000）为生成的形状着色，并将其不透明度降低至10％。

完成后，选择所有三个形状（阴影，黄色和高光）并使用Control-G键盘快捷键对它们进行分组。

 

第15步 

由于我们希望小太阳位于底层背景区域内，我们将创建圆角矩形（Control-C）的副本将其粘贴到行星前面（Control-F）。

给副本创建剪贴蒙版，方法是选择它和我们在上一步中分组的对象，然后右键单击>制作剪贴蒙版。

第16步

向下移动到背景的底部，并创建一个稍大（24 x 24 px）稍暗（#d8ca8b）的行星，使用相同的方法添加高光和阴影，然后使用更大的圆形遮住它。

                                                 （本教程由寻图标icon.52112.com提供）

第17步

使用椭圆工具（L），绘制一个68 x 68 px圆（#d0d0d8）创建一个“空白”的行星，我们稍后再对这八个行星的基础形状进行定制和调整。

由于行星将成为主要焦点，因此要确保将行星定位到参考网格的中心。

第18步

首先创建三个连续的4 px偏移的大圆圈，为行星添加三个阴影，然后将其颜色设置为黑色（#000000）并将它们的不透明度降低到10％。

第19步

选择背景的副本将所有图形进行分组，创建副本，然后转到对象>复合路径并点击“ 建立”将背景副本变为可用的剪贴蒙版。

完成后，选择它和阴影，然后右键单击>制作剪贴蒙版，遮住多出的阴影部分。

第20步

完成了默认“空白”图标，我们创建七个副本并将它们定位到剩余的参考网格上。

第21步

由于我们不希望所有图标看起来都是一样的，我们可以选择第二个，第四个，第六个和第八个图像并水平映射它们（右键单击>变换>反射>水平）让整个合集看起来更加丰富。

                                                    （本教程由寻图标icon.52112.com提供）

6.创建水星图标

跳转到水星图层同时将其余的图层锁定起来，我们开始绘制水星图标。

第1步

由于水星的表面具有大量的陨石坑，我们可以通过创建一堆大小不一的圆圈表现这一特征，使用稍暗的灰色阴影（#aaaab2）进行着色。

第2步

接下来，创建一个环状的高光使这个星球更加有层次感。

首先，选择灰色形状并创建它的副本（Control-C> Control-F），然后对副本应用2 px偏移。

选择生成的偏移和复制的形状，使用路径查找器的减去顶层选项来创建一个缺口，将它的颜色设置为白色（#FFFFFF），改变它的混合模式为柔光将不透明度更改为68％。

7.创建金星图标

第1步

定位到第二层，然后放大第二个参考网格。

现在，我们要做的第一件事就是将行星的颜色从灰色变为泥黄色（#d8ca8b）。

第2步

使用钢笔工具（P），绘制一个略微弯曲的部分放置到行星的中心，使用#bcaf75进行着色。

第3步

选择钢笔工具（P），绘制两条弯曲的线条，一条朝向顶部，另一条延伸到我们之前创建的较大的线条下面，使用#eadba0进行着色。

第4步

创建行星主体形状的副本使用剪贴蒙版遮住行星多余形状。

第5步

接下来，使用椭圆工具（L），向行星表面的中心和顶部添加几个细长的椭圆，并使用#a59862进行着色。

第6步

像我们对水星的操作一样，接下来我们在行星表面添加2 px的环状高光。

第7步

将左下方行星的颜色更改#d0d0d8 将右上方的行星颜色改为#78d2ea，并添加一个绿色部分（#80e5c8）使其类似于地球。完成图标。

8.创建地球图标

第1步

与前一个图标一样，我们需要做的第一件事是调整“空白”行星的颜色，将它的颜色更改为#78d2ea。

第2步

接下来选择钢笔工具（P）绘制“地球”的地貌#80e5c8然后使用较大圆圈的副本进行遮罩。

第3步

使用前面的图标的副本，或者使用几步之前相同的过程创建的新副本，为行星赋予环状阴影。

第4步

接下来，用与背景的绘制相同过程添加一堆云，使用白色（#FFFFFF）进行着色，并将混合模式改为柔光。

第5步

给左侧较小的天体着色#c1c1c6并给它创建一个2 x 2像素冲击坑（#a0a0a8），使其看起来像月亮，然后将第二个的颜色更改为#d8ca8b。

完成后，使用Control-G键盘快捷键选择所有图标元素并将其组合在一起。

9.创建火星图标

第1步

将较大圆圈的颜色更改为#ea7d7d。

第2步

使用椭圆工具（L）创建颜色为#bf6262的形状作为陨石坑，并将它们分散到行星的中心和右上方。

第3步

添加一个18 x 6 px的椭圆（#FFFFFF）作为冰层放置在行星顶部，使用下方较大的圆圈遮住多多余形状。

第4步

为行星创建浅色的轮廓并将白色冰层放置在星球顶层。

第5步

将左侧较小行星的颜色更改为#e27959（给它一个小细节#d3674f）做为金星，创建迷你地球替换右上角的行星来完成图标 。

                                                            （本教程由寻图标icon.52112.com提供）

10.创建木星图标

第1步

跳转到下一个图层，放大我们当前的参考网格，并将行星的颜色从暗灰色更改为#e27959。

第2步 

使用钢笔工具（P）绘制几条#ff9b73较亮的线条和#d3674f较暗的线条，使用行星副本创建剪切蒙版遮盖它们，使线条不会突出到行星表面之外。

第3步

使用椭圆工具（L）在行星的底部和上部创建一些椭圆。

第4步

给行星创建环形轮廓，使其与其余图标的样式保存一致。

第5步

将左上角的星球颜色改为#ea7d7d，右下角的行星颜色改为#d8ca8b，并在行星表面创建一些小的斜线（#bcaf75）。

另外，不要忘记使用Control-G键盘快捷键选择所有图标元素并将其组合在一起。

11.创建土星图标

第1步

跳转到第七层，放大参考网格，将较大圆圈的颜色更改为#d8ca8b。

第2步

使用矩形工具（M），创建高度不一的矩形，并分别赋予#eadba0#bcaf75和#a59862的颜色。使用直接选择工具（A）选择所有矩形一边的锚点将它们略微向顶侧移动约12 px的距离调整矩形。

第3步

按照之前添加行星轮廓一样的方法给行星创建颜色较浅的轮廓。

第4步

添加行星的行星环，创建一个98 x 26像素（#ffe9a4）和一个较小的78 x 18px（#ffe9a4）的椭圆，使用路径查找器减去行星中心的形状。

将生成的形状定位到行星的中心，确保将较大的圆圈放在它前面（右键单击>排列>置于前面），然后将其旋转24° （右键单击>变换>旋转> 24）。

第5步

创建行星环和行星的副本（Control-C）并将其粘贴到所有元素（Control-F）上。然后，使用“ 路径查找器 ”的“ 相交”选项，创建一个两者的交点产生的新形状，移除顶部创建行星环绕的感觉。

第6步 

改变左侧行星的颜色#e27959，并将右边的行星颜色设置为#5ad6e0并添加一些细长的线条（#73ecef）。

12.创建天王星图标

第1步

跳转到天王星图层，改变行星的颜色#5ad6e0。

第2步

使用钢笔工具（P）绘制三个垂直线段，并使用#73ecef 给较大的圆圈进行着色和遮罩。

第3步

使用椭圆工具（L），创建两个垂直细长形状，使用#e1ffff给它们着色，并将它们定位在行星的右上角。

第4步

正如我们对之前的图标所做的那样，给行星添加环状的高光。

第5步

接下来给行星创建垂直的行星环，首先给行星需要添加垂直线条，通过创建一个12 x 90 px椭圆（#e1ffff）和另一个较小的8 x 86 px （#e1ffff）椭圆，使用路径查找器的减去选项将中间的椭圆从较大的椭圆中切出。

将生成的形状定位在行星的中心，放置在较大圆圈的下方，然后向右侧移动几个像素。

第6步

创建一个行星环和另一个较大的圆圈的副本（Control-C> Control-F），然后使用路径寻找器的相交选项创建一个绕着行星圆周运动的行星环。

第7步

使用#d8ca8b 给右下角行星着色。完成后，选择所有图标元素并将其组合在一起（Control-G）。

                                                              （本教程由寻图标icon.52112.com提供）

13.创建海王星图标 

第1步

接下来跳转到最后一个图层，将较大圆圈的颜色更改为#77afe0。

第2步

使用钢笔工具（P），绘制两个不规则形状，使用#e1ffff给它们着色，将它们一个放置在顶部，另一个放置在底部。

第3步

选择椭圆工具（L）并创建一对浅色斑点（#e1ffff）和一个较暗（#5fa1d3）椭圆阴影，放置在行星的中心。

第4步

给行星添加2 px厚的环状高光以保持视觉上的一致性。

第5步

通过从我们的土星图标中选取右侧较小行星的副本替换我们现在图层中右上角的星球来完成图标。

并且使用Control-G键盘快捷键选择所有图标元素并将其组合在一起。

                                                             （本教程由寻图标icon.52112.com提供）

14.创建渐变背景

接下来我们需要给背景创建平滑的渐变效果，这将使图标更具视觉吸引力。 

第1步

创建所有图标的背景副本（Control-C），将其粘贴在原图层的前面（Control-F）。

然后，选择副本，转到“ 对象”>“复合路径”并单击“ 建立”将所有图形变为一个整体。

第2步

选择副本，然后对其应用线性渐变，调整左侧颜色为#93278f、右侧颜色为#0071bc，将角度设置为 90°。

第3步

在仍选择副本的情况下，打开“ 透明度”面板，并将“ 混合模式”设置为“ 叠加”，将“ 不透明度”降低到80％。

完成

一旦你完成了叠加层，不要忘记选择它和底层图标，并将它们进行分组（Control-G），确保它们不会被错误地分开。

这样我们的图标就完成了！

                                                                  （本教程由寻图标icon.52112.com提供）