利用Photoshop如何製作透明動態GIF圖?

Tags: 圖片, 動態,

在實際的平面或者網頁設計中,我們總會遇到一些需要動態透明GIF圖的場景,那如何才能快速有效地製作動態GIF圖片,本經驗將給出最實用的指導經驗,以此舉一反三,進行實際場合的拓展。

本文以製作一個動態的向上滑動的圖標為例。

利用Photoshop如何製作透明動態GIF圖

利用Photoshop如何製作透明動態GIF圖

工具/原料

Photoshop

方法/步驟

首先啟動Photoshop CS2(其他版本類同),然後新建一個新建一個文件,寬度240px 高度720px背景透明

利用Photoshop如何製作透明動態GIF圖

然後拖動一條中心參考線,位於畫布的中心位置。

利用Photoshop如何製作透明動態GIF圖

點擊形狀工具圖標

利用Photoshop如何製作透明動態GIF圖

然後在自定義形狀中選擇圖中所示的選項和圖標。

利用Photoshop如何製作透明動態GIF圖

然後按住shift鍵創建一個正圓圖標

利用Photoshop如何製作透明動態GIF圖

然後調出動畫窗口調板

利用Photoshop如何製作透明動態GIF圖

點擊複製選中的幀按鈕

利用Photoshop如何製作透明動態GIF圖

然後將畫布上繪製好的對象向上移一定距離,此處移動100px(按住shift鍵後,按10次向上的方向鍵)

利用Photoshop如何製作透明動態GIF圖

重複7~8步驟,創建如圖所示的幀,最後一幀我們可以按圖調整一下透明度

利用Photoshop如何製作透明動態GIF圖

然後點擊播放按鈕進行預覽

利用Photoshop如何製作透明動態GIF圖

如果覺得太快,可以調整間隔時間,如果動畫效果符合預期,可忽略此步

利用Photoshop如何製作透明動態GIF圖

然後點擊 菜單欄 文件->存儲為web所用格式

利用Photoshop如何製作透明動態GIF圖

選擇對應選項進行存儲即可,大功告成,當然此處還看不到透明效果,等大家放到其他圖片的上方就可以看出效果了

利用Photoshop如何製作透明動態GIF圖

相關問題答案