UI教程案例 |蓝色水滴小球

　　今天转载一篇UI设计的具体教程，通过图文的形式教大家制作一个水滴球动效效果，虽然还很粗糙，但是在增加视觉表现力的时候，一定是是少不了动态的icon，所以大家一起学起来吧(☆_☆) （转载自微信公众号：@思品汇）

　　先来看一下成品效果图：提示是使用Aftereffect软件制作哦！

有木有一种蓝色球融化掉的感觉，滑滑的，柔柔的...

　　其实用一般交互设计师的思维，最后做出的成品，信息架构分明，排版合理，色彩搭配合理！

　　课程知识点：使用蒙版实现相溶效果。

教程开始：

1、新建合成400px*300px，持续时间4s，（因为我要上传到Dribbble，所以这个尺寸大家可以随意。）

2、ctrl+Y,新建纯色图层，重命名，颜色调整为你预设的颜色（也根据项目的定位，可以适当增加多一两种其他具有视觉冲击的颜色），在案例这里我设置为“蓝色”

3、选择我们刚创建的“蓝色球”纯色图层，ctrl+shift+N，创建第一个蒙版，起名为“蓝色海洋”

4、点击“蓝色海洋”蒙版前面的三角形按钮，展开后，选择“蒙版路径”右边的“形状”，把蒙版重置为“椭圆”

5、选择“选取工具”，调整“椭圆”为我们想要的形状

6、使用“椭圆工具”，创建第二个蒙版，起名为“球1”，方式选择“相减”，移动到“蓝色球“上方，为制作下落准备

　　上面的准备工作做好之后，我们来做相溶的效果，我们将用到：毛边和高斯模糊 这2个效果控件

7、在图层最上方，新建2个调整层，分别命名为：毛边和高斯模糊，使其效果应用于下方的所有图层。

8、分别对”模糊“和”毛边“2个调整图层，做”高斯模糊“和”毛边“效果

　　高斯模糊：效果菜单->模糊和锐化->高斯模糊

　　毛边：效果菜单->风格化->毛边

9、这一步，开始制作，水滴滴落的效果，选择蒙版”球1“，使用”蒙版路径“创建第一个关键帧，后面的不同关键帧，调整”球1“的不同形状和位置，即可完成滴落的效果

10、同样的方法，我们还可以制作出更多的水滴滴落效果，这里就不再重复说明了。
　　制作方法就交给大家了，不同的思路可以制作出不同的动效效果，AE的强大，在于你的思维和想法，只有你想不到，没有AE做不到的。

　　欢迎加入Gad腾讯游戏美术群，群号码：167422913