原文信息：

標題：How to prepare perfect GIFs for Dribbble in seconds

作者：Vlad Fedoseyev

已獲得作者允許

譯文有所改動

寫在前面：

此篇推文將介紹一種Mediun上看到的高質量轉化gif動畫格式的方法，僅翻譯了其中最主要的部分。
 

這種方法是利用Mac OX系統的終端命令行轉化視頻文件成gif，其優點是簡單方便，轉化速度快，文件比較小，質量也挺高的，而且不局限于各種格式的視頻文件。

當然缺點就是局限于Mac OX系統，而且需要輸入一些代碼（不過其實很簡單，復制改動關鍵詞就可以）。

再逼逼一下：

動效在設計領域中越來越成為一種趨勢，動效的加入會使作品跳出靜態的維度，他既能更好的表達設計師的想法創意，更能給用戶、觀眾帶來良好的體驗。

不管你從事哪一類型的設計，UI、品牌、插畫等等都好，懂動效的設計師就像金子一樣閃閃發光。

那么我們在日常的設計中，花了無數個小時用AE、Principle等動效設計軟件制作了各種精美的動畫，它看起來很神奇，一切似乎都沒問題......剩下的唯一一步就是制作一個好的GIF文件，而導出gif文件常常是一件比較頭疼的問題。

經過嘗試我們都知道，用AE、Principle直接導出的gif質量非常差，而大多數人也找到比較良好的替代方法，就是直接導出avi、mov等格式的視頻文件，然后在ps里面進行簡單轉換，大多數時候這是非常棒的方法，效果也還很不錯。

但是ps里面轉gif我們會經常遇到各種各樣的問題，比如他有500幀的丑陋限制，顏色也非常受限，調起來非常麻煩。

幸運的是，前些天在逛dribbble的時候，我就偶然發現一個設計師在Medium的uxplanet介紹一種用終端命令代碼的方式來轉化視頻格式到gif，一開始看到“命令”“終端”我也很害怕，想必做設計的看到這些技術的都會膽怯吧。

不過操作一遍后感覺非常簡單方便，最重要的是轉化效果超級贊。

原文是英文的，作者介紹的比較簡單，我把坑都踩了一遍，于是順便想當下搬運工，把原文這一部分簡單翻譯加上一些提醒在這里介紹一下，方便各位老鐵一起學習，有一點點改動，下面就正式介紹啦。

FFMPEG

 

FFMPEG是一個命令行工具，它是基于Mac OX系統的小工具，可以讓你使用幾乎所有類型的媒體文件執行任何操作。

 

不過它需要在終端先下載Homebrew（Mac OS平臺下的軟件包管理工具，擁有安裝、卸載、更新、查看、搜索等很多實用的功能）

 

如果“命令行”和“終端”這兩個詞聽起來很可怕，請不要擔心。作者已經寫好了流程，只要一步一步跟著操作，很簡單的，我保證～

 

 

1、安裝Homebrew

 

打開Mac OX系統的終端，輸入下面安裝Homebrew命令，回車運行命令，這個過程等待大概幾分鐘好像，靜等安裝完畢就OK

 

 

 

 

 

 

 

 

2、安裝FFMPEG

同樣，打開Mac OX系統的終端，輸入下面命令，回車，靜等安裝，挺快的，安裝完就是操作了

 

brew install ffmpeg

 

 

 

 

 

 

3、導航到視頻文件所在的文件夾

在終端輸入導航到文件夾位置

 

cd path/to/your/file

 

 

 

建議在桌面建一個英文名文件夾，然后把視頻文件改成英文名放進去，查看簡介信息復制文件夾位置，比如我在桌面建了文件夾“ae” /Users/huize/Desktop/ae

 

那我在這里應該輸入的是“cd /Users/huize/Desktop/ae”，回車運行命令

 

 

 

4、創建調色板文件

 

步驟3回車之后，繼續輸入下面命令，需要注意一些東西：

 

• input.mp4 是你要轉換的視頻文件（還可以是mov，avi等等，比如這里我的文件夾里視頻叫test.avi我就需要更改成test.avi）

• fps=25 是你在GIF中需要的幀速率（默認25幀/秒就行了，當然可以改動）

• scale是尺寸比例，這里是明確要求FFMPEG將視頻大小調整為Dribbble長寬比（可改但無需更改）

• palette.png 是你的輸出調色板文件（這個文件名也可改但無需更改，直接就行）

 

ffmpeg -i input.mp4 -vf  fps=25,scale=800:600:flags=lanczos,palettegen palette.png

 

 

 

 

比如這里我應該輸入的是“ffmpeg -i test.avi -vf fps=25,scale=800:600:flags=lanczos,palettegen palette.png”

 

回車運行腳本，此時你會得到一張像下面這樣的圖片（在文件夾里），不需要管他，繼續就行

 

palette.png

 

 

 

5、將視頻轉換為GIF

 

繼續輸入下面命令，同樣需要注意一些東西：

 

• input.mp4 是我們用于生成調色板的相同輸入文件（跟前面統一，比如我的test.avi）

• palette.png 是上一步的結果（文件名如果上一步改了就要統一）

• fps 應該保持不變

• 尺寸比例 也保持不變

• output.gif 是你的輸出文件

 

ffmpeg -i input.mp4 -i palette.png -filter_complex fps=25,scale=800:600:flags=lanczos[x],[x][1:v]paletteuse output.gif

 

 

 

 

比如這里我應該輸入“ffmpeg -i test.avi -i palette.png -filter_complex fps=25,scale=800:600:flags=lanczos[x],[x][1:v]paletteuse output.gif”

 

回車運行腳本，鐺鐺鐺完成～

是不是很簡單其實，效果還超級贊的。

 

作者Vlad Fedoseyev 的作品

6、優化，檢查文件大小

 

文件就輸出在同一個文件夾里，到這里基本上就算結束了，但如果輸出結果大小超過10 MB，則需要降低fps并重復上面步驟以獲得完美結果。

 

 

 

作者的注釋：

 

也許你問我們為什么需要顏色調色板文件？

 

簡而言之，GIF支持256種顏色，如果轉換器選擇了錯誤的調色板，結果將看起來很奇怪。您可以在以下示例中輕松注意到小點：

 

仔細觀察可以看到很多點點

 

 

 

可能踩的坑：

 

1、所有字符都要英文模式下輸入，如果原文用了中文網頁翻譯，不要直接復制，因為那樣子會有bug，需要轉成英文模式下復制(可以點開原文在英文模式下復制它的代碼）

 

2、自己輸入的話，命令行中的空格鍵什么的都不能省略

 

3、第3步導航到視頻文件所在的文件夾的時候注意要在前面輸入cd再輸入文件位置，剛開始看原文我以為不需要也折騰了一會

 

......

 

 

正如你所看到的，這種方法制作gif并不困難，它其實是非常高質高效的。有些事情你覺得困難不敢踏出第一步就會永遠停留在原地繼續浪費時間，相信我，嘗試一下吧，不要害怕FFMPEG，你會愛上這種方法的~

 

希望這篇文章對你有用~

 

要不點個贊再走唄~