みなさんこんにちは、私のチュートリアルへようこそ!!

 

このチュートリアルでは、アニメーション アバター または リギング モデル の キャラクター アート を作成する簡単な手順を紹介します。

このチュートリアルは 2 つのパートに分かれています:

 

最初のパートでは アニメーション アバターのキャラクター アートを作成する方法 を説明し、

2 番目のパートでは Clip Studio Paint (Pro/Ex) でアバターをアニメーション化する方法 を説明します。

また、アートを別のアニメーション ソフトウェアに エクスポート して、ゲーム スプライトや Vtuber モデルなどのインタラクティブ アバター用の 2D リギング モデルを作成することもできます。

 

このチュートリアルには、そのためのファイル クリーニング プロセスも含まれています。

さあ始めましょう!!

ビデオチュートリアル

このチュートリアルのビデオ版

パート1：アバターモデルを作成する

アニメーションアバターを作成する基本は簡単です。

キャラクターをパーツに分割し、移動してアニメーションを作成します。

伝統的なやり方は、キャラクターを描いてからパーツを切り取って編集するというものである。

代わりにパーツを別々に描く場合は、パーツ分割を計画すると作業が簡単になります。

これらは、このチュートリアルで説明するプロセスです。

ステップ1：明確なデザインを作成する

正面図と基本的な立ちポーズでアートをスケッチします。

トレースのプロセスでは、アートは詳細が明確である必要があります

オプション：描画プロセスで色の参照として使用するために、スケッチに色も付けました

ヘッド モデル を使用すると、スケッチがしやすくなります。

ヘッド モデルは [マテリアル パネル > 3D > ヘッド] にあります

(このパネルには、メニュー [ウィンドウ > マテリアル:3D] からアクセスできます)

オプション: [サブツールの詳細]パネルの[顔の特徴]タブの値を調整して、デザインに合わせて顔の特徴をカスタマイズできます

新しいレイヤーを作成し、ヘッドモデルの上にスケッチします

頭部モデルには明確な詳細があり、顔の形、耳、目の位置の参考として使用できます。

ステップ2：部品分割の計画

デザインが完成したら、アートをパーツに分割します。

 

パーツ分割のポイント:

「アニメーション化する場所で分割する」 および 「中心線から大きいものから小さいものへ」

注: このチュートリアルでは、混乱を避けるために、まず体の部分を仕上げ、その後顔の特徴に取り組みます。

頭 (顔+後頭部)と体から始めます

オプション:

頭を顔と後ろ頭の 2 つの部分に分割します。

これにより、頭を回すアニメーションがより自然になります。

中心線を中心にさらに詳細を分割し、出現順にリストします

一部のパーツは対称で、一部は非対称であることがわかります

サイドバングやツインテールなど、反対側に鏡像になっているパーツもあります。

これらのパーツを一度描いてからコピーして反転すると、別のサイドを作ることができます。

パーツリストが完成したら、パーツごとに新しいフォルダを作成します

このチュートリアルでは、作業プロセスを示すためにタイプ別にカラーラベルを設定しました。

最も快適な方法で設定できます。

注 : パーツのグループを識別するために、フォルダ名に「-」を使用します。(例:「hair-twintail-L」)

ステップ3：パーツを描く # ボディ

ワークスペースを設定する

カラーリファレンスとして使用するために、色付きのスケッチをコピーします。

[サブビュー]パネルを使用することもできます

[レイヤープロパティ]パネルでスケッチレイヤーの色を変更します

次は対称定規です!!

 

紙レイヤーを選択し、

[定規]に移動して[対称定規]を選択します

オプションを設定します:

[線の数]:2、

[線対称]:チェック済み、

[スナップ角度]:90、

 

キャンバスに定規を描きます。定規は90度にスナップします

すべてのレイヤーに表示する:

ルーラーアイコンを右クリックし、[すべてのレイヤーに表示] を選択します。

[オブジェクト]ツールで定規を選択し、キャンバスの中央に揃えます

 

[ツールプロパティ]パネルの[中心X]オプションをキャンバス幅の半分に設定することもできます

 

または、整列/分布パネルで揃えます（Clipstudio 2.0以降）

