クリップスタジオペイントで動画をコミック調にしてアニメーション

クリップスタジオペイントで動画をコミック調にしてアニメーション


スポンサーリンク

どうも、熊の着ぐるみを着たおじさんganmin(@muro_ganmin)です。

お絵描きソフトのCLIP STUDIO PAINT(クリップスタジオペイント)で動画をコミック調にして、アニメーションさせる方法を書いておきます。

なお、説明に使っているCLIP STUDIO PAINTのグレードはCLIP STUDIO PAINT EX です。

吹き出しの文字を1文字ずつ表示する方法も書いておく

スポンサーリンク

CLIP STUDIO PAINT(クリップスタジオペイント)でアニメーションさせる為の準備

まず、任意のサイズでファイルから新規作成してください。

今回はブログ用に728×404pxの解像度72dpiとした。

キャンバスサイズ728×404pxの解像度72にした

準備できたら、上にあるメニューのアニメーションからタイムライン→新規タイムラインを押してください。

新規タイムラインを押す

そうすると、タイムラインの設定画面が出てきてフレームレート(1秒間に何枚の画像を使うか)、再生時間等の設定項目が出てくるので任意の値を。。。

24fpsにして再生時間250にした

OKを押したら、メニューのウィンドウからタイムラインにチェックを入れて、タイムラインを表示しておいて下さい。

タイムラインにチェックする

CLIP STUDIO PAINT(クリップスタジオペイント)で動画を読み込む

次は用意した動画を読み込みます。(動画がない場合は画像でやってみて下さい)

用意した動画↓

熊の着ぐるみを着たおじさんが喋っている動画

ファイルから読み込み→ムービーを選んで動画を読み込む。

動画を読み込みます

読込んだ動画のサイズとキャンバスのサイズが合っていないので調整。

ツールから操作→オブジェクトを選ぶ

大きさを調整してやります。

周りに□の枠が表示されるので・の部分をドラッグしてやると拡大縮小できる↓

どれでもいいのでドラッグ

移動は□の内側をドラッグすればできます。

ツールの操作(オブジェクト)を選んでいれば、キーボードの上下左右キーでも移動できる。

CLIP STUDIO PAINT(クリップスタジオペイント)のレイヤープロパティで動画をコミック調に変換

読込んだ動画のレイヤーを新規ラスターレイヤーにドラッグして複製します。

ドラッグしてレイヤーを複製

複製した上のレイヤーを選択した状態で、レイヤプロパティのライン抽出ボタンを押すと線画が抽出されるので、レイヤーの設定を乗算にして線画レイヤーのできあがり!

ライン抽出の設定

元のレイヤーを今度はトーン化したいので、元レイヤーを選択した状態でレイヤープロパティのトーンボタンを押します。これだけでトーン化できます。

トーンの設定

一応、なんとなくコミック調に変換することができたのではないだろうか。

コミック調に変換した動画

CLIP STUDIO PAINT(クリップスタジオペイント)で吹き出しを追加して1文字ずつ表示するアニメーションを付けてみる

漫画といえば、かかせないのは吹き出しだと思うので吹き出しを追加して、なおかつ、喋ってる感を出す為、1文字ずつ表示するようにしてみたいと思います。

まず、お好きな吹き出しをキャンバス上にドラッグして追加します。

吹き出しをドラッグする

ツールから操作→オブジェクトを選んで好きな大きさ、位置に配置します。

吹き出しを配置

フキダシしっぽを追加したい場合はツールからテキスト→フキダシしっぽを選び、テキトーな位置でクリックした後、カーソル移動、好きな位置でダブルクリックすれば、ダブルクリックした位置が終点になり確定されます。

クリックして移動してダブルクリック

今度は文字を打ち込んでいきたいのでテキストを選び吹き出しの中をクリック。

吹き出しの中をクリック

そうするとテキストが打ち込めるので、任意の文字を一通り打ち込みます。(周りに枠が出ていると思うのでこの時点で大きさ位置を調整してください)

任意の文字を一通り打ち込む

調整しおわったら、最初の一文字以外は消しちゃって下さい。(テキストツールでテキストの部分をクリックすれば、文字が入力できる状態になるのでBackSpaceキーで消して下さい。)

最初の一文字以外、全部消す

今回は1文字で4フレームずつ進むアニメーションを付けたいと思います。

