如何使用動畫 GIF [和其他動畫視覺效果] 為您的內容營銷增添趣味
已發表: 2015-10-15
美國有線電視新聞網
圖像是強大的工具。 它們可以吸引和保持注意力,或者以文字無法做到的方式捕捉和傳達情感。 為您的圖像添加一些運動,它們變得完全無法抗拒。
視頻仍然是一個強大的力量,但不起眼的動畫 gif 也越來越受歡迎。 這一直是獲得額外關注的有趣方式。 不幸的是,動畫 gif 也被用於太多陳腐的橫幅廣告和煩人的動畫表情符號。 這有點玷污了他們的聲譽。
但是現在越來越多的平台支持gif動畫。 越來越多的營銷人員正在使用它們來使他們的內容脫穎而出。 它正在製作一些優雅的視覺營銷。
那麼什麼是動畫 gif?
好問題。 讓我們跳過文字並跳到真實的東西。
這是一個動畫 gif:

這張 gif 最初出現在 Reddit 上,作為公司週年紀念的公告,但沒有人注意到。
這也是一個 gif 動畫:

這來自在線零售商埃文斯發送的電子郵件公告。 它也包含在 Alchemy Worx 最近對電子郵件中值得注意的動畫 gif 的匯總中。
這兩個動畫 gif 幫助我們定義格式與顯示-不要告訴元消息。 但更進一步:
- 動畫 gif 可以是照片或圖形。
- 動畫 gif 由一系列短幀組成。 每一幀都是它自己的動畫 gif。
- 動畫 gif 往往很短——不超過 5 秒。
- 動畫 gif 往往會循環播放,但您可以將它們設置為播放幾次然後停止。
- 動畫 gif 可以像霓虹燈一樣使用 - 作為吸引您注意力的華麗圖形。 或者它們可以用來講故事。 我們看到的第一個 gif 動圖講述了一個簡單的故事:我們有一些值得慶祝的事情。 它發生了。 沒人關心。
哪些動畫 gif 不是
我相信您知道,gif 動畫並不是在線移動圖像的最終定論。 有幾種非常相似的格式和方法可以使圖像移動,您應該了解這些,並且有一些注意事項。
1. GIF 動畫不是視頻。
雖然動畫 gif 可以彎曲成視頻之類的東西,但它要么在動畫 gif 中需要很多幀,要么我們必須接受視頻的新定義(作為一系列,比如說,五幀) . 視頻也使用與 gif 不同的文件格式。 視頻通常以 AVI、MPEG、MOV 和其他視頻特定格式出現。
2. gif 動畫不是電影圖片。
Cinemagraphs 是照片和視頻的混合體。 它們與動畫 gif 有很多相似之處:
- 它們像大多數動畫 gif 一樣循環(即,重複自己)
- 它們可以用在電子郵件中,例如 gif 動畫
- 它們以 .gif 結尾
但它們不是動畫 gif。 這是一張電影圖:

