概要
個人的に動く LINE スタンプを作るときの方法を紹介します
一応全部無料でできます
各ツールの詳細な使い方は説明しないので、公式サイト等を見て勉強してください
今回は Windows 環境のスクリーンショットで説明しています
環境
- macOS 10.12.5 or Windows 10
- FireAlpaca 1.7.4
- アニメ画像に変換する君 1.2.0
- LINE シミュレータ
FireAlpaca で絵を書く
全てはここから、絵を書かないことにはスタンプはできません
FireAlpaca を開いたら
ファイル -> 新規作成 -> 幅320pixel, 高さ270pixel -> OK
でレイヤを 1 つ作成します
このレイヤに適当に絵を書きます
ペンを選択してマウスの左クリックを押しながら移動すれば線が書けます
そして 1 つのレイヤを書き終えたら更にレイヤを追加します
レイヤ -> 追加
追加したレイヤに次のアニメーションの絵を書きます
こんな感じで画像をたくさん作りコマ送りすることでアニメーションを実現しています
アニメーションスタンプのガイドライン を見ると「イラストは最低5 - 最大20フレーム」とあるのでレイヤも最低限 5 つ以上、最高で 20 個以下にしましょう
とりあえず 5 レイヤ分で作成しました
各レイヤに丸を横に並べていって最後に四角が登場する謎のアニメーションです
FireAlpaca で png を連番で書き出す
絵が書けたらこのレイヤたちを連番 png で書き出します
表示 -> オニオンスキンモード
にします
オニオンスキンモードはレイヤの前後が薄緑と薄ピンクで表示される機能です
この機能を使うと前後のアニメーションでどういう動きをするか確認できるのでアニメーションが作成しやすいです
調整できたら、連番で書き出します
ファイル -> レイヤーを連番出力 (オニオンスキンモード)
で連番ファイルを保存するディレクトリを選択するダイアログが表示されるので選択して保存します
その後動画を見るかどうか聞かれますが No で OK です
これで連番ファイルが png で出力されました
ちなみに出力される連番は 000.png から出力されます
レイヤ的には番号の大きい方から 000 になるので注意してください
(図で言うと レイヤ5 の四角が 000.png になり、レイヤ 1 の左の丸が 0005.png になります)
アニメ画像に変換する君で apng を作成する
作成された連番の png を apng という動く LINE スタンプのファイル形式にします
ダウンロードしたアニメ画像に変換する君を開きます
そして「ファイルを選択」もしくはドラッグアンドドロップで作成された連番ファイルを開きます
左メニューの「フレームレート」と「ループ回数」を調整します
今回だとフレームレートを「5」ループ回数を「2」にするといい感じになります
いい感じというのは再生時間の調整の部分でこれもガイドラインに書いているのですが再生時間は「1, 2, 3, 4」秒のどれかでないとダメみたいです
再生する機能もあるので再生しながらどんな感じのアニメーションになるか確認すると良いと思います
フレームレートとループ回数を調整したら「アニメ画像を保存する」を選択して apng ファイルを作成します
名前と保存先を決定して出力しましょう
できあがった apng ファイルは拡張子は .png で普通に開いてもただの静止画が表示されるだけだと思います
LINE シミュレータで動作確認する
ただの静止画をシミュレータ上で表示してみましょう
Firefox で https://creator.line.me/ja/simulator/ からマイページにログインし左メニューの「作ったスタンプをチェックしよう！」を選択します
「スタンプシミュレータを使ってみる」を選択すると別ウィンドウでシミュレータが起動します
ここに先程作成した apng ファイルをドラッグアンドドロップで配置してみましょう
すると動く LINE スタンプのようにアニメーションすると思います
写真はアニメーション後の状況です
最後に
個人的に動く LINE スタンプを作成する方法を紹介しました
メリットはすべて無料で使えるという点でしょうか
フォトショップなどが使えるのであればそれだけで apng まで作成できると思います
また、絵自体もクオリティの高いものができあがると思います
また、絵を書くのにマウスだと正直辛いので本格的に書きたいのであればペンタブを購入するのをおすすめします
自分はまだそこまで本格的にやっていないのでペンタブを購入していませんが、もし購入してスタンプを作成することになったそのときにレビューや FireAlpaca との連携方法なども紹介したいと思います
0 件のコメント:
コメントを投稿