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

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

【公式】LINE Creators Market：アニメーション（動く）スタンプの作り方

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

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

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

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

DLはこちら：Pngyu

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

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

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

毛のはえたようなもの