精美的安全主题图标设计

Posted 2021-01-27

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

?
?
设置新文档
首先我们需要创建新文档（文件>新建或控制-N），然后进行以下设置调整：
画板数量： 1
宽度： 800像素
高度： 600像素
单位：像素
进入“ 高级”选项卡：
色彩模式： RGB
栅格效果：屏幕（72 ppi）

?

?
?
建立图层

打开“ 图层”面板，我们创建五个图层，将其命名如下：

第1层>参考网格

第2层>可见性

第3层>指纹扫描

第4层>隐身模式

第5层>安全锁
?

（本教程由寻图标icon.52112.com提供）
?
?
创建参考网格
?

一旦我们完成了的项目文件的分层，我们就可以开始创建参考网格了，这将有助于我们通过观察水平和大小来编辑我们的图标。
?

第1步

选择矩形工具（M）并创建一个64 x 64像素的正方形，使用＃F15A24进行着色，然后使用“ 对齐”面板的“ 水平和垂直对齐中心”选项将其定位到画板的中心。
?

?
?
第2步

?
创建另一个较小的56 x 56像素正方形（#FFFFFF），将它作为绘图区域，同时绘制4 px轮廓。将两个正方形（Control-G）进行分组，然后创建三个副本（Control-C > Control-F三次），将它们与原始距离保持28 px。将所有网格都放置好后，进行分组（Control-G）然后将它们居中对齐到底层的画板，如参考图像中所示。
?

?
?
第3步
?

一旦完成画板和绘图区域的创建以及参考网格，就可以锁定它们的图层，然后继续下一步。

（本教程由寻图标icon.52112.com提供）
?
?
创建可见性图标
?

跳转到第一个绘图区域我们开始绘制第一个可见性图标
?

第1步
?

使用椭圆工具（L），创建一个56 x 56像素的圆，使用＃3A2F2E进行着色，然后将中心对齐到下面的绘图区区域，如参考图像中所示。
?

?
?
第2步
?
使用36 x 24 px椭圆添加眼睛的主要形状，使用#FFFFFF颜色，然后将中心对齐到较大的圆圈。
?

?
?

第3步

通过直接选择它来调整我们刚刚创建的形状，然后使用锚点工具（Shift-C）选择它的左右锚点使它们变得尖锐。
?

?
?
第4步

使用16 x 16 px圆圈创建眼球，使用＃EABD63进行着色，然后定位到我们刚刚调整过的形状的中心。

?

?
?
第5步
?
使用8 x 8 px圆圈添加瞳孔，使用＃3A2F2E进行着色，然后将中心对齐到较大的圆圈。
?

?
?
第6步
?
打开像素预览 模式（Alt-Control-Y），然后使用4 x 4 px圆圈（＃EABD63）创建覆盖虹膜右下角的小圆形切口，移动到参考图中看到的位置。
?

?
?
第7步
?
完成图标，通过使用4 x 4 px圆（#FFFFFF）添加圆形高光，我们将定位到参考图像中看到的虹膜的左上角。完成后，关闭像素预览模式（Alt-Control-Y），然后使用Control-G键盘快捷键选择并分组所有光圈组成形状。
?

?
?
第8步
?
完成图标处理后，您可以选择并将（Control-G）所有组成部分组合在一起，确保锁定其图层，然后再转到下一个图层。
?

（本教程由寻图标icon.52112.com提供）
?
?
创建指纹扫描图标
?
假设你已经完成了第一个图标，那我们就可以转到下一个图层（第三个图层），我们将逐步构建第二个图标。
?
第1步
?
首先使用56 x 56 px圆圈添加背景，使用＃3A2F2E对其进行着色，然后将其中心对齐到第二个活动绘图区域.
?

?
?
第2步
?
创建好背景之后，我们创建一个24 x 30像素2 px轮廓的矩形，使用＃EABD63对其进行着色，然后将中心对齐到较大的圆圈。
?

?
?
第3步
?
通过在“ 变换”面板的“ 矩形属性”中将其顶角的半径设置为12 px，调整我们刚刚创建的形状。
?

?
?
第4步
?
打开“ 像素预览”模式（Alt-Control-Y），然后使用“ 添加锚点工具”（+）在距离左圆角底部4 px处添加新锚点。
?

?
?

第5步
?
使用直接选择工具（A）选择它的左下角锚点调×××状，然后按删除它，绘制一个弧形图案。
?

?
?
第6步
?
使用直接选择工具（A）选择其锚点，然后使用“ 移动”工具（右键单击>“变换”>“移动”>“垂直”>将其按4 px的距离推到顶部，缩短生成的路径右侧的长度-4像素或使用方向箭头键）。
?

?
?
第7步
?
绘制2 ?px轮廓（＃EABD63）16 x 26 px大小矩形创建指纹的下一个线段，通过在“ 变换”面板的“ 矩形属性”中将其顶角的半径设置为8 px来进行调整。完成后，将结果形状定位在参考图像中。
?

?
?
第8步
?
通过在距离左圆角的底部点4 px处添加新锚点来调整生成的形状，移除左下角的锚点，就像我们绘制较大的形状所做的那样。
?

?
?
第9步
?
联合两个路径的左端ctrl-J键盘快捷键，选择它们之后使用直接选择工具（A） ，使用实时角落工具设定所得角内部半径2像素。
?

?
?
第10步
?
创建2 px轮廓（#FFFFFF）的8 x 20 px矩形，将其顶角的半径设置为4 px，在距离左边2 px处添加新的锚点角落的底点。像我们对前面的线段所做的那样移除左下方的锚点，将结果形状定位在参考图像中。
?

