ねこくまブログ

もはやただの雑記です。

LINEアニメーションスタンプをカンタンにつくる5つのコツ

 

f:id:tomo20150322:20160612155719j:plain

どうも! LINEスタンプクリエイター(←)の筆者ともです。

 

前回、「動くLINEスタンプの作り方をざっくりまとめてみた。」という記事を書きました。それらをふまえて実際にアニメーションスタンプを作ってみたんですよ。これが意外や意外。思っていたよりも、けっこうカンタンに作れちゃいました。

 

今となっては、作る前に「ハードル高そうだな~」と尻込みしていた自分のケツをイナズマシュートよろしく蹴っ飛ばしてスカッとしたい気持ちです←

 

今回は、実際に作ってみて気づいた、作り方のコツなんかを制作過程とともに書いていきたいと思います。

f:id:tomo20150322:20151213174420j:plain

ねこくまくん「いっしょに作ろうぜ! 最高のアニメーションスタンプを←」

制作環境と、ざっとしたアニメーションスタンプ制作の流れ

今回使用したツール一覧

・ノートパソコン(ずっと昔に買ったヤツ)

・ペンタブレット(WACOM Intuos3 A5サイズ クリスタルグレー PTZ-630/G0

・PhotoshopElements5.0(Win)(ペンタブレットについてたソフト)

・APNG Assembler(フリーソフト)

制作環境はこんなかんじです。あと長時間の作業は目が疲れるので、ブルーライトを防ぐメガネをかけて作業しました。

アニメーションスタンプ制作のざっとした流れ

通常のLINEスタンプを作ったときは、A4コピー用紙に描いたイラストをプリンターでスキャンしていました。そのあとフォトショップでサイズ変更や透過、色つけなど加工をほどこして完成。

そのような流れだったのですが、今回のアニメーションスタンプではキャラクターの動きを確認しながら作業を進めた方がしやすかったので、直接フォトショップにイラストを描きました。

 あと途中、お腹がすいたのでおやつのお団子を食べました←

 

フォトショップでフレーム(イラスト)を書こう!

私の使用しているPhotoshopElements5.0は、だいぶバージョンが古いのです。それでも問題なく使えるので個人的には重宝しています。では順番に制作過程を見ていきましょう。

1.起動して規定サイズのレイヤー作成

まずはフォトショップを起動して「写真編集と補正」を選び「写真編集モード」へ。

左上の「ファイル」→「新規」→「白紙ファイル」でレイヤーを設定しましょう。

f:id:tomo20150322:20160612112345j:plain

「幅:320pixel」、「高さ:270pixel」に設定して、カラーモードは「RGBカラー」に設定。カンバスカラーは「透過」でもいいのですが、見やすいので私は「白」にしました。

コツその1:作成したアニメーションスタンプがヒットして、グッズ展開が行なわれることがあります。そのときのために、規定より大きいサイズのレイヤーで作って保存し、あとから規定サイズに縮小するという方法をとる方もいます。ただ、大変なのでそのまま規定サイズで作る人もいます。はい、私です←

2.レイヤーでアニメーションの起点となるイラストを描く

f:id:tomo20150322:20160612115034j:plain

りりしい顔した「ねこくまくん」を新規レイヤーに描きました。ちなみに新規レイヤーの出し方は、右上の「通常」って書いてある下の左の四角いヤツをクリックです。

3.レイヤーを追加して動きのあるイラストを描きたそう

f:id:tomo20150322:20160612115958j:plain

りりしい顔をした「ねこくまくん」の鼻から「鼻ちょうちん」がでているイラストをかきました。追加した鼻ちょうちんレイヤーは4枚。それぞれ「通常」から「乗算」にしています。そうすることによって、鼻ちょうちんの透明感がでると思ったんですよ。

 

f:id:tomo20150322:20160612120802j:plain

ちなみに、作成中は「レイヤー○」の横の小さいイラスト横の「目」のボタンを押して、そのレイヤーを「表示する」「表示しない」とくり返しチェックしています。アニメーションっぽくできているか確認できるので便利です。参考までに、上の画像ではレイヤー2、3、4を表示していません。

コツその2:紙にはないレイヤー機能をフル活用しよう

4.余白ができたので、切り抜きする

f:id:tomo20150322:20160612125248j:plain

 左端の「長方形選択ツール」で切り抜きたいところを囲んで、「イメージ」→「切り抜き」で完成。注意したい点はレイヤー1~5(全体)を表示させてから、四方の余白を削除するところ。また縦横どちらかが、270pixelないとリジェクトされてしまいます。気をつけましょう。

5.レイヤーごとにPNGで保存しよう

3.で紹介した「目」の「表示する」「表示しない」をつかってPNGに1枚ずつ保存していきましょう。

右上の「ファイル」→「別名で保存」→「ファイル名:○○1(ファイル名の後に動かしたい順に番号を書きましょう)」→「ファイル形式:PNG」

 

6.保存したPNGを透過しよう

f:id:tomo20150322:20160612131524j:plain

PhotoshopElements5.0には「マジック消しゴムツール」というホントに便利なツールがあります。消したいところをクリックすれば、仕切られている同じ色の範囲は全部きれいに消してくれるので最高です。

 

7.保存したイラストをコピーしよう

f:id:tomo20150322:20160611223548j:plain

居眠り1から5まで作り終えたフレーム(イラスト)をコピーします。

今回「目を開けたまま眠っているねこくまくん」の鼻ちょうちんのふくらみを表現するには、「ふくらまして、しぼませる」という動きが必要なためです。

居眠り6から10は居眠り1から5をコピーして、順番を逆にならべただけなので、かなりお手軽←

また保存先は「1アニメーションスタンプ」に「1ファイル」をおすすめします。理由はwindowsフォトギャラリーで、アニメーションのチェックができるからです。

f:id:tomo20150322:20160612133415j:plain

 

コツその3:1アニメーションスタンプ事にファイルを作り、windowsフォトギャラリーで、アニメーションの動きを確認しよう

 

現段階のイメージはこんなかんじです。

f:id:tomo20150322:20160611222054p:plain

 はたして、うまくうごくのか……

 

 仕上げAPNG作成ツールを使って、アニメーションにしよう!

フレーム(イラスト)が書き終わりましたので、最後の仕上げにAPNG作成ツールを使って、アニメーションにしていきましょう。今回使用するツールは「APNG Assembler(フリーソフト)」です。

 

1.「APNG Assembler(フリーソフト)」のダウンロードと使い方を覚えよう

ウェブ用アニメーションを劣化なく保存できる画像形式APNGの作り方 - ICS MEDIA

↑こちらのサイトでは「ダウンロードの方法」から「使用の仕方」まで、めちゃくちゃわかりやすく解説してありました。

正直、参考にしまくりましたので、みんなも読もう←

個人的にAPNG Assemblerって仰々しいソフトかと思っていたら、300キロバイトしかないんですね。ほんとシンプルなソフト。

2.フォルダ内で順番に並べた連番画像をドラッグ&ドロップ!

画像名の後に動かしたい順番に1から数字を書いているか再度確認しましょう。

f:id:tomo20150322:20160611223548j:plain

確認したら、起動したAPNG Assemblerにドラッグ&ドロップ!

f:id:tomo20150322:20160612140342j:plain

こんなかんじ!

3.ループ設定とフレームレート設定

ループ設定は「Playback Settings」ボタンで「フレームレート設定」は「Delays – All Frames」ボタンでできます。

今回の「居眠りねこくまくん」を例に設定してみました。

・フレーム数:10枚

・1秒10枚にするため、フレームレート設定は1/10

・LINEの規定では最大4秒のため、ループ数は4

 

 4.圧縮形式の選択

「Compression Settings」で zlib・7zip・Zopfliの3つの中から選択できます。

私は「Zopfli」を選びました。

理由は「見た目に差がない」「しかも圧縮率が高い」ためです。ただし、書き出し時間が他と比べると遅いところが、弱点といえば弱点。私はとくに気になりませんでした←

5.出力ファイル名と出力先を指定して書き出し

f:id:tomo20150322:20160612140342j:plain

ファイル名には○秒○ループと書いたら便利。

 出力先の指定ができるようです。私の場合は「Make Animated PNG」を押したら、「居眠り1~10」のファイルの最後尾にちょこんと保存されていました。APNG形式は通常のPNG形式と同じ拡張子だそうです。「あれ? 保存されたけどAPNGじゃない!」って誰かさんみたいに騒がないようにしましょう。

 

6.完成品を見てみよう

f:id:tomo20150322:20160612142136p:plain

動いている!「目を開けたまま眠るねこくまくん」です。APNG形式の再生確認はFirefoxでできます。見るブラウザによっては「ボーッと遠くを見つめているねこくまくん」にしか見えないでしょう←

またLINE Creators Marketではスタンプシュミレーターというものがあります。ドラッグ&ドロップで動きが確認できるのでぜひ活用してみてください。

 

7.動きを確認できたら、速度を調整するのもアリ

鼻ちょうちんの動きが、ちょっと早すぎるかもしれない……と思ったので、速度を調整してみました。

f:id:tomo20150322:20160612140313j:plain

・フレーム数:10枚

・2秒10枚にするため、フレームレート設定は1/5

・LINEの規定では最大4秒のため、ループ数は2

f:id:tomo20150322:20160612143043p:plain

このように変更することで、1秒で鼻ちょうちんを膨らませ、次の1秒でしぼませることができました。

コツその4:思った動きにならないときは、速度を変えてみる

コツその5:フレーム数は5枚、10枚、15枚、20枚とした方がわかりやすい フレームレートの計算がしやすいため。

おまけ 始まりのフレームと終わりのフレームについて

また作り終わって、気づいたのですが「始まりのフレーム」と「終わりのフレーム」についてです。

f:id:tomo20150322:20160611223548j:plain

居眠り1ではじまり、居眠り10で動きがとまるこのスタンプ。もしかしたら、「居眠り6」でスタートしたほうがいいのでは…と思いました。

理由は「1フレーム目のイラストが静止画として表示される」からです。スタンプを選ぶ際、遠くをみつめる居眠り1より、最初から鼻ちょうちんを膨らませている居眠り6の方がわかりやすくて、使う人にとって親切かも……と。

 

ううむ……考えすぎかな← 

 

追記 1枚目の画像は「静止画」として表示されます。そのため、どのように動くスタンプかわかるような画像を1枚目にしないといけません。問答無用で「リジェクト」されてしまうようです。

 

 まとめ

 今回の「LINEアニメーションスタンプをカンタンにつくる5つのコツ」はいかがでしたでしょうか。

「アニメーションスタンプって作るの難しそう」というハードルを少しでも下げれたら、うれしいです。

私はまだカンタンな動きしかつくれていないので、次はちょっと複雑でおもしろいアニメーションにチャレンジしたいと思います。

LINEスタンプクリエイターのみなさん、いっしょにがんばりましょう!

f:id:tomo20150322:20150907220158j:plain

↑この記事をみてアニメーションスタンプを作ろうと決心したねこくま軍団

ただ……

 

目が笑ってない着ぐるみたち、かく動けり - LINE 公式スタンプ

 

↑このスタンプの左側、上から3番目の動きが尋常じゃないです! 公式スタンプが強すぎる!w

f:id:tomo20150322:20150907220144j:plain

プロのアニメーションスタンプを見て絶句するねこくま軍団「……マジやべえわコレ」

 

アニメーションスタンプは厳しいかも……という方は、プロにおまかせして、オリジナルのLINEスタンプを作成する方法もおすすめですよ。

業界最安値!! プロにお願いしてオリジナルLINEスタンプが作れる!!