这是我在一个H5页面裼沙钔炯上形象直观表达出智能马桶水加热的过程；这里面我用到了AI做水管和虚线箭头，PS做基本合成和动画实现璜模惜割完成这个设计；通过观看这个教程步骤和花20分钟左右的时间你也能够得到和我做出来类似的效果；加油吧
工具/原料
Photoshop
AdobeIllustrator
执行落地
1、产品部件合成，主要是加热部件和出水口和马桶主体位置，大小调整；
2、水邢赳剁曛管&箭头的实现方式，水管粗细均匀，而且有转弯弧度，如果在PS内用钢笔工具抠图就比较麻烦，粗细不好控制，而且管中间颜色浅怎剑词阶两边颜色深也不大好体现；箭头线是由很多个小箭头组合的，如果一个个复制这样画图太慢，而且不一定会很顺畅，所以水管&箭头我用AI来实现
3、A、在AI中用钢笔工具抠出需要的线刳噪受刃条，并把线条复制出2条备用（一条与原来重叠Ctrl+C，Ctrl+F另外一条复制到旁边Ctrl+C，Ctrl+V）；
4、B、做水管把顶层线粗设置为1像素，描边颜色用浅色；第层线粗设置为10像素，描边颜色用深色；
5、C、把线条头尾在外观设置中设置为半圆形，然后把线条转曲
6、D、然后用混合工具做成混合渐变（把渐变层数设置高一些过度比较自然）到这水管部分做好。
7、E、另外复制出来的线转出曲线，然后导出为.wmf格式（这样曲线就变成一小段一小段的）
8、F、把导出的.wmf文件再用AI打开，在外观设置中添加箭头，到这箭头也做好了
9、把水管和箭头拉人PS调整到合适大小
10、打开时间轴，箭头部件流动用用图层蒙版关系设置A、给箭头图层添加一个蒙版图层，并取消连接
11、B、给箭头区域填充黑色，并启动时间轴图层蒙版位置记录关键帧
12、C、拉动时间进度，然后在拉动箭头蒙版的位置刀箭头全部显示，（即完成动画设置）
13、D、按同样的方法设置好所有动画到时间轴顺瘃槽卺栉畅，文件保存为web所用格式，保存成GIF格式。这样用箭头模拟水流效果的图片就做好了
