SVG动效设计 | 用PS这样实现Apple左滑引导的GIF！
不会设计的运营还在苦苦等待设计师作图，学了上次直播《SVG设计技巧系列课2》的运营也该自己作图了。
小品哥偷偷告诉你：
看完这篇教程，
你就会感慨做GIF真不难！
以Apple的左滑动效为例：
案例原文：快，两新 iPhone 能预购了。
????教程最终效果????
拆解
GIF的动效分为三部分：
1、在右侧的箭头从暗变亮闪烁
2、箭头变到最亮时滑到了左侧
3、箭头滑到左侧时开始从亮变暗闪烁
通过研究案例效果，确定制作方法：箭头闪烁和移动的效果通过改变透明度和位置添加过渡帧即可实现。
制作
1、打开PS，新建640px×53px的画布，背景色选黑色；
2、选择文字工具，输入“左滑看iPhone 12”；
3、按住shift键鼠标点选文字和背景图层，然后点居中对齐；
4、选择视图-新建参考线，选垂直，输入数值60，就会在左侧60px的位置新建一条参考线；
5、选择“视图-新建参考线”，选垂直，输入数值540，就会在左侧540px右侧60px的位置新建一条参考线；
6、选择矩形工具，按住shift键用鼠标左键绘制一个合适大小的正方形，属性设置为无填充和1px白色描边；
7、选中绘制的矩形，用直接选择工具，点击矩形上一个角上的点，选中后按delete删去；
8、按快捷键“ctrl+t”将矩形向左旋转45°；
9、将矩形1命名为箭头1，按快捷键“ctrl+j”复制出两个箭头；
10、选中三个箭头图层后，用移动工具，在菜单栏分别点击“垂直居中对齐”和“水平分布”将箭头分散均匀分布；
11、将箭头调整至合适的位置和大小；
12、选中三个箭头按快捷键“ctrl+g”打组，双击组合名称更改为“箭头”；
13、在“箭头”组合下，用矩形工具画一个黑色矩形，然后添加“滤镜-模糊-高斯模糊”数值设置为6；
14、点击“窗口-时间轴-创建帧动画”设置时间为0.1s；
15、点击+号添加帧，然后改第1帧箭头组的不透明度为20%，第2帧箭头组的不透明度为100%；
16、点击“过渡动画帧”过渡方式下一帧，要添加的帧数3；
这样闪烁的效果就做好了，如图所示：
17、点击添加第6帧，将第6帧时的箭头和矩形选中按方向键“←”挪至左侧参考线处；
18、点击“过渡动画帧”过渡方式上一帧，要添加的帧数3；
这样箭头从右到左的效果就做好了，如图所示：
19、点击添加第10帧，将第10帧时的箭头组不透明度改为20%；
20、点击“过渡动画帧”过渡方式上一帧，要添加的帧数3；
左滑看iPhone 12的GIF制作完成，如图所示：
保存
21、点击文件-存储为Web所用格式-选GIF格式，循环选项永远，点击确定；
22、点击存储，选择合适的文件存储位置和文件名，点击保存；
↓保存到本地的GIF效果如图所示↓
下期直播预告
11月24日（周三）直播教学在公众号制作密码锁&剧情展开与切换????扫码预约学习SVG交互效果????
完成预约后添加白露老师（微信 brandbailu）领取直播福利
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）