当前位置: 首页 >文章 > 专题页『流水动效』效果揭秘【杰视帮】
收藏
分享

专题页『流水动效』效果揭秘【杰视帮】

举报杰克老师杰克老师发布于 2021-04-101026阅读6点赞1评论
流水动效的效果揭秘...



在前天分享的年货节专题页赏析帖中


有一家叫“罗尚旗舰店的店铺

做了一个非常有意思的流水效果:



其实已经有不少店铺做过类似的效果,但做的好的却很少。


于是就有杰视帮小伙伴在学员内部群问这个效果是怎么做的,本着对学员终身负责的态度,今天就给大家解密一番。

首先,这个效果可以用很多工具实现


比如AE、PS、插件、独立小软件、甚至自己写代码。


他们的区别在于执行复杂度,可操控空间、学习成本等区别。


在这里我就不一一细说他们分别怎样做出上述效果,因为有个很方便的独立小软件可以直接搞定!


在介绍这个小软件之前,先跟大家科普一下该效果背后的原理:


《置换


打开PS的置换滤镜,你会发现它归属于“扭曲”一栏,所以你可以简单理解为:置换就是通过一定手段改变原图每个像素点的位置。


那我要把图片改成水波效果,为啥软件就知道该这样扭曲呢?


因为你置换必须要有一张“控制图”,把这张图大概做成水波状的灰度图,然后交给软件去计算,软件通过灰度值去改变原图的扭曲情况,把原图扭成水波效果。




如果此时你还没晕的话,可以继续往下深入了解

如果不想看可以直接跳过下面这段:


置换效果的原理,软件通过:


“控制图”中红色通道的灰度值,来调整原图像素水平方向的移动距离。

● “控制图”中绿色通道的灰度值,来调整原图像素垂直方向的移动距离。

● 蓝色通道不起作用,因为二维只有2个方向。

● 当灰度值>128时,像素将水平向左,垂直向上移动。

● 当灰度值=128时,像素不动。

● 当灰度值<128时,像素将水平向右,垂直向下移动。


同时,还可以通过改变置换比例来调整最终置换的强弱:



置换公式:置换距离=(“控制图”通道像素灰阶值-128)x 置换比例


通过上面对每个像素点的改变,我们要的扭曲结果就出来了。




如何让画面动起来呢?


很简单,只要我们的“置换图”本身能动,置换后的效果不就也跟着能动了嘛?就像电影一秒24帧一样,一串连续的静态图即可组成动图。



而上图的水波要想动的真实,它所对应的“动态控制图”也需要真实。


如果我们徒手弄就有点麻烦了,幸好有大神做了简单的小软件,可以轻松实现该效果,比其他方法都要简单!


这是一款独立软件,需要简单安装一下,官方免费:



打开它,你会一脸懵逼,因为是英文版。



国内有很多软件网站都能找到它的非官方汉化版,但基本都夹杂了一堆广告,还需要网站下载器二次下载才拿得到。


如果你嫌麻烦可以用小编提供的纯净官方英文原版。


该软件的单词量很小,看完这篇文章你就知道怎么用了,实在不行就差几个单词嘛~



软件使用教程:


软件自带了几种效果的使用教程,按下图提示打开能找到:



比如我们选第一个,点开是这样的:





现在,我们来亲自尝试一次:


1、按绿色文件夹图标,选择一张图片导入:



2、使用左侧的区域选择功能,绘制需要实现效果的区域:



3、绘制完成后按鼠标右键退出绘制界面,绘制完将出现蚂蚁线:



4、此时效果图标自动激活,根据你要的结果来加对应的效果:



5、在此我们先选个水波效果,点下按钮后将需要设置一些参数,这里给大家翻译一下:



6、这里我想做一个水朝着我们的方向波动的效果,把流动方向那个箭头调至向下即可,调整完点击“黄色箭头”即可预览效果



是不是非常方便,参数化的设置,省去了一大堆麻烦。


支持gif、avi视频、flash视频等多种方式导出


直接点击对应的按钮即可:





如果想要多种效果同时呈现


1、点进每个效果按钮里,进行该效果的参数调节

2、点击三合一效果图标,选择使用哪几种效果组合:



比如下雨+涟漪效果:



既然都能下雨了,那雪还会远嘛?


点开下雨按钮,勾选“Snow”,下雪效果就出来了






——END——



本文原创,未经作者允许不可转载!
更多内容,欢迎关注作者微信公众号: 杰视帮!



1条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩11天33人已报名
【4月】零基础手绘插画训练营
距离开班仅剩11天61人已报名
电商海报设计训练营
距离开班仅剩39天23人已报名
猜你喜欢
如何快速设计画册的版式

2018-08-03

风的诗人 发表

如何快速设计画册的版式
解构版式设计中的识别属性

2020-08-23

风的诗人 发表

解构版式设计中的识别属性
支付购买流程的UX优化方案

2018-09-05

Nana的设计锦囊 发表

支付购买流程的UX优化方案
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证