分享

Photoshop制作喷泉喷水动画效果图

 九天舞凤 2013-03-07

喷泉动画属于流水动画的一种,用PS来实现的原理大致相同,GIF动画在网络上比较常见,网页中偶尔点缀一下也是相当不错,本教程通过一个简单的喷泉动画的制作过程来进行讲述,本动画可扩展性较强,有兴趣可以一试。

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

效果图

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

原图

1、在photoshop中打开原图(本教程采用photoshop CS5制作,其它版本基本通用),如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

2、双击背景图层进行解锁,按默认的文件名图层0命名,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

3、拖动图层0到创建新建图按钮上进行复制图层(或者单击右键选择复制图层),将图层0复制五个副本,总共六个图层,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

4、单击选择钢笔工具,将图中有水的部分都勾选中(也可以通过其它方法直接将有水的区域选中),如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

5、勾选完后单击右键,选择“建立选区”,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

6、在弹出的“建立选区”窗口中,设置羽化半径为3,这样能产生较好的过渡效果,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

7、路径转换成选区后效果如下图所示,如果有一些区域不到位,可以通过快速蒙版等进行修补,这里不再详述。

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

8、接下来就对每一图层进行水波操作,先单击选中“图层0 副本5”,选择菜单“滤镜->扭曲->海洋波纹”,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

9、在弹出的“海洋波纹”窗口中,设置波纹幅度为2,波纹大小为1,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

10、接下来单击选中“图层0 副本4”,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

11、同样进入海洋波纹设置窗口,保持波纹幅度为2不变,将波纹大小设置为2,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

12、同理,单击选中“图层0 副本3”,设置波纹幅度为2,波纹大小为3,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

13、单击选中“图层0 副本2”,设置波纹幅度为2,波纹大小为4,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

14、单击选中“图层0 副本”,设置波纹幅度为2,波纹大小为3(为了让波纹大小变化连续,后几帧将波纹大小逐步减小),如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

15、单击选中“图层0 ”,设置波纹幅度为2,波纹大小为2,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

16、最后我们进行动画处理,选择菜单“窗口->动画”,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

赞助商链接

17、在弹出的动画窗口中,单击其右上角向下三角形箭头处,在弹出的菜单中选择“从图层建立帧”,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

18、通过“从图层建立帧”后,PS就会根据我们现有图层分别建立一一对应的帧,相当便捷(早期部分PS版本没有这功能,只能手动建立),效果如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

19、先单击第1帧,按住Shift键,再单击最后一帧,将所有帧一起选中,然后一次性设置时间间隔为0.1秒,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

20、到此喷泉动画制作就基本完成,可以通过动画窗口下方的播放来预览动画,如果不满意可以再修改,另外GIF动画的尺寸最好不要太大,可以通过菜单“图像->图像大小”来适当调整大小,最后选择菜单“文件->存储为Web和设备所用格式”进行动画文件保存,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

21、在弹出的保存窗口中,要确保预设为GIF格式,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

22、最后单击“存储”按钮进行动画保存即可,如下图所示:

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

Photoshop制作喷泉喷水动画效果图,PS教程,思缘教程网

 
 
 
 
赞助商链接:

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多