哈喽小伙伴们~,想必大家对“新拟物”这个词已经不陌生了吧，是的，它就是今年网上介绍的2020年设计的一个趋向（当然这也大神的预算，实际是不是2020年的设计趋势得过了2020年才知道。）
那么“新拟物”是什么我这么这里就不做过多介绍，想了解的小伙伴可以阅读《2020年即将流行的新拟物风格，你还不知道是什么？》，我们今天的重点是：这种新拟物设计技巧以及与AE结合使用。
注：本文仅是个人一些方法，有不恰当和不对的点还请多多包涵。
教程简介
- 涉及知识点
- 新拟物设计处理
- Ae表达式控制-滑块控制应用
教程难度
中等
使用软件
XD、AE、AI
步骤一：xd基础排版
1、在xd新建一个750*1624px画板并设置背景色#E8E9EB
注：一下色彩仅做参考，可根据个人爱好给与颜色
2、在Ai画好“温度计”、：“风速”和“开关”三个icon备用
3、在xd建好的画板排好版（文字内容自己喜欢就行）
注：字号依次：120px、64px、40px；字距分别为：165px、-24px、120px；字体颜色分别是：#2E3136和#BFC0C3。以上内容要记好，后面在ae会用到
步骤二：拟物风格设计
先简单介绍：新拟物设计三个重点：1、亮阴影与暗阴影应用；2、色值的选取；3、背景模糊小技巧的使用
1、新建344*344px圆，然后复制两个，新复制的圆一个往上方移动（上32px、左32px），另一个往右下方移动（下32px、右32px），将新建的圆（没移动的圆）置于最上层
2、给三个圆赋色，左上圆是亮阴影，所以我们应该给与偏白的色值（#FAFAFA），右下圆是暗阴影，给与偏暗的色值（#D1D1D1），最上方圆直接给与黑景色（#E8E9EB），然后将三个圆直接编组。
3、重点来，这一步是见证奇迹的时刻，先新建一个574*574px矩形（颜色可以随意给），然后给矩形勾选“背景模糊”，设置参数：数量：30；亮度：0；不透明度：0，最后将矩形跟编组的圆对齐，在画板排好版。
4、再复制一个矩形去掉“背景模糊”，并至于最底层（这个步骤很重要，关系到后面切图的效果），然后所有矩形和圆进行编组。
步骤三：同样方法制作按钮的另一种状态
1、按钮有开关两个状态，当处于打开状态，那个按钮状态也会跟着改变，而这里设计方法也很简单，那就是将左上圆跟右下圆的色值进行调换即可；同时需改变开关按钮的颜色（#29D4F8）
2、按钮下面的提示文字也随便改变状态
好了，到这里我们设计搞我们就制作完成，接下来就是导出我们的素材
步骤四：素材切图导出
1、将“返回”、“温度”、“风速”和“开关按钮”命名导出
这里我们留个作品，作业：制作一个暗黑模式的新拟物风格设计稿
接下来，我们需要转战AE
步骤五：打开AE，布局排版
1、在Ae新建750*1624px合成，并设置背景色为设计稿的背景色（#E8E9EB）
2、将我们设计稿内容在Ae中排好版
3、部分文字我们需要断开来分：温度度数和倒计时
4、将一些我们不需要动层编组，也就是将其预合成并命名为“无需动”
步骤六：新建虚拟点击效果
1、新建100*100px预合成，并命名为“点击”
上面圆1不透明度为40%，下面圆2不透明度为20%
2、将预合成“点击”拖入我们的项目中使用
步骤七：制作动态
1、先将文字层“倒计时”、“达到室温”和“保持室温”隐藏，将四个文字图层的不透明度在第一帧打上关键帧并修改不透明度为“0”
2、制作虚拟点击效果，先是一段小位移，然后再是按压效果
位置关键帧数值（始末）：110，884/379，1160
缩放关键帧数值（始末）：100%/80%/100%
不透明度关键帧数值（始末）：100%/0%
点击效果我们制作完成，当我们点击完成同时，我们的开关跟相关的温度等数值也就需要跟着变化
3、制作开关按钮效果，关的状态到开的状态的切换
[开关_关]图层不透明度关键帧数值（始末）：100%/0%
4.1、温度变化与倒计时效果制作，这里我们会用到表达式控制
步骤是：效果和预设——表达式控制——滑块控制——拖动到温度（28）图层
4.2、将文字（28）图层“源文件”的属性关联器拖动到“滑块控制”
4.3、在“源文件”的表达式粘贴表达式：.value.toFixed(0)
注：括号的数值代表小数位个数
4.4、设置“滑块控制关键帧”，也是室温随着空调开启而下降
滑块控制关键帧数值（始末）：28/22
5、同样的方式我们设置我们的倒计时效果
随着我们时间减少和室温下降，直到最后到达合适室温，那么我们提示问文字层也就需要跟着切换
6、提示文字层切换
先设置[倒计时]文字图层不透明度关键帧数值（始末）：100%/0%
接下来是[达到室温]文字图层不透明度关键帧数值（始末）：0%/100%
最后是[保持室温]文字图层不透明度关键帧数值（始末）：0%/100%
好了，我们教程到这里也就结束，接下来就是渲染然后转成gif图，平时闲着也就别浪费时间，大家加油互相学习。
最后我们看一下效果图，最后也将暗黑模式留给大家当作业练习。谢谢！
Powered by Froala Editor