创建一组安全主题图标

设置新文档

首先我们需要创建新文档文件>新建控制-N),然后进行以下设置调整:

画板数量: 1

宽度: 800像素

高度: 600像素

单位:像素

进入“ 高级”选项卡:

色彩模式: RGB

栅格效果:屏幕(72 ppi)

建立图层

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

第1层>参考网格

第2层>可见性

第3层>指纹扫描

第4层>隐身模式

第5层>安全锁

分层是设计过程中很重要的一环在以后的设计过程中一定要注意 

创建参考网格

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

第1步

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

第2步

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

第3步

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

创建可见性图标

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

第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)所有组成部分组合在一起,确保锁定其图层,然后再转到下一个图层。

创建指纹扫描图标

假设你已经完成了第一个图标,那我们就可以转到下一个图层(第三个图层),我们将逐步构建第二个图标。

第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轮廓(#EABD6316 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),然后对所有组成形状执行相同操作。

创建隐身模式图标

进入第四个图层,放大绘图区域进行隐身模式图标的绘制

第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键盘快捷键选择并分组所有形状。

创建安全锁图标

接下来我们创建最后一个安全锁图标,选择最后一个画板放大绘图区域进行下一步操作。

第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)所有图标的组成形状。

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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容