你們要的GIF動圖教程，看完就會！

文章配圖的GIF動圖怎麼做?

已經記不清有多少匠友

在後台和留言區問過這個問題

我也答應了你們要出教程

然後

……

……

……

……

今天終於有時間兌現！

掩面哭泣

挖了很久的坑，終於把它填上

©所用工具：Photoshop

今天的教程非常詳細，一步一步詳細解析，所用到的軟體就是我們非常熟悉和常用的PS，文案匠實操分享（連文案都會，可想有多簡單了吧~），智商80以上看完就會，看完不會……納尼？不應該啊！

根據後台留言反饋，很多人急需對動態二維碼的處理，那麼我們就以動態二維碼作為案例來一一操作。

動圖有很多方式，為方便使用，我把最常見最常用的GIF分成三種，每種有不同的教程，進行詳細操作。今天先說兩種。

▼

第一種：已有GIF素材+文字/二維碼

找到一張非常貼合自己需求的GIF圖片，但是想加文字怎麼辦？想放自己的二維碼怎麼辦？比如下面的圖片：

第二種：靜態圖片素材變成GIF動圖

想把幾張靜態圖片變成GIF格式動圖怎麼辦？比如這張：

第三種：Cinemagraph式

即在一張靜態照片中有某一個細微的地方在細微運動，而照片中其他地方保持不動。這種方式備受廣告設計青睞，不少品牌流出這種海報。

第一種 Gif+

·GIF+二維碼

第一步：準備好GIF素材，及需要疊加的二維碼（或者其他任何jpg都是可以的）

第二步：將原始素材圖片分別拖進Photoshop中

此時GIF圖片在Photoshop中，圖層會顯示成這樣：

第三步：在最上方一排菜單欄找到【窗口】並點擊展開，找到【時間軸】：

點擊【時間軸】后，界面如下：

第四步：選擇二維碼圖片界面，Ctrl+A選擇，Ctrl+C複製

第五步：回到GIF圖界面時間軸狀態下，選擇第一幀（如圖紅框）

然後，在右側的圖層界面，選擇置頂的圖層（如圖），Ctrl+V粘貼二維碼

第六步：全選時間軸，Ctrl+T調整二維碼位置及大小

Tips：如果需要再次調整二維碼大小，最好先全選時間軸后，再進行調整哦，否則二維碼可能在不同的地方跳動。

第七步：時間軸上，選擇運動方式，「永遠」（如圖紅框），點擊播放（最下方的播放鍵►）預覽效果

第八步：如果第七步確認無誤，則點擊菜單欄【文件】> 【導出】>【web版式】>存儲為GIF，即大功告成

做出來的效果圖如下：

·GIF+文字/二維碼

也許在使用的過程中，你們會發現一個問題：很多GIF圖很美，但沒有合適的位置可以加文字或二維碼。

那麼，想使用這張GIF圖片，又想加上二維碼和文字，該怎麼做呢？

同上，第一步至第三步保持不變；最主要的變化為第四步和第五步。

第四步：全選時間軸，然後英文輸入法狀態下，快捷鍵C，選擇裁剪工具，點擊畫面，拉伸出合適的空間，點擊確定。

第五步：在界面右側看到圖層，定位到圖層1，新建圖層（如圖紅色方框內按鈕新建），填充自己喜歡的顏色，然後將該新建圖層，置入圖層最底層。

之後，重複上面教程的第四步至第八步即可。

Tips：為GIF圖加上文字，和進階教程步驟一樣，選擇文字工具，在合適的位置輸入文字，然後，置入底部背景圖層上一層即可。

調整文字大小及位置，仍需要全選時間軸后進行哦

加底板和文字之後，成品如圖：

第二種常見且常用的GIF動圖是：靜態圖片素材製作成GIF動圖。

這種圖片在微信圖文中經常看到，後台有好幾個匠友留言說到這種圖片，很受甲方青睞。

比如下面，我隨手在網上找的幾張圖片，把這種方式用了一遍又一遍，百用不厭。

·JPG製作GIF

*下面教程所用圖片源自美國著名時尚攝影師ERIK MADIGAN HECK，很時尚的攝影作品。

第一步：將需要做成GIF的靜態圖片素材拖入Photoshop（我選的是6張攝影作品）

第二步：以其中一張圖片為背景，用昨天分享的方法：Ctrl+A全選圖層，Ctrl+C複製，Ctrl+V粘貼，依次將其他5張圖片，粘貼進背景圖片的圖層中，並Ctrl+T調整圖片大小至一致（如圖紅框所示）

第三步：和昨天一樣，在上面菜單欄依次點擊【窗口】>【時間軸】，會得到下圖，選擇創建幀動畫（紅框正中下拉菜單），並點擊（如下圖紅框所示）

第四步：點擊之後，得到如圖；然後點擊紅框區域，複製所選幀，

圖層共有6張照片，所以，我複製了5次，如圖，當前時間軸上顯示共6張

細心的匠粉有沒有發現，時間軸上，每張圖片都是一樣的，在這樣的狀態下，點擊播放是沒有任何反應的。好，我們繼續，進入關鍵的下一步。

第五步：

1、如圖，在時間軸上，選擇編號為2的縮略圖

2、回到左側，圖層面板，點擊紅框部分，隱藏圖層5

這個時候，有沒有發現，時間軸上剛才選中的編號2的圖片縮略圖有了變化。

3、依照這個方法，依法炮製。即：再選擇時間軸編號3的圖片，回到左側圖層面板，同時隱藏編號1和編號2的圖片圖層。（具體隱藏哪些圖片，目的是讓6張不同的圖片全部顯示在時間軸上）

依次進行，直到時間軸上，6張圖片都不一樣為止。

第六步：在時間軸上，點擊如圖所示按鈕（即紅框中寫著「0秒」的地方），根據需要設置圖片運動時長（關係到GIF圖片動得快慢）

我這裡將它全部設置成0.5s

第七步：點擊播放按鈕預覽，確認無誤后，在最上方菜單欄依次點擊【文件】>【導出】>存儲為web格式（如圖所示），web存儲界面，選擇GIF，循環模式，一定要選擇，「永遠」，然後，點擊存儲即可。

Tips：如圖，可調整百分比或像素值，控制GIF大小

做出來的效果圖如下：

·JPG變GIF同時+文字/圖形

很多人有傳遞信息的需求，不僅想讓jpg變成GIF動起來，還想加上文字，這時候我們該怎麼辦呢？

其實也挺簡單，再接著進行加文字或圖形的步驟即可，如下：

第八步：在已經做好的GIF圖片中，點擊文字工具，寫上自己需要的文字，選擇自己喜歡的字體。（需要加圖形的同理）

圖層面板，選擇文字圖層，按Ctrl+shift+]將文字圖層置頂（或者直接拖動文字圖層置頂，如圖紅框所示）

按基礎教程，點擊播放按鈕預覽，確認無誤后，在最上方菜單欄依次點擊【文件】>【導出】>存儲為web格式（如圖所示），web存儲界面，選擇GIF，循環模式，一定要選擇，「永遠」，然後，點擊存儲即可。

加文字之後，成品如圖：

哈哈，是不是看著很高級呢~自從有了這種方式，JPG彷彿發現了新大陸，有了無限的可能性。