スポンサーリンク

【初心者向け】クリスタでLINEアニメーションスタンプの作り方流れ

LINEスタンプ

CLIP STUDIO PAINT(クリップスタジオ)PROの”うごくイラスト”にて
LINEアニメーションスタンプ作成に挑戦しました。
めちゃエラー発生させつつも(笑)無事販売開始されました。

のわこ
のわこ

セルとかタイムラインとか・・?ややこしいよ~!
もっと簡単にしてちょうだいよ~!(笑)


こちらはアニメスタンプに使いましたうちのキャラクター、
かっぱのぷく太です^^w

こちらの記事ではかっぱのぷく太スタンプはどのように作っていったか、流れを解説してみました。
最適なやり方はもっとあると思いますが・・・
このようにしたら取りあえずは出来たよ!というご紹介です(A^▽^;)

初めてクリスタでキャラクターが動くスタンプを作りたい、という方向け記事でございます。
よろしければご覧くださいませ。
目次から 好きな部分にお飛び下さい~。

スポンサーリンク

新規作成

★12枚4秒のなでなでスタンプを作ります。

クリスタを起動し、ファイル→新規作成。

設定

プリセットは「アニメーションスタンプ(原寸)」のサイズが
制作ガイドラインぴったりのW320×H270です。

ガイドラインのLINEスタンプ公式ページはこちら

今回は「アニメーションスタンプ×2(2倍)」を選択しました。
こちらサイズはガイドライン規定サイズの二倍ですが、
最後アニメに書き出す際に自動で既定のサイズになってくれます。
大きく作って縮小する方が綺麗になる感があるので2倍で作成しました^^;

アニメーションスタンプガイドライン公式ページはこちら

「うごくイラストを作る」にチェック。
セルの枚数、フレームレートとかいうものの数字の設定は後から変えられますので、
今は取りあえず気にせずそのまま進みます。
説明は後述します。

次に準備として、上メニュー「ウィンドウ」内の「アニメーションセル」「タイムライン」選択。
こんなウィンドウが出ます。これらはまた使っていきます。

 アニメーションフォルダとは?

右の赤矢印の部分“アニメーションフォルダ”内レイヤーの”1~12″に絵を描けば、
12枚のアニメーションが出来ます。

“レイヤー1″に描いたものはアニメの1番目です。

セルの枚数、フレームレートfpsとは?

先ほどの画像緑枠は新規作成時に気にせずそのまま進んだ設定なのですが、

「セルの枚数12枚」とは?→「12枚イラストを描いてアニメ作るよ」ってこと。
「フレームレート6fps」とは?→「イラスト6枚で1秒分だよ」ってこと。

fpsの数値が多いほど、ぬるぬると滑らかに動きます。

ちなみに“セル(イラスト)の枚数20枚以内”がLINEスタンプの規定ですので、
設定で選んで良いのは20以下の数字です。

フレームレートが6fps(6枚で1秒)であればイラストは、
「6枚」or「12枚」or「18枚」でぴったり動画が終わるようにどうにか調整しました。
5枚やら13枚ですと、秒数が規定の1、2、3、4秒にならず端数になってしまいます^^;

タイムラインとは?


先ほどと同じ画像ですが下はタイムラインウィンドウです。
青丸で囲った部分には1(秒)、2(秒)と表示されています。
6枚目の絵が終わったら1秒なんだな~。と分かります。
(7枚目の上に1がありますが「6枚目が終わったら1秒」です。)
タイムラインウィンドウでは何回も再生して動きを確認します。

フォルダを作って下描き

一発描き出来たら早いのですが・・・^^;
下描き、線入れ色塗りのレイヤーを分けたいので、
“レイヤーの1″をフォルダに入れました。
画像は下描きフォルダを作った状態です。
この”1のフォルダ”がアニメの一番初めの画像です。
フォルダに入れても機能は同じです♪

“伝えたい感情が分かるイラストを1フレーム目に入れて下さい”とは?

ところでこの1フレーム目、1番目の画像はこのスタンプのメインになる画像にします。
規定には“伝えたい感情が分かるイラストを1フレーム目に入れて下さい”とあります。

1フレーム目はスタンプのここに表示されるメインの画像です。

え・・なんでひとつめがメインなの・・?
ずっとループのアニメならいいけど、
“何もない所からキャラが出てくるアニメ”
とかだとメインは最後の絵になっちゃうけど・・?
最後の絵からスタートするのおかしくない・・?

なんて思っておりました。
全然おかしくなりませんでしたw
静止画が出ていて、それをタップしたらアニメがスタートするわけですから、
別に「最後の絵からスタート」しているように見えません。

要するに、
とにかく「フレーム2がスタートで、1がラスト」にしたらいい感じっす!w

LINE公式ページ真ん中あたりにイラスト配置の注意点が書いてありました。

清書

下描きの上に清書しました。
1枚目が出来ました。

次はオニオンスキンを使って2枚目を描きます。

オニオンスキンとは?


青丸のボタンはオニオンスキン設定なるもので、
前後の絵がうっすら表示されます。
2フレーム目を選択中ならなら1と3の画像を見ながら作業出来ます。

1と2の間にもう一枚欲しいな~と思いましたので、
2を右にドラッグしてずらしまして、

1と2の間の部分を右クリック。
何でもいいですが3を選びます。

まだ何も書いていないレイヤー3が間に入りました。

これで右のレイヤー3に絵を描けば、
1と2の間に絵が入ります。

順番通りに。(タイムラインの順番で正視化)

