《江湖专题术》之 PS制作动态banner 一 (视频教程)

发表于2016-03-29
评论0 2.4k浏览

《江湖专题术》之 PS制作动态banner 一 (视频教程)

 In 视觉设计 on 2015-08-07 04:45:26 by 帅呆


  “网络高速发展的HTML5时代,网络上各种酷炫的网页设计。许多是动态的,有纯靠代码写出来的,也有视频类型的。再视觉上来说,代码写出来的效果相对生硬,但代码写出来的不会因为视频压缩而损失画面质量。视频类的效果特别细腻,但也会因为压缩视频导致画面质量下降。总之鱼和熊掌不能兼得,各有各的好处。”

  不用羡慕大神用AE做细腻的动画,教你用PS也能做。这次分享的就是如何用PS制作动态的banner,也就是视频动画。

本次教程需要用到以下软件和素材:

1:photoshop cs6及以上版本 (动画制作,老版本没有视频编辑功能,精简版可能也没有)
2:DVDVideoSoft Free Studio (后期压缩视频大小,转换成网页上可用的格式)
3:视频素材(关于视频素材,可以在网络上搜索下载)

                    
                
                 

  上面这几个动画大部分是用PS 制作到输出完成的,其中几个也有用到AE里的一些简单功能。下次会出和AE结合的教程。

看一个线上实例《无限火力》专题:http://lol.qq.com/act/a20150401fool/index.htm

先提个关键点,用PS制作动态banner,关键是素材的运用。详情请看下面解说视频

 

(正片开始)实例演示

 

全屏观看地址:http://v.qq.com/page/l/d/z/l01613g08dz.html

(正片结束)谢谢观看


视频压缩              

  嗨,回到文章,这里来讲一下视频压缩。因为我们运用到网页上,所以视频不能过大,最好保持在0-1.5M左右最佳,不然服务器压力大,网速慢的同学也看不到。


低浏览器支持视频播放吗?

  低版本的浏览器是不支持视频文件的,除非用FLASH播放器,但是那样很麻烦,需要去找一个FLASH播放器,然后播放MP4文件,又涉及到了另外一个软件,所以直接放弃IE6以及其他低版本的浏览器,低版本浏览器需要我们准备一张静态图来替代视频。


要哪些格式的视频呢?

  最新版本的浏览器一般都支持视频文件,所以我们这里就准备好2个格式,一个为WEBM,另一个为MP4。

  WEBM支持大多数浏览器,而且文件更小,清晰度更好。MP4是作为备用,以防不支持WEBM的浏览器,关于各个格式支持不支持的问题,大家可以网络搜索一下,这里不做过多的解读了,因为这是一个长篇大论,我们这里只做WEBM和MP4就好了。

压缩工具              

  这里使用的压缩工具是一个国外免费的软件 "DVDVideoSoft Free Studio",强烈推荐功能强大还有原生中文,且不仅仅是压缩视频,还有其他好多功能。

使用方法

  打开软件,点击“转换器”选择“Free MP4 Video Converter”                  



  打开软件后,把我们做好的视频文件添加进去。然后点击预设编辑器。

  然后会弹出参数设置界面,WEBM和MP4格式的参数按照下面的设置

  (一开始可能参数是灰色的无法点击,就先取消video和audio的勾,然后再勾一下。另外因为我们是不需要音频的,所以音频的勾直接去掉)

  每次更改好,记得取个名字,然后点击 右上角的“新”按钮保存。


WEBM格式的参数

MP4格式的参数

都设置好后,关掉这个窗口,回到默认窗口。

  在左边的“预设置”里选择“Custom”,然后在右边的下拉里选择刚刚我们保存好的预设值,然后进行转换。

刚刚压缩的2个格式的文件只有分别500KB不到,清晰度也还可以。

接下来你就把这2个文件给重构就行了,然后等待上线吧!

如果你同时也负责重构的活,可以参考上面写出的一个线上实例专题里的代码。

------------------------------------------------------------------------------------------

OK,教程就到这里结束啦。如果你想要PS和AE结合做更好的效果,请关注下一期的教程吧!

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引