毛のはえたようなもの

インターネット的なものをつらつらとかきつらねる。

LINEアニメーションスタンプAPNG作成動画の作業メモ

LINEアニメーションスタンプの公式ガイドラインに掲載されている、下記動画の作業メモです。
早くて画面が小さくわかりにくいのと、ちょこちょこと躓いたので、工程ごとのポイントをかいていきます。

【公式】LINE Creators Market:アニメーション(動く)スタンプの作り方

アニメーション用画像自体は作成してあるものとして、APNGの作成が主です。
なお、当方のPhotoshopイラレバージョンはCC2019です。BridgehはCS4。

1 余白をトリミング=Photoshop(動画0:07-0:24)

画像を同じサイズに切りぬくために、Photoshopで作業します。

  1. まず、Photoshopでフレームの最初になるpngを開く。(PhotoshopCC2019で新規画像と作るとアートボードができてしまい、何やら挙動がおかしくなるので、動画のとおりにしないこと。)
  2. そこに全てのフレームの画像をドラッグ&ドロップする。すべての画像がレイヤーに分かれて配置される。(枚数分の配置確定クリックが必要)
  3. 「切り抜きツール」で切り抜き。縦横一番出ているレイヤーに合わせてスナップしてくれるはず。
  4. 「ファイル」>「書き出し」>「レイヤーからファイル」で画像を書き出す。保存場所とファイル名の接頭を指定。形式はPNG24を指定する。オプションで「レイヤーでトリミング」のチェックを外す。外さないとレイヤーごとに違う大きさの画像が生成されてしまってアニメがガタガタになる。f:id:gomi-box:20181019154456p:plain
  5. OKを押すとバッチが走ってPNGファイルが保存される。少し時間がかかるので待つ。

2 並び順の調整=Bridge(動画0:25-0:39)

  1. Bridgeで先に保存した画像が入ったフォルダを開き、順番を調整する。一番始めに再生されたい画像を先頭に持ってくる
  2. リネームしたい画像をすべて選択した上で、「ツール」>「ファイル名をバッチで変更」。動画だと潰れて読めない、設定はこんなかんじ。f:id:gomi-box:20181019155558p:plain

3 画像の圧縮=Pngyu(動画0:40-0:51)

pingyuというソフトで画像を圧縮します。必要がなければとばしてOK。
必要なし=1つのAPNG300KB以下

DLはこちら:Pngyu

4 APNGデータの作成=APNG(動画0:52-1:16)

正直動画よりこちらのほうがわかりやすいでしょう。
qiita.com

5 動作確認=Firefox(動画1:17-)

www.mozilla.org
公式ではFirefoxが推奨されているが、Firefoxで再生すると透明なはずの背景が白い…
Choromeで再生すると透過している事がわかるので安心する。

6おわり!

正直この作業をスタンプ1セット24個分するのかと思うと発狂しそうですががんばるぞい