平面设计：创建家具图标包

建立新文件

正如我们对每个新项目所做的那样，首先要设置一个新文档（文件>新建或Control-N），我们将使用以下设置进行调整：

• 画板数量：  1

• 宽度：  800像素

• 高度：  600像素

• 单位：  像素

在“高级”标签中：

• 色彩模式：  RGB

• 栅格效果： 屏幕（72 ppi）

设置图层

对于每个新项目，我希望将自己的资产分成几个不同的层次，因为这样我可以通过一次专注于一个项目来简化我的工作流程，

这使我可以随时跟踪每个形状。

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

• 第1层>参考网格

• 第2层>抽屉

• 第3层>餐具柜

• 第4层>床

创建参考网格

一旦我们对项目文件进行了分层，就可以开始创建参考网格，这将通过关注一致性和大小来帮助我们创建图标

第1步

抓住矩形工具（M），创建一个128×128像素的正方形，我们将使用＃F15A24对其进行着色，然后使用“对齐”面板的“水平

和垂直对齐中心”选项将其放置在画板的中心

第2步

创建另一个较小的120×120像素正方形，它将用作活动绘图区域，从而为我们提供了一个4像素的全边框。使用白色

（#FFFFFF）为形状着色，然后将正方形分组（Control + G），然后再创建两个副本，一个在左边，另一个在右边，使它们

与原始像素相距40 px

创建抽屉图标

假设您已经向上移动到第二层，让我们通过创建第一个图标开始项目。话虽如此，放大到其参考网格，以便您有一个更好的视

野，让我们开始吧

第1步

选择钢笔工具（P），然后使用4 px粗的笔触（颜色设置为＃2B3249），通过绘制120 px宽的线段来创建图标的背景线，我们

将其居中对齐到基础活动绘图区域，位于距其底部边缘8像素的距离

第2步

使用80×48 px矩形创建抽屉的前部，我们将使用＃EAA871对其进行着色，然后将其放置在刚刚创建的背景线上方，相距12 

px，与活动绘图区域之间的距离为10 px右边缘

第3步

通过使用Stroke方法创建刚好轮廓的形状，方法是在其后创建一个副本（Control + C），然后将其粘贴到前面（Control + 

F），然后通过将其颜色更改为＃2B3249进行调整，然后然后使用笔划（Shift + X）翻转其“填充”，确保将其“权重”设

置为4像素。然后，一旦完成，使用Control + G键盘快捷键选择两个形状并将它们分组在一起

第4步

通过绘制两条80 px宽4 px粗的水平描边线（＃2B3249）创建三个抽屉，将彼此垂直以16 px的距离堆叠起来，进行分组

（Control + G），然后将它们居中对齐到更大的底层长方形

第5步

接下来，使用三条12像素宽，4像素粗的笔画线（＃2B3249）绘制小手柄，将其放置在上一步中创建的抽屉部分的中心，选择

并分组所有抽屉的前部然后将形状组合在一起

第6步

使用20×48 px矩形创建抽屉的侧面部分，使用＃C68355对其进行着色，然后放置在左侧，垂直居中对齐，使其与前面部分的

填充形状对齐，距离为0 px

第7步

使用Stroke方法为新创建的形状提供4 px厚的轮廓（＃2B3249），然后将它们选择并分组（按Control + G）

第8步

花一些时间，通过使用2 px厚的笔划（颜色设置为＃2B3249）和笔帽为圆形，在抽屉的侧面绘制一点木质纹理来发挥创意。完

成后，对（Control + G）进行分组，然后使用基础填充矩形的副本（Control + C> Control + F）对纹理的线条进行遮罩

（右键单击>“制作剪贴蒙版”），确保将纹理分组为之后是侧面部分

另外，由于我们已经完成了抽屉主体的工作，因此您可以同时选择抽屉的各个部分并进行分组

第9步

通过使用6×14 px矩形创建抽屉的前部分开始工作，然后使用＃C68355对其进行上色，给出4 px粗轮廓（＃2B3249）分组

