这是我在一个H5页面上形象直观表达出智能马桶水加热的过程；这里面我用到了AI做水管和虚线箭头，PS做基本合成和动画实现完成这个设计；通过观看这个教程步骤和花20分钟左右的时间你也能够得到和我做出来类似的效果；加油吧
工具/原料
1
Photoshop
2
Adobe Illustrator
执行落地
1
1、产品部件合成，主要是加热部件和出水口和马桶主体位置，大小调整；
2
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
3、 把水管和箭头拉人PS调整到合适大小
10
4、 打开时间轴，箭头部件流动用用图层蒙版关系设置A、 给箭头图层添加一个蒙版图层，并取消连接
11
B、 给箭头区域填充黑色，并启动时间轴图层蒙版位置记录关键帧
12
C、 拉动时间进度，然后在拉动箭头蒙版的位置刀箭头全部显示，（即完成动画设置）
13
D、 按同样的方法设置好所有动画到时间轴顺畅，文件保存为web所用格式，保存成GIF格式。这样用箭头模拟水流效果的图片就做好了
注意事项
1
静静的做设计，静静的写教程，静静的分享我的方式。原创经验如引用请备注，谢谢支持！
2
如有需要设计源文件留言联系
上一篇：智能马桶哪个牌子好