カテゴリ:デジタル覚え書き > グラフィックソフト関係 »

ClipStudioPaintでうごくイラスト(2018-11-29アップデート後)

大幅にアップデートされたのは結構前なんだけど、全然確認してなかったです……。
以前はClipStudioActionという別のアプリケーションと連動させないと、カメラワークとかそういうのが使えなかった。
アップデート後はなんと音声までも取り込める。すごい!
なので使ってみましたよ。


  1. 新規アニメーションファイル作成

  2. 絵を用意する

  3. カメラワークをつける

  4. スコープの視野を表現する(透明度の変化)

  5. 音声をつける

  6. 覚え:なんかフレームにセルを指定できないとき

  7. 再生時間を変えずにフレームレートを大きくする

  8. AviUtlでつなぐ


新規アニメーションファイル作成


新規作成ダイアログで一番右の「アニメーション」を選びます。
で、なんかすごくたくさん設定項目があります……。

クリスタアニメ作成説明図01

左半分はキャンバスの設定ですね。
みっつも項目がありますが、要するにこういうことだそうです。

クリスタアニメ作成説明図02

基準サイズと演出フレーム、2つ必要な理由が私には分かりませんが、確実に映し出せるのが演出フレーム内なんだそうですよ。
今回カメラをふらふらさせるので、出来上がりサイズよりも結構大きめに作画サイズを設定しました。
「倍率指定」では「基準サイズ」の幅と高さをそれぞれ「1」とした時のサイズを指定します。
今回幅が2倍、高さが1.5倍なので、キャンバスは「1440px*810px」ということですね。

右半分、「余白」はおそらく好きに設定して問題ないです。
私は別に必要ないと思ったので「0」にしました。

「タイムライン」は大事なところですが、後からいくらでも変えられるのでとりあえずこんな感じでどうか? ぐらいの気持ちでいいと思います。
「フレームレート」は、「1秒間に何コマ入れるか」の数値です。
今は「1」なので、1コマが1秒分です。
数値を大きくすれば当然なめらかなアニメーションを作れますが、ClipStudioPaintProでは24フレームまでしか作れない(EXでは多分無制限)ので、その辺の兼ね合いというか……まああとでその辺りにも触れます。
「タイムライン名を自動設定」とか、ちょっと何言ってるか分かんない。

絵を用意する


とりあえず背景をこんな感じに。

クリスタアニメ作成説明図03

青っぽい枠線が二重になってて、これが「基準サイズ」の範囲と「演出フレーム」の範囲。
前の記事(ClipStudioPaintでうごくイラスト)にも書いたけど、アニメーション作るときはタイムラインにセルとして登録しないとレイヤーに描画が出来ないの。
なのでタイムラインに登録してなかったら、パレットから操作して登録してから描こう。
今回の背景をレイヤーパレットで見るとこう。

クリスタアニメ作成説明図04

フォルダに「1」って名前がついてて、タイムラインパレットにはこの「1」を指定する。
タイムラインパレットは今こんな感じ。

クリスタアニメ作成説明図05

イカちゃんも動きごとに描いて、タイムラインパレットのいい感じの位置(時間)に登録。
イカちゃんは途中から現れるのでこんな感じになってます。

カメラワークをつける


ではカメラをふらふらさせます。
まず「アニメーション」メニュー→「アニメーション用新規レイヤー」→「2Dカメラフォルダー」で、カメラワーク設定用のフォルダーを作成。

クリスタアニメ作成説明図06

そのフォルダーに背景とイカちゃんのアニメーションフォルダーを突っ込みます。

クリスタアニメ作成説明図07

背景とイカちゃんの位置関係が変わらないから同じフォルダーに入れました。
そうしないと背景とイカちゃんが別々に動いちゃうので。
……これ入れ子に出来るのかな……。
ああ、出来る出来る。
こんな風に。

クリスタアニメ作成説明図08

人物のレイヤーだけをまず2Dカメラフォルダーに入れて移動の動きつけて、その2Dカメラフォルダーと背景のフォルダーをさらに別の2Dカメラフォルダーに入れてカメラワークをつければいいんだ。
なんかこれすごくいろいろ出来そう……。

じゃあカメラワークのつけ方。
まず初期位置を覚えさせた方が良さそうなので、タイムラインの1セル目を選択して「キーフレームを追加」。

クリスタアニメ作成説明図09