（Ctrl + G），然后将其放在下面其较大的主体，以便它们的轮廓重叠，确保将它们与右边缘的可见表面对齐

第10步

使用8×14 px矩形（＃AA693C）创建腿部的侧面，我们将通过直接选择工具（A）选择其左下角的锚点，然后将其向右推，来

进行调整距离为3像素（右键单击>变换>移动>水平> 3像素）

第11步

为生成的形状指定4 px的粗轮廓（＃2B3249），然后使用Control + G键盘快捷键将这两个形状组合在一起

第12步

通过创建一个12×6 px的矩形来给腿部阴影，我们将使用＃2B3249对其进行着色，然后通过选择其右下角的锚点并将其顶到

顶部2 px的距离进行调整（右键单击>变换>移动>垂直> 2像素）

完成后，将生成的形状放在腿上，使其与前部分的右上角对齐，然后选择并分组（Ctrl + G）所有腿的组成形状

第13步

使用我们刚刚完成的副本的副本（Control + C> Control + F）创建第二行，将其放置在抽屉的左侧，相距6像素，选择并分

组之后将两者结合在一起

第14步

通过创建抽屉的右腿的副本（Control + C> Control + F）来添加抽屉的左腿，我们将其放置在距原件26 px的距离处

完成后，使用Control-G键盘快捷键选择并组合所有抽屉组成部分

第15步

通过创建一个6×20像素的矩形（＃8195C1），给出一个4像素厚的轮廓（＃2B3249）组（Control + G），然后将其放置在抽

屉上方，与距活动绘图区域的右边缘20像素

第16步

使用我们刚刚完成的那本书的副本（Control + C> Control + F）来创建第二本书，将其放置在左侧以使其轮廓重叠，

并确保更改其填充形状的颜色至＃ED664C

第17步

使用10×20 px矩形创建第二本书的侧面部分，使用＃D35444进行着色，给出4 px的粗轮廓（＃2B3249），然后将其放置在其

左侧，选择并分组（Ctrl + G）在一起，然后对这两本书进行相同的处理

第18步

创建一个8×20 px的椭圆作为小灯，使用＃8195C1对其进行着色，然后将其放置在抽屉顶部，与活动绘图区域的左边缘相距

32 px

第19步

通过选择并删除其右锚点来调整我们刚刚创建的形状，将其切成两半。然后，创建最终形状的副本（Control + C> 

Control + F），将其放置在右侧，距离为4 px，选择并通过按Control + J两次将两个形状组合在一起

第20步

生成一个4 px粗的轮廓（＃2B3249）和12 px宽2 px的水平细节线（＃2B3249），将其放置在距抽屉主轮廓4 px

的距离处。完成后，使用Control + G键盘快捷键将所有三个形状选择并分组在一起

第21步

使用24×16 px矩形创建灯的上部，使用＃DCE5F4对其进行着色，然后以0 px的距离居中对齐其下主体

第22步

创建4 px粗轮廓线（＃2B3249）和24 px宽4 px粗水平像素细线（＃2B3249）的形状，该轮廓线距轮廓线底部边缘2 px。在灯

的顶部边缘添加一个8×6像素的椭圆（＃2B3249），在灯的右侧添加一个10像素高的2像素粗的字符串线（＃2B3249），选择

然后将所有上半部分的组成形状组合在一起使用Control + G键盘快捷键

第23步

通过使用12×6 px矩形（＃2B3249）添加小阴影来完成灯及其图标本身，将其放置在灯上部下方，通过选择并将其锚点推到

顶部来对其进行调整2像素（右键单击>变换>移动>垂直> -2像素）

完成后，选择并组合（Control + G）所有灯的组成形状，然后对图标的所有组成部分进行相同的操作

创建餐具柜图标

假设您已成功完成第一个图标的工作，请锁定其图层，然后向上移动至下一个图标（即第三个图标），并放大其参考网格，以

