平面设计:创建导航主题图标包

如何建立新文件

与任何新项目一样,通过转到文件→新建 (或使用 Control + N 键盘快捷键)创建一个 新文档来开始工作 ,按以下步骤进行调整:

画板数量: 16

间距: 32像素

列数: 4

宽度: 64像素

高度: 64像素

单位: 像素

在“ 高级” 标签中:

色彩模式: RGB

栅格效果: 屏幕(72 ppi)


如何设置图层

一旦完成项目文件的设置,花一些时间并对其进行结构化,以便我们可以将图标与实际的参考网格分开,以简化工作流程。为此,只需打开“ 图层” 面板,然后创建总共两个图层,我们将其重命名如下:

第1层→ 参考网格

第2层→ 图标


创建参考网格

分层完成文档后,添加少量 参考网格 ,这将使图标具有较小的 保护性填充 表面,同时有助于保持一致性

步骤1

抓住 矩形工具(M) ,使用它创建一个 64×64 px的 正方形,使用 #F15A24对其进行着色,然后使用“ 对齐” 面板的“ 水平 和 垂直对齐中心”选项其定位到第一个 画板的 中心

步骤2

创建另一个较小的 56×56像素正方形 (#FFFFFF),它将用作 活动绘图区域,这将为我们的图标提供4像素 的全方位 保护性填充。完成后,使用Control-G 键盘快捷键选择两个形状并将它们分组在一起 

步骤3

使用刚刚完成的副本(Control + C)添加其余的 参考网格,然后将其(Control + F)粘贴到空的相邻 Artboards上。完成后,请确保锁定当前图层,然后再继续下一步

创建位置图钉图标

完成项目文件的设置后,可以将自己放置在第二层(即顶层)上,然后放大到第一张 Artboard, 以便可以更好地查看图标的形状

步骤1

使用56×56 px的 圆圈创建背景 ,用 #FF9B50对其进行着色 ,然后将其居中对齐到较大的基础 Artboard

步骤2

使用20×20 px的 圆圈添加图钉的主体 ,使用白色(#FFFFFF)进行着色,然后将其居中对齐到较大的背景,将其距 上缘14 px的距离定位 

步骤3

通过使用锚点工具 Shift + C)捏住底部锚点来调整我们刚刚创建的形状,以使其呈尖形

步骤4

使用直接选择工具 (A)选择生成的锚点 ,然后使用 方向箭头键 或“ 移动” 工具将其推到底部8像素的距离 (右键单击→变换→移动→垂直→8像素)。完成后,只需选择 形状手柄的 端点 ,然后将其向下拖动,即可调整从形状尖端到其侧面的曲率 

步骤5

给所得到的形状的 轮廓 使用 中风 的方法,创建它(拷贝控制+ C),我们将在前面(粘贴控制+ F),然后通过第一调整改变其颜色,以 #155B6B,确保设置其 宽度 为 4像素,其  为 圆角连接 

步骤6

通过使用8×8 px的 圆圈(#155B6B)添加内部细节来结束图标, 将其定位在 参考图像中。完成后,请确保使用Control + G 键盘快捷键选择并分组所有图钉的组成形状 ,然后对整个图标进行相同的操作

步骤7

使用刚刚完成的图标的副本(Control + C)创建禁用状态变化,将其粘贴(Control + F)到相邻的 Artboard上,确保随后使用Shift + Control将其取消分组 + G 键盘快捷键或 右键单击→取消分组

步骤8

通过选择钢笔工具 (P)结束当前图标,然后使用它以34 px 高 4 px 厚的带有圆帽的笔划绘制对角线,以45°角旋转(右键单击→变换→旋转→-45°)。完成后,确保将它们选择并分组(Control + G),然后再继续进行下一步

创建目标图标

将您自己放置在第三个 Artboard上,开始处理我们的下一个图标,它们是目标图标

步骤1

与之前的操作一样,首先使用56×56 px的 圆圈创建背景  ,然后使用 #FF9B50对其进行着色,然后将其居中对齐至底层的 Artboard

步骤2

使用创建的目标符号的内部部分 8×8像素 的圆(#FFFFFF)与 4 PX 厚 轮廓 (#155B6B),我们将组(对照+ G),然后中心对准以较大的背景

步骤3

使用稍大的20×20 px 圆和 4 px 厚的 描边 (#155B6B)添加外部部分 ,我们将使其居中对齐刚刚分组的形状

步骤4

通过使用四个4 px 长 4 px 粗的 描边 线(#155B6B)添加小细节线来结束图标,如参考图像所示 ,将其定位到外圆的 锚点上。完成后,请确保选择并组合(Control + G)符号的组成形状,然后对整个图标进行相同的操作

步骤5

使用我们刚刚完成的图标的副本(Control + C)创建禁用状态,然后将其(Control + F)粘贴到相邻的 Artboard上,确保像添加对角线一样添加对角线定位销

创建指南针图标

假设您已经向下移动到第二行的Artboards,将自己放置在第一行中 ,然后放大其 参考网格, 以便可以更好地查看形状

步骤1

通过创建使用后台启动 56×56像素 圈,颜色使用 #FF9B50 然后位置到底层的中心 画板

步骤2

使用16×40 px 矩形创建针的主要形状 ,将使用白色(#FFFFFF)进行着色,然后将其定位到较大背景的中心

步骤3

通过选择“ 添加锚点工具” (+),单击它们,将新的锚点添加 到四个边缘中每个边缘的中心,来调整我们刚刚创建的形状

步骤4

只需通过使用“ 删除锚点工具” ()单击它们的所有角锚点,即可继续调整形状

步骤5

通过按R 键然后单击并拖动形状,或者通过 右键单击→变换→旋转→-45°,以 45°角顺时针旋转生成的形状 。旋转形状后,请确保花一些时间并分别选择其每个 锚点, 然后将其捕捉回 Pixel Grid

步骤6

通过添加4 px 厚的 轮廓 (#155B6B)和 Round Join来完成图标,然后使用6×6 px的圆圈填充内部螺栓 ,如参考图像所示,将其定位 。完成后,请确保选择并组合(Control + G)所有指南针的组成形状,然后对整个图标进行相同的操作

创建地图图标

将您自己放置在下一个 Artboard上,然后快速放大其 参考网格, 以便我们可以开始使用小地图图标

步骤1

当我们与其他所有的图标一样,我们要通过创建使用的背景开始 56×56像素 的圆,将使用颜色 #FF9B50 ,然后定位到底层的中心画板

步骤2

使用12×24 px 矩形为地图的中心部分添加主要形状 ,将其与较大的圆对齐,使其居中,其距 顶部边缘14 px

步骤3

调整我们刚刚创建的形状,方法是使用 直接选择工具 (A)选择其右侧 锚点,然后使用 方向箭头键 或“ 移动” 工具将其推到底部4 px的距离 (右键单击→变换→移动→垂直→4像素)。完成后,使用圆角连接为生成的形状提供 4 px 厚的 轮廓 (#155B6B) ,并确保随后使用Control + G 键盘快捷键将两者选中并分组 

步骤4

使用我们刚刚完成的工作的两个副本(Control + C→Control + F两次)添加地图的侧面部分,我们将对其进行垂直反射(右键单击→变换→反射→垂直),然后进行定位它们是 轮廓 重叠,如 参考图像所示

步骤5

通过抓住钢笔工具 (P),然后按照参考图像 作为您的主要指南,使用它来绘制细节线,以 结束图标 。完成后,请确保选择并组合(Control + G)地图的所有合成形状,然后对整个图标进行相同的操作

创建缩放图标

我们列表的下一个是两个缩放图标,因此请确保您移至下一个 Artboard 并开始使用!

步骤1

创建用于放大图标的背景下,使用 56×56像素 圈,颜色使用 #FF9B50 然后中心对准到基础画板

步骤2

使用24×24像素的 圆圈(#FFFFFF)和 4像素 厚的 轮廓线 (#155B6B)添加镜头 ,将其分组(Control + G),然后按参考图像中的位置

步骤3

使用4 px 厚的对角 描边 线(#155B6B)添加一个手柄,并从镜头的中心开始有一个圆帽,并确保在其下端与活动绘图区域的底边缘之间保持 12 px的间距 。绘制完形状后,请右键单击→排列→向后发送,以确保将其放置在较大的镜头下方

步骤4

通过在水平部分使用8像素4像素厚的描边 (#155B6B)创建加号,然后在垂直部分使用另一 8像素 高 4像素 粗线(#155B6B)创建加号来结束图标 。分组(Control + G),然后将两者置于较大镜头的中央。完成后,请确保选择并分组(Control + G)所有镜头的构图形状,然后对整个图标进行相同的操作

步骤5

使用我们刚刚完成的副本的副本(Control + C)创建缩小图标变体,将其粘贴到相邻的 Artboard上,确保通过双击加号来对其进行调整在形状上,然后删除其垂直部分。完成后,只需按 Escape 键即可退出“ 隔离模式”

创建导航箭头图标

假设您已经向下移动到画板的第三行 ,请放大第一个参考网格,在该 网格中我们将快速创建导航箭头

步骤1

通过创建使用后台启动 56×56像素 圈,我们将颜色使用 #FF9B50 然后位置到底层的中心画板

步骤2

使用20×28 px 矩形添加箭头的主要形状,使用白色(#FFFFFF)进行着色,然后将其放置在较大背景的中心

步骤3

只需通过使用添加锚点工具 (+)单击它们,即可在顶部和底部边缘的中心添加新的锚点,从而调整我们刚刚创建的形状 

步骤4

继续通过除去其顶端角调整形状 使用 删除锚点工具 (),然后选择使用其中心底部一个 直接选择工具 ()和通过的距离它推到内 4 PX 使用任一 方向箭头键 或 移动 工具(右单击→变换→传送→垂直→4像素

步骤5

完成当前图标的操作,将结果形状赋予 4 px 厚的 轮廓 (#155B6B),并进行“ Round Join”圆角连接),确保将两者选中并分组(按Control + G键),然后对整个图标进行相同的操作

创建地图图钉图标

将您自己放置在相邻的 Artboard上,让我们开始处理第十个图标

步骤1

与之前的图标一样,将使用56×56 px的 圆圈创建背景  ,使用 #FF9B50对其进行着色,然后将其定位到基础活动绘图区域的中心 

步骤2

使用16×16 px 圆(#FFFFFF)和 4 px 粗 轮廓 (#155B6B)添加销钉的头部 ,将其分组(Control + G),然后居中对齐较大的圆,将其定位在  距顶部边缘12像素

步骤3

玩完图标,通过使用添加的垂直线段 12像素 高 4 PX 厚 中风 (#155B6B),将定位为在可见 参考图像。一旦完成,别忘了选择并分组(Control + G)所有图钉的组成形状,然后对整个图标进行相同的操作

创建可见性图标

接下来是可见性图标,因此请确保移至下一个 Artboard 并放大其 参考网格, 以便可以更清晰地查看形状

步骤1

使用56×56 px的 圆圈创建背景 ,使用 #FF9B50对其进行着色 ,然后将其居中对齐到较大的基础 Artboard

步骤2

使用36×28 px 椭圆添加眼睛的主要形状 ,使用白色(#FFFFFF)进行着色,然后居中对齐较大的背景

步骤3

通过使用 锚点工具 (Shift + C)单独捏住其侧面锚点,以调整我们刚刚创建的形状, 使其变得尖锐

步骤4

使用圆角连接为生成的形状提供 4 px 厚的 轮廓 (#155B6B),并确保随后使用Control + G 键盘快捷键将两者选中并分组

步骤5 

使用16×16 px的 圆创建瞳孔 ,将使用 #155B6B对其进行着色 ,然后将其居中对齐到刚刚分组的形状

步骤6

通过使用8×8 px的 圆圈(#FFFFFF)添加小切口来结束图标, 如参考图像所示,我们将其定位到瞳孔的右上角 。完成后,请确保选择并分组(Control + G)所有眼睛的合成形状,并对整个图标进行相同的处理

步骤7

使用我们刚刚完成的副本的副本(Control + C)创建禁用状态图标变体,将其粘贴(Control-F)到当前行的其余 Artboard上,然后通过双击进行调整进入 隔离模式 并加入 4 PX 厚对角线 笔画 线(#155B6B用) 圆帽。完成后,只需按 Escape 键退出“ 隔离”即可 

创建旗帜图标

现在,我们进入图标的第四行和最后一行,因此将您自己放置在其第一个 Artboard上 ,让我们看看如何快速构建标记图标。

步骤1

现在你已经知道了钻,抢 椭圆工具 (大号),并使用一张背景 56×56像素 的圆,我们将颜色使用 #FF9B50 ,然后定位到较大的底层的中心 画板

步骤2

使用20×16 px 矩形为旗帜的苍蝇创建主要形状 ,将使用白色(#FFFFFF)对其进行着色,然后垂直居中对齐较大的背景,将其距顶部边缘18 px的距离定位 

步骤3

通过使用“ 添加锚点工具” (+)在其右边缘的中心添加一个新的锚点来 调整我们刚刚创建的形状, 然后使用“ 直接选择工具” (A)选择它 并将其推入内部通过的距离 4 PX 使用任一 方向箭头键 或 移动 工具(右单击→变换→传送→水平→4像素

步骤4

使用Round Join为所得的形状提供 4 px 粗的 轮廓 (#155B6B) ,并确保使用Control + G 键盘快捷键将两者选中并分组 

步骤5

通过使用28 px 高 4 px 粗的 带圆帽的描边 线(#155B6B) 添加极点来结束当前图标 ,如我们在参考图像中所看到的那样 。完成后,请确保选择并分组(Control + G)所有标志的组成形状,然后对整个图标进行相同的操作

创建出租车图标

我们名单上的下一个是小汽车图标,因此将您自己 放置在下一个 Artboard上,让我们开始吧!

步骤1

首先使用56×56 px的 圆圈创建背景 ,我们将使用 #FF9B50对其进行着色 ,然后将其居中对齐到较大的基础 Artboard

步骤2

使用两个8×6 px 矩形(#155B6B)添加车轮的主要形状 ,通过在“ 变形” 面板中将其 底角半径设置 为 4 px进行调整 。完成后,对(Control + G)进行分组并定位结果形状,如 参考图像所示

步骤3

使用28×10 px 矩形(#FFFFFF)和 4 px 粗 轮廓 (#155B6B)以及 Round Join来创建汽车的下部车身 ,将其分组(Control + G),然后定位,使其路径与车轮

步骤4

添加使用两个前灯 4×4像素 的正方形(#155B6B用) 2 PX 底拐角半径,接着使用号牌 8×4像素 的矩形(#155B6B用) 2 PX顶圆角半径,这是我们将如 参考图像中所示定位

步骤5

使用24×12 px 矩形(#FFFFFF)创建汽车的上部 ,将通过使用直接选择工具 (A)单独选择其顶部锚点进行 调整 ,然后将其向内推 2 px。给生成的形状一个 4像素 厚的 轮廓 (#155B6B),分组(Control + G),然后将两者放置在下部顶部边缘的顶部

步骤6

通过使用8×8 px 圆(#155B6B)添加驱动轮来结束图标 ,将通过移除其下半部分进行调整,然后使用8×4 px 矩形(#155B6B)将滑行板 与 2 px 顶角半径,我们将其定位在 参考图像中。花些时间,一旦完成,请确保选择并分组(Control + G)所有汽车的组成形状,对整个图标进行相同操作,然后再继续进行下一个

创建分享图标

假设您已完成上一个图标的操作,请移至下一个 Artboard 并放大其 参考网格, 以便我们开始使用

步骤1

使用56×56 px的 圆圈快速创建背景 ,将使用 #FF9B50对其进行着色 ,然后将其居中对齐到较大的基础 Artboard

步骤2

使用三个具有4 px 粗 轮廓 (#155B6B)的8×8 px 圆(#FFFFFF) 创建小圆形段 ,我们将对它们进行单独分组(Control + G),然后按照参考图像中的位置放置

步骤3

通过抓住钢笔工具 (P)并使用4 px 粗的 描边 线(#155B6B)连接所有三个头来 完成图标, 确保随后通过右键单击→排列→向后发送将其堆叠在下面 。一旦完成,别忘了选择并分组(Control + G)之后,对整个图标进行相同操作的所有符号组成形状

创建过滤器图标

现在我们到了最后一个图标,因此假设您已经将自己 放置在其余的Artboard上,那么我们就 结束吧!

步骤1

就像处理所有其他图标一样,首先使用56x 56 px的 圆圈创建背景 ,然后使用#FF9B50对其进行着色,然后将其定位到基础活动绘图区域的中心 

步骤2

使用28×16 px 矩形为漏斗的上身添加主要形状 ,使用白色(#FFFFFF)对其进行着色,然后垂直居中对齐较大的背景,将 其与顶部背景保持 14 px的距离

步骤3

使用 8×12 px 矩形(#FFFFFF)为下部创建主要形状,我们将其放置在上一步中的矩形下方

步骤4

通过使用 直接选择工具 (A)单独选择其底部锚点 ,然后将其推入内部,以使其最终与下部形状的底部重叠,来调整上部 形状。然后,选择下部形状的右下角 锚点 并将其推到顶部4 px的距离

步骤5

选择两个结果形状,然后使用Pathfinder的 “ Unite Shape Mode ”将它们合并为一个较大 的 形状

步骤6

通过给漏斗一个4 px 厚的 轮廓 (#155B6B)和一个 Round Join来完成图标和项目本身 ,确保随后使用Control + G 键盘快捷键将两者选中并分组 。完成操作后,请不要忘记对整个图标执行相同的操作,最后再单击该保存按钮

完成啦!

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

推荐阅读更多精彩内容