数字の順番が1、3、2となっておりややこしいので、
ちゃんと1、2、3の順番に直したいです。


上メニューの「アニメーション→セル指定→タイムラインの順番で正視化」
これで順番が正常になりました。
レイヤー2に絵を描けば、
1と3の間に絵が入ります。

さて、3も清書しました。
2に1と3の間の絵を描きましょう。
オニオンスキンで前後がうっすら見えているので間を埋めました。

ところで初めに出したアニメーションセルとは何に使う?


ちなみにこの画像のように、
真ん中を描きたいけどオニオンスキンでも前後が見えないよ~。(前後が離れているから)

という時には、表示したいイラストをアニメーションセルの下部にドラッグ。

上部は選択中の編集したいレイヤーで、
下部はライトテーブルなるものです。
するとうっすら前後の絵が見え、真ん中に絵を描くことが出来ました。
初めに出したアニメーションセルウィンドウを何につかうかの説明でした^^

クリスタ公式サイトでライトテーブルについて分かりやすい解説があります。

反復させる

戻りまして、「1、2、3」が出来ました。
これを反復してなでなでなで~と12枚目まで行きたいと思います。

タイムライン上で絵の無いセルを右クリックし、数字を選択していきます。
このアニメだとこんな感じ。
123212321232な~でな~で。

これでイラストは完成です。

APNGデータで書き出し、
LINEクリエイターズマーケットのマイページに登録


”ファイル→アニメーション書き出し→アニメーションスタンプ(APNG)→保存”
(ファイル名はひとつひとつアップロードするなら何でもいいですが、
zipでまとめてアップロードするなら数字。)


アニメーションスタンプ(APNG)の出力設定ですが、
既定の“再生時間は1秒、2秒、3秒、4秒のいずれか”になるように指定回数を決めてOKします。
(1.5秒とか端数にするとエラーが出ました)
このスタンプでは指定回数2回にしました。

また、規定に“余白はつけないでください”とありましたので
“余白を削除する”にチェックが必要です。

出力が完了しました。
こんな確認画面が出ます。

“アニメーションスタンプ1個につきファイルサイズ300KB以下”
“画像サイズは横か縦どちらかが270px以上”
という規定があります。
規定外で作ってしまうとエラーで登録できませんでした。^^;

ファイルサイズはこの”かっぱのぷく太”のような、
ベタ塗り&同じ絵リピートアニメだと全然大丈夫w
画像サイズは、出力設定の際ちゃんと320×270pxにしているのですが、
「余白削除」を選ぶと270無くなってしまう時があります。
(でも余白削除はしないといけないw)

のわこ
のわこ

アニメが一つ完成しました~~~~わーい^^
LINE Creators Marketのマイページにも登録できました。

登録できるか不安ですので下描きの時点でアップロード出来るか試したりもしました。

メイン画像も動きが必要

メイン画像を既存ファイルの縮小で作りました。

トークルームタブ画像(よこ96×たて74px)は静止画で良いのですが、
メイン画像(よこ240×たて240px)は動きが必要でした。


メイン画像にしたいもののファイルを開いて、
上部メニューより”編集→キャンパスサイズの変更”


240×240pxに変更。


レイヤーの、アニメーションフォルダーの部分選択した状態で、


“上部の拡大・縮小・回転アイコン→位置調整キャンバス”
するといい感じにイラストが縮小されました^^

他のアニメと同じようにAPNGで書き出します。
注意:メイン画像は余白削除するにチェックは入れません^^;
こっちは余白あっていいんかい!w

アニメーションスタンプError例

いろいろエラーを出しましたので、例をご紹介しますw

“再生時間は、1秒、2秒、3秒、4秒のいずれかに設定してください。”
1.8秒とか端数は駄目だった。

“よこ320pxたて270px以内で設定してください。”
“また、どちらかの辺が必ず270px以上になるようにしてください。”
これ、余白を無くさなければならないのでよく間違えました。^^;
縦か横どちらか一方が270px以上になるように文字やら草やら描きたしました。

“ループ数は1~4回以内で設定してください。”
再生時間が既定の4秒以内ならいいんでしょ~?
と思ってループ回数8にしたら、ループ数が規定外でした。

“フレーム(イラスト)数は最低5枚~最大20枚以内に設定してください。”
タイムライン上ではイラスト3枚で、
最後出力設定時に4秒分ループしようとか思ったら駄目だった。

フレームレート(1秒間にイラスト何枚か)を後から変更する方法

フレームレートは本来アニメーションの滑らかさや速度を考えて設定するものかなと思うのですが・・
何も考えていないわたしの場合、

のわこ
のわこ

初め6fpsに設定したけどイラスト8枚で終わっちゃった!
このままだと既定の秒数にならない!
よし、8枚で1秒にしよう。8fpsにしよう。

みたいな変更をしてました^^;

“アニメーション→タイムライン→フレームレートを変更→お好きなfpsに。”

お疲れ様でした!
ひとアニメ作れてしまえば、24個作るのも楽しく作業出来ます・・・!!
もし何か参考になる箇所があれば嬉しいです^^

いるまのわこのスタンプ紹介記事はこちら

作成したLINEスタンプ紹介
のわこ(私) 自作ラインスタンプのご紹介です LINEスタンプ かっぱのぷく太 ふくふくふかふか、かっぱのぷく太 豆大福がだ~いすき! やわらかぽってりボディのかっぱさ...
LINEスタンプ日常
スポンサーリンク
シェアする
イラスト工房いるまのわこ