哈喽小伙伴们~,想必大家对“新拟物”这个词已经不陌生了吧，是的，它就是今年网上介绍的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