こんにちは。WATANABEです。
クリエイターズスタンプでも動くLINEスタンプの申請が可能になり。制作者にとって大きなチャンスが到来しましたね。とはいっても動くLINEスタンプの制作は静止画に比べてかなり敷居が高く、Adobe Animate CC（Adobe Flash Professional CC)でないと制作できないなどと思われがちですが、実はphotoshopでも簡単に制作できますので本日はその方法についてレクチャーします。
スポンサーリンク
まずPHOTOSHOPでアニメーションを作る
まずGifアニメを作る手順でアニメーションを作成します。
PHOTOSHOP→ウィンドウ→タイムラインを選択
タイムラインウィンドウから「フレームアニメーションを作成」を選択しクリック
ビデオタイムラインで作成する方法もありますが、今回はわかりやすくフレームアニメーションでの説明にします。最終的にはフレームごとに書き出すことになるので、、、
アニメーションを作成する
アニメーションの作り方は今回は割愛させていただきます。詳しい作成手順は下記を参考にしてください。
https://helpx.adobe.com/jp/photoshop/kb/5784.html
コマごとにPNGファイルを書き出す
フレームごとにweb用にファイル→書き出し→「web用に保存」でpngファイルとして書き出す。
※レイヤーごとに一気に書き出す方法もありますがこの場合ドキュメントサイズを統一したいため上記方法で書き出します。
作成したファイルを圧縮。
※この際にファイル名末尾の連番がしっかりアニメ順になっていることを確認してください。
ツールを使ってAPNGファイルを生成する
ファイルの準備はできたので次に実際にAPNGファイルを生成していきます。
今回は環境に左右されないWEBツールの「APNG Assembler 2.9」で作成していきます。
http://littlesvr.ca/apng/assembler/assembler.php
上記URLにアクセスしたら、フレームレートを設定し、圧縮ファイルを選択し、「create APNG ボタン」を押してください。
出典：http://dev.classmethod.jp/references/ios8-safari-apng-publish/
下記のように画像が生成されるので右クリックで保存してください。
下記が生成したAPNGファイルです。※環境によって動かない場合がまだ多いようです。
まとめ
いかがでしたでしょうか？
上記方法だと細かいアニメーションの設定ができないなど課題が多いですが、私の予想だと近い将来PHOTOSHOPでのAPNGの書き出し機能が付与されるだろうと思います。
それでは。
スポンサーリンク
