ワサップ、皆さん!
@linkurys のアニメーター兼イラストレーターの Link です。
Linkurys (@linkurys) • Instagram の写真と動画
アニメーションのヒントをオンラインで共有するのはこれが初めてなので、私のアドバイスが不明瞭でわかりにくい場合は、遠慮なく質問してください。コメントを残すかDMしてください。
このチュートリアルでは、エモートをすばやく簡単にアニメーション化する 3 つの方法を説明します。各方法には独自の課題がありますが、心配する必要はありません。 CLIP STUDIO PAINT EXの使い方を最初から最後まで丁寧に解説します！ 😁
何をするつもりですか?
アニメーションエモートを作成することを考えると、それは難しくて複雑で、多くの作業が必要であると思われるかもしれません。私もアニメを始める前はそう思っていました。しかし、信じられないかもしれませんが、上記の 3 つのポイントが本質的にすべてです。もちろん、それほど単純ではありませんが、思っているよりも簡単です。特にClip Studio Paintを使用すると、多くの機能が得られます 😎
エモートをアニメーション化する 3 つの方法!
前に述べたように、独自のアニメーション エモートを作成する 3 つの方法を紹介します。
1\。静止画像アニメーション
このテクニックの本質はシンプルで、基本的に画像/描画を動かして必要な動きを実現するだけです。
(これは、アニメーション エモートを作成するときに人々が使用する最も一般的な方法であり、おそらくこのタイプのエモートを何度も見たことがありますよね?)
2\。パーツアニメーション
ここでは、最初の方法と同じ手法を使用して、エモートのパーツを分割し、個別に移動します。
(1 番目の方法と似ていますが、アニメーション化するコンポーネントが増えています。)
3\。フレームごとのアニメーション
それぞれの動きをフレームごとに描画してアニメーション化します。
このテクニックにはより多くの労力が必要であり、初心者にとってはやや難しいかもしれません。ただし、一貫して練習すれば、これらのアニメーションの作成がより速く、より熟練していることに気づくでしょう。
(最も難しいですが、とても楽しいです! :D)
ワークスペースなどの準備
1.アニメーション化したいエモートの描画を準備します
ぜひご覧ください!
アニメーション エモートについて説明するとき、それらは Twitch や同様のプラットフォームなどのライブ ストリーミング チャットによく使用されます。小さく見える可能性があるため、見やすいようにすることが重要です。失われる可能性があるため、細かい詳細を追加しすぎないでください。とにかくシンプルにしてください。
2.CLIP STUDIO PAINTのワークスペースを設定する
アニメーションのチュートリアルに入る前に、設定をしてみましょう。
1\。 Clip Studio Paintを開きます
2\。 [ファイル] > [新規…] をクリックします。
3\。 プロジェクトのアニメーションを選択します
4\。キャンバス/フレーム サイズを 1000x1000 px、解像度を 150 に設定します。
(別のサイズを選択できますが、1:1 スケール を維持するようにしてください)
5\。フレーム レートを 24 FPS に設定します
6\。 [OK] をクリックします
タイムライン パネルがない場合は、[ウィンドウ] > [タイムライン] に移動して表示させることができます。
待て、タイムライン とは何ですか?まあ、これは基本的にアニメーション プロジェクトのバックボーンです。タイムライン上でシーケンスをレイアウトし、ペースを設定し、アニメーション フレームを整理します。ここで個々の部分がすべて結合され、アニメーションの最初から最後までの流れを視覚化して制御できるようになります。これは、すべての動き、すべてのトランジション、すべての瞬間が計画されているディレクターのダッシュボードと考えてください。
これはオプションですが、タイムラインの横にあるバーガー アイコン (3 行) に移動し、サムネイル サイズ > なし に移動して、スペースを確保するためにアニメーション フォルダーのプレビューを非表示にすることができます。
わーい！これでCLIP STUDIO PAINTのワークスペースの設定は完了です。 ✨
アニメーションを付けて動かす
これを読んでいるということは、エモートをアニメーション化する準備ができているということですよね? (あるいは、この部分まで読み飛ばしただけかもしれません 😏 )。いずれにせよ、最もシンプルで簡単な方法である 静的画像アニメーション! から始めましょう。
第 1 のヒント: 静止画アニメーション
上の図では、静止画像を移動および変更する 3 つの方法が示されています。移動したり、回転させたり、大きくしたり小さくしたり、これらの方法を組み合わせてさまざまな効果を得ることができます。これらのトリックを使用するだけでできることはたくさんありますが、限界があるのはあなたの創造性だけです。
静止画アニメーション：レベル1（初級）
1. 静止画像/描画の準備
レベル 1 では、2 つの画像を使用して、がっかりしたエモートを作成してみましょう:
-あなたのキャラクターの絵
-背景画像
2.アニメーションフォルダーの作成
CLIP STUDIO PAINT に図面を読み込む前に:
1\。新しいアニメーションフォルダーを作成します。これは、キャラクターの描画と背景画像を異なるレイヤーに分離するのに役立ちます。
2\。アニメーションフォルダーの名前を好きなように変更します。たとえば、上のレイヤーには「キャラクター」、下のレイヤーには「背景」を使用します。
3. 画像/図面のインポート
CLIP STUDIO PAINTのアニメーションでは、画像を直接キャンバスにドラッグ＆ドロップして読み込むことはできません。これは、CSP のアニメーション セルが主にブラシやその他のツール用に設計されており、画像を直接インポートするためではないためです。このように考えてください。生の画像素材用に作られたものではありません。
画像ファイルを正常にインポートするには、画像ファイルをレイヤー パレット領域の正確にアニメーション フォルダーの下にドラッグ アンド ドロップしてください。
画像ファイルは 「Dino 1」という名前のベクター レイヤーとして挿入されます。
(「Dino 1」は私の画像ファイル名です)
「しかし、画像はキャンバスに表示されませんでした :( 「そうですか?
それは、最初にイメージ ベクター レイヤーをアニメーション フォルダーに割り当てる必要があるためです。
これを行うには、[**セルをフレームに割り当て] > [画像レイヤーを選択] > [OK**] をクリックします。
インポートされた画像のサイズは、キャンバスのサイズより大きいか小さい場合があります。縦横比を変えずに画像をキャンバスに合わせるには、Shift キーを押したまま画像の角をドラッグします。
それでおしまい！これでキャラクター画像のインポートは完了です。 ✨
これで、背景をインポートして他のアニメーション フォルダーに割り当てる際にも同じことができます。
4. 描いた絵をアニメーション化しましょう！
描画のアニメーションを開始するには、まず次の操作を行ってキーフレーム機能をアクティブにする必要があります。
1\。 「背景」アニメーションフォルダーを選択します
2\。選択したレイヤーのキーフレームを有効にする
キーフレームが有効になっている場合、最初のフレームにキーフレームを追加します
次に、追加したキーフレームをコピーし、アニメーションの継続時間の最後 (2 秒) に貼り付けます。 ALT キーを押しながらキーフレームをドラッグ アンド ドロップすることで簡単に行うことができます。
これで 2 つのキーフレームができました!
まず、初期キーフレームを選択します。次に、操作モード >オブジェクト をクリックします。この設定により、最初のキーフレームから背景の調整を開始できるようになります。
その後、背景画像を上部/キャンバス外へ移動させます
以上です！
最初のアニメーションエモートが作成されました! 🥳
背景のアニメーションが遅すぎると感じる場合は、お好みに合わせて調整してください。個人的には、最初のキーフレームの近くにさらにキーフレームを追加して、速度を微調整します。
結果はこちらです！
そして、これは、まったく同じ手順で 3 つの静的アニメーションの基本テクニック (回転、スケール、位置) をすべて使用した別の結果です。それらすべてをいつ、どこで使用するのか教えていただけますか? 👀
レベルアップしました！おめでとう！ ✨
静的アニメーション レベル 1 を完了しました。次に、レベル 2 に進む準備ができました。
静止画アニメーション: レベル 2 (上級)
レベル 2 へようこそ!
ここまでで、静止画アニメーションの基本をしっかりと理解できたと思います。それでは、基本的な手順をスキップして、アニメーションのプロセスに直接入りましょうか?
1\。レベル 2 エモート マテリアル
2 つの異なる画像を使用することは、特に基本的な静的アニメーション技術を組み合わせることによる無限の可能性を考えると、簡単に思えるかもしれません。しかし、このレベルの場合は、金額を上げてみてはどうでしょうか?たった 1 枚の画像を使ってアニメーション GIF を作成しましょう。 😈
2. 新しいファイルまたは新しいタイムライン?
この部分には 2 つのオプションがあります。これまでと同様に新しいファイル/キャンバスを作成するか、または単純に以前と同じ形式でわずかな調整を加えた 新しいタイムライン を作成するかのいずれかです。 新しいタイムライン の作成に興味がありますか?教えてください。
新しいタイムラインを作成する方法は次のとおりです:
1\。タイムライン パネルで、[新しいタイムライン] ボタンをクリックします。
2\。ポップアップ画面が表示されます。同じアニメーション形式を使用しているため、設定を調整する必要はありません。タイムラインの名前を「レベル 2」に変更するか、再生時間を短く/長く変更したい場合があります。
3\。 [OK] をクリックします
新しいタイムラインの準備が整いました! ✨
ただし、レイヤー パネルを見ると、インポートした以前の描画イメージがまだそこにあることがわかります。これは、新しいタイムラインを作成すると、以前と同じファイル内で作業することになるためです。ただし、それらは新しいタイムラインでの進行状況には影響しません。
削除しないでください! ⛔
これらを削除すると、インポートされたファイルが以前のタイムラインから削除されることになります。そしてはい、これは、他のタイムラインで作業していたアニメーションが消えることを意味します。したがって、そのまま放置するのが最善です
でもそれが気になる場合は、簡単な解決策をご紹介します
1\。すべてのレイヤーを選択します
2\。 CTRL G を押して、これらの選択したレイヤーをグループ化します。
3\。 「タイムライン 1」というラベルを付けます。
4\。フォルダーを最小化するだけでワークスペースがすっきりします。
5\。出来上がり！ワークスペースは、タイムラインに対応した新しい外観で、新鮮で整理された外観になりました ✨
3. 描いた絵にアニメーションを付けよう！
新しいタイムラインが設定されました。アニメーションを開始しましょう!
準備する必要があるものについては、次のとおりです。
1\。新しいアニメーションフォルダーを作成する
2\。画像/図面をインポートする
3\。インポートした画像をアニメーションセルに割り当てます
4\。画像スケールを調整する
2D カメラ フォルダーの追加:
1\。ハンバーガーボタンをクリック
2\。新しいアニメーションレイヤー
3\。 2Dカメラフォルダー
2D カメラ フォルダーが設定されたので、描画レイヤーをそのフォルダーに移動します。レイヤーを 2D カメラ フォルダー内にドラッグ アンド ドロップするだけです。これを行うと、画像/図面上でカメラ効果が有効になります。
2D カメラ エフェクトをアニメーション化する前の注意事項
1\。カメラのフォルダーまたはレイヤーを選択していることを確認してください。
2\。キャンバス上に表示される四角いフレームは、カメラ効果によってキャプチャされる領域を表します。基本的に、この四角形の中にあるものはすべて出力になります。
3\。カメラ エフェクト フレームの調整を開始すると、キーフレームがタイムラインに自動的に追加されます。別のフレーム期間に進み、カメラ フレームを調整すると、それに応じて調整されます。
4\。カメラ エフェクトの結果を確認するには、タイムラインのバーガー ボタン メニュー > 再生設定 > 2D カメラのレンダリング をクリックして開きます。
2D カメラ効果のアニメーション化
カメラ エフェクト フレームを 2 ～ 3 フレームごとにランダムな位置に移動して、すばやく振動するカメラ エフェクトを作成します。
期待される結果は次のようになります。
アニメーションズーム効果
1\。カメラ フォルダー内にある描画のアニメーション レイヤを選択します。
2\。キーフレームオプションをオンにします。
3\。アニメーションの最初と最後の両方にキーフレームを追加します。
4\。最後のキーフレームで、描画/画像レイヤーをスケールアップして拡大し、ズーム効果を実現します (操作ツール > オブジェクトを使用して実行してください。そうしないと、画像を移動できなくなります)。
期待される結果は次のようになります!
この時点で完成したと考えることもできますが、もう少しセンスを加えてみてはいかがでしょうか。その笑顔をさらに強化して、さらに恐ろしいものにしましょう。あはは😈
フィルターの追加
1\。描画レイヤーを選択してください
2\。キーフレーム機能を一時的に無効にする
(心配しないでください。再度オンにしても、キーフレームは同じままです)
3\。 レイヤーを右クリック > ラスタライズ して画像をラスタライズします。
ラスタライズすると、ベクター レイヤーがビットマップ形式に変換され、画像にフィルターを適用できるようになります。
4\。 フィルター > ぼかし > 放射状ぼかしを開きます
(注: このフィルタ以外にも、探索できるフィルタが多数あります。)
5\。強度、方向を両方向、モードをスムーズに調整してOK
6\。完了したら、描画レイヤーのキーフレーム機能を再度アクティブ化できます。
そして、こちらが威嚇的な笑顔です! 😈 😈 😈
レベルアップしました!おめでとう！ ✨
静的アニメーション レベル 2 を完了しました。これで、パーツ アニメーション に進む準備が整いました。
2 番目のヒント: パーツアニメーション
パーツ アニメーションの背後にある概念は、描画を移動、拡大縮小、または回転する静止画像アニメーションに似ています。異なる点の 1 つは、個別に動かしたいキャラクターの各部分を分離する必要があることです。上の画像に示されているように、私のキャラクターには 4 つのパーツがあり、それぞれを個別にアニメーション化することで、より多くの可能性やエモートのダイナミックなポーズを与えることができます。
文字パーツの分割
このヒント セクションでは、コーヒーをすするキャラクターをアニメーション化することを目的としています。
これを達成するために、キャラクターを次の 5 つの部分に分割します。
1\。体、
2\。目、
3\。眉、
4\。唇
5\。コーヒーカップ
簡単に言っておきますが、私のポーズやデザインを真似する必要はありません。独自のキャラクター、ポーズ、関連要素を自由に使用してください。あなたの創造力を輝かせましょう!
アニメーションフォルダーの設定と画像のインポート
アニメーション フォルダーをセットアップします
キャラクターが持つ個別のパーツの数に基づいてアニメーション フォルダーを作成します。私のキャラクターは 5 つのパーツに分かれているので、5 つの別々のアニメーション フォルダーを作成します。
フォルダーが正しく配置されていることを確認してください。前面にあるべき画像が他の部分と重なってしまうのは望ましくないですよね。
図面をインポートして各アニメーション フォルダーのセルに割り当てます
1\。作成した各アニメーション フォルダーに画像/描画をインポートします
2\。静的イメージ アニメーションの場合と同様に、インポートした図面をそれぞれのアニメーション フォルダーに割り当てます。[セルをフレームに割り当てる] をクリックし、イメージ レイヤーを選択して、[OK] をクリックします。これをパーツごとに繰り返します
3\。これらのパーツを開始条件または 1 フレーム目の初期位置に設定します
キャラクターパーツのアニメーション化
アニメーションに入る前に、目的のモーションを計画することが重要です。上の画像に基づいて、キャラクターのすするアクションを実現するには、どの部分を移動し、どの部分を固定したままにするかを識別する必要があります。
画像を観察すると、次のことがわかります:
1\。眉毛が下に下がってきています。
2\。目は静止したままです。
3\。キャラクターがコーヒーをすするとき、口は隠されています
目的のモーション条件が完成したので、アニメーションを開始しましょう!
1\。最初に行うことは、各アニメーション フォルダー/レイヤーでキーフレーム機能を有効にして、その上にキーフレームを配置してアニメーション化できるようにすることです。
2\。最初のフレームと最後のフレームにキーフレームを追加します
3\。すべての最終キーフレームを編集して、終了モーションを表します。私のキャラクターにとって、それはキャラクターが酒を飲んでいる瞬間です。
期待される結果は次のようになります!
技術的にはここでまとめることができますが、少しセンスを加えてさらに良くしてみませんか?スパイスを加えてみましょう! 😎
1\。 アニメーション フォルダーを右クリック > 新しいアニメーション レイヤー > 2D カメラ フォルダー により 2D カメラ エフェクトを追加します。
2\。すべてのキャラクターパーツのアニメーションフォルダーをカメラフォルダーに挿入します
2D カメラ エフェクトのアニメーション化
1\。他のレイヤーを非表示にするには、カメラフォルダーを閉じます。これによりタイムラインが見やすくなります。
2\。最初と最後のフレームにキーフレームを追加します
3\。カメラエフェクトフレームを縮小してズームイン効果を実現します
期待される結果は次のようになります!
少しスパイシーな感じですか？でもこれだけでは辛さが足りないので、スパイスをもっと加えましょう 😤
4\。カメラ フォルダーの下に新しいアニメーション フォルダーを追加して、背景を追加します。
5\。 背景レイヤーを選択 > 新しいアニメーションセル
6\。背景レイヤーに黒い図形を追加します
7\。背景レイヤーでキーフレームを有効にする
8\。レイヤーの最初と最後のフレームにキーフレームを追加します
9\。最初のキーフレームを選択し、不透明度を 0 に下げます。
期待される結果は次のようになります!
すでにさらにすごいと思いませんか!?でも、最後の仕上げがもう 1 つあります!
1\。カメラ フォルダーの先頭に新しいアニメーション フォルダーを作成し、Foreground という名前を付けます。
2\。アニメーションセルを新規作成します。キャンバスに 1/4 の黒いシェイプを追加し、キャラクターの描画の一部を覆います。前景アニメーション フォルダーを複製し、複製をキャンバスの下部に移動します。これで、カメラレイヤーの上に 2 つの異なる前景レイヤーができました。
3\。両方のレイヤーでキーフレームを有効にする
4\。両方のレイヤーの最初と最後のフレームに新しいキーフレームを追加します
5\。一番上の黒い前景を選択してから最初のキーフレームを選択し、キャンバスの上部の外側に配置されるように黒い形状を移動します。
6\。一番下の黒い前景を選択してから最初のキーフレームを選択し、キャンバスの下部の外側に配置されるように黒い形状を移動します。
最初のフレームは次のようになります
結果はこれです!!! ✨
そして、これまでに説明したすべてのアニメーション技術を使用して作成した別の結果がこちらです。それらすべてをどこで何を使っているか教えていただけますか? 👀
レベルアップしました！おめでとう！ ✨
パーツ アニメーション と 静止画像アニメーション の両方を完了することができました。
ここまで来ただけで、エモートをアニメーション化することに関して、自分には素晴らしい可能性があることが証明されたことになります。 あなたを誇りに思います! 🥹 💖
3 番目のヒント: フレームごとのアニメーション
導入
フレームごとのアニメーションの説明に入る前に、いくつかの基本的な用語と概念を確認することが重要です。これにより、私たち全員が明確に理解し、同じ認識を持って前進することができます。
フレームバイフレームアニメーションとは何ですか?
主に背景やキャラクターの一部を移動して動きを表現していた以前の手法と比較して、フレームごとのアニメーションではキャラクターのあらゆる動作を詳細に表現する必要があります。
上の画像を見てください。
キャラクターがある点から別の点に飛び移っていることに気づくでしょう。
その跳躍の各段階は、動きのあらゆるニュアンスを捉えた独自の画像によって表現されます。これが一つ一つの動きを段階的に描く真髄です！
フレーム
一連の画像の中の 1 つの画像。まるでアルバムの中の1枚の写真のように。
1 秒あたりのフレーム数 (FPS)
1 秒間に表示されるフレーム (または画像) の数。たとえば、アニメーションに 24 FPS がある場合、アクションをスムーズに見せるために毎秒 24 フレームがあることを意味します。
キーフレームと中間
キーフレーム これらはアニメーションのメイン フレームまたは「キー ポイント」です。これらは、スムーズなトランジションの開始点と終了点を定義します。上の画像に示されているボールが投げられる例を使用すると、キーフレームは、投げ始め、最高点、およびボールが着地したときになります。
間 キーフレームの間に存在するフレームを描画して動きを滑らかにする処理です。私たちのボールの場合、これら 3 つの主要なポイント間の上昇と下降を示すフレームがフレームです。
中間が多いほど、フレーム数が増え、アニメーションがよりスムーズになります!
フレームごとのアニメーションエモート
フレームごとのエモートの作成には時間がかかりますが、アニメーションエモートの場合はそれだけの価値があります。通常のアニメーションほど詳細にしたり、長くしたりする必要はありません。感情を表に出す限り、彼らは自分の仕事を果たします。
フレームごとの手法を細部まで掘り下げると、長い時間がかかります。アニメーションの 12 の原則や良いシーンの作り方など、取り上げるべきことはたくさんあります。そうなると、この記事は非常に長くなり、やりすぎになる可能性があります。その他の詳細については、後ほど別の記事で説明します。 😉
ここでは、フレームごとのテクニックを使用してアニメーション エモートを作成することに集中しましょう。
何をしようとしているのか
フレームごとの手法でエモートを作成するプロセスに入る前に、これから行うことを説明します。 （私は思う）
1\。ワークスペースのセットアップ
アニメーション キャンバスを準備します。
2\。スケッチとタイミング
スケッチを通じてアニメーションを計画し、適切なタイミングを設定します。
3\。線画
それらのスケッチをきれいな線に変えます。
4\。カラーリングとレンダリング
色を追加して洗練された外観を与える
5\。仕上げタッチ
うーん…それについては後で見てみましょう、ふふ 😋
1. ワークスペースのセットアップ
アニメーションキャンバスの設定
これまでのヒントの手順に従っている場合は、この手法で同じワークスペースを使用していることがわかります。ただし、このセクションに直接ジャンプした場合、または復習が必要な場合は、簡単に要約しましょう。
1\。 CLIP STUDIO PAINT を開き、ファイル > 新規 を開きます。
2\。 [プロジェクト] タブで [アニメーション] を選択し、次のようにアニメーション プリセットを構成します。
3\。 「OK」をクリックします
4\。 タイムラインが表示されない場合は、ウィンドウ > タイムラインを開きます
アニメーションレイヤーの設定
新しいキャンバスを作成すると、アニメーション レイヤが自動的に追加され、名前が付けられます。このレイヤーの目的を反映するように名前を変更することをお勧めします。たとえば、そのレイヤー上でアニメーションをスケッチしている場合は、そのレイヤーの名前を「スケッチ レイヤー」に変更できます。
これにより、アニメーションのタイムラインを管理する際に大きな利点が得られます。
以上です！ワークスペースでフレームごとのアニメーションを使用する準備ができました。
レイヤーフォルダーの設定
レイヤー フォルダーの使用は、フレームごとのアニメーションでは非常に重要です。単一のアニメーション セルまたはフレーム内に複数のレイヤーを積み重ねることができるため、作業を整理して効率的に行うことができます。
これを設定する方法は次のとおりです。
1\。アニメーションレイヤーを選択してください
2\。レイヤーパレット/パネル上に新規レイヤーフォルダーを作成
3\。新しいラスターレイヤーを作成し、レイヤーフォルダー内に置きます
4\。レイヤーフォルダーのセルをアニメーションフレームに割り当てます
注意: アニメーション フレームにレイヤー フォルダー セルを割り当てると、そのフォルダー内のラスター レイヤーの数が自動的に複製されます。したがって、フレーム 1 に 2 つのラスター レイヤーを含むレイヤー フォルダーがある場合、フレーム 2 のような新しいフレームを追加すると、フレーム 1 をミラーリングして 2 つのラスター レイヤーもあります。
オニオンスキンをオンにする
このツールを使用すると、前後のフレームを表示および参照して、トランジションをよりスムーズに行うことができます。これは半透明のオニオンスキンを重ねるのと似ており、隣接するフレームの「ゴースト」イメージを提供してアニメーターの作業をガイドします。
タイムラインパレットのオニオンスキンボタンを押すだけでオンにできます。
2. スケッチとタイミング
スケッチ
「ラフアニメーション」とも呼ばれ、キャラクターや物の基本的な動きを描くことです。これらの単純な図は、詳細な外観を省略して主な動作を示しています。動きを感じ取り、計画を立てるのに役立ちます。
タイミング
アニメーションのタイミングは、動きを適切に感じさせるために各動きにどれだけのフレームが使用されるかによって決まります。何かの速度や重さなどを示すのに役立ちます。
私の静止画像とパーツアニメーションのヒントをすでに行っている場合は、基本的にはキーフレームを調整するときにそれを行っただけです。
ステップ 0: エモートのコンセプト
絵を描き始める前に、作りたいエモートについて考えてください。自問してみてください：
1\。どのような感情や表情を見せたいですか？
2\。どのように動くのでしょうか？どのように始まり、どのように終わるのでしょうか？
私の場合は、あなたが理解できるように、次のような簡単なエモートを作成します。
1\。キャラクターにウィンクをさせたい
2\。笑顔 🙂 からウインク 😉 に変わります。
目標を明確に理解すると、アニメーションの品質と速度の両方が向上します。何を目指しているかを知ることが重要です！
ステップ 1: アニメーションレイヤーとセルを作成します
1\。新しいアニメーションフォルダー/レイヤーを作成します
2\。アニメーションレイヤーの名前を「Sketch」に変更します
3\。新しいアニメーションセル/フレームを追加
注記：
1\。アニメーション用に新しいフレームを描画するたびにこの手順を実行します。
2\。必要に応じてレイヤーフォルダーも使用できます
ステップ 2: スケッチ!
現在はスケッチ段階にあるので、キャンバス上で自由に実験し、さまざまなアイデアを探求してください。もしかしたら、あなたのキャラクターなどにとってより良いポーズが見つかるかもしれません 😎
注: 私は通常、スケッチ、線画、色付けに G ペンを使用します。ただし、最も使いやすいツールを選択してください。
スケッチブリーフ
キャラクターの表情やポーズが変化するたびに、追加のメイン ポーズや別のキーフレームを追加すると、キャラクターの移行がよりスムーズになります。したがって、私のアニメーションの場合は、キャラクターの笑顔とウインクの間にキーフレームを 1 つ追加します 😗
ここでは、アニメーションの簡単なスケッチとタイム マッピングを示します。
上の画像からわかるように、現在、次の 3 つのキーフレームがあります。
1\。笑顔のスタートポーズ
2\。ヘッズアップ - K1 から K3 ポーズへの移行
3\。ウィンク - エンディングポーズ
後で、キーフレームを変更するときにキャラクターの動きをよりスムーズにするために、いくつかの中間フレーム (IB) を追加します。
キーフレームのスケッチ
次の 2 つの簡単な手順に従って、メインのキーフレームのスケッチを開始しましょう。
1\。最初のフレーム (フレーム 1) に開始キャラクターのポーズを描画します。
2\。中央のフレーム (フレーム 12) にトランジション キャラクターのポーズを描画します。
3\。最後のフレーム (フレーム 24) でエンディング キャラクターのポーズを描きます。
注: これはオプションですが、タイムラインをより整理するために、各フレームの名前 (私の場合は K1、K2、K3) を変更できます。まあ、それはあなた次第です！
期待される結果は次のようになります。
いいですね？ 😉
中間のスケッチ
次に、いくつかの中間フレームを追加して、キーフレーム間の遷移がシームレスに見えるようにしましょう。
1\。 K1 と K2 の中間フレーム (フレーム 6) を 予測テクニック を使用して作成して描画し、次のポーズを実行する前にキャラクターの勢いを高めます。
2\。 K2 と K3 の中間フレーム (フレーム 18) を スカッシュ テクニック を使用して作成して描画し、ヘッズアップ後にウィンクを行うときにキャラクターのインパクトを高めます。
期待される結果は次のようになります。
私たちが作成した大まかなアニメーションをご覧のとおり、完成したと呼ぶにはまだ途切れ途切れになっています。したがって、これを解決するには、作成した中間フレームの間にさらに中間フレームを追加する必要があります。 (分かった？) 😇
間にエクストラを追加！
これらの余分な中間フレームは、予測とスカッシュ技術を使用した以前のフレームとは異なります。これらのフレームでは、キーフレームから中間のオリジナルまでスムーズに移行する線を単純に描画します。
1\。すべてのキーフレームと元の中間フレームの中央に追加の中間フレームを作成して描画します。間にある余分なものにはすべて 「e」 というラベルを付けましょう
期待される結果は次のとおりです!
現在の速度
遅くなった
各フレームで何が起こるかは次のとおりです 👀
描画した合計フレームは 9 フレームです。つまり、次のとおりです。
1\。 3x キーフレーム / メインポーズ
2\。 2x 中間フレーム
3\。 4x 追加中間フレーム
アニメーションの粗さが少し違うと思われる場合は、タイミングがまだ微調整されていないためです。このスケッチ段階の目標は、キーフレームとキーフレーム間の描画を正しく理解することです。タイミングの部分に進むので、もう心配する必要はありません。 😎
注意: スケッチ部分はキャラクターの最適な動きではありません。タイミングを調整する際に、不要なフレームを削除したり、新しいフレームを追加したりすることがあります。
ステップ 3: タイミング!
アニメーションを作成する上で、タイミングの調整は私にとってもかなり難しい部分です。動きやポーズが異なれば、タイミングも異なるため、アニメーションの最適なタイミングを知り、感じるには、多くの練習が必要です。
この手順を正確に再現することはできません (私の特定のキャラクターを参照として使用しない限り)。代わりに、自分の直感を信じて、自分のビジョンに基づいてタイミングを調整してください。ちょうどいい感じになるまでキャラクターの動きを微調整してください。
エモートを適切なタイミングで送信するために役立つヒントをいくつか紹介します:
1\。キャラクターの動きの速度を決定します。
-動きが遅いから速い場合は、フレームを近づけて配置します。
-動きが速いから遅い場合は、フレームの間隔をもう少し広げます。
2\。キャラクターの動きが適切でない場合は、変更、削除、さらには新しいフレームを追加します。
アニメーションと描画を並行してこのチュートリアルを作成しているためです。削除する必要がある不要なフレームと追加する必要があるフレームがいくつかあります。
注意: フレームが多すぎたり少なすぎたりすると、アニメーションの流れや明瞭さに悪影響を及ぼす可能性があります。
これはタイミングを調整し、いくつかのフレームを変更した私のタイムラインです
これは私が削除して追加したフレームのイラストです
1\。上の画像からわかるように、次の 3 つの不要なフレームを削除しました。
1\。 e2
2\。 e3
3\。 e4
このフレームはキャラクターの動きの自然な流れを妨げるため、削除しました。アニメーションの各フレームを注意深く確認して、不一致を引き起こしたり、動きが不自然に見える可能性のあるものを特定して除去することが重要です。
2\。タイムラインにK22とK33フレームを追加しました！
しかし、なぜ K2 と K3 で同じように見えるのでしょうか?これは、これらのフレームを複製して、次のように複製した描画を引き伸ばしてオーバーラップとバウンス効果を作成しただけだからです。
ストレッチするフレームを選択 > CTRL Shift T を押して自由変形モードに入る > 一番上のノードを選択し、上部に少しストレッチします
オーバーラップ効果
上の画像から、「ヘッドアップ」モーション中にフレームによってどのようにキャラクターがオーバーラップするかがわかります。これにより動きが誇張され、よりドラマチックになります。
バウンス効果
「頭を上げた」ジェスチャーの後、キャラクターが頭を素早く下に動かすと、ウィンクしたときに弾む効果が作成されることがわかります。これによりアニメーションにダイナミズムが加わります。
そして、これが最終結果です!
前に
(間抜けな動き 💀 )
後
(やっと実際に動きました😎)
ステップ 4: 休憩して、ラフなアニメーションを鑑賞してください ✨
これで、スケッチとタイミングのステップは正式に完了しました。よくやった！ ✨
もちろん、まだ終わっていません！適切なエモートを作成するには、滑らかな線画を追加したり、かわいい色を追加したりして、見栄えを良くする必要があります。
完成したスケッチアニメーションをじっくり鑑賞してみてはいかがでしょうか?
私が今したように🥹🥹🥹
3. 線画
スケッチとタイミングの段階で目的のモーションを実現できたので、今度はスムーズで正確なラインでアニメーションを調整します。
ステップ 1: アニメーション レイヤを設定する
1\。スケッチ アニメーション レイヤの不透明度を 30 に下げます。
2\。スケッチ レイヤの上に新しいアニメーション レイヤを作成し、名前を Lineart に変更します
3\。線画アニメーションレイヤー上に新規レイヤーフォルダーを作成
4\。レイヤーフォルダーのセルをアニメーションフレームに割り当てる
これで線画用のアニメーション レイヤの設定が完了しました。次のステップに進みましょう。
ステップ 2: 線画を描く
アニメーションレイヤーを設定したら、その上に線画を描いてみましょう。
このプロセス中に役立つヒントをいくつか紹介します。
ツール:
1\。描画スタイルに合ったペンまたはブラシ ツール (描画で常に使用するもの) を選択します。私の場合はGペンを使っています。
3\。ペンまたはブラシのサイズが一貫していることを確認してください。
4\。ペンのスタビライザーを有効にすると、線をストロークするときに劇的に役立ちます
5\。レイヤー フォルダーにラスター レイヤーを追加すると、キャラクターのパーツを個別に描画できるようになります。
6\。描画位置や形状などを変更するには、変形ツールを使用します。
チップ：
1\。短く途切れ途切れのストロークではなく、長く連続したストロークを使用すると、よりスムーズで自信に満ちた外観になります。
2\。休憩をとり、定期的にズームアウトして全体の画像を確認し、すべてが比例していて一貫性があることを確認してください。
3\。我慢してください。線が正しく見えない場合は、ためらわずに元に戻して、もう一度やり直してください。たとえ数回の試行が必要であっても、最高の品質を目指してください。
4\。完了したら、重なり合う線や不完全な部分をクリーンアップして、アニメーションに洗練された外観を与えます。
5\。キャラクターのポーズを自由にカスタマイズしたり、アニメーションにフレームを追加したりできます。
6\。スケッチ レイヤーの表示設定のオンとオフを切り替えて、きれいな線画の進行状況を確認します。
私が今あなたに提供できる線画のヒントは以上です
頑張って、線画を楽しんでください! 😘
これが私のキャラクターの線画バージョンです!
ステップ 3: 休憩して、アニメーションの線画バージョンを鑑賞してください ✨
これで線画が正式に完成しました。ファンタスティック！ ✨
アニメーションエモートの旅をここまで進めることができて、本当によかったです!スケッチ、タイミングの調整、ライン アートの完成度は、アニメーションの中で最も難しい部分となります。これらの手順は完了したので、楽しい部分である色付けに進みましょう。それらの絵に命を吹き込みましょう!🤩
その前に、もう一度ゆっくり時間をかけて、完成したスケッチ アニメーションを鑑賞して見直してみてはいかがでしょうか?
私が今したように（もう一度）🥹🥹🥹
4. 色付けとレンダリング
アニメーションで図面に色を付けてレンダリングする方法は、図面自体の複雑さに依存します。ただし、シンプルなデザインで色を付けるフレームが数個しかないエモートをアニメーション化しているので、この部分が最も楽しく簡単なはずです。
ステップ 1: アニメーション レイヤを設定する
1\。ラインアートレイヤーの下に新しいアニメーションレイヤーを作成し、名前をカラーに変更します
2\。カラーアニメーションレイヤー上に新規レイヤーフォルダーを作成
3\。レイヤーフォルダーのセルをアニメーションフレームに割り当てる
カラーのアニメーション レイヤの設定が完了したので、次のステップに進みましょう。
ステップ 2: ベースカラー
色付けステップのこの部分では、塗りつぶしツールをアニメーションの基本色に使用します。 ベースカラーを行う方法は 2 つあります:
1 番目の方法: 塗りつぶしツールを使用する
1\。カラーレイヤーとフレームを選択していることを確認してください
2\。ツールバーの 塗りつぶしツール を選択します
3\。塗りつぶしツールの設定で「他のレイヤーを参照」を選択します。
これにより、別のアクティブ レイヤの境界に基づいて塗りつぶしツールを使用できるようになります。
4\。好みの色を選択してください
5\。塗りつぶしツールを使用してキャンバスに色を塗ります
6\。終わり！
2 番目の方法: なげなわツールを使用する
1\。カラーレイヤーとフレームを選択していることを確認してください
2\。ツールバーの選択領域を選択します
3\。 なげなわを選択してください
4\。好みの色を選択してください
5\。なげなわツールを使用して、色で塗りつぶしたいキャンバス上の特定の領域を描画し、選択します。
6\。ポップアップが表示されるので、ペイントバケツアイコン（または塗りつぶしアイコン）を選択します
アニメーションにベースカラーを適用する方法は以上です。あとは、作成するフレームごとに同じプロセスを繰り返すだけです。
ベースカラーの私のキャラクターはこれです！
このステップを終える頃には、自分のキャラクターがはっきりと見えてきます。
次へ進みましょう！
ステップ 3: レンダリング
レンダリング手順には、二次色、シェーディング、ハイライトの追加が含まれます。行う必要があることは次のとおりです。
影線
各キーフレームのシャドウ ラインをスケッチすると、レンダリング プロセス中に一貫した正確なシェーディングが保証されます。これは、レンダー レイヤに色を適用するときの境界線になることを意味します。その方法は次のとおりです。
1\。キャラクターのラインアートの上に新しいアニメーション レイヤを作成し、Shadow Line という名前を付けます。
2\。すべてのフレームにキャラクターの影のラインを描きます。 (見やすくするためにコントラストカラーを使用してください)
注: これは、キャラクターのハイライトなど、他のものにも実装できます。
これが私のキャラクターに実装されたときのシャドウラインです✨
私のキャラクターはスライムなので、他のキャラクターデザインとは異なる影のラインを作成する必要があります。 (体の中に影が入ったように)
レンダリング
次の手順に従って、レンダリング プロセスを開始できます。
1\。シャドウラインレイヤーの下に新しいアニメーションレイヤーを作成し、「Render」という名前を付けます。
2\。新しいレイヤーフォルダーを追加し、レンダーレイヤーフレームに割り当てます。
3\。レンダーレイヤーを選択し、塗りつぶしツールで影の部分に色を付けます。
(塗りつぶしツールのオプションが「他のレイヤーを参照」になっていることを確認してください)
4\。フレームごとに実行する
5\。影の線の使用が完了したら、必要に応じて可視性ボタンをオフに切り替えるか、削除することができます。
出来上がり！これがアニメーションの最終結果です。
もう完了したと言えます。ただし、フレームごとのアニメーションの最初のページで前述したように、最後の仕上げをいくつか追加します。 😎
5. 最後の仕上げ
仕上げのタッチはさまざまです。特殊効果、背景、またはアニメーション作品を向上させると思われるその他の要素を追加して、アニメーションを強化できます。
これが、キラキラエフェクトを使ったアニメーションエモートの仕上げです。 ✨
最大レベルを獲得しました!おめでとう！ ✨
アニメーションエモートを作成する際のフレーム単位のアニメーションの技術を習得しました。この成果を達成したことで、新たなクリエイティブな旅に乗り出し、スキルをさらに磨く準備が整いました。アニメーションの世界は、あなたの次の傑作を心待ちにしています! 🚀
アニメーションエモートのエクスポート
アニメーションエモート作成のさまざまな段階を私と一緒に経験して、あなたは単なるスキル以上のものを獲得しました。一緒に作ったアニメーションのエモートを記念に持ち帰りましょう!結局のところ、それはあなたの努力と献身の証です。楽しむ！ 🌟
アニメーションエモートを請求する方法:
1\。好みのアニメーションの開始点と終了点のフレームを調整します
2\。 ファイル > エクスポート > アニメーション > アニメーション GIF… を開きます。
3\。アニメーションエモートを保存する宛先フォルダーを選択します。
ポップアップ ウィンドウが表示され、エクスポート設定を変更できます。
1\。幅と高さ、アニメーションエモートのピクセル単位のサイズ
2\。エクスポート範囲、エクスポートするフレームの長さ
3\。フレーム レート、最大 (24FPS) に設定
4\。ディザリングまたは背景を透明にしてエクスポートするかどうかはあなた次第です
5\。わかりました
やったー！アニメーションエモートを受け取りました! ✨
アニメーションマスタリーピン
私と一緒にアニメーション制作という大変な仕事をした記念品を手に入れたので、ここで称号を手に入れてみてはいかがでしょうか?どれが当たりますか？ 👀
閉鎖
アニメーションエモートを使って自分の経験を共有するという私の旅は終わりを迎えました。このプロセスをご案内できて光栄です。そして、この内容が有益であると感じていただければ幸いです。 🥺 💖
独自のアニメーションの冒険に乗り出すときは、常に好奇心を持ち、頻繁に練習し、そして最も重要なことに、そのプロセスを楽しむことを忘れないでください。皆様の創作活動のご多幸をお祈り申し上げます。
次回まで！ ✨ ✨ ✨
この投稿を「いいね！」したユーザー
コメント