这个文章有点长，大家请耐心看。先来一段索然无味又老生常谈的话吧，呵呵~~~嫌麻烦的朋友可以直接跳过。当我们看到一个教程的时候，大家会想到些什么呢？马上开练？做完之后呢？本狼建议：在做之前，先看看效果图，想想自己能不能在没有教程的前提下把这个案例做出来？眼前的这个图形由几部分组成，在软件里该怎么实现？步骤是怎么样的？好好思考一番后，再动手做，有目的的去看教程。
看教程的目的是什么？无非就是熟悉软件+绘制技巧（或方法）这两个了吧？吸收别人分享的经验转化成自己的知识，这样才算达到了临摹教程的目的了。所以，我会先去自己思考，然后尝试着去做，遇到难题了不会了再去看教程，这样吸收的快进步也快。
设计思路
首先我们得想好，这玩意该怎么做？先来看看手机的效果图吧：
从这张图里我们可以看到，手机由上下两部分组成，上面是屏幕，下面是翻盖和翻盖上的音乐播放按钮。那么我们画草图的时候就思路就很清晰了，也把图标分成上下两块。为了增强效果，我又加了顶部的厚度部分（手机我有，厚度部分我是照着手机做的）
先别急，不要忙着打开PS，我们先拿出纸和笔，画个草图出来并简单区分下明暗，比如这样：
······ 你们心里一定在想：卧槽！这特么是什么玩意？这二货作者真的能画出效果图那样的图么？他不会是抄袭的吧？我能解释的是：我手绘退步了，要不是为了说明下设计思路，我才不会自曝不足，哼╭(╯^╰)╮！！
需要注意的是，手机原型是长宽比例大概是1:3，而图标是1:1，那我们该怎么做呢？那有些地方变形是难免的，但是变形也不是盲目的变形，得知道会牵扯到哪些组成部分，该怎么变，和其他组成部分怎么组合才和谐？需要变形的部分内部有没有元素要跟着变，该不该变？这都要考虑好。
绘制图标
整个好看又能突出主体的背景。
我发布的相关作品中，背景太暗，图标也是灰色系，而且比较暗，这就没了对比，无法突出主题，犯了个低级错误。得亏美女大白（芷云白兔）同学一针见血的指出，所以这里改进下。背景不用浮夸，能突出主体又不抢镜就行。具体怎么样，大家随心所欲。
Part1：用形状和颜色来区分各区域
主体
顶层厚度
屏幕
按键
翻盖的轴
翻盖的把
Part2：丰富各区域的细节
然后根据手机效果图，我们把细节部分（不加图层样式）丰富起来
看着是不是有种扁平化风格呢？原谅我一下子就到了这一步，因为我觉得……就添加么，实在没什么好说的，不懂的同学请来私聊我。
注意给中间那层灰的加个1像素的内描边
以上所有的细节建议用各种形状工具来画，包括那个钥匙图案也是
Part3：逐个添加图层样式
接下来，我们从上到下，分别给各组成部分添加图层样式并丰富细节。有点无聊，闲话少叙，开整！
顶层的部分：
顶层厚度
添加并调整不透明度的节点中间2个节点不透明度为0,外面2各节点的不透明度为60（位置哥们几个是不是觉得很难调整啊，左右很难控制对不对？没关系，本狼偷偷你，你把鼠标放到位置的数值那，点一下然后滚动鼠标滚轮就可以很方便的调整了，这个方法之后我们也会用到，我一直用这样的方法来微调，或者用键盘的上下键也行。）
顶层的金边
（中间亮点的黄色，两边深一点的橙色，方法跟之前一样）
锁频键
锁屏键由两部分组成，按键和槽，这部分其实挺简单的。按键用一个个圆角矩形组合起来就可了，然后添加图层样式。槽就颜色暗一点就可以了。
槽的颜色：#212121；
饰品圆孔的颜色：#191919；
阴影颜色为：#000000；
投影颜色为#FFFFFF
顶层部分算是绘制完成了，有些地方写的不详细，因为我觉得小伙伴们应该可以自行脑补出来对么？
屏幕的部分：
外围的框
我们给外围的框添加一个小小的投影
投影颜色：#000000；
屏幕主体
然后加上一个音乐播放器的界面。这里要注意的是，原本手机屏幕的尺寸是宽＜高，我们因为做成图标变形后，变成宽＞高。虽然屏幕的长宽比例、尺寸变了，但是界面还是不能变的，所以得思考怎么做合理。
