【Canva】如何製作 GIF 圖片?可好好善用「頁面時間設定」

2023 年 5 月 17 日 更新

canva gif製作 | 圖片gif製作 | 時間秒數 | 如何製作gif | 線上製作

Canva 如何製作 GIF

Canva 除了可以用來設計各式各樣的圖片或影片之外,也能用來製作 GIF 這種動態性的圖片,只要在設計專案裡面製作幾頁的圖片,或是在畫板中加入動圖,就可以把這幾頁的設計下載成一張 GIF 圖片。

追蹤數位小幫手社群平台:Instagram、Twitter…等等。

Canva GIF 圖片快速製作

GIF 是 Canva 所提供的一種下載檔案格式,我們只要在設計專案裡面製作幾頁圖片,或是在畫板中加入動圖、轉場、動畫….等等效果,就能把這些設計下載成一張 GIF 圖片。這邊我就簡單示範一下製作 GIF 的其中一種流程。

Step 1:準備好圖片素材

這邊我以下圖的設計專案當作例子,這兩頁都是相同的圖片設計,而第二頁是用「複製頁面」的功能所複製出來的。

準備兩張相同的圖片頁面

Step 2:稍微做點調整

為了要讓後面下載的 GIF 圖片有動畫的效果,我在第二頁做了一些調整,把裡面的文字調成不同的顏色,而第一頁則保持原本的黑色不變。

可以調整其中一頁的文字顏色

Step 3:下載成 GIF 檔案

最後是下載圖片的階段:

  1. 點擊圖片編輯器右上角的 下載 按鈕。
  2. 「檔案類型」切換到 GIF 的選項。
  3. 「請選擇頁面」則勾選 所有頁面 (兩頁)。
  4. 最後再按下面的 下載 按鈕。

下載GIF檔案

GIF 成品

最後即可得到一張 GIF 圖片 (如下圖)。

雖然它好像沒在動,但它真的是一張 GIF 圖片!只是因為製作過程太過簡略,沒有做到頁面時間設定,所以它一個頁面預設的顯示時間為 5 秒鐘。如果想要縮短預設的頁面顯示時間,就需要喚醒工具列上的「頁面時間設定」,至於要如何喚醒這個功能,可以繼續往下看。

一頁5秒鐘的GIF圖片



如何喚醒頁面時間設定?

為了要調整 GIF 圖片的頁面顯示時間,我們需要喚醒 Canva 工具列上的「頁面時間設定」,它平時都是隱藏的狀態,只有用到編輯器裡面的某些功能時,工具列上的「頁面時間設定」功能才換顯示出來,喚醒的方法有很多:

方法一:使用轉場效果

在設計圖片的時候,我們有時候會用到不同的「頁面簡視方式」,其中一種就是 時間線視圖,打開它之後,點擊縮圖方塊右上角的一個選單按鈕 ,再點擊選單裡的 新增轉場,只要套用左邊介面其中一個轉場效果,就可以喚醒工具列的「頁面時間設定」按鈕了。

新增轉場效果

延伸閱讀:【Canva】如何替頁面添加轉場效果?讓畫面切換多點視覺變化!

方法二:使用動畫效果

第二種方法是套用動畫效果,不管是套用頁面動畫、元素動畫、照片動畫還是文字動畫,只要在設計裡面套用動畫效果,一樣可以喚醒工具列的「頁面時間設定」。

新增動畫效果

延伸閱讀:【Canva】工具列的動畫功能設定,讓你的設計動起來!

方法三:使用動圖

我們在元素裡面經常可以看到各式各樣的「動圖」,如果把這些動圖添加到畫板裡面,也可以喚醒「頁面時間設定」。

新增動畫類的圖片

方法四:使用音訊或視訊

Canva 的素材裡面除了圖片、圖像或動圖之外,也有音訊或視訊的素材可以讓我們用,只要在設計專案裡面添加音樂或影片,一樣可以喚醒工具列上的「頁面時間設定」。不過我覺得加入這兩種素材,調整頁面時間會比較麻煩一點,如果非必要的話,用前面三種方法來喚醒頁面時間的設定就好。

新增音訊或視訊到設計裡

設定頁面時間

喚醒工具列上的「頁面時間設定」功能之後,就可以點它來進行頁面時間上的調整,這邊 時間選擇 最多可以調到 30 秒鐘,還可以一次套用到所有的頁面。只要調整過頁面的時間,即使把動圖、動畫、轉場…等等之類的效果去除掉,「頁面時間設定」的按鈕也不會消失。

頁面時間都設定好之後,可以先利用編輯器右上角 預覽影片 的按鈕來看看頁面時間是否太長或太短,如果時間設定 OK 的話,就可以進入下載 GIF 圖片的階段,把這個經過頁面時間改良的設計下載成一張 GIF 圖片。

設定頁面時間跟預覽影片

改良版的 GIF 圖片

經過「頁面時間設定」的調整之後,GIF 裡的頁面顯示時間就不會是預設的 5 秒鐘了,而是能像下圖這樣「一頁只顯示 1 秒鐘」的 GIF 圖片。

一頁1秒鐘的GIF圖片

結語

Canva 製作跟下載 GIF 其實非常容易,反倒是「頁面時間」這個設定比較少人會去留意,甚至有些人不知道它或是不知道怎麼喚醒它,如果設計裡面剛好沒用到上面提到的編輯器設定或素材,它就是隱藏在工具列裡面,進而會忘記有這個功能可以設定。



延伸閱讀

原網站| digitalyoming.com ( 未經許可,禁止轉載 ) 
原網址|https://digitalyoming.com/how-to-make-gif-images-in-canva/
返回頂端