最近上微博，貌似UI设计灰常热，偶然看到国外一组蓝色小图标，被这种简洁干净的风格吸引了，于是已经尝试做了一下，今天跟大家分享一下经验！我尽量把教程做的详细简单些，高手们可以尽情跳过一些步骤！欢迎大家踊跃交流！
这个是当时看到的老外的图
开始教程之前，大家跟我喊一句，
钓鱼岛是中国的！！！
Let’s go！
1、新建文档800*400，72dpi
2、为了规范和制图方便，我一般会调出参考线（ctrl+；）和网络（ctrl+’），我们打开编辑-首选项-参考线、网格和切片菜单，进行网格设置，跟本次教程文档大小（800*400）相配合即可（每个大格间距50），这里设置间隔50，子网络5.
3、将背景转为图层并填充蓝色 4c9eeb
4、我们为背景加入一些颗粒效果。
滤镜-杂色-添加杂色
5、给背景加入一些光的感觉。在图层混合模式里改动。
6、添加后的效果。
颗粒和光的感觉有了，我们现在加入自制的“格子”。
格子虽然不复杂，但经常看到有的朋友深受其困扰，总是奔波于下载各种样式，其实这种图案触类旁通，我带大家做一下~
7、新建文档，50*50，72dpi，透明。
如果我看教程，那我一定会想凭什么是50？？有的作者可能不会解释，于是我们模仿的时候，只会照搬而不懂原理，导致下次还是不会设置。
这种深深的不安感会在我等菜鸟心中埋下，会很恐惧~不管你们是不是这感觉，我反正是。。。。我的菜鸟同胞们，李菊福不？？？！！
50的由来是我们上面根据网格设置的哦，50刚好一大格，不是凭空来的，一句话，设计从文档大小设置就开始了！
8、选择选区工具，如图设置。
9、调出网格（ctrl+’），用刚刚设置好大小的选区，画出四个竖线，由于网格线的存在，对齐很容易。
10、新建编组，外框，在左侧画出一条竖线。
11、选择选区工具，如图设置。Bingo！要画横线了
12、如图，内部四条横线在中间，外框是最上边的横线。
将内部组的不透明度降低到50%。
这样设置可以模拟出外框粗，内框细的效果，参见PS自带网格~
13、ctrl+alt+shift+e盖印图层（注意要把背景图层隐藏掉~，我们要做的是背景透明的），
打开编辑-定义图案，如图键入名字即可。
好了这个文档就可以关掉了~
14、回到之前的背景图层，加入图案叠加，选择刚刚自己做的图案，如图设置~
效果看起来还不错吧，如果想让网格再浅一些，可以把不透明度再拉低。
15、做好这几步之后的效果图。
16、OK，这个背景搞定之后，开始画图。
图标我就以三角形开始，做出一个由三角形变化而来的图形。
会进行一些切割，过程中基本的图案制作操作都会涉及。
选择多边形工具
17、三角形的设置。
18、建立一个三角形之后，我们摁下键盘上的A键（路径选择工具的快捷键），ctrl+c复制一份，然后ctrl+v粘贴，ctrl+t进行旋转，如图~
选择第一种叠加方式进行组合。
19、我们继续摁下键盘上的A键，选择这个6角图形，ctrl+c复制一份，然后ctrl+v粘贴，ctrl+t进行缩放。
为什么不会镂空？？因为此时设置还是第一种方式组合，我们选中小6角形，改为第二种方式组合。
20、效果图~小图标很可爱，虽然站酷上的同志们都爱重口味。。。
21、下面添加图层样式
别担心，我会把为什么这样设置告诉大家。
Don’t worry ,be happy.（有知道这句话出处的战友们，吱一声！！你懂的）
20、先加入投影，因为背景颜色比较浅，如果先上渐变叠加，我们叠加浅色的不容易看出来色彩是否合适，先加入投影把主体和背景分离出来~
21、现在加渐变（大家可以试试把投影层去掉，是不是没法判断颜色了？所以不是因为投影排在第一个就第一个设置它哦！！）
22、添加内阴影，可以和上图对比一下，看作用在哪里，大家来找茬~
23、添加一个描边，看着更舒服。渐变的颜色是#4c8ab4，#60b6ee
24、效果图
基本内容就是这些，下面给大家分享一下我画这种简单小图标的方法。
1、 我以小信封为例，先画一个矩形，添加描边。
2、新建图层，用画笔工具涂一下信封的样子。
3、 白线把黑色矩形划分之后，黑色部分就是我们需要勾出的图形，再进行切割即可~
前些天下载的方正经黑体很适合这风格~
大家尽情发挥想象力吧！！
