第023期 | 页面还原讲究的就是还原度
上期的页面还原貌似没有朋友私信或者回复，可能是涉及到动画不好私信，也可能是难度大一点，还原度不够，页面还原最重要的就是不择手段地提高还原度。
所谓还原就是每一个元素都追求一致，还原度越高，能感受到的东西就会越多，包括颜色，字体，大小比例，效果等等，这篇文章是一个上期页面还原的详细的教程，本期的页面还原仍然是这个教程的内容。
先看一下还原的内容，有两个页面和相应的动画（页面内容不作考虑，只还原幻灯片效果，动画呈现的是演示的次序关系）：
先还原比较简单的第二个页面，内容我就简单套了发布会的演示次序：工业设计>>操作系统>>硬件配置，首先是背景，背景不是纯色背景，而是一个中心渐变，用PS拉一个渐变即可，新建一个1920*1080的RGB模式文件，然后新建一个图层用渐变工具按照下图指示拉中心渐变：
光圈1：RGB为254 253 251，位置大概在图示圆的中心位置；
光圈2：RGB为246 239 231，位置在右下角；
用中心渐变目的是模拟光照，后面有类似阴影的处理，阴影依赖于光线的方向；
下一步加上三个文本框：
文本颜色：RGB值为173 162 147；
文本大小：字号40；
文字位置：中部对齐，三个文本框组合居中对齐；
中间四个字『操作系统』的内阴影效果：
阴影颜色：黑色；
透明度：20%；
模糊：12磅；
角度：270度；
距离：6磅；
下一步就是进一步强调中间的四个字『操作系统』，上面的矩形条很简单：
颜色：RGB值为254 113 0；
大小：高度0.21cm，宽度6.32cm；
位置：居中对齐，在四个字正上方1.7cm左右；
而下面的发光貌似难一点，见下图的流程：
这几个操作中渐变光圈注意调整透明度第一个光圈透明度70%，第二个光圈透明度100%，柔化边缘数值为10磅左右，最后得到还原完成的页面：
三者之间的次序关系取决于后面的这些强调的效果加在哪一部分，接下来是还原第一张幻灯片：
背景由两部分组成，上面小半是经过虚化的图片，下半是一个渐变，用一张图片为例：
在图片工具栏下的艺术效果中的虚化，如上图所示，虚化半径60左右，数值越大越模糊：
然后用虚化的图片作为背景填充，并且将图片颜色调整亮度-50%：
然后加一个渐变填充的矩形框：
光圈1：RGB值为107 97 90，位置0%
光圈2：RGB值为142 135 130，位置50%
光圈3：RGB值为186 181 178，位置100%
大小：高度11.3cm，宽度33.87cm
背景不这样处理也没什么问题，下面是比较复杂的部分，先添加一个圆角矩形长宽为8cm*8cm，去掉边框，将圆角调得比较小，然后加入一个矩形大小为2cm（高）*8cm（宽），将两个形状对齐，然后作布尔运算：
得到一个高宽比为3:4的形状，复制一份，然后旋转180，旋转时按住Shift，接着复制两份：
接着改变填充类型，记住，填充为图片时一定要先将图片剪裁和几何形状比例一致，比如此处剪裁为4:3，800px*600px等：
添加中间的橙色矩形：
大小：1.91cm*5.46cm
填充颜色RGB：244 92 69
中间的文本：Arial32号白色
动画中的阴影并非阴影效果，其实是一个矩形框：
柔滑边缘60磅
大小17.64cm*12.56cm
填充颜色为黑色，透明度为30%
图层顺序在背景上方，其他几何形状下方
同理出现的橙色发光也是一个矩形：
柔化边缘60磅
大小9cm*9.69cm
填充颜色RGB：244 92 69
图层顺序在『02』下方
还差一个移动的圆状“button”和动画效果添加，参考源文件，把动画窗格打开，在动画窗格栏下双击一个动画，就会显示动画效果和计时设置：
动画并不多，但是动画的时间设定，延时多少之间有数字上的关联，这是需要理清楚的部分，完成之后：
页面还原一定要注意还原度，还原度不够意义会下降很多，还原后的效果和原效果比较，这就和找不同的游戏是一样的，一下能看出很多不同，就没什么意思了。
回复dribble获取源文件
原文是锤子动画教程
联系客服
