本文將通過三個示例介紹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

PhotoShop制作gif動態廣告效果示例