簡単な動くラインスタンプの作り方

LINEスタンプ制作日誌
ラインスタンプの基本的な作り方はこちら
スポンサーリンク

動くラインスタンプで最低限必要なもの

幻の青い鳥
幻の青い鳥

今回は動くラインスタンプの作り方を1から解説いたします♪
サイズとファイル形式は↓を参照してね。

メイン画像1個240px × 縦240px.png(APNG)
アニメーションスタンプ8個/16個/24個W320 x H270(最大).png(APNG)
トークルームタブ画像1個96px × 縦74px.png

まずラインスタンプの作成で必要なアプリ紹介です。

  • PNG形式で保存できる画像作成アプリ(またはそれに代わるもの)
    有料ですと機能が充実しているAdobeのPhotoshop(フォトショップ)かAdobeのIllustrator(イラストレーター)
https://www.adobe.com/jp/products/photoshop.html

無料だとGIMPInkscapeがおすすめ。
(操作になれるまで少しだけ時間が必要ですがなれてしまえば大丈夫♪)
無料ですが↓2つもかなり優勝なアプリです。
これからイラスト作成やラインスタンプ制作をしたいという方はお試ししてみてはいかがでしょうか?

GIMP
GIMP - The GNU Image Manipulation Program: The Free and Open Source Image Editor
Draw Freely | Inkscape
Inkscape is professional quality vector graphics software which runs on Linux, Mac OS X and Windows desktop computers.
  • 次に必要なのが複数のPNG画像をAPNGに変換してアニメを作るソフト
    アニメ画像に変換する君
    動くラインスタンプを作る時はこちらが一番使いやすいと思います。
幻の青い鳥
幻の青い鳥

動くラインスタンプのループ回数(動作を繰り返す回数)は
1~4回
までだよ。
あと再生時間は4秒までと決められているんだ。
このアプリはループ回数や再生時間が違うと警告して教えて
くれるからとても便利だよ。

こま狐
こま狐

なるほどー、なるほどー。
でも、いわれなくてもこま狐はすでに
このアプリを使用しているのだよ。

キャロライン
キャロライン

きつねはたまたまみつけただけだよね。

LINEアニメスタンプにも利用できる! APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース - ICS MEDIA
GIF画像に変わり得る新世代のアニメーション画像形式として、APNG(エーピング)とWebP(ウェッピー)があります。それらの画像ファイルを簡単に作成できるデスクトップアプリケーション「アニメ画像に変換する君」を弊社が開発し、無償でリリース...
幻の青い鳥
幻の青い鳥

あと、PNGを圧縮するソフトがあると便利だよ。
動くラインスタンプの容量は300KBまでときまっているんだ。
それ以上だと登録申請が出来なくなるからきをつけてね。

こま狐
こま狐

えっ、そうなの?

幻の青い鳥
幻の青い鳥

うん。
圧縮できるアプリやサイトはたくさんあるけど、
きつねでも簡単に圧縮できるサイトを見つけておいたよ。

png画像を圧縮できるサイト

TinyPNG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving...
スポンサーリンク

動くラインスタンプの作画作業

幻の青い鳥
幻の青い鳥

次はいよいよラインスタンプの作成にはいるよ。

動くラインスタンプの画像作成ポイント

  • アニメーションスタンプサイズはW320 x H270(最大)と決まりがありますがこの大きさで作画をしてしまうと画像が荒れるので3~4倍の大きさで描くことをおすすめします。
    (後でいくらでもサイズ縮小はできます)
  • 画像を保存する時は色をつけていない部分が透過(透明)になるようにPNG形式で保存してください。
  • 通常のラインスタンプでは10PXの余白が必要ですが動くラインスタンプでは余白が不要です。
  • 画風にもよりますが人物線などは若干太めに描いた方がわかりやすい(伝わりやすい)です。
  • 細かすぎる描画はつぶれてわかりにくくなるので要注意。

まずはラインスタンプにしたいイラストを描画。
(自由な発想で少し大げさな動作で描きましょう。余談として白くて丸いものが売れると聞いたことがあります)

それぞれにくわえたいパーツを描く。

どのように動かすかによってイラストを作成。
気をつけたい点として何枚も描くのは大変だし容量も限られています。
なのでパーツ事に書き分け、できたらコピー&ペーストで再利用をして楽をしてしまいましょう。
動くラインスタンプは5~20フレームまで可能です。
(下記の例は8フレームです)

キャロライン
キャロライン

簡単なんて言っときながらじつは噓八百。
いえ、嘘1億5千くらいと言っておくわ。

こま狐
こま狐

たしかに
簡単かもしれんが行程がジミーに根気がいる

キャロライン
キャロライン

そうそう。
だから、しだいに心も体も病んでくる。
で、何をどう作ったか次第にわけが分からなくなるし
PCを投げつけたくなる衝動にかられるの。

こま狐
こま狐

たしかに、もう、どうでもいいやって・・・なるかも。

キャロライン
キャロライン

そして完成まじかで己の首をしめるのよ。

幻の青い鳥
幻の青い鳥

そうならないためにも
動かす順番で最初からフレームに番号を振って
名前をつけておこうね

こま狐
こま狐

たしかにおっしゃる通りです・・・

作成したPNG画像をAPNGに変換

幻の青い鳥
幻の青い鳥

でも、ここまでくればもう完成したも同然だよ。

こま狐
こま狐

本当?

幻の青い鳥
幻の青い鳥

うん!
あとは最初の方で説明したアプリ
”アニメ画像に変換する君”に取り込んで
APNGに変更すれば出来上がりだよ♪

こま狐
こま狐

でも、どうやって?

幻の青い鳥
幻の青い鳥

”アニメ画像に変換する君”のアプリを
ダウンロードしたら立ち上げてみて。

そうすると↓の画面が出るから・・・

こま狐
こま狐

うん、うん。

出てきた!!!

幻の青い鳥
幻の青い鳥

あとは矢印をつけたところの設定をすれば簡単にできるよ。

アニメ画像に変換する君画像

動くラインスタンプの時間調整

こま狐
こま狐

あれ・・・
でも、これ再生時間が設定できない?

幻の青い鳥
幻の青い鳥

そうなんだ。
だからそこは左側画面にあるフレームレート
とループ回数で調整するといいよ。
たとえば・・・

動くラインスタンプ画像

幻の青い鳥
幻の青い鳥

画像イラスト8枚でフレームレート6
ループ回数を4にするとこのぐらいの速度だよ

こま狐
こま狐

ほうほう・・・

幻の青い鳥
幻の青い鳥

こちらは画像イラスト8枚
フレームレート20でループ回数が4の場合だよ。

こま狐
こま狐

うわぁー!!!
何だが目が回る・・・

幻の青い鳥
幻の青い鳥

そうだね。
見る側もこれだと疲れてしまうから
時間の調整にはきをつけようね。

こま狐
こま狐

了解いたしました。

動くラインスタンプの作成方法は他にもたくさんがあります。
今回ご紹介した行程はあくまでこま狐が作成した行程となりますが少しでも皆様のお力添えになれば幸いです。

キャロライン
キャロライン

今回紹介したラインスタンプを販売中です。
ご購入いただけるとこま狐が泣いて喜びますが
キャロラインのラインスタンプではないのでどうでもいいです。

マヌルネコの王子様 Ⅳ - LINE スタンプ | LINE STORE
マヌルネコの王子様第四弾。 名前はマル王子です。動くラインスタンプで敬語をメインとしておりますが日常でも使いやすく仕上げました。 どうぞよろしくお願いいたします。

コメント

error: Content is protected !!
タイトルとURLをコピーしました