SVG 動態圖片及 GIF 製作

SVG 和 GIF 有什麼不一樣

先講一下 SVG 和 GIF 有什麼不一樣,如果你「已經知道」或「不想知道」也可以直接跳下一段。

兩者一樣都一樣可以做透明背景、可以做成動態圖。

GIF

GIF 是一種歷史悠久的動態圖像,可以想像就是一張圖、一張圖接起來的動態,可以重複播放,也可以設定每張圖的停留時間。它是一種「點陣」圖形檔,可以顯示256色(算是滿少的)。所謂「點陣」圖就是由很多的像素(pixel)組成,每一個像素記錄一個顏色,所以圖檔越大,檔案也越大。一般狀況下用 GIF 做動態圖檔案會比 SVG 來得大。

把點陣圖檔放大看到每個像素紀錄一個顏色

點陣圖檔每一個像素,記錄一個顏色。

另一個缺點就是如果把本來很小的點陣圖檔放大很多,就會出現馬賽克鋸齒狀,圖像會失真,而且看起來很沒質感。

仔細觀察一下,路上很多燈箱都有這個問題,看了好惱人。有可能不是設計師的錯,而是廠商提供的原始照片檔案太小。

點陣圖放大容易出現鋸齒

SVG

svg 是向量圖,向量圖是由記錄座標來產生圖像,所以我們常看到的向量圖都是由色塊組成。由於向量圖只要紀錄座標、曲線、範圍內的顏色等等資訊就可以呈現,因此檔案「通常」比較小。(講「通常」是因為如果你硬要用向量模式來呈現點陣的效果,那檔案將非常巨大。)

向量圖的檔案紀錄座標、曲線、範圍顏色等等資訊。

向量圖檔除了檔案小的優點以外,它最大的優勢還是在不管放多大都不會有失真或馬賽克鋸齒的問題。

要如何製作GIF 或 SVG 動態圖片

現在很多網路上的廣告 banner 都是用 SVG 製作,因為他有放大不失真、檔案小的優點。不過我們還是先講如何製作 GIF 動態圖片,或是你要稱它為動畫也可以啦。

製作 GIF 動態圖片

如果你會用 Photoshop 那 Photoshop 裡面就有這樣的功能,不過如果你會用 Photoshop 應該也不用看這篇了,所以我在這邊不介紹用 Photoshop 製作動態 GIF的方式。

1.首先你要有幾張圖(圖片哪裡來我不管),比如說你有以下兩張圖,想要把它做成動態循環

2.先到這個網站https://ezgif.com/maker

點「選擇檔案」上傳你的圖檔。

3.兩張圖一起選起來,再按確定

4.看到這邊顯示兩個檔案已經上傳,點藍色按鈕「Upload and make a GIF」

5.接下來可以設定每張圖片停留的時間,以及是否要疊加圖層,如果你是透明背景,沒有要把下一張圖疊在上一張圖上面,就勾選下方說明的那個選項。好了就按「Make a gif」

6.往下捲會看到 GIF 已經製作好了,按最右邊那個 SAVE 的按鈕就可以下載下來。

7.下載下來後,在 WordPress 裡面就和插入圖片一樣的做法就可以放到文章裡面。

製作 SVG 動態圖片

前面說了很多 SVG 的優點,但是在我目前版本的 WordPress 要直接插入 SVG 檔案時,會出現一個安全性的錯誤如下:

所以我們必須先安裝一個外掛叫做「safe svg」

安裝好就可以以一般上傳圖片的方式,上傳 SVG

前面一直誇 SVG 的檔案很小,到底有多小?
比如說下面這個檔案只有 3k,這在網頁呈現上是很有優勢的。

移動的方塊和球

本來要用截圖方式說明如何製作動態 SVG,但步驟實在太多,步驟圖片做完都老了,所以直接用影片說明。

這個影片會包含以下內容:

  • 使用線上工具 https://app.svgator.com/ 免費製作SVG動態圖檔
  • 線上工具只有14天試用期,過期後要再申請試用需使用不一樣的 email ,所以可以用免洗email ( https://10minutemail.com/)申請,好壞
  • 用 illustrator 製作 SVG 圖層
  • 匯入靜態 SVG 到線上工具去編輯製作出動態 SVG
  • 要把元件加到時間軸的方式是先選擇元件,再按時間軸開端的+號,選擇要加入的運動類型。
  • 匯出的時候選擇”CSS”(不要選JavaScript)匯出比較不會有問題。

*因為教了使用免洗 email 再次申請試用版,雖然也算合法使用但有點取巧就是了,所以還是要平衡報導一下:使用試用版功能上還是有比較多限制,如果想要進階功能能力也允許,也可以考慮升級付費版。

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…