當前位置:妙知谷 >

遊戲數碼 >互聯網 >

網頁動態Banner製作:[1]製作動態Banner圖片

網頁動態Banner製作:[1]製作動態Banner圖片

對於各位網頁設計者特別是初學者而言,對於網頁中Banner部分動態效果的製作一定感覺很好奇,那麼這麼唯美的動態Banner效果是怎麼製作出來的呢?今天小編就與大家一起分享一下動態Banner的製作方法。

網頁動態Banner製作:[1]製作動態Banner圖片

操作方法

(01)其實實現頁面動態Banner效果最簡單的方法就是利用動態Gif圖片來實現。我們可以藉助PS來製作網頁動態Banner。下面小編就製作一個簡單的動態Banner,希望大家從中得到啟發,製作出符合自己需求的Banner。

(02)打開PS,新建一空白文檔,其參數如圖所示(注:尺寸應根據實際需求來設定):

網頁動態Banner製作:[1]製作動態Banner圖片 第2張

(03)利用“漸變”工具,對當前圖層進行填充,效果如圖:

網頁動態Banner製作:[1]製作動態Banner圖片 第3張
網頁動態Banner製作:[1]製作動態Banner圖片 第4張

(04)接下來加入網站的宣傳標語或企業文化。可以選擇“文字”工具輸入文字。

網頁動態Banner製作:[1]製作動態Banner圖片 第5張

(05)然後加入網站的LOG以及其它相關具有代表性的標記或圖片,然後根據背景色選擇合適的“圖層混合”模式,並應用“蒙板”進行過度設置

網頁動態Banner製作:[1]製作動態Banner圖片 第6張

(06)然後對文字所在圖層應用“圖層樣式”。

網頁動態Banner製作:[1]製作動態Banner圖片 第7張
網頁動態Banner製作:[1]製作動態Banner圖片 第8張
網頁動態Banner製作:[1]製作動態Banner圖片 第9張
網頁動態Banner製作:[1]製作動態Banner圖片 第10張

(07)點擊“窗口”->“動畫”來打開動畫面板。

網頁動態Banner製作:[1]製作動態Banner圖片 第11張

(08)在此就可以創建簡單的動畫啦。大家可以根據自己的實際需要來進行創建動畫,在此小編創建如圖所示的動畫效果。

網頁動態Banner製作:[1]製作動態Banner圖片 第12張

(09)最後將動畫文件輸出。點擊“文件”->“存儲為Web所有格式”項。

網頁動態Banner製作:[1]製作動態Banner圖片 第13張

(10)在打開的窗口中,選擇“Gif”格式輸出,同時將“動畫循環選項”設置為“永遠”,最後點擊“存儲”按鈕即可。

網頁動態Banner製作:[1]製作動態Banner圖片 第14張

(11)最後就可以將該動態圖片插入到網頁Banner位置啦。

網頁動態Banner製作:[1]製作動態Banner圖片 第15張
標籤: Banner 網頁
  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/hulianwang/0o7rk5.html