header_v0.7.32

《江湖专题术》之 PS制作动态banner 一 (视频教程) 提供练习小PSD和视频素材

2年前发布

原创文章 / 平面 / 教程
strongshuai 原创,如需商业用途或转载请与strongshuai联系,谢谢配合。

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

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


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


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

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


 

 

 


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


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


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


文章底部提供练习小PSD和视频素材下载,方便边看边学


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

(正片开始)实例演示

第一次录视频,可能操作、说话等等节奏会很慢,耐心观看哟

(正片结束)谢谢观看


视频压缩              

嗨,回到文章,这里来讲一下视频压缩。因为我们运用到网页上,所以视频不能过大,最好保持在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个文件给重构就行了,然后等待上线吧!


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

百度搜索:“无限火力震撼来袭a20150401fool”

找到今年的无限火力专题查看效果和代码


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


文章底部提供练习小PSD和视频素材下载,方便边看边学


想要下载视频素材的同学,请关注视频里提供的微信公众号“帅强来啦”,

我会在里面提供推荐的下载网站


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


OK,教程就到这里结束啦。


如果你想要PS和AE结合做更好的效果,请关注下一期的教程吧!


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


版权所有TGideas   Design by 帅强


转载请注明以上信息 :)

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


点击下方的推荐,可以加速下篇教程的产出时间


1478
    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功