?
?
第11步
?
选择钢笔工具（P），并使用参考图像作为参考绘制白色路径的水平线段。完成之后再进行下一步操作。
?

?
?
第12步
?
将其顶角的半径设置为6 px，将其底部的半径设置为14 px来调整生成的形状
?

?
?
第13步
?
创建“J”形2 px的线条（#FFFFFF），放置在与我们刚刚完成调整的形状之间保持2 px的位置。完成后，关闭像素预览 模式（Alt-Control-Y），然后使用Control-G键盘快捷键选择并将所有指纹的组成线组合在一起。
?

?
?
第14步
?
接下来，创建一个12 x 12像素的圆圈，使用＃EABD63进行着色，然后将中心对齐到指纹的下边缘。
?
?
?
第15步
?
使用2 px的线条（＃3A2F2E）绘制小型对号来完成图标，我们将其定位到上一步中较小圆圈的中心。完成后，选择并将两者组合在一起（Control-G），然后对所有组成形状执行相同操作。

（本教程由寻图标icon.52112.com提供）
?
?
创建隐身模式图标
?
进入第四个图层，放大绘图区域进行隐身模式图标的绘制
?
第1步
?
首先使用56 x 56 px的圆创建背景，我们将使用＃3A2F2E进行着色，然后将中心对齐到第三个绘图区域。

?
?
第2步
?
创建两个8 x 8 px大小2 px轮廓的圆圈（＃EABD63）创建眼镜框，将彼此间隔调整为4 px，确保将它们定位在距离绘图区域的底部边缘16px的位置。
?

?
?
第3步
?
创建6 x 6 px大小2 px厚的圆圈（＃EABD63）添加将两个圆圈连接在一起的桥接部分，将它放置在参考图像中的位置。
?

?
?
第4步
?
使用直接选择工具（A）选择其底部锚点来调整较小的圆，然后通过按Delete删除它。完成后，选择并将所有三个部分组合在一起（Control-G），然后再继续下一步。
?

?
?
第5步
?
使用圆角矩形工具绘制1 px 轮廓36 x 2 px大小圆角矩形（#FFFFFF）创建帽子边缘，将居中对齐到下面眼镜2px的位置。
?

?
?
第6步
?
创建20 x 10 px矩形（#FFFFFF）创建帽子部分，我们将其放置到上一个形状的顶部。
?

?
?
第7步
?

通过在“ 变形”面板的“ 矩形属性”中将其顶角的半径设置为2 px来调整帽子顶部。
?

?
?
第8步
?
使用添加锚点工具（+）将新锚点添加到其上边缘的中心来继续调整生成的形状，然后我们将其向下推动2 px的距离（右键单击>变换>移动>垂直> 2像素或使用方向箭头键）。
?

?
?
第9步

?
使用直接选择工具（A）选择其顶部和中心锚点来调整表冠上部的曲率，使用平滑工具，调整出一个良好的弯曲过渡。
?

?
?
第10步
?
创建4 x 4 px正方形（＃3A2F2E）添加帽子上的小细节，我们将通过在其顶部边缘的中心添加新锚点然后将其推到底部2 px（右键单击）进行调整>变换>移动>垂直> 2像素或使用方向箭头键）。完成后，将图形定位到参考图像的位置。
?

?
?
第11步
?
创建2 x 12 px矩形（＃EABD63）添加小边细节来完成图标，通过“ 变换”面板的“ 矩形”属性中将其左上角和右下角的半径设置为2 px来进行调整。将生成的形状放置在帽子的右侧，距离底部帽子边缘2 px，使用Control-G键盘快捷键选择并分组所有形状。

（本教程由寻图标icon.52112.com提供）
?
?
创建安全锁图标
?
接下来我们创建最后一个安全锁图标，选择最后一个画板放大绘图区域进行下一步操作。
?
第1步
?
首先创建56 x 56 px圆（＃3A2F2E）作为背景，将其对齐到下面的绘图区域。
?

?
?
第2步
?
开始绘制安全锁时，首先创建24×20像素2 px角半径的圆角矩形（＃EABD63）创建安全锁下部主体形状，我们将它放置在距离绘图区域的底部边缘12px的位置。
?

?
?
第3步
?
使用8 x 8 px圆圈添加键孔的圆形部分，使用＃3A2F2E进行着色，然后将其放置在距前一个形状顶部边缘4 px的位置。

?
?
第4步
?
使用4 x 8 px矩形（＃3A2F2E）创建孔的下部，调整“ 变换”面板的“ 矩形属性”中将其底角的半径设置为2 px。完成后，将生成的形状放在圆圈的下半部分，使用Control-G键盘快捷键选择并将两者组合在一起。
?

?
?
第5步
?
创建四个2 x 2 px圆圈添加小螺栓，使用＃3A2F2E进行着色，然后定位到距离安全锁四个角角2 px的位置，如参考图像所示。准备就绪后，在继续下一步之前，选择并将（Control-G）所有当前部分的组成形状组合在一起。
?

?
?
第6步
?
创建锁环，使用14×11像素大小2像素轮廓的矩形（#FFFFFF）调整顶部边角的半径至7像素，确保选择并删除其右下锚点。然后将边角设置为圆角，定位到锁身，如参考图像中所示。将形状放置到位后，使用Control-G键盘快捷键选择并组合锁的所有形状。
?

?
?
第7步
?
完成图标，以参考图像为标准，创建六个2 px粗的线条（#FFFFFF）给安全锁添加细节装饰。完成后，选择并分组（Control-G）所有图标的组成形状。
?

?
?
这样我们的安全主题系列图标就完成了！
?