PhotoShop製做gif動態廣告效果示例

本文將經過三個示例介紹gif製做廣告，gif 動態廣告網頁展現效果

米撲博客：開業了

https://blog.mimvp.com/article/1.html

 

本示例須要用到的軟件環境：

MacOS High Sierra  Version 10.13.4

PhotoShop CS6 13.0.6  x64

 

示例1：製做 gif 文字廣告動圖

1. 新建 180 * 60 透明背景圖

 

2. 窗口 - 時間軸 - 建立幀動畫

 

3. 默認第一幀，添加字體格式，輸入「米撲」

 

4. 點擊下方小箭頭，新建兩幀

 

5. 複製第一個圖層「米撲」爲「米撲2」，輸入文字「米撲科技」，調節字體顏色

 

6. 複製第二個圖層「米撲2」爲「米撲3」，輸入文字「米撲科技公司」，調節字體顏色

 

7. 選中所有三幀，設置間隔爲「1秒」，播放循環爲「永遠」

 

8. 點擊「文件」 - 「存儲爲Web所用格式」，​保存爲 gif 圖片

 

9. 查看 gif 動圖的效果

 

 

示例2：製做 gif 圖片廣告動圖（視頻時間軸製做）

1. 提早準備好兩張圖片素材，兩圖之間只是稍微調整了字體顏色、字體位置

 

2. 新建透明 980 * 120 背景畫布

 

3. 調整「窗口 - 時間軸」，選擇「建立視頻時間軸」

 

4. 導入準備的兩張圖片素材，並排兩張圖片，縮短播放時間軸，播放試看動畫效果

 

5. 點擊「文件」 - 「存儲爲Web所用格式」，​​保存爲 gif 圖片

 

6. 查看 gif 動圖的效果

 

 

示例3：製做 gif 圖片廣告動圖（幀動畫時間軸製做）

1. 提早準備好兩張圖片素材，兩圖之間只是稍微調整了字體顏色、字體大小

 

2. 新建透明 258 * 258 背景畫布

 

3. 調整「窗口 - 時間軸」，選擇「建立幀動畫」

 

4. 拖入準備的兩張圖片素材到畫布，會自動生成兩個圖層

 

5. 點擊時間軸右側小箭頭，新建一幀，每張圖片對應一幀

 

6. 每一幀對應一張圖片，用右側圖層的小眼睛控制是否顯示，兩幀時間間隔爲「1秒」，播放循環爲「永遠」

 

7. 點擊「文件」 - 「存儲爲Web所用格式」，​​保存爲 gif 圖片

 

8. 查看 gif 動圖的效果

 

gif 動態廣告網頁展現效果

米撲博客：開業了

https://blog.mimvp.com/article/1.html

 

 

參考推薦：

PhotoShop製做gif動畫效果示例詳解

Photoshop 修改PNG透明圖片的前景顏色

PS和AI將圖片轉成矢量圖

PS畫奧迪標誌4個圈

CSS Sprite 圖片優化

PS設計製做名片

Photoshop、Illustrator、CoreIDAW 區別

色彩空間中的 aRGB、HSL、HSV、HSB、Lab、CMYK