皆さん、私のチュートリアルへようこそ！！

 

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

このチュートリアルは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 PAINT 3.0のユーザーは、

メッシュ変形上で複数のポイントを選択して、両側を同時に調整できます。

 

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

[クリッピングの問題]

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

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

 

ご使用のアニメーションソフトウェアに最も適した方法を調査する必要があるかもしれません

口を描くには、口の線と口の中を描きます。

口の線をコピーして下唇のフォルダーに入れ、

その後、肌を塗って口内領域を覆います。

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

前髪を半透明にするために、レイヤーマスクに透明色またはソフト消しゴムで描画できます。

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

左右の目のパーツを分割するには：

レイヤーフォルダーを選択し、片目の上に選択範囲を作成します。

次に、フローティングメニューの[カット＆ペースト]ボタンをクリックします。

フォルダーの名前を変更したら、すべてのパーツが完成です！！

ステップ5：ファイルのクリーンアップ

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

 

 

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

 

Clip Studioの[ファイルオブジェクト]機能を使えば、パーツを編集可能な状態（個別のファイルに）に保つことができ、エクスポートプロセスで毎回レイヤーを結合する必要がなくなります！！

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

 

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

（例：用紙レイヤー、スケッチレイヤー、参照など）

レイヤーフォルダーをファイルオブジェクトに変換します：

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

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

 

パーツは外部ファイルとして保存されました。

ヒント：エクスポートメニューを[クイックアクセス]パネルに置いておくと、変換の時間を節約できます

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

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

注：アニメーションソフトウェアが.psd形式（Photoshopドキュメント）を要求する場合、[名前を付けて保存..]メニューで保存するだけです。

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

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

[ツールプロパティ]パレットで[ファイルを開く]をクリックします。

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

 

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

クリーンなファイル構造と分かりやすい名前が揃っています！！

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

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

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

パート2：Clip Studio Paintでアバターをアニメーション化する

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

顔の表情は、フレームごとのアニメーションの方が簡単に作成できます。

顔のパーツをレイヤーフォルダーに入れます。

顔の表情フォルダー以外のすべてのレイヤーを選択し、[拡大・縮小・回転]アイコンをクリックします。

\ツールプロパティ]パネルでモードを[スキュー]に設定し、

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

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

 

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

（このフレーム数はClip Studio Paint Proバージョンと互換性があります）

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

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

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

注：キーフレームアイコンの色は補間のタイプによって異なります。

一定の動きの速度にはリニア、指数関数的な速度にはスムーズ、

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

パーツを[オブジェクトツール]で選択すると、

[ツールプロパティ]パネルに[変形]オプションが角の位置として表示されます。これは前のステップですべてのパーツをスキューしたことによるものです。

調整可能な角を使用すると、パーツをより自由に調整できます。

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

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

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

ポーズは開始時とウインク時の位置のみに設定する必要があります。

フレーム1で開始ポーズを調整します。

注：まず体から始め、その後他のパーツを動かします。

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

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

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

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

ポーズが完成したら、次のアニメーション停止を作成するためにキーフレームをコピーします。

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

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

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

あと少しで完成です。

最後のキーフレームをフレーム19にずらすと、

これでキャラクターの動きがデザイン通りになります。

アニメーション物理

アニメーション物理を追加して、もっと生き生きとした動きを作りましょう！

現在、布や髪はキャラクターの動きと一緒にすべて動いていますが…

 

実際には、付属物が動きをゆっくりと止める慣性効果があります。この効果をアニメーションに追加することで、より自然に見えるようになります。

動きの終点となるフレームに、さらに動きの追加効果を入れます。

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

フレーム13から19にも別の動きがあるので、

フレーム19にもさらに動きの追加効果を入れます。

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

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

 

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

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

[ループの隙間]

アニメーションには、ループの間に少しの停止の隙間があります。これは、最後のキーフレームがフレーム23の終わりにあるためです。

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

 

これが簡単に移動させる方法です。

[バウンシング]

アニメーションにバウンシング効果を追加すると、より自然な見た目になります。

 

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

ヒント：動きの位置を調整しすぎてアニメーションがちらつくように見える場合、

オブジェクトを再調整する代わりに、キーフレーム間の間隔を広げると良いでしょう

顔の表情

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

 

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

顔の表情フォルダー内で、左右の目のパーツをすべて結合し（虹彩／瞳孔を除く）、

口のレイヤーをラスタライズします。

編集した顔のパーツをフォルダーに入れます。

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

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

顔の表情フォルダー内に新しい[アニメーションフォルダー]を作成し、

その中にすべての顔の感情フォルダーを移動します。

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

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

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

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

これで完了です！！

私の作業プロセスとアニメーション技術が、皆さんのプロジェクトに役立つことを願っています！！

アニメーションを楽しんで、次のチュートリアルでお会いしましょう！！