Convince and Convert 博客上有一篇有趣的文章,講述了不同品牌如何在營銷中使用動態圖片。 AdWeek 還發布了一篇關於 Facebook 的動態圖片計劃的帖子。
只需了解電影圖片比動畫 gif 更難製作。 具有基本圖像編輯技能的人可以製作動畫 gif。 需要藝術家的技巧才能使動態影像歌唱。
3. gif 動畫不是 CSS 動畫。
CSS 動畫是另一種尖端的視覺內容技術,但它們的工作歸功於編碼,而不是歸功於特定類型的圖像文件。 CSS 動畫非常適合呈現數據。 因此,如果您想美化圖表或製作圓形餅圖,CSS 動畫可能會奏效。 不過,唉,它們並不適用於所有瀏覽器,而且它們可能存在錯誤。
Creative Bloq 有一篇非常酷的文章,其中包含一些令人驚嘆的 CSS 動畫示例。
4. gif 動畫不是 Flash。
Flash 有點老派。 它有它的應用程序,但由於渲染問題(iOS 設備無法播放 Flash)以及 Flash 內容對於搜索引擎來說是一個黑匣子,因此最好避免使用 Flash。
5. GIF 動畫也不是 Hyperlapse 視頻。
Instagram 已經想出了讓我們用智能手機製作延時視頻的方法。 該技術稱為 Hyperlapse。 您可以在此處獲取適用於 iOS 設備的 Hyperlapse 應用程序。 開發人員還能夠修復彈跳效果(他們將此修復稱為“影院穩定”),這會使大多數 Hyperlapse 視頻的可觀看性大大降低。
Hyperlapse 視頻可以嵌入到網頁中,但它們仍然主要是 Instagram 的產物。
如何製作動畫 gif
有兩種製作動畫 gif 的方法。 第一個來自圖像。 二是來自視頻。
這是從靜態圖像製作 gif 的方法。
- 前往 Gifmaker.me。 這是一個免費的 gif 製作工具。 還有很多其他免費的 gif 創作者(我也嘗試過 https://makeagif.com 和 https://imgflip.com 等),但 Gifmaker.me:
- 不會在 gif 的底角放置水印
- 製作比其他工具文件更小的 gif
- 為您提供大量控件,因此您幾乎可以隨心所欲地製作 gif。
它不會做的一件事是讓您為您的 gif 圖片添加標題。 如果您想這樣做,請嘗試 MakeaGIF 或 IMGFlip。

2)在您的gif 中上傳您想要的圖片。 這些可以是巨大的圖像,也可以縮小到您想要的最終動畫 gif 的大小。 實際上,我嘗試了兩種方式——在第一組中,圖像被上傳為幾千像素寬的 300dpi 圖像。 然後我做了另一組圖像,我在 Photoshop 中以 144 dpi 將圖像縮小到 500 像素寬。 巨大圖像的動畫 gif 實際上比我用縮小圖像製作的 gif 小 10%。 去搞清楚。
3) 上傳圖片後,您可以通過單擊並拖動它們來重新排列框架。 您還可以控製完成的 gif 的大小,並且可以控制每秒的幀數。 一些消息來源說平均 gif 是每幀 500 毫秒。 我發現這有點太快了——我將我的 gif 減慢到每幀 1100 毫秒。
您可以將 gif 設置為只播放幾次,或無限循環播放。 我讓我的循環。 雖然您可以添加音頻,但我不太喜歡內容上的音頻,除非是預期的(例如網絡研討會、播客和視頻)。

選擇所有這些設置後,只需單擊“創建 GIF 動畫”。
接下來你會看到類似的東西。 動畫將開始播放……下圖只是截圖。

雖然 gifmaker.me 確實創建了相當小的文件大小,但您可以進一步裁剪動畫 gif。 如果您正在為電子郵件製作動畫 gif,這一點就變得尤為重要。
您不想在電子郵件中使用大於 80 kb 的動畫 gif。 通常,我們建議電子郵件消息的圖像較小,但您可能需要改變動畫 gif 的規則。 為此,您可以嘗試使用更少的幀,或使最終動畫 gif 的可見尺寸更小。
或者您可以使用文件大小縮減器。
這是我使用的文件大小縮減器 EZGif。 我能夠將 236K 的圖像縮小到 113KB,甚至沒有使用最高壓縮設置。

對於一個 4 幀、500 像素寬的動畫 gif,113 KB 已經相當不錯了。
這是最終的壓縮動畫 gif:
如何從 YouTube 和其他視頻製作動畫 gif
另一種製作動畫 gif 的方法是使用 YouTube 視頻。 有一種方法可以做到這一點,非常簡單。
只需轉到您想要製作成動畫 gif 的視頻的 URL。
在“youtube.com”前面輸入“gif”,像這樣:
點擊返回。 您將被重定向到一個站點,該站點允許您為動畫 gif 指定一些設置。
點擊“創建 GIF”...
然後選擇您希望如何分享動畫 gif。
但是,這有一個障礙。 這個站點被設置為為您託管圖像——這使得下載 gif 變得很麻煩。 這可能是好事也可能是壞事,但我寧願在我的網站上託管圖片。
還有許多其他網站可以讓您從 YouTube 視頻製作動畫 gif。 MakeAGif.com 和 IMGFlip.com 都是免費且易於使用的。
如果你做不到,就去找他們
沒時間製作動畫 gif? 這並不意味著您不能使用預製的。 有幾個免費使用動畫 gif 的網站:
- Giphy.com
- 意象網
- 吉夫賓網
- Hulu 的完美 gif
- GifBay.com
友善一點,並感謝您從哪裡獲得 gif。

