BOBIN

絵の描き方などなど書いてます。「Amazon.co.jpアソシエイト」または「[乙の名称を挿入]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。」

プロクリエイトのアニメーションアシスト機能を使ってLINEスタンプ(アニメーション)のイラストを描く方法!

f:id:Bobin:20200309194926j:plain

どうもボビンと申します!

この記事はプロクリエイトでLINEのアニメーションスタンプを作っていく過程を紹介したものです。作る前の準備や作ったあとどうしたらよいか分からないという方(PCを使わない方用)は以下の記事を読んでみてください😀

www.bob-bobin.info

では作っていきましょう。



使用したもの

今回使ったものはタイトルにもあるようにプロクリエイトというiPad用のアプリです。

あとはもちろんiPad Proを使用しています。

スマホでもiOSアプリのプロクリエイトポケットが出ていますが、アニメーションを作るにはまだ向いていないようです😧



イラストの画像サイズ

ではまず画像のサイズを設定します。

アニメーションスタンプは

よこ320px×たて270px以内

で作ります。なのでとりあえずよこ320px×たて270pxのキャンバスを用意しましょう。

プロクリエイトを開いて、画面右上の+マークから新規キャンバスを作成します。

f:id:Bobin:20200309092503j:plain

そして

幅(よこ)320px × 高さ(たて)270px

で作成します。

f:id:Bobin:20200309092522j:plain

これで準備は終わりました。



イラストを描く

続いては実際に描いていきます。

f:id:Bobin:20200309093058j:plain

キャンバスには上の画像のように“01”と数字をつけておくと後で楽だと思います。スタンプをここからどんどん作っていくごとに02、03、04~…と付けていきましょう。


下描き

ではキャンバスを開きます。アニメーションアシストをオンにします。この機能がアニメーションを作るのに役立ちます。

f:id:Bobin:20200309093044j:plain

次にどんなアニメーションが描きたいのかいろいろと考え、想像してみましょう。

今回は👇こんなアニメーションを作っていくこととします(ちなみにこのキャラクターはオランウータンでマサモリという名前がついています)。

f:id:Bobin:20200308211406g:plain

ということでとりあえずやってみます。最初のフレームを描きます。

f:id:Bobin:20200309094009j:plain

ちなみにLINEスタンプではこの1フレーム目が、スタンプの静止画のときに表示されます。


では2つ目のフレームも何となくで描いてみます。

f:id:Bobin:20200309094611j:plain

“何となくで描いてみます。”と書いたものの実際はコピーして少し回転、移動させただけです。省ける部分はどんどん省きましょう。

気づいたと思いますが1つ目のフレームが薄く表示されていると思います。これを基準に少しずらしてアニメーションを作っていきます。

同じように3フレーム目を作ります。

f:id:Bobin:20200309101448j:plain

2つ目のフレームから少しずらします。うっすら思ったと思いますが、面倒臭いです。でもやらなきゃ出来ません😧やれば出来る!


ついでながら説明しておくと、アニメーションの設定からオニオンスキンフレーム1→2に変えると…

f:id:Bobin:20200309095804j:plain

1フレーム目のイラストも表示されます。単に1つ前のだけを表示させたいときは1、2にすれば2つ前、3にすれば3つ前を表示できます。



確認

アニメーションアシスト機能で作ったアニメーションを再生できるので、確認してみます。

f:id:Bobin:20200309101809j:plain

8フレーム作ってみました。とりあえず15フレーム/秒(15フレームで1秒の長さです)で再生してみましょう。

f:id:Bobin:20200309000511g:plain

ハッ、速い!😬

なので少し遅くしたいと思います。そのときはフレーム/秒の数字を小さくします。

8フレームなので、キリのよい8フレーム/秒にしてみます(ちょうどスタンプの再生時間が1秒の長さになります)。

f:id:Bobin:20200309102413j:plain

ではどうなるでしょうか? 


f:id:Bobin:20200309000616g:plain

ちょうどいい感じがします。

これでスタンプの骨組みは出来たのであとは綺麗に描いていきます。


綺麗に描く

綺麗に描くためにグループを作ります。

レイヤーを開き右上の+マークから新しいレイヤーを作成します。 f:id:Bobin:20200309110405j:plain

新しいレイヤーができたら1フレーム目の下描きと組み合わせます(すぐ下と組み合わせる)。

f:id:Bobin:20200309110450j:plain

これで1フレーム目のグループができました。あとはそのグループの中で下描きをもとに仕上げて完成させるとよいと思います。このとき先ほど紹介したオニオンスキンフレームが邪魔な場合は“0”にしましょう。

f:id:Bobin:20200309110640j:plain


あとは描くだけです。自分の画風で描いていきましょう。

f:id:Bobin:20200309110847j:plain

8フレーム作ったので面倒ですが省けるところは省いて頑張って描いていきます。

とりあえず作ってみることに重点を置いたのでいい忘れましたが、フレームの数は5~20の中で作らないといけません。その中でどう作っていくはか個性がでるところです。



完成

では完成したものをみてみます。

8フレームの8フレーム/秒です。

f:id:Bobin:20200308211406g:plain

LINEのアニメーションスタンプは1、2、3、4秒のどれかで作らないといけないので、例えばフレーム数10、20で10フレーム/秒 だったり5、10、15、20で5フレーム/秒とかで作ると後々楽ですが、そんなに気にしなくて大丈夫です!思い思いのものを作るとよいでしょう。


このまま画像を保存したいところですが1つだけやっておかないといけないことがあります。

それは余白をなくすことです。

f:id:Bobin:20200309121347j:plain

(見やすいように背景を黒くしていますが、最終的に透明にします。)

アニメーションアシストを切るとすべてのフレームが表示されるようになります。このとき下の画像の赤い部分が余白になります。

f:id:Bobin:20200309121631j:plain

この余白を削るためには画面左上のアクションからクロップしてサイズ変更を選択します。

f:id:Bobin:20200309121730j:plain

ここでは画面、キャンバスのサイズを変えることができる(イラスト自体のサイズは変わりません)ので余白を消すことができます。

f:id:Bobin:20200309121919j:plain

これで余白を消せました。

f:id:Bobin:20200309122029j:plain


OKです! f:id:Bobin:20200309125710g:plain

保存

最後に保存して完了です。

LINEスタンプの場合はアニメーションpngで背景は透明で保存します。

普通にgifのアニメ画像で使いたい方はアニメーションgifで保存します。

f:id:Bobin:20200309123254j:plain

このあとについては以下の記事を、参考にしたください!

www.bob-bobin.info

今回登場したスタンプはこちらです。 使っていただけると励みとなります。

line.me

f:id:Bobin:20200309130339g:plain