“網(wǎng)絡高速發(fā)展的HTML5時代，網(wǎng)絡上各種酷炫的網(wǎng)頁設計。許多是動態(tài)的，有純靠代碼寫出來的，也有視頻類型的。再視覺上來說，代碼寫出來的效果相對生硬，但代碼寫出來的不會因為視頻壓縮而損失畫面質(zhì)量。視頻類的效果特別細膩，但也會因為壓縮視頻導致畫面質(zhì)量下降?？傊~和熊掌不能兼得，各有各的好處?！?/p>

不用羨慕大神用AE做細膩的動畫，教你用PS也能做。這次分享的就是如何用PS制作動態(tài)的banner，也就是視頻動畫。

本次教程需要用到以下軟件和素材：

1：photoshop cs6及以上版本 （動畫制作，老版本沒有視頻編輯功能，精簡版可能也沒有）
2：DVDVideoSoft Free Studio （后期壓縮視頻大小，轉(zhuǎn)換成網(wǎng)頁上可用的格式）
3：視頻素材（關(guān)于視頻素材，可以在網(wǎng)絡上搜索下載）

上面這幾個動畫大部分是用PS 制作到輸出完成的，其中幾個也有用到AE里的一些簡單功能。下次會出和AE結(jié)合的教程。

先提個關(guān)鍵點，用PS制作動態(tài)banner，關(guān)鍵是素材的運用。詳情請看下面解說視頻

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

文章底部提供練習小PSD和視頻素材下載，方便邊看邊學

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

（正片開始）實例演示

第一次錄視頻，可能操作、說話等等節(jié)奏會很慢，耐心觀看喲

（正片結(jié)束）謝謝觀看

------------------------------------ TIPS ---------------------------------   

關(guān)于視頻素材的循環(huán)制作可以查看最新的教程，更簡單方便！

傳送門：http://www.zuodeer.cn/article/ZNTAyMDUy.html

------------------------------------ TIPS ---------------------------------  

視頻壓縮              

嗨，回到文章，這里來講一下視頻壓縮。因為我們運用到網(wǎng)頁上，所以視頻不能過大，最好保持在0-1.5M左右最佳，不然服務器壓力大，網(wǎng)速慢的同學也看不到。

低瀏覽器支持視頻播放嗎？

低版本的瀏覽器是不支持視頻文件的，除非用FLASH播放器，但是那樣很麻煩，需要去找一個FLASH播放器，然后播放MP4文件，又涉及到了另外一個軟件，所以直接放棄IE6以及其他低版本的瀏覽器，低版本瀏覽器需要我們準備一張靜態(tài)圖來替代視頻。

要哪些格式的視頻呢？

最新版本的瀏覽器一般都支持視頻文件，所以我們這里就準備好2個格式，一個為WEBM，另一個為MP4。

WEBM支持大多數(shù)瀏覽器，而且文件更小，清晰度更好。MP4是作為備用，以防不支持WEBM的瀏覽器，關(guān)于各個格式支持不支持的問題，大家可以網(wǎng)絡搜索一下，這里不做過多的解讀了，因為這是一個長篇大論，我們這里只做WEBM和MP4就好了。

壓縮工具              

這里使用的壓縮工具是一個國外免費的軟件 "DVDVideoSoft Free Studio"，強烈推薦功能強大還有原生中文，且不僅僅是壓縮視頻，還有其他好多功能。

使用方法

打開軟件，點擊“轉(zhuǎn)換器”選擇“Free MP4 Video Converter”                  

打開軟件后，把我們做好的視頻文件添加進去。然后點擊預設編輯器。

然后會彈出參數(shù)設置界面，WEBM和MP4格式的參數(shù)按照下面的設置

（一開始可能參數(shù)是灰色的無法點擊，就先取消video和audio的勾，然后再勾一下。另外因為我們是不需要音頻的，所以音頻的勾直接去掉）

每次更改好，記得取個名字，然后點擊 右上角的“新”按鈕保存。

WEBM格式的參數(shù)

MP4格式的參數(shù)

都設置好后，關(guān)掉這個窗口，回到默認窗口。

在左邊的“預設置”里選擇“Custom”，然后在右邊的下拉里選擇剛剛我們保存好的預設值，然后進行轉(zhuǎn)換。

剛剛壓縮的2個格式的文件只有分別500KB不到，清晰度也還可以。

接下來你就把這2個文件給重構(gòu)就行了，然后等待上線吧！

如果你同時也負責重構(gòu)的活，可以參考上面寫出的一個線上實例專題里的代碼。

百度搜索：“無限火力震撼來襲a20150401fool”

找到今年的無限火力專題查看效果和代碼

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

文章底部提供練習小PSD和視頻素材下載，方便邊看邊學

想要下載視頻素材的同學，請關(guān)注視頻里提供的微信公眾號“帥強來啦”，

我會在里面提供推薦的下載網(wǎng)站

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

OK，教程就到這里結(jié)束啦。

如果你想要PS和AE結(jié)合做更好的效果，請關(guān)注下一期的教程吧！

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

版權(quán)所有TGideas   Design by 帥強

轉(zhuǎn)載請注明以上信息 ：）

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

點擊下方的推薦，可以加速下篇教程的產(chǎn)出時間