現在、タイムラインはこういう状態です。

タイムラインの状態

一文字ずつレイヤーを作って文字を入力していく為に4フレーム進んだ位置でクリップを分割したいと思います。

5フレームの部分を右クリックするとクリップを分割というのがあると思いますので選択して分割します。

クリップを分割する

後ろの方のクリップは必要ないので削除します。

削除の仕方はクリップの上の方(カーソルが手のひらのアイコンになるところ)をクリックすると、クリップ全体の色が変わります。

その状態で右クリックを押すと削除の項目が出てくるので、そのまま削除しちゃって下さい。

後ろのクリップを削除

これで1文字、4フレーム分のアニメーションができましたので次は2文字目を打ち込んでいくことにします。

文字を打ち込んだレイヤーを新規ラスターレイヤーにドラッグして複製します。

2文字目のレイヤーを作る

タイムライン上ではこんな風になっているかと。。。

同じ時間のところに複製されている

なので上のクリップを1文字目のクリップの後ろに移動します。

クリップの移動の仕方はカーソルをクリップの上の方に持っていくと手のひらのアイコンになるのでそのままクリックしてドラッグすると横に移動できます。

こういう感じに移動します↓

クリップを移動させた

上のレイヤー(2文字目を打ち込む予定のレイヤー)を選択し、テキストツールを選び、吹き出しの文字の部分をクリックすると続きが打ち込めるので2文字目を入力。

んを入力
注意

レイヤーを選択していても、クリップを動かした直後だと、タイムライン上では任意のフレーム(時間)に移動していないことがあると思うので、今、自分がどこのフレームにいるのか、タイムライン上で確認した方が良いと思います。

これで2文字のアニメーションができました。

ムふっとしている熊の着ぐるみを着たおじさん

この要領で打ち込む分の文字数だけ、レイヤーを複製しながら入力していったら、出来上がり!

文字入力完了

後、やらなくてもいいのだが漫画のコマらしく枠線も追加することにする。

レイヤーメニューから新規レイヤー→コマ枠フォルダを作る。

コマ枠フォルダの追加

設定はこういう感じにした↓

コマ枠フォルダの設定

今まで作ったレイヤーを全部選択して(Siftクリックで挟み込んで選択するか、Ctrlクリックでレイヤーを一個ずつ選択すれば複数選択できる)、それを作ったコマ枠フォルダにドラッグ。

コマ枠フォルダに放り込む コマ枠フォルダに入ったレイヤーは少し右にずれる

最初の設定で再生時間が250に設定していたので、動画の長さに合わせてそれを直しておくことに。。。

タイムラインウィンドウの左上のアイコンをクリックすると色々、項目が出てくるので、その中のタイムライン→設定変更押し、

タイムラインの設定変更

動画の長さに応じて終了フレームを入力してやります。

終了フレームの指定

後は動画の書き出し。

ファイルメニューのアニメーション書き出しから、ムービーというのを押せば、mp4やaviに書き出せます。

アニメーションの書き出し

他にもgif形式、連番画像等にも書き出せるので用途に合わせて書き出すといいでしょう。

書き出しの際はキャンバスサイズ、フレームレート等の項目が出てきます。

書き出しの設定

gif形式だと合わせて出力範囲、ループ回数等↓

gif書き出し設定

間違っていないか確認、修正してから書き出すといいでしょう。

書き出してできたのがコチラ↓

うんこと言っている熊の着ぐるみを着たおじさん

まとめ

今回は動画を用意して作ってみたが動画を用意できなければ、画像にして、吹き出しだけのアニメーションを作ってみるのも面白いかと思います。

作ったモノが動くのは感動する

それでは、また。。。



スポンサーリンク



スポンサーリンク



この記事よかったら、SNSでシェアしてね!!

ABOUTこの記事をかいた人

ただの熊の着ぐるみを着たおじさん。 主に3DCG(ZbrushやBlender)のことだったり、イラストについてブログに書いていきます。 他にもゲームやマンガ、生き方、人生、地元のこと等々、雑記的に書いていきます。 ツイッター、インスタなんかにもマンガやイラスト投稿してます。 よかったら、見てください! 現在、ゲームを作りたいと思っており、unity勉強中! アニメーションやマンガもその内、ちゃんとした形にしたいと思ってます!