こんにちは！

 

絵に動きをつけたいと思っても、セルごとに描くのは気が進まないということはありませんか？

 

わかりました！うまくいけば！

 

1 つの画像で、これをどうやって実現したかをお見せします。

 

 

ご希望の場合は、ビデオバージョンをこちらでご覧いただけます:

ここでは、描画のカットを必要とせず、主に環境アニメーションに焦点を当てた非常にシンプルなシンプル描画アニメーションを作成しました。

シリーズの作り方を忘れてしまいましたが、これは最初のパート 2 のようなものです

 

最初のものと同じように、Clip Studio Paint Pro を使用していますが、フレームは 24 個のみです。

 

誰でもできます。

 

この新しいヒントでは、レイヤーとフォルダーの整理に重点を置いているため、キーフレームをより多く使用できます。

 

始めましょう!

準備 – 下書きと描画

最初のステップは、画像を準備することです。

見たいものの下書きを作成します

眠そうな顔をして、横に傾き始めたように見せたかった

⭐  髪の毛やまばたきのアニメーションも必要

下部にライト効果も追加するかも？

⭐  おそらく影のアニメーションも必要

背景に雨を降らせたい

⭐  雨は好き :D

 

これで計画は完了

 

Clip Studio Paint を開いて、画像を読み込みます。

---

アニメーション化したい部分をカットする必要がありますが、ここでは説明しません。

キャラクターを11個のピースにカットしました

必要な分だけカットできます

整理整頓を保つためにレイヤーに適切なラベルを付けてください

タイムライン

タイムラインを取得しましょう。[Windows] > [タイムライン] に移動して、[新しいタイムライン] をクリックします。

私はフレームレート 8、再生時間 24 にします

 

注意: Clip Studio Paint の再生時間は最大 24 時間です。より長いアニメーションを作成したい場合は、EX バージョンにアップグレードする必要があります。

 

アニメーションの作成を始めましょう

RAIN ANIMATION - セルアニメーション

タイトルにはキーフレームとありますが、この部分は除きます。

作業を簡単にするために、セルで雨を作ります。

この後は残りがキーフレームになります。

 

セルを使用して、シンプルで素早い雨のアニメーションを作りましょう

雨のブラシを使用します

 

ここでこのブラシを使用しました:

まずは雨のアニメーションから始めましょう

 

[新しいアニメーション フォルダ] を作成し、名前を RAIN に変更します

注意: 整理するためにフォルダとレイヤーの名前を変更してください

フレーム 1 で [新しいアニメーション セル] をクリックすると、フォルダー内に番号またはフレーム 1 が表示されます。

レインブラシを手に入れて、ブラシを使って雨を描きましょう

次のフレームフレーム2に移動し、[新しいアニメーションセル]をクリックして、別の雨を降らせます

フレーム 3 とフレーム 4 でも同じ操作を行います

 

では、この 4 つのアニメーションを再生全体に適用してみましょう。

 

次の空白フレーム (例: フレーム 5) にいることを確認し、[アニメーション] > [トラックの編集] > [複数のセルの割り当て] に進みます

私は[セル名で割り当て]を選択しました

セル1からセル4で開始

 

5回繰り返します

つまり4を5倍すると20となり、すでに4つあるので24フレームが完成します

 

完了したらOKをクリックします。

RAIN Animation フォルダが数字 (セル) でいっぱいになっているのがわかります

 

そして、[再生] をクリックすると

アニメーションは次のようになります

明るすぎる場合は、アニメーションフォルダの不透明度を変更できます

ヘッドアニメーション - 頭を傾ける

次に頭をアニメーション化しましょう。まず新しいフォルダーを作成します。通常のフォルダーです。

HEADという名前を付けます

 

そのフォルダーにすべての頭の要素をドラッグします

⭐目、眉毛、顔、髪、上髪、頭レイヤー自体

次に、Head FOLDER が選択されている状態で、[このレイヤーでキーフレームを有効にする] をクリックします。

 

[操作] ツールに移動し、Head Folder の アンカー ポイントを変更 してクリックしてドラッグし、あごの下に置きます。

アンカー ポイントを移動したため、キーフレームがフォルダーに追加されます。タイムラインを整理するために、キーフレームを削除できます**。

 

ここでは、回転 をアニメーション化します。

位置と回転の中心は不要です。これらのキーフレームは削除できます

小さなバウンスを作成します

 

ROTATE をクリックします

微妙ですが、変形をクリックすると変化が見られます

キーフレーム補間; スムーズ に維持する

私が望むアニメーションは、彼が眠くなる（頭を傾ける）そして起きる（頭を後ろに傾ける）というものです

 

