キーフレームを使用して既存のアートワークをアニメーション化する方法を学ぶ

私はこの犬をビデオゲームのマスコットとして描きました。

そして、私たちは彼を十分に気に入ったので、彼をもっと目立つように使いたいと思いました。アニメーションを追加できるようにしたかったのです。

 

それで、私は約45分を費やして、動くことを意図した各部分を切り取りました。体の各部分をそれぞれのレイヤーに保存し、頭のてっぺん、首、膝などの部分で、欠けている隙間を埋めました。それはこのように見えました：

次に、すべてのレイヤーを元の位置にドラッグし、タイムラインを起動し、キーフレームをテストして、次のアニメーションを作成しました。

十分に良いですが、私たちがやっていたことにはそれほど役に立ちません。しかし、私は彼をUI通知の一部にするために、より複雑なアニメーションを作成しました。

 

この次のアニメーションでは、使用するピースは少なくなりますが、動きが誇張され、前景と背景が少し入れ替わります。ですから、教えるのに使うのに最適な作品です。

Clip StudioPaintでキーフレームを使ってアニメーション化

ステップ1：設定する

すでに描いたキャラクターで作業している場合は、新しいアニメーションファイルを作成する必要はありません。既存のキャンバスを使用できます。元のキャンバスをバックアップします...必要に応じて図面に変更を加えるためのものになります。次に、各可動部分を切り取り、層を付ける作業を行います。不足している形状を入力します。レイヤーを単純化し、アニメーションの重要な部分ではないものをすべて削除します。

 

より高速でシンプルなアニメーションのためのフォルダの設定：

 

「Dog」（または「YourCharacter」）という名前のフォルダーを作成します。

あなたのキャラクターのすべての部分をそれに入れてください。

「Dog」フォルダ内に「Head」という名前のフォルダを作成します。

頭につながっているすべてのピースをその中に入れます。 （私の場合、それは「鼻」、「帽子」、「耳」、「頭」でした。

「Dog」フォルダ内に「Body」という名前の別のフォルダを作成します。

残りのすべての体の部分をその中に入れます。

フォルダは次のようになります。

タイムラインウィンドウを有効にします。

[新しいタイムライン]をクリックします。

（Clip Studio Proを使用している場合、最大24フレームしか取得できません。練習するのに非常に多くの数です。私のアニメーションは1秒の長さなので、業界標準の24フレーム/秒を使用しました。チョッパーが必要な場合は2 -秒のアニメーション、毎秒12フレームにします。または、6 fpsの場合、4秒の長さのアニメーションが途切れます。）

 

タイムラインはすべてのフォルダーとレイヤーで自動的に埋められ、アニメーションの24フレームセクションを囲む青いハンドルが必要です。

 

（タイムラインには「アニメーションフォルダー」もあります。このチュートリアルではアニメーションフォルダーを使用しないでください。アニメーションフォルダーは非常に便利ですが、ここでは混乱するだけです。）

 

「Dog」フォルダを選択し、タイムラインウィンドウで「このレイヤーでキーフレームを有効にする」をクリックします。

（私たちが行ったのは、犬のすべての部分をキーフレームセルに変換することです。今すぐ任意の部分の描画を修正する必要がある場合は、この犬のフォルダーに戻って、[キーフレームを有効にする]アイコンをもう一度クリックする必要があります。キーフレームを使用する有効にすると、アートブラシは機能しません。）

 

キーフレームを有効にすると、オブジェクトツールのみを使用して作業することになります。

これで、アニメーション化する準備が整いました。

ステップ2：それを動かす

タイムラインで最初のフレームを選択した状態で、「Head」フォルダーを選択します。

 

タイムラインウィンドウの上部にある[キーフレームの追加]アイコンをクリックします。タイムラインにひし形が表示され、キャンバスの周りに青いハンドルが表示されます。

 

回転の中心をキャンバスの中心から頭と首が出会うポイントまでドラッグします。 （これは小さな+記号です。表示されない場合は、「オブジェクト」ツールを使用していることを確認してください。）

 

カーソルを青い境界線のすぐ外側に移動して回転をテストすると、「回転」アイコンに変わります。クリックしてドラッグ。頭が自然にうなずくなら、それは良いことです。

 

（頭が回転しても、耳と帽子が静止している場合は、「頭」描画レイヤーを選択しています。）

 

ヘッドを下向きに回転させます。

 

フレーム6あたりのタイムラインをクリックします。

 

ヘッドを上向きに回転させます。キーフレームは、変更を加えるたびに自動的に作成されます。

 

タイムラインの[再生]ボタンを押してテストします。

 

フレーム12あたりのタイムラインをクリックします。

 