如何在營銷中使用 GIF 動畫
啊,終於。 我們在結果部分。 以下是您可以在營銷中使用動畫 gif 的所有很酷的方法:
1) 在電子郵件中。
盡量保持文件較小,但動畫 gif 在電子郵件中效果很好。 有幾份關於動畫 gif 提升響應的報告,例如:
- 早在 2008 年,Bluefly 就在他們的一封電子郵件中添加了動畫 gif,並從測試的動畫 gif 部分獲得了 12% 的收入提升。
- 戴爾通過動畫 gif 電子郵件活動將收入提高了 109%。
- Lake Champlain Chocolates 通過顯示一盒巧克力打開的動畫電子郵件將響應提高了 49%。
Intouch Solutions 還有一篇關於電子郵件中動畫 gif 的其他三個案例研究的精彩帖子。
警告:始終設計 gif 的第一幀,以便它可以作為靜態圖像獨立存在,以防您的訂閱者在不支持動畫 GIF 的客戶端(例如 Outlook 和 Windows Phone 7)中打開電子郵件。
2)在社交媒體上。
Twitter 和 Tumblr 支持動畫 gif 已有一段時間了。 但 Facebook 最近宣布他們的新聞源也支持動畫 gif。 他們甚至會允許它們出現在廣告中。
Pinterest 支持動畫 gif,但您必須單擊一個顯示“GIF”的按鈕才能播放它們。 Google+ 支持 gif 動畫。
正如您可能知道的那樣,社交媒體上的圖片比基於文本的內容產生更多的點贊和分享。 添加一些動畫 gif 只會讓內容更值得點擊。
3)在博客文章上。
您不必成為 BuzzFeed 或 Upworthy 就可以在您的帖子中使用動畫 gif。 Social Fresh 和 Quick Sprout 為我們處理了一些數據。 他們發現 gif 動畫是最有可能從博客文章中分享的圖像類型。
4) 在電子書、白皮書和研究下載頁面上。
電子書、白皮書和研究報告往往包含大量信息。 他們應該。 但是所有這些信息在下載頁面上都是一個問題,您需要在下載頁面上提取您的信息和頁面上的元素。
輸入動畫 gif。 為什麼不能用下載的圖表和報價的旋轉圖像替換靜態電子書的圖像?
5) 在描述軟件或鼓勵應用程序下載的頁面上。
動畫 gif 是向人們展示如何使用軟件做事的好方法。 讓它們簡短而簡單。 當 SEMRush 想要宣布一項新功能時,他們發送了一封帶有此動畫 gif 的電子郵件:
而且,對於那些在九十年代後期在互聯網上閒逛的人來說,這是一個倒退。 最早病毒式傳播的 Gif 之一,隱約令人毛骨悚然的 Dancing Baby。
結論
動畫 gif 是向頁面、電子郵件或社交媒體更新添加一些動作的最簡單方法。 雖然他們可能會讓人聯想到有點業餘,但您沒有理由不選擇有吸引力的品牌圖片來講述您的觀眾會欣賞的引人入勝的故事。
隨著越來越多的平台和服務支持它們,動畫 gif 可能是建立對動態圖像的信心的最佳方式……至少在您準備好投入視頻之前。
您在營銷中使用任何動畫 gif 嗎? 您有任何案例研究可以與我們分享嗎? 在評論中告訴我們他們。
您準備好開始為您的電子郵件添加一些動感,以便它們脫穎而出了嗎? 在我們的免費電子書 – Email Idea Lab 中了解如何開始使用 GIF、電影圖片、視頻等。