便我们开始使用

第1步

就像我们对第一个图标所做的一样，首先使用120 px宽4 px厚的笔触创建水平背景线，并将笔划颜色设置为＃2B3249，将其

与下层活动绘图区域居中对齐，相距8 px从其底部边缘开始

第2步

通过创建90×36 px矩形作为餐具柜，使用＃C68355对其进行着色，给出4 px厚的轮廓（＃2B3249）分组（Control + G），

然后将两者放置在背景线，距其上边缘的距离为6像素，距活动图形区域的右边缘的距离为4像素

第3步

使用矩形工具（M）创建一个78×24 px的形状，使用＃EAA871对其进行着色，然后将其居中对齐到刚创建的前部

第四步

使用Stroke方法给出我们刚刚创建的4 px轮廓的形状（＃2B3249），然后使用Control + G键盘快捷键将它们选择并分组在一

起

第5步

接下来，使用34×24 px矩形创建正面的内部较暗部分，使用＃2B3249对其进行着色，然后将其与较亮部分居中对齐

第6步

创建一个较小的26×4 px矩形，使用＃AA714B对其进行着色，然后将其居中对齐到上一步中创建的较大矩形

第7步

使用两条高8像素，高4像素的粗笔画线（＃2B3249）绘制小手柄，我们将其放置在内部较暗部分的侧面，在其右边缘和顶部

边缘留出4像素的间隙。完成后，选择所有内部部分的组成形状并将它们分组（按Control + G），然后对整个前端进行相同

的处理

第8步

使用18×36像素的矩形（＃C68355）和4像素厚的轮廓线（＃2B3249）创建餐具柜的侧面，将其放置在其左侧，确保轮廓线最

终重叠

第9步

接下来，使用带有圆形帽的2 px厚的描边（＃2B3249）绘制小小的木质纹理，将其分组（按Control + G键），并使用基础形

状遮盖它们（如果需要）剪贴蒙版（选择所需形状>右键单击>创建剪贴蒙版）。一旦完成，别忘了使用Control + G键盘快捷

键选择并组合所有侧面部分的组合形状，然后对餐具柜的组合部分进行相同的操作

第10步

通过创建带有4 px粗轮廓（＃2B3249）的8×10 px矩形（＃AA693C），开始在餐具柜的腿上工作，我们将其放置在其右侧下

方，与活动绘图区域的右侧相距8 px边缘

第11步

使用8×6 px矩形（＃2B3249）添加小腿阴影，通过选择其右下角并将其推到顶部2 px来进行调整（右键单击>变换>垂直> 

–2 px）。完成后，使用Control + G键盘快捷键将所有三个形状组合在一起

快速提示：在这一点上，您可能想知道为什么我们没有在腿上增加侧面部分。那是因为圆柱形状通常以扁平状态表示，您所看到的只是身体的正面。

第12步

使用我们刚刚完成的操作的副本（控件+ C>控件+ F）创建第二条腿，将其放置在其左侧6 px的距离处，然后选择并分组（控

件+ G ），然后将两者结合在一起

第13步

使用我们刚刚分组的腿的副本（控件+ C>控件+ F）创建剩余的腿，将其放置在餐具柜的左侧，与活动绘图区域的左侧相距8像

素边缘。然后，将它们放置到位后，使用Control + G键盘快捷键选择并组合餐具柜的所有组成部分

第14步

通过使用18×6 px矩形（＃8195C1）和4 px粗轮廓（＃2B3249）创建灯头来开始工作，将其分组（Control + G），然后将其

放置在侧板顶部，位于距活动绘图区域右边缘22 px的距离

第15步

使用6×24 px矩形（＃DCE5F4）和4 px粗轮廓（＃2B3249）创建灯的支腿，将其分组（Control + G），然后将其放置在刚创

建的基座上，将其居中对齐一对二

第16步

