前言

Telegram目前有幾套貼圖格式,分別是

  • Animated Stickers (動態貼圖, 可達60fps)
  • Video Stickers (影片貼圖, 30fps)
  • Static Stickers (靜態貼圖)
  • Custom Emoji (Emoji符號)

動態貼圖和影片貼圖都是會動的貼圖,區別在於影片貼圖可以將任何影片資源作為貼圖,而動態貼圖限制大,需要專門的矢量圖層製作而成的動畫,用的是Airbnb開發的動畫框架『Lottie』。

這裡主要是講 Animated Stickers 動態貼圖的製作方法。僅僅是製作方法,不會講動畫要怎麼做,需要有After Effects和動畫基礎,門檻比較高。

需要的東西

  • Adobe After Effects (很著名的東西)
  • Bodymovin-TG 插件 (輸出Telegram專用的TGS貼圖格式的插件)
  • ZXP/UXP Installer (安裝Bodymovin-TG插件所需的工具)

前期準備

安裝好Adobe After Effects後,打開ZXP/UXP Installer,把Bodymovin-TG插件拉進去就會自動安裝到Ae中。然後還需要在Ae中打開允許腳本訪問網絡和寫入文件。具體步驟可以參閱 Bodymovin-TG GitHub ,裡面的安裝說明很詳細。

開始幹活

根據Telegram Stickers文檔給出的格式,Animated Stickers的尺寸應為 512x512.幀速率要設定在 60 FPS,時長不能大於3秒,最終導出的文件大小不能超過64KB。

那我們就新建一個符合要求的合成:

注意Telegram貼圖不支援包括位圖在內的以下Ae功能:Auto-bezier keys, Expressions, Masks, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers. 在創作動畫的時候需要注意避免。

在這邊我放一個 Texon Stickers 的示例工程,可以下載參考。

貼圖動畫製作完畢後,點擊Ae菜單欄的 Windows > Extensions 找到 Bodymovin for Telegram Stickers 擴展

勾選需要導出的合成,並設定導出路徑:

點擊 Render 即可開始導出,如果文件大小以及格式正確,就會導出成功,否則會失敗報錯。可以根據報錯提示重新調整自己的動畫。

那麼現在我們就得到了一個TGS結尾的貼圖文件。

上傳到Telegram並建立一個屬於自己的貼圖包

通過 Telegram 的 Sticker 機器人可以建立一個屬於自己的貼圖包。

輸入 /newanimated 新建一個新的帖圖包

然後為自己的帖圖包取一個好聽的名字

接下來讓我們上傳已經做好的.TGS格式貼圖文件。

然後我們需要為這張貼圖定義一個Emoji表情,那我就選😉

如果我們還有其他貼圖要上傳到這個貼圖包裡,可以繼續發送其餘的TGS貼圖檔。
如果結束的話就點 /publish 就可以公開貼圖包了。

然後他會詢問是否為貼圖包設置一個額外的icon,icon的作用是顯示在貼圖欄上的,如圖。

如果想要定義一個icon,則需要額外製作一個100x100的TGS貼圖檔,製作方法和貼圖一致。

如果我們不設置額外的icon,可以點擊 /skip,那麼他就會以我們貼圖包的第一個貼圖作為默認的icon。

最後會讓你為你的貼圖包定義一個Short Name,這個Short Name會作為你的貼圖包地址呈現,以便於分享給其他人使用。Short Name是全球唯一的,有可能已經被人搶註了,會提示 Sorry, this short name is already taken. 那就只能重新想一個囉。

到這一步就大功告成,點擊鏈接就可以看到屬於你的貼圖包。

後續如果有新的貼圖想要上傳到這個貼圖包,可以使用 /add stickers 命令。