このとき、タイムラインパレットの2Dカメラフォルダの部分をクリックで選択すると吉。
イカちゃんのフォルダ部分クリックしてからキーフレームを追加すると、イカちゃんにだけ有効なキーフレームが追加されてしまうので。

クリスタアニメ作成説明図10

まず「ぎゅいん」っとズームしたいので、ズームが終了する秒数のフレームのとこにキーフレームを追加。
多分「オブジェクト」ツールに持ち換わってると思うので、それで枠を……なんか移動、拡大、縮小が可能な枠が表示されるんで、それを操作してカメラワークをつけます。

クリスタアニメ作成説明図11

この枠がカメラのフレームだと思ってください。
ズームしたい時はこの枠を小さくすれば、写る範囲が狭くなって、ズームしたように見えるわけですね。
こんな感じでキーフレームを追加、枠を移動、を繰り返してカメラをふらふらさせます。
今どんな感じかはタイムラインパレット上でフレームを変えても分からないので、再生ボタンを押して実際に動かしてみないといけません。
その前に、今登録したカメラワークをプレビュー? に反映させるために、「アニメーション」メニュー→「再生設定」→「2Dカメラをレンダリングする」にチェックを入れておきましょう。

クリスタアニメ作成説明図12

今の状態で再生してみるとこんな感じ。

クリスタアニメ作成説明図13

スコープの視野を表現する(透明度の変化)


ズームするにつれて視野が狭くなるやつを表現するために、透明度を変化させます。
真ん中に穴が開いた絵を用意してタイムラインに登録、変化をつけるために「レイヤーのキーフレームを有効化」ボタンを押して、キーフレームを追加できるようにしておきます。

クリスタアニメ作成説明図14

ここで注意。
キーフレームを有効にしたレイヤーは、そのままだと編集不可になってしまいます。
絵を描き直そうとしても通行止めマークが出て描画できません。
なので編集したい時は、さっきの「レイヤーのキーフレームを有効化」ボタンの隣の「キーフレームが有効なレイヤーの編集」ボタンを押して、編集可能状態にします。
この2つのボタンはオンとオフみたいな関係で、どっちかが有効だと片方が無効になります。
キーフレームを編集してる間は描画が出来ない、描画している間はキーフレームを編集できない、ということですね。
「なんか描けないんだけど!」って時は、このオンオフか、タイムラインに当該レイヤーを登録していないなどが原因であることが多いと思います。

では透明度を変化させます。
なんかこの部分の画像をとり忘れたので、さっきの反復横とびの画像の方で説明します。
タイムラインパレットの、レイヤー名の左にある「+」のマークをクリックすると詳細が開きます。

クリスタアニメ作成説明図15

その中の「不透明度」の行? をクリックで選択してから、キーフレームを追加します。
不透明度は他のアクションとは別に扱わないといけないみたいです。

クリスタアニメ作成説明図16

変化の終了地点にもキーフレームを追加したら、左上のボタンを押して「ファンクションカーブ編集モード」にします。

クリスタアニメ作成説明図17

キーフレームを追加したところに、操作できるポイントが表示されるので、それをドラッグで移動して変化をつけます。
今回は不透明度100から0に変化させてみます。

クリスタアニメ作成説明図18

反復横飛びしながら消えていく人になりました。

クリスタアニメ作成説明図19

そんな感じでスコープの視野を表現しました。

音声をつける


音がつくとなんだか嬉しいですね。
「アニメーション」メニュー→「アニメーション用新規レイヤー」→「オーディオ」を選択。

クリスタアニメ作成説明図20

タイムラインにオーディオトラックが追加されるので、入れたいフレームを右クリック→「オーディオファイルを読み込み」。

クリスタアニメ作成説明図21

これだけです。
同じ時間に複数の音を重ねて再生するときは、別のオーディオトラックを追加していきます。

覚え:なんかフレームにセルを指定できないとき


セルに指定したレイヤーを変更したいなと思ってタイムライン上で右クリックするんだけど、こんなメニューしか出なくて「はぁ?」ってなることがありました。

クリスタアニメ作成説明図22

多分トラックの中が更に詳細に分かれてるから、違うところを選択している状態だったんだと思います。
なのでさっき不透明度の時開いたトラックの詳細を開いて、「セル」の部分をクリックで選択してからタイムライン上で右クリックすると無事、セル指定用のメニューが開きます。

