在今天的教程中，我们将在我们的标准流程中做一点小改变，和解决一个我想要做很久了的项目。如果你从标题中不能想象到，没关系，我们将创造5个简单的图标，你可以转变为办桌桌面图标，应用于任何你可能创造或者创造相关的未来的app中。
至于这个过程，我们会使用到你的几何形状的基本选择，结合对齐面板和一些其他工具，是你可能在每天的工作中已经使用到的
也就是说，抓一批新鲜的咖啡，让我们开始吧。
1.如何创建一个新的文档
因为我猜你已经有Illustrator并在后台运行,打开它并让我们设置一个新建文档（文件 > 新建 or Control-N）来使用如下设置：
-
- 画板数量：1
-
- 宽度：800px
-
- 高度：600px
-
- 单位：像素
并按 高级 标签
-
- 颜色模式：RGB
-
- 栅格效果：屏幕（72ppi）
-
- 预览模式：默认值
快速提示：你可能注意到一些细节，用像素网格来对齐新对象的命令不见了，这是因为我用的是新版CC 2017软件，一些大改变让Illustrator在形状对齐到像素网格的操作有了改变。
2.如何设置定制网格
因为我们要使用像素级工作流创建图标，所以我们要设置一个好用的小网格，这样我们才能够完全控制我们的形状——如果我们运行旧版本的软件。
步骤1
进入 编辑>偏好设置>参考线&网格 子菜单，并调节如下设置
-
- 网格线间隔： 1 px
-
- 次分隔线：1
步骤2
我们建立的我们的定制网格后，所有我们需要达到的目的是确保我们的形状看起来清晰，找到显示网格命令在视图菜单下，每次你将和像素预览命令转换进入像素预览模式。
现在，如果你是整个“完美像素工作流”的新手，我强烈建议你进入我的如何创建完美像素工作教程，不需要太多时间久将帮助你提高你的技术技能。
3.如何设置面板
创建完新建文档，通过使用一组面板来构建我们的项目是个好主意，因为这样我们可以通过一次聚焦一个图标来保持稳定的工作流。
也就是说,打开图层面板,并创建共六个图层,我们将重命名如下:
-
- 图层1：参考网格
-
- 图层2：电池
-
- 图层3：设置
-
- 图层4：消息
-
- 图层5：闹钟
-
- 图层6：照片
4.如何创建参考网格
参考网格（或基本网格）是一组精确的参考表面，这允许我们通过聚焦尺寸和一致性来创建我们的图标。
通常，网格的尺寸决定了实际图标的尺寸，它们应该是你开始一个新项目的第一个决定，因为你将一直想要从最小可能的图标开始，在此基础上创建。
现在，因为我们要创建图标并意图让它们中使用实际的Android操作系统，我们必须根据他们的
,并建立一个96*96 px 的定制网格，周围用 4 px 来填充。
步骤1
首先锁定参考网格层，然后用矩形工具（M)，并创建一个 96*96 px 橘色（#F15A24）形状，这将帮助定义图标的总体规模。
步骤2
添加另一个小一点的 88*88 px 颜色为#FFFFFF的矩形形状，这将作为我们的绘图区域，从而使我们用 4 px 填充周围。
步骤3
将2个正方形使用快捷键 Control-G 编组来组成参考网格，然后创建3个复制的正方形，之间的间隔距离为24 px，确保他们和画板中心对齐。
一旦你完成了,锁定当前图层并移动到下一个,我们将开始我们的第一个图标。
5.如何创建一个电池图标
我们将通过创建电池图标来开始这个项目，它可用于节能的app，甚至一个状态指示器，因为它非常基本。
也就是说，确保你在正确的图层(这将是第二个)，然后放大第一参考网格，这样我们可以开始。
步骤1
从创建一个图标背景开始，使用一个88*88 px 的圆，我们使用 #00C853的颜色，之后，将它与下面的画图区域中心对齐。
快速提示：因为Google足够友好地发出颜色标准设计规范，我最终混合和匹配一组值,应用于背景中。
步骤2
创建电池的主要部分用 24*40 px 的矩形，采用 #FFFFFF的颜色，然后将它和大圆中心对齐，距离底部边缘 20 px。
步骤3
将我们刚刚创建的形状转变为一个轮廓，通过翻转它的填充和描边（Shift-X），然后设置它的粗细为4 px，边角为圆角，从这个描边面板。
步骤4
创建第一个状态指示器棒，用一个 12*4 px矩形（#FFFFFF）或一个12 px 宽的描边（#FFFFFF）粗细为 4 px，我们将它与电池主体对齐，留一个 4 px 的间隔给它。
步骤5
增加2个指示棒，和另一个之间垂直叠放且距离为 4 px，之后将它们编组（Control-G）。
步骤6
通过添加顶部的帽子来完成这个图标，我们将用一个较小的 8*4 px 的矩形（#FFFFFF）来创建，将它与电池主体居中对齐，距离为 6 px（4 px的填充+ 2 px的上半部分）。
一旦你都做了，不要忘了选择并编组（Control-G）所有电池的组合形状，对所有的图标的组合形状做同样的事情。
6.如何创建设置图标
假设你已经成功地完成了第一个图标，锁定它的图层然后转移到下一个图层（应该是第三个图层）并让我们开始开始做设置图标吧。
步骤1
让我们做和先前图标一样的工作，从创建一个 88*88 px 圆的背景开始，颜色使用#2196F3，然后使它与绘画区域的中心对齐。
步骤2
开始做中间的滑块通过创建一个 4*32 px 的矩形或一个 32 px 的长线段，粗细设置为 4 px，颜色用白色（#FFFFFF）然后使它与大圆的中心对齐，距离大圆顶部边缘为18 px。
步骤3
创建这个滑块的状态指标用一个12*4 px的矩形（#FFFFFF），我们将它与先前创造的形状居中对齐，并与它的底部边缘距离为 4 px。
步骤4
添加滑块的较低的部分用 4*12 px 矩形（#FFFFFF），放置在状态指示棒的下方，然后选择并编组（Control-G）这3个形状。
步骤5
使用小一点的 4 x 12 px 矩形（#FFFFFF）创建顶部左边的滑块，我们将它与中心滑块的顶部边缘对齐，距离中心滑块12 px。
步骤6
创建一个 12*4 px 矩形（#FFFFFF）来增加滑块的状态指示器，我们将它与先前创建的形状垂直堆放，距离它的底部边缘 4 px。
步骤7
我们将通过创建 4*32 px 的矩形（#FFFFFF）来添加底部从而完成通左边滑块，并置于滑块底部。
一旦你完成，选择这三个形状并将它们编组（Control-G）就像我们在做中心滑块那样。
步骤8
创建一个左边滑块的复制形状（Control-C > Control-F），我们将放置在圆圈的右边，距离中心滑块 4 px ，完成这个图标。
一旦你完成，不要忘了选择并编组（Control-G）所有的滑块联结部分，这样他们才不会以外被分开。
7.如何创建信息图标
假设你已经移动到下一个图层（应该是第四个图层），放大第三个参考网格并让我们开始吧。
步骤1
用一个 88*88 px 的圆来创建图标的背景，颜色使用 #7C4DFF，然后将它与绘图区域中心对齐。
步骤8
创建消息框左边的主要形状，使用 32*24 px 矩形，我们将使用白色（#FFFFFF）然后放置在距离绘画区域和圆圈顶部边缘都是 20 px 的地方。
步骤3
开始调整我们刚才创建的形状，首先调出像素预览模型（Alt-Control-Y），然后在它的底部添加一个新的锚点，距离它左边的形状10 px，通过在左边点击获得添加锚点工具的帮助。
一旦你完成，不要忘了编辑像素预览模型通过快捷键 Alt-Control-Y。
步骤4
继续调整矩形，选择其左下侧锚点通过用直接选择工具（A），然后下拉 8 px 在移动工具（右击 > 变换 > 垂直 > 8 px）
步骤5
将产生的形状变成一个轮廓，翻转它的填充和描边（Shift-X），然后设置它的粗细为 4 px，和它的边角为圆角。
步骤6
冉家一个更小的文本行通过创建一个 10*4 px 的矩形，我们将用白色（#FFFFFF），然后放置在小信息框里，与它的左上角对齐，确保有 4 px 间隔的距离。
步骤7
使用一个 20*4 px 矩形（#FFFFFF）来添加一个更宽的文本行，我们将与先前创建的文本行左对齐，并与它的底部边缘距离 4 px。
一旦你完成了，不要忘记选择并编组所有的文本框的形状，使用快捷键 Control-G。
步骤8
创造一个复制（Control-C > Control-F）的小信息框的轮廓，然后对称 (右击 > 变换 > 对称 > 垂直)，放置在圆的右侧，距离绘图区域的右侧和大圆底部边缘的距离为 18 px。
步骤9
完成这个图标，通过删除文本框的重叠部分（红色强调），这样你最终有 4 px 的间隔在它和左边的轮廓之间。这样做，简单地添加一个新的锚点在它的顶部和左边缘，然后删除所有其他的。
一旦你做完，选择所有图标的联结部分并编组，使用快捷键 Control-G。
8.如何创建闹钟图标
因为现在你可能已经知道这个训练，锁定图层并继续下一层（这将是第五个），让我们开始报警图标。
步骤1
创建一个 88*88 px 的圆，然后用颜色 #3FFC07，让它与绘图区域中心对齐。
步骤2
创建这个闹钟的主体，用一个 40*40 px 的圆，颜色使用白色（#FFFFFF），然后将它与绘图区域中心对齐，距离圆圈的底部为 20 px。
步骤3
将我们刚刚创建的形状变成一个轮廓，通过翻转它的填充和描边，然后设置其粗细为4 px 在描边面板。
步骤4
选择钢笔工具(P)并绘制时钟的指针，使用4 px 厚度的描边，颜色设置为白色(#FFFFFF)，边角为圆角，确保与结束的锚点和大圆间有4 px 的距离。
步骤5
朝上移动几个像素，创建一个8*6 px 的矩形（# FFFFFF），我们将设置为与大圆的上面部分居中对齐，将它最终放置在与描边的上半部分重叠的位置。
步骤6
添加一个16*4 px 矩形(# FFFFFF)在我们刚刚创建的形状的顶部，然后将它们一起选择和编组(Control-G)。
步骤 7
完成图标，通过画出两个对角线段，使用4 px 描边，颜色设置为白色(# FFFFFF)。一旦你完成，选择并编组(Control-G)闹钟的所有组合形状，然后做同样的事为整个图标。
9.如何创建一个照片图标
进入你的第六个也就是最后一个图层，让我们完成这个项目通过创建照片图标。
步骤1
使用一个 88*88 px 的圆（#FF6F00）创建这个图标的背景，与绘图区域中心对齐。
步骤2
创建这个照片的主体使用一个 36*36 px 的矩形，用白色（#FFFFFF）填充，然后与背后的绘图区域中心对齐，并距离顶部边缘 20 px。
步骤3
将我们刚刚创建的这个形状转化为一个轮廓，通过翻转填充为描边（Shift-X），然后设置它的描边为 4 px，它的边角为圆边，从描边面板中。
步骤4
使用钢笔工具（P）绘制一条水平分割线使用一个 4 px 厚度的描边（#FFFFFF），放置在先前创建的形状中，距离它的底部边缘 4 px。
步骤5
使用同样的 4 px 厚度的描边（#FFFFFF）用圆角连接，开始会出第一个山通过放置你的第一个锚点在照片的左边边缘，距离先前创建的水平线为 10 px。
添加第二个锚点在距离第一个锚点的水平和垂直距离都10 px 的位置。完成这个山通过添加第三个和最后一个锚点在水平分隔线上，同时按住 Shift 键画一个完美的对角线。
步骤6
画第二个小的山,使用相同的 4 px 厚度的描边(# FFFFFF)，一旦你完成，选择并编组所有照片组成的形状，使用快捷键 Control-G。
步骤7
创建图标的使用 28*6 px 矩形底部分，我们将使用白色(# FFFFFF)，然后设置为与照片轮廓的较低的部分居中对齐，距离为 4 px。
步骤8
完成这个图标，通过把我们刚刚创建的形状变成 4 px 厚度的轮廓(# FFFFFF)用圆角连接，然后调整它通过添加一个新的锚点在它顶部边缘的中心，我们将它删除为了打开路径(以红色突出显示)。
选择最终的形状和其余的照片的组成元素并将它们编组(Control-G)，然后对图标的组成部分做同样的操作。
完成了！
我希望你设法跟上每一步骤中，最重要的是在这个过程中学到新的有用的东西。也就是说，我会在下一个教程里和你见面！
