簡單幾步?

有些人看到網上一些動態圖片很炫麗,有些是出自工作需要把產品圖片做成動態的播放,我這裡講解下簡單的gif圖片製作原理。

工具/原料

photoshop

方法/步驟

開啟PS軟體,在選單欄裡的視窗欄裡找到時間軸(PS.我的是cs6版本的,CS5以下的老版本視窗叫視窗,時間軸叫動畫)

簡單幾步 學會用photoshop軟體製作gif動態圖片

新增一個文件,如現在網上開店的電腦描述頁圖片寬度為750以上,我建的是750*400

簡單幾步 學會用photoshop軟體製作gif動態圖片

點選檔案,開啟檔案,把需要製作動態圖的圖片素材匯入,按CTRL可以多選圖片。

簡單幾步 學會用photoshop軟體製作gif動態圖片

如圖,把匯入的圖片新增進750*400的文件,按CTRL+T縮放工具調整圖片大小,把5張圖片調整好之後刪除背景圖層。(背景圖層不刪除的話,做出來的gif圖片會出現一瞬間背景顏色)

簡單幾步 學會用photoshop軟體製作gif動態圖片

點選時間軸版塊上面的複製按鈕,新增播放影格,我們有5張圖片,需要5個影格。

簡單幾步 學會用photoshop軟體製作gif動態圖片

我們先選中第一個要播放的影格,再把右邊2-5的圖層前面的眼睛點選去掉,只保留第1個圖層,意思是這個影格只播放第1圖層。

簡單幾步 學會用photoshop軟體製作gif動態圖片

再選中第二個影格,選中右邊的第二圖層前面眼睛顯示。

簡單幾步 學會用photoshop軟體製作gif動態圖片

以次類推,把3-5的影格和圖層操作,操作好後好圖。

簡單幾步 學會用photoshop軟體製作gif動態圖片

如圖,點選每個影格下面的下拉三角形,可以選擇每個圖片的停頓時間,我選擇1秒。點選下面的永遠可以設定這個動態是迴圈播放還是隻播放一次或自定義次數。

簡單幾步 學會用photoshop軟體製作gif動態圖片

點選選單欄裡的檔案,選擇儲存為網頁用,也就是web格式,快捷鍵為:ctrl+shift+Alt+S

簡單幾步 學會用photoshop軟體製作gif動態圖片

在開啟的介面當中選擇gif格式,再點選儲存,儲存為gif動態圖片。

簡單幾步 學會用photoshop軟體製作gif動態圖片

這個就是儲存的最終效果圖了。

簡單幾步 學會用photoshop軟體製作gif動態圖片

注意事項

gif圖片只支援256種顏色,儲存之後畫素會沒原圖JPG的好。

相關問題答案