文件夹图标设计

2018-12-21 本文已影响0人开花了

转载作者：寻图链接：https://www.jianshu.com/p/8d786adaf701 來源：简书简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

创建新文档

启动Illustrator进行File> New（或使用Control-N键盘快捷键）操作来创建一个新文档，进行如下操作：

画板数量：12

间距：32像素

专栏：4

宽度：64像素

身高：64像素

单位：像素

调整“高级”选项卡：

色彩模式：RGB

光栅效果：屏幕（72 ppi）

创建新文档

设置图层属性

建立新文档，我们需要建立几个图层，以便我们可以将图标与参考网格分开。要执行此操作，只需打开“图层”面板，然后创建总共两个图层，我们将重命名，如下所示：

第1层>参考网格

第2层>图标

设置图层属性

创建参考网格

步骤1

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

创建参考网格

第2步

创建另一个较小的56 x 56像素正方形（#FFFFFF），作为有效绘图区域，从而为我们提供全面的4 px保护填充。完成后，使用Control-G键盘快捷键选择两个形状并将它们组合在一起。

创建绘图区域

第3步

使用我们刚刚完成的工作的副本（Control-C）添加剩余的参考网格，使用（Control-F）粘贴到相邻的画板上。锁定当前图层，然后再继续下一步。

创建空白画板

创建空白文件夹

当我们完成了参考网格的创建，我们可以继续下一层（这将是第二层），我们开始创建十二个图标需要使用的空白文件夹。

步骤1

返回第一个画板上，然后使用56 x 40像素矩形创建文件夹主体的主要形状，使用＃FFCD50进行着色，然后将中心对齐到绘图区域，将其定位在距离为距离底边4 px。

第2步

使用20 x 8 px矩形（＃FFCD50）添加较小的上部，定位在上一个形状的顶部，将其对齐到其左边缘。

第3步

使用36 x 4 px矩形创建后部，使用＃FFA852进行着色，然后定位到主体的上部，对齐到右边缘。

第4步

创建两个2 px高的矩形（＃FFE164）给文件夹添加高光，调整边缘长度。完成后，不要忘记使用Control-G键盘快捷键将做好的图像组合在一起。

第5步

给刚刚完成的文件夹创建副本（Control-C> Control-F）填充剩余的画板，完成后继续下一步。

创建副本

创建音乐文件夹图标

步骤1

创建6 x 4 px的椭圆创建音符头部的主要形状开始创建音符，使用＃E58C3C进行着色，然后定位到下面的文件夹，距离其左边缘19 px底部11 px。

第2步

创建椭圆的副本（Control-C）来给我们刚刚创建轮廓的形状，将创建的图像粘贴（Control-F），然后调整边缘，将边缘宽度设置为2像素。完成后，使用Control-G键盘快捷键选择并将两者组合在一起。

第3步

创建12 px高2 px宽的直线（＃E58C3C）添加音符柄部，我们将其定位到参考图像中看到的椭圆的右锚点，并将它们组合在一起（Control-G）继续下一步。

第4步

给我们刚刚完成图像创建副本（Control-C> Control-F）将其向右移动12 px的距离，然后在另一个的顶部向下移动2px的距离（右键单击>变换>移动>水平> 12像素>垂直> -2像素）。

第5步

创建一个轮廓2 px的（＃E58C3C）12 x 4 px矩形（＃E58C3C）和音符柄部叠加，将图像进行分组（Control-G），如参考图像中所示。

第6步

完成当前图标，双击创建的图形将其隔离（右键单击>隔离所选组），然后使用直接选择工具（A）选择锚点，将它们推到顶部2 px距离。完成后，按Esc键退出隔离模式，然后选择并组合（Control-G）所有符号的组成形状，然后对整个图标执行相同操作。

创建视频文件夹图标

完成第一个图标后，跳到下一个图层，开始处理第二个图标。

步骤1

创建一个16 x 18像素的矩形，使用＃E58C3C进行着色，然后定位距文件夹左边缘21 px的距离，距离文件夹的左边缘11 px。

第2步

使用添加锚点工具（+）创建新锚点添加到其右边缘的中心，将我们刚刚创建的形状转换为三角形。

第3步

使用删除锚点工具（ - ）删除其右角锚点，继续调整形状，创建一个指向右边的三角形。