メッシュ変換を使用して、定規の線に沿うように一部を調整します:

[編集 > 変換 > メッシュ変換]

キャンバスの準備ができました。さあ、描き始めましょう!!

パーツの描き方#1 : 対称パーツ

まずは顔の部分から始めましょう。

 

線画用に新しいベクター レイヤーを作成

 

これはオプションです。線画にラスター レイヤーを使用することもできますが、ベクター レイヤーの方が後のプロセスで編集/変更が簡単になります

[特別なルーラーにスナップ]が有効になっていることを確認してください。

キャンバスに描画すると、ルーラーラインの両側に描画されます

注: ブラシ/消しゴムが定規で機能しない場合は、[サブツールの詳細]パネルの[補正]タブで[スナップを有効にする]をチェックしてください。

色を塗りつぶすには:

新しいベクターレイヤーを作成し、領域を閉じる線を描きます

顔の部分に、ヘアラインを描きます

新しいラスターレイヤーを作成する

塗りつぶし色 を [塗りつぶし] > [他のレイヤーを参照] で塗りつぶします

[ツール プロパティ] パネルで、[複数を参照] オプションを [フォルダー] に設定します

[ベクター パスまで塗りつぶし] オプションを有効にします

ヘアラインのベクターレイヤーを削除

次に透明ピクセルをロックして、その部分に陰影を付けます

最初の部分が完成しました！

オプション：フォルダーレイヤーモードを[ソフトライト]に変更して、スケッチレイヤーを確認して別の部分で作業できるようにします。

パーツの描き方#2: 非対称パーツ

非対称部分については、[特殊定規にスナップ] オプションを無効にして、部分を描画します

パーツの描画#3: ミラーパーツ

左前髪を反転させて右前髪を作ることができます

パーツの描画が終わったら、パーツフォルダを選択します。

次に長方形選択を作成して、パーツとキャンバス領域の幅をカバーします

フローティングメニューの[コピーと貼り付け]アイコンをクリックしてパーツフォルダをコピーします

フローティングメニューで、[スケール/回転] をクリックし、[ツールプロパティ] パネルで [水平反転] アイコンをクリックします

フォルダの名前を変更してカスタム詳細を追加します

[対称定規のヒント]

一部の部分を描くには別の特別な定規が必要になる場合があります。

完成すると、対称定規は機能しなくなります

これは、同時にスナップできる特殊定規は 1 つだけ であるために発生します。

そのため、新しい特殊定規を作成すると、古い定規は無効になります

 

有効にするには、[オブジェクト] ツールで 定規を選択 し、定規の スナップ アイコン をクリックします

すべてのパーツが完成したら、すべてのパーツを選択し、[レイヤーモード]を[通常]に戻します。

一部の部分の硬いエッジに気づくでしょう。

これを修正するには、 [レイヤー] パネルの [マスク] アイコンを使用して マスクを作成 します。

次に、[ソフト エアブラシ] を使用して 透明部分をペイント します。

ステップ4：パーツを描く # 顔

髪型や衣装でパーツを分けなければならない体とは違い、

常に同じ基本構造があります

舌や瞳孔のレイヤーなど、追加のパーツを追加することもできます。

ただし、レイヤーの順序が正しいことを確認してください。

スケッチレイヤーを一番上に移動し、顔パーツ用のフォルダを作成します

顔の半分だけを覆う [長方形] 選択範囲を作成し、スケッチ上でマスクします。

対称定規で顔を描くときに混乱が少なくなります

パーツを描くと、完成したパーツの結果も確認できます

ヒント:

Clip studio 3.0 ユーザーの場合、

 

両側を同時に調整するために、メッシュ変換上の複数のポイントを選択**できます

 

注: ミラー位置のポイントも選択する必要があります

[クリッピングの問題]

アバターアニメーション用のほとんどのアニメーションソフトウェアには、クリッピングマスク機能があります。

ただし、ソフトウェアによっては、使い方が複雑になる場合があります

 

アニメーションソフトウェアに適した方法を調べる必要がある場合があります

口を描く 口の線と口の中を描きます