最初のキーフレーム を配置しましょう。フレーム 6 にします。回転にキーフレームを追加 – 動きはないので、この位置を保持しましょう

次のキー、フレーム 12 – 頭を少し左に傾けるか回転させます。これで頭が動き始めます。

次のキー、フレーム 14 – キーフレームを追加しますが、動きはしません。

基本的に、フレーム 12 のキーをコピーしただけです。

次はフレーム13です。フレーム12よりも**頭を少しだけ*傾けます。

同じアニメーションを数フレーム先に実行しましたが、今回は回転が反時計回りです

 

クリップ再生でアニメーションを確認します

レンダリングが遅れ始めたら、ズームアウトしてリアルタイムでレンダリングします

 

ここで私が言っているのは、バウンスです。

1. 最後の動きをコピーします

2. 2フレーム先に貼り付けます

3. これらのキーフレームの中央に貼り付けます

4. 最後の動きの回転を増やします(誇張して、値を追加します)

目のアニメーション - キーフレーム

目のアニメーションは通常セルで行いますが、すでにキーフレームを使用しているので、目のアニメーションでも同じことをしたほうがよいでしょう。

 

キーフレームを使用して目のアニメーションを行うのは、基本的に不透明度を操作することであり、要点を押さえた方法です。

 

簡単ですが、面倒になることがあります。

 

別のキーを入力するまでキー値が保持されるように、HOLD 補間 を使用することをお勧めします。

 

HEAD フォルダーはすでにキーフレームが有効 になっており、目もすでにそのフォルダー内にあるため、目もすでにキーフレームが有効 になっています。

 

すべての目のレイヤーを非表示解除します

アニメーションを開始するフレームを選択します。

 

HEAD キーフレームを参照として使用できます。

 

キーフレーム補間を HOLD に変更します

たとえば、フレーム 8 では目が開いているので、次のようになります:

 

開いた目 の不透明度は 100% です。

半分の目 の不透明度は 0% です。

閉じた目 の不透明度は 0% です。

基本的に、目を開ける必要がある場合は、100% の不透明度にして、他の目のレイヤーを 0% の不透明度にします

 

以下同様に行います

必要なものは 100% の不透明度のままにします

必要のないものは 0% の不透明度にします

眉毛アニメーション

正直に言うと、個々の眉毛に対してこれを行うことができるので、この部分は不要です。フォルダーとフォルダー内のレイヤーをアニメートしても問題ないことをお見せしたいのです。

---

次に、眉毛に取り組みましょう。

 

EYEBROW フォルダー自体をアニメーション化します。フォルダー内には L_Eyebrow と R_Eyebrow があります。

EYEBROW フォルダの POSITION でアニメーションを作成します

 

このアニメーションでは、頭を後ろに傾ける前に、少ししかめ面 (眉が下がる) をさせるようにします

開始する前に、Keyframe Interpolation が SMOOTH になっていることを確認してください

キーフレームを配置します。何も動かさず、位置のフレーム 14にキーフレームを配置するだけです

キャラクターの現在の位置は、頭がすでにここに傾いていて、目が閉じていて、眉毛が落ち着いた位置にあります。

開始キーフレーム、つまり元の位置を配置するだけです。

頭が後ろに傾く前に次のキーを準備できます

次に、フレーム 19 で、[操作ツール] を使用していることを確認し、眉毛を下にドラッグ して、眉をしかめているようにします。

次に目を開けるので、眉を上げましょう。

 

フレーム 14 のキーをコピーしましょう。そこが元の位置です。

 

キーフレームをクリック > Edge キーボード を開き、ALT をクリックしてキーをフレーム 22 にドラッグします。

キー ボタンを無効にするには、もう一度 ALT キーを押すことを忘れないでください。

 

眉毛が上がるときにバウンスを作成しましょう

 

同じキーフレームを フレーム 24 に追加します

 

次に、中間のフレームである フレーム 23 が空であることを確認します。[操作ツール] をオンにして、もう少し上にドラッグします。

プレイしてみると…

確かに、何かが欠けているように見えます。

 

眉毛は上下に動くだけで、回転したり、しかめっ面をしたりしません。

それを直しましょう。

---

個別の眉毛

眉毛が下がったとき、つまり頭を上げようとしたときに、少しだけしかめ面をしてほしいのです。

 

ここでは、眉毛がしかめ面をしているように見せるために、ROTATE を最も多く使用します

 

まずは L_Eyebrow で作業しましょう。[Operation Tool] になっていることを確認し、アンカー ポイントを取得して眉毛の中央までドラッグします

