少年フィード

  1. TOP
  2. お役立ち
  3. web
  4. 【ラインスタンプ】APNGファイルをPHOTOSHOPで作る方法完全保存版

【ラインスタンプ】APNGファイルをPHOTOSHOPで作る方法完全保存版

こんにちは。WATANABEです。

クリエイターズスタンプでも動くLINEスタンプの申請が可能になり。制作者にとって大きなチャンスが到来しましたね。とはいっても動くLINEスタンプの制作は静止画に比べてかなり敷居が高く、Adobe Animate CC(Adobe Flash Professional CC)でないと制作できないなどと思われがちですが、実はphotoshopでも簡単に制作できますので本日はその方法についてレクチャーします。

 

 


 
スポンサーリンク



 

 

まずPHOTOSHOPでアニメーションを作る

 

まずGifアニメを作る手順でアニメーションを作成します。

PHOTOSHOP→ウィンドウ→タイムラインを選択

01

 

 

 

タイムラインウィンドウから「フレームアニメーションを作成」を選択しクリック

ビデオタイムラインで作成する方法もありますが、今回はわかりやすくフレームアニメーションでの説明にします。最終的にはフレームごとに書き出すことになるので、、、

02

 

 

 

アニメーションを作成する

アニメーションの作り方は今回は割愛させていただきます。詳しい作成手順は下記を参考にしてください。

https://helpx.adobe.com/jp/photoshop/kb/5784.html

03

 

 

 

コマごとにPNGファイルを書き出す

 

フレームごとにweb用にファイル→書き出し→「web用に保存」でpngファイルとして書き出す。

※レイヤーごとに一気に書き出す方法もありますがこの場合ドキュメントサイズを統一したいため上記方法で書き出します。

名称未設定-4

 

 

作成したファイルを圧縮。

 

※この際にファイル名末尾の連番がしっかりアニメ順になっていることを確認してください。

03

 

 

 

ツールを使ってAPNGファイルを生成する

 

ファイルの準備はできたので次に実際にAPNGファイルを生成していきます。

今回は環境に左右されないWEBツールの「APNG Assembler 2.9」で作成していきます。

http://littlesvr.ca/apng/assembler/assembler.php

 

上記URLにアクセスしたら、フレームレートを設定し、圧縮ファイルを選択し、「create APNG ボタン」を押してください。

スクリーンショット 2016-07-14 23.36.27

出典:http://dev.classmethod.jp/references/ios8-safari-apng-publish/

 

下記のように画像が生成されるので右クリックで保存してください。

スクリーンショット 2016-07-14 23.59.14

 

下記が生成したAPNGファイルです。※環境によって動かない場合がまだ多いようです。

 

 

 

まとめ

いかがでしたでしょうか?

上記方法だと細かいアニメーションの設定ができないなど課題が多いですが、私の予想だと近い将来PHOTOSHOPでのAPNGの書き出し機能が付与されるだろうと思います。

それでは。


 
スポンサーリンク


 

 

 

 

 

関連記事