口のラインをコピーして下唇のフォルダに入れ、口の内側を覆うように肌を塗ります

顔が完成したら、レイヤーフォルダーを顔レイヤーフォルダーの上に移動します

レイヤーマスクに透明またはソフト消しゴムでペイント

して前髪を半透明にすることもできます

通常、左目と右目は別々にアニメーション化されます。

左目と右目の部分を分割するには:

レイヤーフォルダーを選択し、目を選択してから、フローティングメニューの[切り取りと貼り付け]ボタンをクリックします

フォルダの名前を変更すれば全てのパーツが完成です!!

ステップ5: ファイルをクリーンアップする

アバターアートが完成したら、他のアニメーションソフトウェア用にエクスポートするか、Clip studio paint でアニメーション化することができます。一部のソフトウェアでは、エクスポートする前に各パーツのレイヤーを結合する必要があります。後でパーツを編集したい場合、これは不便です。

 

 

(注: アニメーション化プロセスには Spine 2d を使用しています。他のソフトウェアでは結果が異なる場合があります)

 

Clip Studio の [File Object] 機能を使用すると、パーツを編集可能 (別々のファイルで) に保つことができ、エクスポート プロセスで毎回レイヤーを結合する必要がなくなります。

ファイルを準備しましょう。

 

まず、ファイルからパーツフォルダ以外のすべてを削除します

(例: 紙レイヤー、スケッチレイヤー、参照など)

レイヤー フォルダーをファイル オブジェクトに変換:

レイヤー フォルダーを右クリック > [ファイル オブジェクト > レイヤーをファイル オブジェクトに変換]

領域を [描画領域] に設定してファイルを保存します

 

これでパーツが外部ファイルに保存されました

ヒント: エクスポート メニューを [クイック アクセス] パネルに配置すると、変換にかかる時間が節約されます

すべてのフォルダをファイルに変換します。

デフォルトではファイル名はフォルダ名になります

注: アニメーション ソフトウェアが .psd 形式 (Photoshop ドキュメント) を必要とする場合は、[名前を付けて保存] メニューで保存できます。

(編集が必要な場合、Clip Studio では .psd ファイルから編集することはできません。.csp ファイルで編集してから、再度 psd にエクスポートしてください)

パーツを編集するには、[オブジェクト]ツールでパーツを選択します

次に、[ツールプロパティ]パネルで[ファイルを開く]をクリックします

パーツ ファイルを保存すると、メイン ファイルが自動的に更新されます

 

これでアバターをアニメーション化する準備ができました

わかりやすい名前が付いたクリーンなファイル構造になっています!!

パーツ分割アートは、通常、ゲームやストリーミングアバターのインタラクティブモデルのリギング方法（スケルトン）でアニメーション化されます。

ダイナミックモデルが必要ない場合は、

Clip Studio Paint でアニメーションを作成し、ビデオや GIF アニメーションとしてエクスポートすることもできます!!

パート2：クリップスタジオペイントでアバターをアニメーション化する

[レイヤー キーフレーム] を使用してアバター アニメーションを作成できます。

顔の表情はコマ送りアニメーションの方が動きやすいです。

顔の特徴パーツをレイヤーフォルダに入れる

表情フォルダ以外のレイヤーをすべて選択し、[スケール/回転]アイコンをクリックします。

[ツールプロパティ] パネルで、モードを [傾斜] に設定し、

次に上部のコントロール ポイントを移動して元の位置に戻します。

タイムライン パネルを開きます ([ウィンドウ > タイムライン])

 

フレームレート: 8、再生時間: 24 で新しいタイムラインを作成します

(このフレーム数は Clipstudio Paint Pro バージョンと互換性があります)

今回はレイヤー全体を選択し、[タイムライン]パネルでレイヤーキーフレームを有効にします。

赤いタブは現在アクティブなフレームを示しています。

最初のフレームで、[キーフレームを追加]ボタンをクリックします

注: キーフレーム アイコンの色は補間の種類によって異なります

一定の移動速度には線形、指数関数的な速度にはスムーズを使用できます

フレームでオブジェクトの位置を固定するにはホールドを使用します

