如何製作高清gif on Debian

2018-01-30
為什麼我的gif出來只有256色,我感覺我自己好糟crying

感謝這位同學的發問我又有一篇可以發揮了

這次源頭其實只是要抓畫面擷圖成為gif

但產生出來的結果都是畫面不太好的狀況

一開始單純以為是畫面擷取程式有解析度選項可以調整

但找了一些資料後才發覺原來問題是gif只允許256色!!

 

why gif is 256 colors ?

原來會有這種檔案格式是因為要減少圖擋在網路上傳輸的時間,所以將原始色彩轉為8位元色彩,但由於這種檔案格式可以插入多個影格(frame),所以現在gif常被用來當動畫圖或是最近常見的meme Giphy meme fail

在找資料才發現原來有人為了處理我們這種近乎不合理的要求
完成了這樣的一個超好用工具 peek + gif.ski

 

what is peek ?

peek 算是我目前用過很好用的桌面錄影軟體 (官網:phw/peek github)

因為他可以靈活的選擇目前要擷取的範圍還有可以很方便啟動以及關閉

圖片來源 phw/peek github

詳細設定可以到 preference 作更精細或更高品質的調整

peek preference

畫面擷取自peek preference 畫面

好了問題來了

這東西可以直接apt install 嗎 ?

可以 但對debian來說不行 crying

所以這邊就順便附上在debian上安裝peek的簡易說明

1. 準備相關library安裝

sudo apt install cmake valac libgtk-3-dev libkeybinder-3.0-dev libxml2-utils gettext txt2man

這邊建議可以在最後補上ffmpeg 因為我在最後一步deb安裝時就因為缺少此library造成安裝中斷

2. 下載程式碼 [line 1] 並產生安裝檔(.deb) [line 2-4]

git clone https://github.com/phw/peek.git
mkdir peek/build
cd peek/build
cmake -DCMAKE_INSTALL_PREFIX=/usr -DGSETTINGS_COMPILE=OFF ..
make package

3.安裝 (其中1.2.2數值可能會變請依實際狀況修改)

sudo dpkg -i peek-1.2.2-Linux.deb 
Selecting previously unselected package peek.
(Reading database ... 196873 files and directories currently installed.)
Preparing to unpack peek-1.2.2-Linux.deb ...
Unpacking peek (1.2.2) ...
dpkg: dependency problems prevent configuration of peek:
 peek depends on ffmpeg; however:
  Package ffmpeg is not installed.

dpkg: error processing package peek (--install):
 dependency problems - leaving unconfigured
Processing triggers for gnome-menus (3.13.3-9) ...
Processing triggers for desktop-file-utils (0.23-1) ...
Processing triggers for mime-support (3.60) ...
Processing triggers for libglib2.0-0:amd64 (2.50.3-2) ...
Processing triggers for hicolor-icon-theme (0.15-1) ...
Processing triggers for man-db (2.7.6.1-2) ...
Errors were encountered while processing:
 peek

如果剛剛沒有安裝ffmpeg 就會出現這個畫面請繼續到3.1

如果剛剛有安裝完那就恭喜你你完成了

到桌面找一下就會找到peek 點開就可以使用了 :)

3.1 補安裝完ffmpeg的訊息 ?

Reading package lists... Done
Building dependency tree       
Reading state information... Done
You might want to run 'apt --fix-broken install' to correct these.
The following packages have unmet dependencies:
 ffmpeg : Depends: libavdevice57 (>= 7:3.2.10) but it is not going to be installed
          Depends: libsdl2-2.0-0 (>= 2.0.4) but it is not going to be installed
E: Unmet dependencies. Try 'apt --fix-broken install' with no packages (or specify a solution).

基本上就是打 sudo apt --fix-broken install 就可以繼續完成剛剛未完成的安裝,恭喜你完成安裝了

而在仔細看官網列出的常見QA 有看到一個有意思的問題 : How can I improve the quality of recorded gif files ?

作者說你可以再安裝一個工具gifski 如此就可以完成更高畫質的gif

 

what is gif.ski

這個真的很厲害 就是這個軟體打破了gif 品質不高的宿命

來看看gif.ski究竟可以將gif玩到怎樣的程度

是不是超厲害的

這次安裝就比較簡單了因為作者都幫你包裝好

只要在下載解壓縮後根據你的作業系統選擇對應的安裝檔

以linux / debian 來說就是

sudo dpkg -i gifski_0.7.3_amd64.deb

那接下來就來看看gif如何從256色回到全彩的世界

 

效果比較

測試影片出處 (這是blender 每次推出新版都會有的小短片)

https://www.youtube.com/watch?v=mN0zPOpADL4

這部是 Agent 327: Operation Barbershop 由 Blender Animation Studio 上傳分享

gif測試輸出大小 480*320 pixel

1. byzanz (fps: 60 ? )

byzanz-record --delay=3 --duration=5 --x=300 --y=200 --width=480 --height=320 byzanz.gif

使用起來不太方便因為你要自己算x y的位置,這邊就是因為沒有算好才會有畫面上方的粗黑邊

byzanz captured gif

2. peek (fps: 10)

這邊就可以看到不會有上面的奇怪的顏色

peek captured gif with fps=10

3. peek + gif.ski enabled with max quality (fps: 10)

peek captured gif quality enhanced by gifski  with fps=10

 

是時候跟256 colors gif 說掰掰 laugh

 

留言

Sia on 2018/02/01, 週四 - 15:06

馬老師馬老師,我有問題(舉手)

peek看起來好方便,但是(找碴的得意嘴臉)

如果我的電腦不是linux系統,我應該怎麼做?frown

喔 Sia 同學這個問題問得很好喔(剛原本以為貼上官網的網址就可以解決,但突然覺得事情不單純而眉頭緊縮)

這邊原作者好像有說peek有支援AppImage (但似乎程式只支援 linux 系列的不同作業系統)

所以就我目前查到的資料是︰其他作業系統好像還不是很容易直接使用

所以可能大致步驟會是

1.下載最新版的peek.AppImage https://github.com/phw/peek/releases

2. 想辦法讓它動起來 ><

windows 10

https://discourse.appimage.org/t/run-appimage-on-windows/177

macOS

sean on 2018/02/05, 週一 - 13:37

希望這個不要流行~
要是網站都自動開圖,手機月租1.5Gb的窮學生就會爆了...

說的也是 ><  (同為吃不飽的使用者)

但其實還有一個地方可以調整就是gif播放的frame rate (詳見本文第二張圖)

順帶一提,三張說明測試用的gif檔案大小差不多喔

可以想見如果用高清+60fps 檔案會有多大(抖)

所以如果有這需求的話還是麻煩請存成影片吧 (peek 可以存成影片格式喔!!)