ヘッドを少し下向きに回転させます。

 

フレーム16あたりのタイムラインをクリックします。頭を少し上に回転させます。

 

フレーム20あたりのタイムラインをクリックします。頭を回転させて自然な位置に戻します。

 

「再生」ボタンを押してテストします。

 

帽子に移動して、これらすべての手順をもう一度実行します。

 

耳と鼻に移動します。回転、テスト、前進。

 

 

犬用の新しいアームが必要になります。これは、看板の上に自然に置くことができるものです。キーフレームを無効にした後、別のキャンバスまたはこのキャンバスに描画します。また、正しい角度で描かれたシャツスリーブも必要です。

これら2つのアイテムを1つのレイヤーに一緒に描くこともできますが、袖から少し動きのヒントを得たいと思いました。

 

ポケットに手を隠していたもう一方の腕を削除し、これに交換しました。以前のシャツスリーブを保持し、シャツスリーブの画像を2枚残しました。これはアニメーションフォルダにとって絶好の機会ですが、代わりに、それらを使用せずに簡単な描画スワップを行う方法を紹介します。

 

犬の肩が上に移動する様子をアニメーション化して、犬が腕を上げ始めていることを示します。

 

肩が最も高いフレームで、その単一のアニメーショントラックの上部にあるハンドルを右から左にドラッグします。 （私にとっては、フレーム＃5です。これにより、レイヤー全体が表示されるのは、フレーム＃5が消えるまでです。）

新しいシャツスリーブのアニメーショントラックで、反対側のハンドルをドラッグして、古いシャツスリーブが消えたときに新しいシャツスリーブが表示されるようにします。

ステップ3：背景から前景への移動

サイズリファレンスを手元に置いておくために、この間ずっと通知サインを表示しておきました。次に、そのレイヤーをレイヤーウィンドウの一番上に移動します。これは犬の一部をカバーする必要があります。

 

「Dog」フォルダにキーフレームを作成して移動し、完全なオブジェクトとして看板の上にポップアップさせます。

 

通知サインレイヤーを複製します。

 

サインレイヤーのコピーを下に移動して、腕と袖のレイヤーの真下に配置します。

 

シャツスリーブの場合と同じようにアニメーショントラックのハンドルを動かして、腕を上に上げ、「犬」フォルダの移動を停止したときにのみサインコピーが表示されるようにします。

 

元のサインに対して同じことを行い、コピーが表示されたときにそれが消えるようにします。

 

サインのコピーを元のサインとまったく同じスペースに移動します。これが私のレイヤーが終わった方法です：

犬の頭の後ろに表示される最後のフレームについては、これまでと同じようにキーフレームを作成してから、次のようにします。

 

左端のハンドルをつかみ、それを使用して、レイヤーが見えなくなるまで拡大縮小します。 （画像が平坦化されずに縮小する場合は、オブジェクトツールのプロパティの下にある[変換]の横の[+]をクリックし、[アスペクト比を維持する]のチェックを外します。

 

タイムラインを前に進め、通常の外観に縮小します。

 

キーフレームをさらにいくつか追加して、動きを活発にし、バウンスさせます。

ボーナス特撮！

レイヤープロパティとクリッピングレイヤーで実現できるいくつかの効果が本当に気に入っています。私たちの作品のほとんどはすでにフォルダーに入っているので、簡単に適用できます。

 

きれいなアールヌーボー風のボーダーを作るために、フォルダーを追加し、サインレイヤーと「犬」フォルダーをその中にドロップしました。次に、レイヤープロパティでボーダー効果を有効にしました。

キーフレームを使用した歩行アニメーションに関するボーナスのヒント！

歩行サイクルはかなり難しい場合があります。ここにいくつかのヒントがあります：

 

最初のキーフレームをサイクルの最後の位置にコピーします。すべてのレイヤーでこれを行います。

 

最初に足をアニメートします。

 

肩は腰の反対側に回転します。つまり、右腕は左脚とともに前方に移動し、左腕は右脚とともに前方に移動します。

 

前景レイヤーと背景レイヤーを色分けして、すばやく見つけられるようにします。

そして、これが実際のワークスペース全体です。フルスクリーンにして、レイヤーとキーフレームの配置をよく確認します。

あなたのことはわかりませんが、私にとって、キャラクターが生き返るのを見るのはスリル満点です。このチュートリアルが、私が学習していたときに多くの問題を引き起こしたのと同じハードルを乗り越えるのに役立つことを願っています。質問がある場合は、コメントで質問してください...これを作成している間、私はうまくいかず混乱を引き起こす可能性のあるさまざまなことをすべて考え続けましたが、それらに対処することを怠りたくありませんでした。