5分钟设计一个iCloud图标教程
PSD参考文件链接：http://pan.baidu.com/s/1DBJem 密码：9djs今天的教程是来画一个icloud图标，貌似也是锤子rom里面的，从网上面看到的，看了下，不难，就临摹了一下，大家可以跟着一起来学习下。很完记得交作业。
先来看下效果图：
http://pic.16xx8.com/allimg/150406/jc09856978_01.jpg
高大上的分解图来了，一看就会了，哈哈。
http://pic.16xx8.com/allimg/150406/jc09856978_02.jpg
看完分解图，是不是觉得很简单了呢，大家临摹的时候可以多多的这样分析思考一下，难度会降低很多哦。
1、新建画布1000*1000，添加纯属渐变。
http://pic.16xx8.com/allimg/150406/jc09856978_03.jpg
2、用圆角矩形工具新建一层，命名为底板，并添加图层样式。
http://pic.16xx8.com/allimg/150406/jc09856978_04.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_05.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_06.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_07.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_08.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_09.jpg
好了，大概效果出来了，接下来我们再细化一下底板，添加高光和底部反光，方法很简单，两个圆角矩形相减就能得到开关，然后羽化一两个像素。
http://pic.16xx8.com/allimg/150406/jc09856978_10.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_11.jpg
记得CTRL+G给他们编个组，命名为底板。
对了，我还在这里叠加了一层高光，做法就是形状直接羽化然后创建剪切蒙版，分解图上面就能看出来。
3、搞定底板后，我们开始来做云，形状工具画四个正圆加一个矩形，大小自己把握，不过要注意的是要保持他们在同一个图层。命名为云层底，保持图层整洁。图层样式如下，数值仅供参考。
http://pic.16xx8.com/allimg/150406/jc09856978_12.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_13.jpg
接下来我们要做的是云层中部，这里我的方法比较笨，我是把底层的每个圆缩小二十像素，尝试过直接自由变换缩小，但是效果很差，每个圆衔接的地方对不上，所以用笨的方法，有知道简便方法的同学还请告诉我。中层就不用加图层样式了，填充颜色为e9e9e9就行了。
http://pic.16xx8.com/allimg/150406/jc09856978_14.jpg
顶层的方法也是一样，中层基础上再缩小10像素即可，添加内阴影和投影。
http://pic.16xx8.com/allimg/150406/jc09856978_15.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_16.jpg
http://pic.16xx8.com/allimg/150406/jc09856978_17.jpg
其实做到这里就差不多结束了，还有最后一步就是给云层底部加个反光，也是布尔运算减去顶层再羽化。
http://pic.16xx8.com/allimg/150406/jc09856978_18.jpg
教程编号:137160 作者：UISTAR 出处：站酷
页:
[1]