使用34×24 px矩形（＃8195C1）和4 px粗轮廓（＃2B3249）创建灯的上部，将其分组（Control + G），然后放置在腿

的顶端，使其轮廓重叠

第17步

通过使用8×24 px矩形和4 px粗轮廓（＃2B3249）创建较暗的部分，使灯具有一定深度，将其分组（按Control + G），然后

定位到其左侧，对之后是整个上部

第18步

使用高12像素，高2像素的笔触（＃2B3249）添加灯的小串开关，将其放置在上部轮廓的右下角

第19步

通过使用6×6 px的正方形（＃2B3249）添加小阴影来结束灯，将通过选择其右下角并将其推到顶部2 px来进行调整（右键单

击>变换>移动>垂直> – 2像素）。将生成的形状居中对齐到腿的顶部边缘，然后选择并分组（Ctrl + G）所有灯泡的组成形

状

第20步

使用8×8像素的圆圈创建小球，使用＃ED664C对其进行着色，给出4像素的轮廓（＃2B3249），分组（Control + G），然后

将其放置在餐具柜顶部，相距14像素

第21步

通过创建20×8 px的椭圆开始在小仙人掌碗上工作，使用＃DCE5F4对其进行着色，并为其指定4 px的粗轮廓（＃2B3249）。

将两个形状分组（按Control + G键），将它们放置在球的左侧，相距6像素

第22步

使用12×24 px椭圆（＃85BF82）和4 px粗轮廓（＃2B3249）创建实际的仙人掌植物，将其居中对齐到刚创建的碗，将其放置

在32 px的距离处从活动图形区域的顶部边缘开始

第23步

使用2×14 px椭圆（＃2B3249）添加植物的垂直细节线，使其居中对齐绿色形状可见表面的底部，通过使用“锚点工具”捏

住其顶部和底部锚点对其进行稍微调整如下图。完成后，使用Control + G键盘快捷键选择所有三个形状并将其分组

第24步

通过右键单击>排列>发送到背面，然后使用Control + G键盘快捷键选择并分组其所有组成部分，将仙人掌植物放在碗后，完

成图标的制作

创建床图标

现在我们到了该组的第三个也是最后一个图标，因此假设您已重新装满咖啡杯，继续前进到最后一层！

第1步

首先使用120像素宽，4像素厚的笔触创建水平背景线，并将笔触的颜色设置为＃2B3249，使其与下层活动绘图区域居中对

齐，并且距其下边缘8像素

第2步

放置背景线后，通过创建40×6 px矩形开始在床上工作，使用＃C68355对其进行着色，给出4 px粗轮廓（＃2B3249），分组

（Control + G），然后定位线顶部的两个，与基础活动图形区域的右边缘相距8像素

第3步

使用相同的4 px粗轮廓（＃2B3249）创建另一个更宽的60×6 px矩形（＃AA714B），将其分组（Control + G），然后定位到

上一步中形状的左侧，进行选择和分组之后所有人都在一起

第4步

通过创建48×16 px的矩形开始在床的上半部分的前部工作，使用＃EAA871进行着色，给出4 px的轮廓（＃2B3249），然后是

48 px宽，4 px的水平分隔线（＃2B3249）对齐其中心。完成后，将所有三个形状组合在一起（Control + G），然后将其放

置在底部的顶部，与活动图形区域的右边缘相距4 px

第5步

使用具有4 px粗轮廓（＃2B3249）的60×16 px矩形（＃C68355）创建侧面部分，将其分组（按Control + G），然后垂直居

中对齐床前，使其轮廓重叠

第6步

花一些时间，使用带有圆形帽的2 px厚的描边（＃2B3249）画一些小的木质纹理线，使用下面的矩形作为剪贴蒙版将它们分组

和遮盖（如果需要）（选择所需的形状>右键单击>制作剪贴蒙版）。完成后，使用Control + G键盘快捷键选择并组合所有侧

面部分的组合形状，然后对床的上部进行相同的操作

第7步