第4步

给刚刚创建的三角形添加2 px宽的轮廓（＃E58C3C），将两者组合在一起（Control-G），然后对整个图标执行相同操作。

创建照片文件夹图标

步骤1

创建18×14像素的矩形，使用＃E58C3C着色，然后调整到距离底部11像素左边缘15像素的位置。

第2步

将形状转换为三角形，方法是使用“添加锚点工具”（+）在其上边缘的中心添加锚点，使用“删除锚点工具”（ - ）删除其侧边锚点。使用描边创建2 px宽的轮廓（＃E58C3C），使用Control-G键盘快捷键选择并将两者组合在一起。

第3步

创建12 x 8 px矩形（＃E58C3C）参照上一步的方法添加一个较小的三角形。

第4步

完成当前图标，创建4 x 4 px圆（＃E58C3C）和2 px宽轮廓（＃E58C3C）添加太阳的形状，分组（Control-G），然后将其放在较小的三角形上方。完成后，不要忘记使用Control-G键盘快捷键选择并分组。

创建联系人文件夹图标

步骤1

首先创建18 x 6 px矩形创建人下半身的主要形状，使用＃E58C3C对其进行着色，然后将中心对齐到下面的文件夹，定位在距离其底边11 px的位置。

第2步

打开“变换”面板并在“矩形属性”中将其顶角的半径设置为4 px，调整我们刚刚创建的形状。

第3步

使用描边为上一步创建的图形添加2 px宽的轮廓（＃E58C3C），使用Control-G键盘快捷键选择并将两者组合在一起。

第4步

创建2 px宽轮廓（＃E58C3C）的8 x 8 px圆（＃E58C3C）作为头部，分组（Control-G）然后将两个中心对齐到较大的主体，将它们定位在距离身体2px的上端。完成后，请确保选择并分组（Control-G）所有图标的组成形状，然后再转到下一个图标。

创建书签文件夹图标

步骤1

使用矩形工具（M），创建一个12 x 18像素的矩形，我们将使用＃E58C3C进行着色，然后将中心对齐到较大的文件夹，将其定位在距离其底边11 px的位置。

第2步

通过使用添加锚点工具（+）将新锚点添加到其上边缘的中心，然后选择并使用移动将其推入内部6 px的距离来调整我们刚刚创建的形状工具（右键单击>变换>移动>垂直> -6 px）。

第3步

通过使用描边为上一步创建的形状建立2 px宽的轮廓（＃E58C3C），选择并分组（Control-G）两者，然后对整个图标执行相同操作，完成当前图标。

创建安全文件夹图标

步骤1

创建10 x 12 px矩形做为钥匙孔的下半部分，使用＃E58C3C进行着色，然后将中心对齐到较大的底层文件夹，放到距离其底边11 px的位置。

第2步

通过使用直接选择工具（A）单独选择其顶部锚点，然后使用方向箭头键将它们推入内部4 px，调整我们刚刚创建的形状。

第3步

使用描边为结果形状创建2 px宽的轮廓（＃E58C3C），然后使用Control-G键盘快捷键选择并将两者组合在一起。

第4步

创建10 x 10 px的圆（＃E58C3C）并添加2 px宽轮廓（＃E58C3C）添加钥匙孔的上部来完成图标，我们将分组（Control-G）然后定位在在参考图像中。完成后，将创建图形进行分组（Control-G）。

创建上传文件夹图标

步骤1

首先使用4 x 6 px矩形（＃E58C3C）创建箭头的下部，给该矩形创建2 px宽的轮廓（＃E58C3C），对其进行分组（Control-G），然后将中心对齐到底层文件夹，将它们定位在距离底边10 px的位置。

第2步

使用18 x 12 px的矩形创建箭头的主要形状，并使用＃E58C3C进行着色，然后将中心对齐到之前的形状并定位到参考图像中看到的上边缘。

第3步

将我们刚刚创建的矩形转换为三角形来完成图标，方法是使用添加锚点工具（+）将新锚点添加到其上边缘的中心，然后使用删除锚点工具（ - ）。使用描边为刚刚创建的形状提供2 px宽的轮廓（＃E58C3C），选择并将两者组合在一起（Control-G），然后对整个图标执行相同操作。