[ツール プロパティ パネル] で [オブジェクト ツール] でパーツを選択すると、コーナーの位置 に [変形] オプションが表示されます。これは、前の手順ですべてのパーツを 傾斜 させた結果です

調整可能なコーナーにより、部品をより自由に調整できます

調整前にアニメーションをデザインします。

このチュートリアルでは、ループアニメーションでウィンクポーズを作成します

アニメーションを時間枠にマッピングする場合、

ポストは開始とウィンクの位置のみに設定する必要があります

開始ポーズを調整 フレーム 1

注: 最初に体を動かし、他のパーツは後で動かします

すべてのオブジェクトの終了キーフレームを追加します

すべてのレイヤーを選択し、最後のフレームをクリックしてキーフレームを追加し、ループを作成します

アニメーションを停止します。

フレーム 7 ですべてのレイヤーのキーフレームを作成し、停止フレームのポーズを設定します

ポーズを終えたら、キーフレームをコピーして次のアニメーションを停止します

クリックしてドラッグしてすべてのキーフレームを複数選択し、

キーフレームを右クリックしてコピーします

すべてのレイヤーを選択し、フレーム13に移動して貼り付けます

もうすぐ終わり

最後のキーフレームをフレーム19にシフトすると、キャラクターの動きがデザインと同じになります

アニメーション物理

アニメーションの物理特性を追加して、より生き生きとした動きを作りましょう!

現在、服と髪はキャラクターの動きに合わせて一緒に動いています...

 

しかし、実際には慣性効果があり、アタッチメント オブジェクトの動きが遅くなります。この効果をアニメーションに追加すると、より自然に見えるようになります。

動きの終わりのフレームにさらに動きの効果を追加します

フレーム 1 から 7 に動きがあるので、フレーム 7 にさらに動きの効果を追加します

フレーム 13 から 19 に別の動きがあります

フレーム 19 にも動きの効果を追加します

フレーム 19 のキーフレームはフレーム 1 と同じで、アニメーションはループしています。

フレーム 19 で調整が行われているため、アニメーションはループしなくなります。

 

これを修正するには、フレーム 1 のすべてのキーフレームをコピーし、最後のキーフレームに貼り付けます

 

 

この調整により、キャラクターが動いていないフレームでも髪の毛が動き続けるようになります。

[ループギャップ]

アニメーションにはループの間に小さなストップギャップがあります。最後のキーフレームがフレーム 23 の終わりにあるためです

これを削除するには、キーフレームをフレーム 24 の終わりに移動する必要があります。

 

これを簡単に移動する方法は次のとおりです

[バウンス]

アニメーションにバウンス効果を追加すると、より自然な外観になります。

 

慣性効果のキーフレームの間に、オブジェクトが反対方向に移動/回転するキーフレームを挿入します。

ヒント: 動きの位置を調整しすぎてアニメーションがちらつく場合は、

オブジェクトを再調整する代わりに、キーフレーム間のギャップを広げることもできます

表情

[アニメーション フォルダ] を使用すると、顔の表情を簡単に追加できます

 

すべてのレイヤーを選択し、[レイヤー キーフレーム] を無効にすると、パーツが初期位置になります

表情フォルダで、左右の目のパーツをすべて結合（虹彩/瞳孔を除く）し、口のレイヤーをラスタライズ**します

編集した顔パーツをフォルダに入れる

フォルダをコピーして、[メッシュ変換]でパーツを新規に描画または調整します

3つの顔の感情を作成しました

表情フォルダ内に新しい[アニメーションフォルダ]を作成し、その中にすべての表情フォルダを移動します

すべてのレイヤーを選択し、レイヤーキーフレームを再度有効にすると、キーフレームが元に戻ります。

表情レイヤーフォルダを展開すると、アニメーションフォルダが表示されます。

[+]アイコンでフォルダのオプションを展開すると、[cel]のタイムラインが表示されます。

右クリックして、キーフレームに割り当てる面を選択します。

そして完成です!!

私の作業プロセスとアニメーションテクニックがあなたのプロジェクトに役立つことを願っています!!

アニメーションを楽しんでください。次のチュートリアルでお会いしましょう!!