Web前端和影视后期分别实现过光效果

      让设计师从最熟悉的ps开始，过度到影视后期和网页前端的一些知识，促使她们从感性走向理性、掌握艺术的同时也去接触技术，文中附有高清的实操视频可供学习。如果听过很多道理，依然没有过好一生，那或许该好好脚踏实地的学习一下技术了……

过光动画

      过光动画本身是一种具有引导阅读和着重强调的作用，无论是在网页浏览器里还是视频播放器里，都可以频繁的看到。在Web前端上，过光还是一种很好的跟用户交互的方式，被广泛应用在游戏、电商、企业官网上；在影视后期表现上，更多的用来强调以吸引眼球，比如一些卖电视的商家经常会采用这种形式来给自己打广告，做的那些视频广告通常会在屏幕上用过光配合电视旋转来展示其卓越质感。这里我拿电视的图片素材，结合最近比较火的一部电视剧，分别用Photoshop和AfterEffects模拟了下过光效果，成品类似下图：

1、Photoshop制作原理

      在Photoshop中，让图像以外的白光隐藏主要利用到的是剪贴蒙版(快捷键Ctrl+Alt+G)，然后利用时间轴面板，改变白光的位置以制作动画。

 

实操高清视频，全屏观看效果更好

2、AfterEffects制作原理

      在AfterEffects中，该效果主要利用到的是Alpha轨道遮罩，如果你的软件界面没有看到，需要在时间线面板中的图层名称那一栏调出‘模式’，此时就可以看到TrkMat面板了。注意对比一下AE和PS中白光层和影视图像层的位置，刚好相反……

3、Html代码制作原理（图片版）

    这种过光的光是一张透明的图片构成的。通过改变鼠标滑过前后白光背景位置的属性形成动画。成品大概类似如下，不过录制成的gif因为有失帧导致看起来比较粗糙，但是在网页中滑过的实际效果是非常棒的哈！

    这是经Photoshop切图后的图片素材，左侧light.png就是一张透明的png白光。

    这是Html 结构，img标签里的图片一一对应上图图片。

4、Html代码制作原理（css版）

    该过光效果的白光是由css样式写出来的，这样就不用向服务器请求一张图片了。

附实操视频

   

      相信看完这些教程还是会有收获的，从中能感受到影视后期和网页前端的一些技法，而我发现这种写作风格也挺好的，看图文大概能了解讲什么内容，不喜欢的就可以不用浪费时间观看教程了，而想学的朋友又可以进行深度的学习。不过这种风格真的很耗时耗力，不仅需要雄厚的积累、还要以一定的逻辑边讲边做，完了之后还要写出来，喜欢并且真心觉得受用的朋友，可以在下面点个赞哦……！