【Ps】使用Photoshop製作loading GIF動圖

之前用after effect製作了loading ring和變化的百分數，最近學會了一個用photoshop特別簡單快捷地製作美麗loading.gif的法子～分享給大家吧 :- ) 原教程可以參看 iceflowstudios.com

設置ring的視覺效果

1. 新建一個文件，如果你之後想要post到dribble上，可以直接畫布大小選擇 800*600

2. 使用圖形工具畫一個Ring，什麼顏色都無所謂，因為之後會覆蓋顏色上去。

3. 雙擊新建的「Ellipse 1」，調出layer style窗口。

4. 選擇 Gradient Overlay並設置合適的gradient。記得style要選擇Angle，這樣才可以讓它旋轉起來變成一個loading的gif呀～

5. 設置合適的inner glow讓這個loading ring看起來更立體～不同的 Blend Mode, opacity, Color, 和 Contour ……會有不同的效果，可以根據自己的需要選擇最合適的～在設置的時候可以在剛剛畫好的圓環上看到實時的效果預覽～

製作動效

6. 現在就讓它動起來吧！點擊 Create Video Timeline，調出timeline編輯窗口～

7. 就像使用after effect一樣，設置keyframe。因為我們只是讓它的style里的gradient填充在變化，所以我們只要在style那裡設置就好啦。

8. 拖動時間軸到下一個需要設置keyframe的地方；然後跟上面一樣調出創造gradient的窗口來調整gradient的填充。

注意：Angle那裡要寫-89。因為直接從90到-90，photoshop並不知道到底是應該順時針還是逆時針轉動，所以寫上-89，這樣photoshop就知道應該順時針轉動到需要的位置了。

9. 跟上面一樣，設置好另外的一個keyframe，讓gradient回到之前的位置，如果之前開始失手gradient的angle是90，那麼這最後一個新的keyframe就可以91....；原理和上面一樣，是為了告訴photoshop旋轉的方向～

10.選擇Loop Playback，你就可以預覽到旋轉的loading了～

添加pattern／texture

11.如果想要效果看起來更漂亮一點兒，還可以給它添加texture。新建一個group，把剛剛的ellipse 1放進去～這樣我們就可以一起給整個group加texture了，之後如果想要給ring下面添加背景也是很方便的。

12.雙擊 Group 1, 調出跟之前設置ring一樣的那個窗口。添加pattern overlay；Blend Mode可以選擇Overlay。然後就可以選擇自己喜歡的pattern，調整各種參數，在窗口中預覽效果啦！

13.之後如果想要添加背景圖片或者做更多的細節，只要添加不同的layer慢慢來就好了～

14.導出文件，選擇timeline 窗口下方的導出。就可以導出成為video啦。

15.想要把video變成gif的話，只要用photoshop再打開video，然後用File>>Export >>Save for Web (Legacy)導出成為GIF就大功告成(●°u°●) 」

推薦閱讀：