クリスタアニメ作成説明図23

再生時間を変えずにフレームレートを大きくする


今フレームレートは「1」ですね。
1秒に1コマ。
かっくかくです。
再生時間はそのままに、12くらいにしたいので、頑張ってみます。

まず、タイムラインパレット左上の「三」みたいなやつからメニューを開いて「タイムライン」→「タイムラインの管理」を選択。

クリスタアニメ作成説明図24

「タイムラインの管理」ウィンドウが開くので、今作業しているタイムラインを「複製」して、分かりやすい名前をつけます。
今複製したタイムラインがアクティブになってるので、またタイムラインのメニューから「タイムライン」→「フレームレートを変更」でウィンドウを開いて、「フレームレート」に「12」と指定します。
今フレーム数を「12」で作業してたので、フレーム数目盛りの右端をドラッグして「24」まで伸ばします。
この「24」が、ClipStudioPaintProでの最大フレーム数ということですね。

クリスタアニメ作成説明図25

そしたら、広く見やすいようにタイムラインパレットを独立させてウィンドウを大きくして、「ズームアウト」ボタンでさらに広く見えるようにしておきます。
そしたら、全てのクリップの長さと、クリップやタイムラインの間隔、位置を、今回の場合は12倍に引き伸ばします。
なんて言うんでしょう、元のタイムラインの相似形を作るような感じです。

クリスタアニメ作成説明図26

最大フレーム数、今は24なので1~24の間からはみ出た部分に配置したクリップは、右クリックが反応しなくなるので、セル指定とか変える場合は1~24の間に置いてある時にするといいですね。
引き伸ばせたら、またタイムラインのメニューから、今引き伸ばしたタイムラインを複製します。
さっきのタイムラインが00~02秒だったので、今回は02~04秒用です。

クリスタアニメ作成説明図27

そしたら、今タイムライン上にあるクリップを全て左に2秒分ずらします。
これで、再生時間2秒の位置がタイムライン上の1番目のフレームに来るわけですね。

クリスタアニメ作成説明図28

次はまた今の「02~04秒」用のタイムラインをコピーして、2秒前にずらす、これを繰り返します。
12秒のアニメーションとして作り始めたので、全部で6つのタイムラインが出来上がります。
これをそれぞれ「ファイル」メニュー→「アニメーション書き出し」→「ムービー」で書き出します。
今回2Dカメラフォルダを使っているので、「2Dカメラを適用」にチェックを入れましょう。
これで2秒の動画が6本できました。

AviUtlでつなぐ


ClipStudioでは動画をつなげません。多分。
いや、アニメーションが作れる時点でもうすごいですよ、ありがたい、文句なし。
なのでフリーソフトのAviUtlを使ってつなぎます。
これの使い方は詳しく解説されてるサイトさんがいろいろあるので、詳細はそちらに……丸投げ……。
AviUtlの易しい使い方というところとかが分かりやすいと思います。
AviUtlだけをインストールしてもmp4とか読めませんし、出力もavi形式だけのようです。
なので上記サイトの「AviUtl初心者が最初に読むべきページ【導入から使い方まで】」とかを参考に環境を整えましょう。

AviUtlを起動したら「設定」メニュー→「拡張編集の設定」にチェックを入れて、「拡張編集」ウィンドウを開いておきます。
「ファイル」メニュー→「環境設定」→「システムの設定」で「再生ウィンドウの動画再生をメインウィンドウに表示する」にチェックを入れておくとやりやすいと思います。

「拡張編集」ウィンドウの適当なところで右クリックして「新規プロジェクトの作成」で作成して、編集を始めます。
このレイヤーに動画を追加していくわけですが、右クリックメニューの「メディアオブジェクトの追加」→「動画ファイル」を選んで、新しく出た「動画ファイル[標準描画]」とかいうウィンドウの「参照ファイル」をクリックして追加すると、何故か音声が読み込まれません。
なんでかな……。
今回は音声付き動画も含まれてるので、そういうときは「拡張編集」ウィンドウにエクスプローラなどからファイルをドロップするといいです。

クリスタアニメ作成説明図29

つながったら出力します。
できあがり。



ジャンル : コンピュータ
テーマ : ソフトウェア

コメントの投稿

非公開コメント

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
twitter
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
01 | 2020/02 | 03
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
リンク
カウンター
RSSリンクの表示
QRコード
QR