アンカーポイントを変更するとキーフレームが自動的に追加されます。それらは多すぎるので削除してください。必要ありません。

アニメーションを始めましょう

 

Eyebrow Folder を参考にして、Frame 14 から開始し、ROTATE にキーフレームを追加します。

-- これは開始キーフレーム、つまりアクションの前のキーフレームになります

— 何も動かす必要はありません。キーフレームを置くだけです

眉毛フォルダー（フレーム 19）を参考にして、眉毛を少しだけ回転させて、眉をしかめているように見せます。

ここで元の回転に戻ります

 

フレーム 14 のキーフレームをコピーします

キーフレームを選択 > Edge キーボード > Alt > それを フレーム 22 にドラッグします

キーフレームがコピーされます

 

 

もう一度、バウンスを作成しているので、同じキーフレームをフレーム 24 に配置します

 

フレームの中央が空になったので、フレーム 23 でバウンスを追加しましょう。

 

眉毛を反時計回りに少し回転させ、少しだけ上がっているように見せましょう。

ここでのアクションは、キャラクターの頭が上に傾き、目がぱっと開いたことです。

それを弾くと少し跳ねる

右の眉毛も同様に描きます。完成すると次のようになります。

右の眉毛の中心が見つからなかったので、POSITION にもキーフレームを配置することにしました。

POSITION は、ROTATE 中に眉毛がランダムな場所に移動しないようにするのに役立ちました。

ヘアアニメーション

技術的には、これは細い髪のアニメーションです。頭の上の細い髪です。ただし、キャラクターの髪をセクションにカットする予定の場合は、これも使用できます。

 

細い髪に進みましょう。[操作ツール] になっていることを確認して、TOP HAIR のアンカー ポイントを取得し、髪の下端または頭皮があるはずの場所にそれを移動します。

 

 

アンカー ポイントを変更するキーフレームは削除することを忘れないでください。それらは必要ありません。

ここで行うアニメーションは、頭が揺れるときに髪が前後に揺れるだけです。

 

タイムラインをスクラブして、頭が傾く場所を確認し、見つかったら数フレーム戻します。開始キーフレームを配置します。

— アクションの前のキーフレーム。

— これは元の回転/値でもあります

 

フレーム 9 としましょう。ROTATE** にキーフレームを追加します。

数フレーム前へ、たとえばフレーム 14 へ移動して、髪を時計回りに回転させます

アクションはキャラクターが横に傾くことなので、髪が下がっています。

このセクションでは詳しく説明しません

私が作成したアニメーションは基本的に、

 

⭐キャラクターが右に傾いている場合 - 髪は時計回りに回転します

⭐キャラクターが左に傾いている場合 - 髪は反時計回りに回転します

 

ただし、少し「跳ねる」、または揺れとも言える動きもあります。

⭐終了キーフレームを作成する前に、値が小さくなって終了キーフレームに達するまで、左から右に髪を動かす複数のキーフレームを作成しました

ループアニメーションを作成したい場合

終了キーフレームが最初のキーフレームと同じであることを確認してください。

胴体アニメーション

胴体または上半身をアニメーション化しましょう

 

まず、（通常の）フォルダを作成し、TORSO に名前を変更し、Head フォルダと Top レイヤーをそこに配置します**

上半身に関係するものをすべて配置します

TORSO を確認し、[このレイヤーでキーフレームを有効にする] をクリックします。

[操作ツール] を使用し、アンカー ポイントを移動してキャラクターのヒップに移動します

 

回転の変更によりキーフレームが配置されますが、それらのキーフレームは不要なので削除してください

必要に応じて、HEAD フォルダーを参照として使用します

 

フレーム 7 の ROTATE に開始 キーフレーム を配置します

- そこにキーフレームを配置するだけで、何もしないでください。

- これが回転を保持するための開始キーフレームです。

HEAD フォルダを参考にして、フレーム 12 > 時計回りに回転 します。少しだけ

1 値だけ移動します

フレーム20 - 再び時計回りに回転、値を少しだけ増やします

私たちが行ったアクションは、彼がよりゆっくりと傾くようにすることです

胴体のアニメーションの残りの部分は、髪と同じです。

 

⭐ 終了キーフレームが開始キーフレームと同じであることを確認してください。

⭐ タイムラインの終了前に空のフレームがあったので、少しだけ後ろに振ってフォートするようにしました。

再生が遅れる場合は、ズームインとズームアウトを行ったり、他のアニメーションを無効にしたりすると改善する場合があります

再生が遅れて、雨を無効にするのを忘れていました。現在のアニメーションを簡単にエクスポートしたものがこちらです:

極端すぎることはありませんが、ゆっくりと傾き、最後に少し揺れます。これが、終了キーフレームに到達するまで、前後に揺れる (時計回り - 反時計回り) 終了キーフレームです。

葉のアニメーション

LEAVES レイヤーが選択されていることを確認し、[このレイヤーでキーフレームを有効にする] をクリックします。

キャンバスの右端中央にある葉のアンカー ポイントを移動します。必要に応じてキャンバスの外側に移動します

アンカー ポイントをジョイントと考えます。ここに「ジョイント」を配置すると、オブジェクトはどのように回転しますか?

アンカー ポイントを移動したためキーフレームが作成されますが、削除してください。

 

これらは必要ありません。

ここで行うアニメーションは、葉が揺れるだけです。

ROTATE を使用するので、選択します

 

FRAME 1 - ROTATE にキーフレームを配置

- 何もせず、そこに置くだけです。これが開始キーフレームです

同じキーフレームをタイムラインの最後に回転、フレーム 24に配置します

- 変更や変換は行わず、キーフレームをそこに配置します。

 

また、終了キーフレームをタイムラインの一番最後にドラッグします。*

選択してドラッグします。

これにより、Leaves アニメーションがシームレスになります。

アニメーションの途中で、フレーム 13 > 葉を反時計回りに回転 しますが、極端になりすぎません。

確認するために再生する

その他の効果

次に、通常のレイヤーを使用して影と照明を追加しました。アニメーション化する必要はありません。

BOKEH については、アニメーション化しました。

 

各変換のキーフレームは最大 3 つだけです

 

不透明度については、0% から始めて、中間は 100% で、最後に再び 0% にします

- フェードインとフェードアウトになりました。

 

また、2 つの BOKEH を作成したので、両方を異なる間隔でアニメーション化できます。

- 1 つのアニメーションに 2 つのボケを入れると、乱雑に見える場合があります

POSITIONについては、ただ上に上げるようにしました

- タイミングを変えて

完成すると次のようになります。

シャドウアニメーション

キャラクターの後ろに影を付けたかったので、試してみましょう!

 

キャラクター フォルダーを複製 > 名前を Shadow Char に変更します

*オプション*

SHADOW CHAR フォルダー内のすべてをぼかす

— エッジシャドウを柔らかくしたい場合は、そのフォルダー内のレイヤーをぼかすことができます

— 顔のレイヤーは削除できます。ここでは不要です

— ガウスぼかしを 10% で使用しました

 

キーフレームを無効にします [このレイヤーでキーフレームを有効にする] > をクリックして編集できるようにします。

— 他のレイヤーと結合しない限り、キーフレームは消えません。

Shadow Char フォルダを Character フォルダの下に移動してください。

 

次に、これを 影 にしましょう

 

レイヤー > 新しい補正レイヤー > 色相/彩度/明度 に移動します

 

彩度と明度を -100 に下げます

レイヤーが次のようになっていることを確認します:

⭐キャラクター

⭐修正レイヤー

⭐シャドウ キャラクター

 

次に、修正レイヤーを下のレイヤーにクリップします

その後、[このレイヤーでキーフレームを有効にする] をクリックするだけです

 

SCALE を少し増やし、POSITION を移動して距離を作ります

 

SCALE と POSITION を移動するとキーフレームが配置されます - これらは削除できます。このフォルダーをアニメーション化する必要はありません

 

これで次のようになります:

*オプション - カメラ

必要に応じてカメラを追加できます!

 

[アニメーション] > [新しいアニメーション レイヤー] > [2D カメラ フォルダー] に移動します

Camera 1 というフォルダがレイヤータブに表示されるので、その中にすべてのレイヤーを配置します

キャンバスに青いボックスが表示されます。これがカメラです

 

私は通常、最初にスケールダウンしてズームします。こうすることで、カメラをパンするときに作業するスペースが広がります

このキーフレームは不要なので削除できます。

 

次に、POSITION を使用して 3 つのキーフレームでカメラをパンします。

 

開始キーフレームと終了キーフレームは同じです。 中央は少しだけ移動しました。 ほんの少し、揺れるだけです

---

カメラはオプションです!

 

カメラなしの場合、次のようになります:

---

その後は、作品をエクスポートするだけです

 

アニメーション GIF としてエクスポートする場合は、ディザリングを有効にすることをおすすめします。

 

⭐ ディザリングなし:

---

⭐ ディザリングあり:

---

フォルダ（およびレイヤー）の階層化と整理は、このアニメーションに役立ちます。

また、整理整頓も忘れないでください。

 

これが何らかの形で役立つことを願っています。