使用9VAe製作對應LINE動態貼圖的APNG擋製作方法

LINE動態貼圖(卡通貼圖)在2016年6月開放一般人也可申請製作(LINE Creators Market)。

動態貼圖需要使用APNG擋製作。以下是使用免費軟體「9VAe」製作動態貼圖APNG擋的方式

動態貼圖製作導引

以下「動態貼圖製作導引」中要做出同樣等級的貼圖需要準備以下的圖片。要做出一組動畫需要先做出24個APNG擋。

一個APNG擋最少需要5個分割圖像,要做出循環動畫最少需要120張圖片。使用9VAe的話,中間的分割動畫部分便可省略不需要親自動手。所以依照圖像的內容需要手動繪製的圖片可減少至10分之1,省去許多麻煩。

動態貼圖製作導引

需要準備的圖片

圖片種類 張數 圖片尺寸 檔案類型
主要圖片 1 W240×H240 APNG
聊天室選擇鍵圖片 1 W96×H74 PNG
動態貼圖 24 W320 x H270(最大)、只要長寬任一邊的長度大於270像素,便可製作橫長(ex:W270 x H100)或是縱長(ex:W100H x H270)的動態貼圖。需填滿邊界不可留白。    APNG

動態貼圖格式條件

條件項目 動畫規定
播放時間 最長4秒。可自行選擇1、2、3、4秒數。
分割格數 5~20格
1秒需要的動畫張数 播放時間為4秒的話、2~5張/秒
播放時間為3秒的話、2~6張/秒
播放時間為2秒的話、3~10張/秒
播放時間為1秒的話、5~20張/秒
色彩格式 RGB
檔案尺寸 單1檔案在 300KB以下、全部檔案壓縮後的ZIP檔案在20MB以下

至今為止使用免費軟體製作APNG動畫擋時,需要準備多張PNG圖片,再使用轉換功能才能將圖片轉換成APNG擋。但只要使用9VAe,只要稍稍將圖片的動作調整,再確認動作是否如您所想之後便可直接做出APNG檔案。

話不多說,馬上來製作APNG吧。

9vae ani01

例作品是擷取Openclipart的SVG圖片這個動畫的做法在這裡

如想親自嘗試的話,也可從開啟「Help列表」>「表情遊戲(練習用)」>「變身」等等的範例動畫,試著將其轉換成APNG擋練習。

只要將圖片開啟後再使用9VAe調整動作便可做出動畫。圖像的尺寸與格數可以事後再調整所以不用太擔心。甚至不用轉擋輸出便可馬上確認動畫效果,可提升動畫製作的成效並節省許多時間。

完成動畫之後,可以嘗試著製作LINE動態貼圖用的APNG擋。以下的畫面便是使用9VAe製作完成的動畫。

※ 說明畫面是Windows版。如果是使用Mac/Ubuntu版的話,同樣在畫面的上端有選單列表。只要點擊9VAe視窗便會顯示。

Openclipart的SVG圖片

1.將動畫往左上靠攏

9vae line image01

  1. 為了去掉動畫多餘的留邊,在第一頁的下方點擊A處,再點擊「畫面指定,從這裡開始」
  2. 再到最後的畫面點擊B,再點擊「畫面指定,到此為止」。
  3. 這樣整體動畫的圖形便會被選擇,被2線重疊的選擇框圈住。被選擇的圖片會出現紅色四角形選擇區域。
  4. 為了消除留邊,將2線重疊的選擇框C拖曳,將整體圖片往畫面的左上角移動。選擇比較容易判斷是否有留邊的圖片拖曳也可。 一邊按住Shift,在一邊按上下左右的按鍵便可做出微妙的調整。

2.畫面尺寸變更

9vae line image02

  1. 從畫面選單A選擇「畫面設定」,設定畫面的寬與高的尺寸,讓留邊完全消失。
  2. 按下播放紐B,便可確認留邊是否完全被刪除。

3.APNG檔輸出

之後只要將檔案輸出成APNG檔即可。

  1. 範例動畫的寬度最大值為320像素。分數在20以內,播放時間為2秒。每秒間的張數設定為10。
  2. 從檔案選單>選擇「連續/APNG輸出」
  3. 選擇要保存檔案的資料夾、輸入保存名稱後,點擊「保存」按鍵。

便會出現如下方的設定畫面。

9vae line image03

  1. 這次的寬度A是設定為「320」。如果選擇「保持縱橫比例」選項的話,高度便會自動被設定。
  2. 輸出速度設定為1秒10張動畫。
  3. 輸出秒數設定為2秒。
  4. 「請一定要選擇「將背景改為透明」選項。
  5. 按下「輸出開始」的按鍵。
  6. 跳出「連續輸出的檔案要合併成為1個APNG檔嗎?」選項,選擇「是」。便會將檔案輸出成APNG檔。
  7. 如果選擇「否」的話,指定的保存檔案夾中會被保存有標示數字順序的20張PNG連續檔案。也可以使用其他軟體做後續的處理。