使用52×28 px矩形开始在床头板的前部工作，使用＃EAA871对其进行着色，给出4 px的轮廓线（＃2B3249），然后在顶部给

出52 px宽4 px的水平细节线，我们将分组（Control + G），然后将其放在床的上身顶部，使其与床的侧面对齐

第8步

使用8×28 px矩形（＃2B3249）和4 px粗轮廓（＃2B3249）创建床头板的侧面部分，将其分组（Control + G），放置在

我们创建的形状的左侧在上一步中

第9步

使用2 px厚的带有圆帽的笔划（＃2B3249），画出小的木质纹理线，分组（Control-G）并使用基础矩形作为剪贴蒙版（如果

需要）将其蒙版（选择所需的形状 >右键单击>制作剪贴蒙版）。完成后，使用Control + G键盘快捷键选择并组合所有侧面

部分的组合形状，然后对床头板的所有组合部分进行相同的操作

第10步

通过使用36×8像素的矩形创建床垫的前部区域来开始处理床垫，使用＃DCE5F4对其进行着色，给出4像素厚的轮廓线（＃

2B3249）分组（Control + G），然后将两者放置在床的上方前部

第11步

使用具有4 px粗轮廓（＃2B3249）的58×8 px矩形（＃B0BDD1）创建侧面部分，将其分组（Control + G），放置在

我们刚刚提到的形状的左侧在上一步中创建，将两个部分组合在一起

第12步

使用具有4 px粗轮廓（＃2B3249）的36×8 px矩形（＃DCE5F4）创建枕头，在其中心添加8 px高4 px宽的垂直分隔线（＃

2B3249）。组合（Control-G）所有三个形状，将它们放置在床垫顶部后居中对齐到床头板的前部

第13步

使用20×10 px矩形创建小毯子，使用＃85BF82对其进行着色，给出4 px厚的轮廓（＃2B3249），分组（Control + G），然

后将两者放置在床褥的前部

完成后，使用Control + G键盘快捷键选择和组合床的所有组成部分

第14步

通过使用20×12 px矩形（＃8991A3）和4 px粗轮廓（＃2B3249）创建其前部，开始小扬声器单元的工作，在其顶部将添加两

个4×4 px的圆圈（＃2B3249） ） 在每一侧。选择并分组（Control + G）所有四个形状，将它们居中对齐到床头板的前部

第15步

使用6×12 px矩形（＃6A7084）和4 px粗轮廓（＃2B3249）创建侧面部分，将其分组（Control + G），然后定位到刚创建的

形状的左侧在上一步中。完成后，请不要忘记选择和分组（Control + G）所有说话者的作曲部分，以免它们被意外分开

第16步

通过使用6×44 px矩形（＃8195C1），4 px粗轮廓（＃2B3249）和6 px宽2 px粗的水平分隔线（＃2B3249）创建灯腿

（Control + G），然后将其放置在床垫顶部，与活动绘图区域的右边缘相距24 px

第17步

使用26×22 px的矩形创建灯的上身，使用＃ED664C对其进行着色，给出4 px的粗轮廓（＃2B3249），将两者居中对齐到腿的

上部

第18步

通过创建一个14×8像素的椭圆（＃2B3249），开始向灯的上身添加细节，将其放置在刚创建的轮廓的顶部，然后使用26像素

宽，4像素厚的水平分隔线（＃2B3249）定位在距其2 px的距离处。通过使用18像素高，2像素粗的描边线（＃2B3249）添加

小字符串开关来结束本节，然后将所有组成的形状选择并分组（按Control + G）

第19步

通过使用6×6 px正方形（＃2B3249）创建一个小的对角阴影，使灯及其图标本身结束，我们将使其居中对齐到腿的上部，然

后通过选择并推动其右锚点对其进行调整到顶部2像素（右键单击>变换>移动>垂直> -2像素）。完成后，选择并组合（按

Control + G）所有灯泡的组成形状，然后对图标部分进行相同的操作

完成啦！