こんにちは、まなです！

 

今日はイラストのアニメーションについて話しましょう！これは、すでに完成したイラストをアニメーション化する場所であるため、それらをパーツに分割します – それらを1つのレイヤーから別のレイヤーに分離し、Clip Studio Paintでそれらをアニメーション化することについて話します.私はPROバージョンを使用しますので、大多数の人がフォローできます

 

 

次のようなものを作成します。

この小さなシリーズでは、ベーシック アニメーションとビギナー アニメーションについて話します。

ここでの主な目的は、完全に完成したイラストをアニメーション化する方法についてのアイデアを提供することです。このトピックを簡単に説明し、他のソフトウェアでもこれを試すことができるようにします。

 

このパートでは、基本の基本について説明します。

演習に行きたい場合は、記事の一番下に行ってください。演習があります!

 

このチュートリアルのビデオ バージョンは次のとおりです。

 

これらの生ファイルは一番下にあります。

ダウンロードしてご自由にお試しください。

準備 – 図面を切り取ります。

まず最初に;アニメーション化するイラストまたは描画を取得します。

 

これは、JPG または PNG 形式のいずれかです。

可能であれば、PNG 形式は JPG よりもはるかに優れた品質であるため、PNG を使用するようにしてください。

 

さて、これで描画をアニメーション化することができました。

この図面をClip Studioにインポートすると、当然、これはすべて1つのレイヤーになります。

 

どんなアニメが欲しいですか？

 

★ ここでは、ボールを画面の左側から右側に少しバウンドさせます。

 

完全に完成したイラスト/ドローイングをアニメーション化するには、自分でアニメーション化したい部分の要素を分離する必要があります。

 

これは、次の部分です。

1. [選択ツール] を入手 > [選択ペン] を使用

 

2. 次に、分離したい領域を選択するだけです。

3. 選択したら > CTRL X でカット > CTRL V で新しいラスター レイヤーに貼り付けます。

4. MAIN レイヤーに戻り、その要素の下にあるはずのパーツ / 削除した BALL を再描画します。

 

[選択] ツール > [投げ縄] を使用して、パターンをコピーして貼り付けました。

5. これはオプションです。レイヤーまたはアニメーション化するレイヤーを画像素材に変換できます。

 

レイヤーを右クリック→レイヤーの変換

準備 – 切り抜きを保存する

切り抜き図面をファイルに保存する場合。通常サイズの図面には .PSD または .CLIP を使用してください。

ファイルが30Kピクセルを超える場合は、.PSBまたはPhotoshopBigファイルを使用することをお勧めします。

 

PSDとPSBの違いは、

• PSD はよく知られており、ほとんどのソフトウェアで PSD を読み取ることができます。

• 一方、PSB はあまり知られていませんが、PSD では処理できない大きなドキュメント ファイルを保持できます。

 

GIF、Instagramストーリー、小さな広告などの小さなアニメーションを実行している場合。 PSDおよび/またはCLIPファイルを使用しても問題ありません。

 

Webtoon やマンガの予告編などの予告編のために何かをしている場合。 PSDを使用できますが、大きすぎる場合はPSBに移動します。

 

⭐ ヒント: PSB の使用に関しては、PSB との違いに気付くことはありません。システムにかなりの負担がかかりますが、それでも、図面の元の解像度を維持したい場合は非常に理想的です。

 

カットアウト ファイルを保存するとき。それが PSD、Clip、PSB のいずれであっても、適切に名前を変更してください。

 

アニメーション – タイムライン

アニメーション化したいときは、このセットアップだけではアニメーション化できません。タイムラインが必要です。

 

そこで、タイムラインを取得する必要があります。

見えない場合は、[Windows] > [Timeline] に移動してください。

 

あなたはまだアニメーションを作成することはできません!

新しいタイムラインを作成する必要があります。これはあなたのシーケンスやコンポジションのようなものです

 

[タイムライン] タブの アイコンをクリックするか、[アニメーション] > [タイムライン] > [新しいタイムライン] に移動します。

 

それでは、これらについて話しましょう。

タイムライン名

• これは、シーケンスまたはコンポジションの名前です。

• 作品に適切な名前を付けることを習慣にしてください。

 

フレームレート

• これは、1 秒あたりに必要なフレームまたは画像の量です。

• GIF または小さなアニメーションを作成している場合。 15 FPS 以下が理想的です。

• 予告編などのアニメーションを作成している場合。 24 FPS 以上が理想的です。

 

再生時間

•アニメーションの長さをどのくらいにしますか？

• 例えば;フレーム レートが 10 FPS で、2 秒が必要なので、10 * 2 = 20 再生時間になります。

• 正確な金額を作る必要はありません。例10 FPS と 15 再生時間があります。 1.5 秒のアニメーションになります。

 

シーンとショット

• これらはアニメーションで使用するためのもので、ここでは実際には必要ありません。

 

画像補間

• これは、アニメーションの結果として望んでいるものです。滑らかにするか、ハードにするか、クリアにするか、またはほぼオリジナルのようにしますか。

 

 

フレーム開始

• これは、どこから開始するかについての好みによって異なります。

• 私の好みは 0 から始めることです。

 

アニメーション – キーフレーム

これらの演習ではキーフレーム アニメーションを使用します。

私はFrame by Frameが苦手で、それをどう説明したらいいのかわからないからです。

 

基本的に、キーフレーム アニメーションでは、キーフレームを使用して要素またはグラフィック自体をアニメーション化し、スムーズな遷移を作成します。フレームごとに描画する必要はありません。移動したい要素またはオブジェクトを移動するだけで、アニメーションになります。

 

キーフレームはどのように見えますか?

 

それらはダイヤモンドのように見えます。

 

Maya、Premiere Pro、After Effects などの他のプログラムでも同様です。キーフレームはダイヤモンドです。

 

キーフレームの使い方

 

1. レイヤー、この場合は要素を選択する必要があります。

 

2. タイムラインにいることを確認してください。 「このレイヤーでキーフレームを有効にする」をクリックします

 

3. 選択したレイヤーには、レイヤー名に「Transform」と表示されます。これは、レイヤーがキーフレームの準備ができたことを意味し、これをアニメーション化できます。

4.[操作ツール]→[オブジェクト]サブツール→[ツールプロパティ]でアニメートできます。

 

見てここに、レイヤーとアニメーション編集の名前が表示されます。

このトランスフォーメーションとレイヤーの不透明度にキーフレームを追加できます。

 

アニメーション - キーフレームの追加 |ツールのプロパティ

ここでのアニメーションは、ボールを画面の左側から右側に移動することです。

 

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

はじめましょう！

 

1. 最初のフレームに移動します。フレーム 1.

レイヤーが選択されていることを確認してください。 [操作] ツール > [オブジェクト] ツールの下にいることを確認します。 [Tool Property] > [POSITION] を見てください。

 

X スライダーを左にドラッグするか、値を下げます > 画面の左側にドラッグします。

 

 

2. フレーム 1 のまま。スライダーを左にドラッグするか、値を下げます。

次に、ボールを上に移動します。

3. [スケール比]、[回転角]、[回転中心]を確認します。クリックしなくても、キーフレームを取得しました。

 

この方法でキーフレームを追加すると、必要のない領域にキーが追加されます。

それらのキーフレームを削除してください。

 

⭐ヒント！キーフレームが不要な場合は削除してください。

値を保持するためのものでない限り、保持できます。

 

⭐ 不要なキーフレームは、アニメーション化するときに問題を引き起こす可能性があります。

これらのキーフレームを削除するには;横にあるボックスをクリックするだけです。

アニメーション - キーフレームの追加 |引きずる

これは、キーフレームを追加する別の方法です。

 

私たちはまだ [位置] にいます。ここで、ボールを画面の右側に移動します。

 

1. 再生ヘッドをタイムラインの最後までドラッグします。フレーム20。

次に、要素の境界ボックスにマウスを置きます。玉。

マウスが小さなマウスに変わります。

2. ボールをクリックして、画面の反対側にドラッグします。

自動的にキーフレームを取得します。

3. Ver.も同様。 1;不要なキーフレームを削除してください。

それが【倍率】【回転角】【回転中心】です。

⭐ヒント!!終了キーフレームをタイムラインの最後に移動します。

 

これにより、キーフレームを追加するためのスペースが増え、フリーズ フレームが発生しなくなります。

 

 

4. バウンスにインビトウィーンを追加できます。

タイムラインの真ん中で;フレーム 11.

ボールを下にドラッグします。

で、遊んでみるとこんな感じ。

遅く見えますよね？

FPSをアップデートしましょう。

 

[アニメーション] > [タイムライン] > [フレームレートの変更] に移動します

10 FPS から 15 FPS に変更しましょう。

これで、1 秒あたり 15 フレームがあり、1.3 秒のアニメーションになります。

 

そして、それを再生すると、今でははるかに速く見えます。

アニメーション - キーフレームの追加 |レイヤー選択

キーフレームを追加する次の方法は、タイムライン レイヤーを拡張することです。

これは、キーフレームを追加する私のお気に入りの方法の1つです。

 

1. レイヤーを選択した状態で; + アイコンをクリックします。

次に、展開されたら、> アイコンをクリックして変換を展開します。

これを使用する方法は、最初のものと非常に似ています。ツール プロパティ。

 

ツール プロパティの値は引き続き入力/変更しますが、[変換を最初にクリックする] の違いがあります。

 

私が意味したのはこれです：

-------------------------------------------------- ----------------------- 

2. タイムラインの開始時。フレーム 1. 最初にレイヤーで[回転]を選択してください..

次に、[ツールプロパティ] > [回転角度] にキーフレームを追加します。

 

3. 次に、タイムラインの最後に移動します。フレーム20。

[回転角度] のスライダーを最大までドラッグします。

 

⭐ヒント！この方法を使用しても、他の変換にキーフレームは配置されません。

面倒そうです、はい。それはそうですが、整理のためには、これはキーフレームを追加する非常にクリーンな方法です。

⭐終了キーフレームをタイムラインの最後にドラッグすることを忘れないでください。

 

そして、私たちがそれを再生するとき。

アニメーション - キーフレームの追加 |グラフエディタ

これは私のお気に入りの方法です。

 

しかし、最初に、グラフエディタはどこにありますか。

[アニメーション] > [アニメーション カーブ] > [グラフ エディタ] またはタイムライン エリアの アイコンをクリックしてアクセスできます。

グラフ エディタは基本的に、このグラフ上で組み合わされたタイムライン、変換オプション、および補間です。

 

グラフ エディタは非常に威圧的です。これは「すべて」のツールなので、ここでは重要な部分についてのみ説明します。

-------------------------------------------------- ---------- 

よし、これを[SCALE]に使ってみよう

 

1. [SCALE] を隔離しましょう。編集する変換をクリックするだけで、他の変換から分離されます。

2. タイムラインの開始時。フレーム 1 - キーフレームを追加します。

 

次に、その Keyrame を上にドラッグします。そのサイズを大きくしています。

※金額を見てください。 100から - 私たちは400に行きました

3. 次に、タイムラインの最後に移動します。フレーム 20 - キーフレームを追加します。

 

BALLを小さくしよう。キーフレームをつかんで下にドラッグします。

そしてそれを弾くとき。

見た目が悪いですよね？

BALL は床に着くまでかなり大きいです。

 

では、タイムラインの途中にインビトウィーンを追加して、[スケール]を変更してみましょう。

 

4. フレーム 11 にキーフレームを追加します。それを下にドラッグして値を下げ、BALL を小さくします

FRAME 11の[位置]も修正しましょう。ボールが低すぎてフレームの外にあります。

このシーンはバウンドすることになっていることを覚えておいてください!

 

⭐覚えておいてください！アウトライナで変換 (例: 位置) をクリックして、他の変換から分離します。

 

[位置] に移動して中央のキーフレームを選択し、Y 軸 (緑) を下にドラッグして値を下げ、ボールを上げます。

この後、最初に[位置]キーフレームを修正しました。

 

再生すると、次のようになります。

いいね！

でも何かが足りない感じ。

 

ボールが地面に当たったとき、影はありません。

じゃ、作ってみよう！

アニメーション - 影

影を作る前に、影が必要なフレームを探します。

ここに;影は FRAME 11 にある必要があります。

影の影を作るために、

 

BALL レイヤーの下に新しいレイヤーを作成します。またはキーボードの CTRL SHIFT N。

 

グラデーション ツールをつかむ > 形状を楕円に変更する > 前景から透明にしていることを確認してください

 

影の色を取得します – 明るい灰色または 40% の灰色にします

そして、クリックしてドラッグし、位置を調整してから、もう一度クリックして離します。

Blending Mode を MULTIPLY または好きな Darken Blending Mode に変更します。

これで、この影をアニメーション化する準備ができました。何よりも先に、これも変換しましょう。

 

もう一度、レイヤーを右クリック > レイヤーの変換

適当に改名してください。画像素材に変更

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

 

展示会展 今、私たちはアニメーション化します。

 

シャドウ レイヤーを選択した状態で、[このレイヤーでキーフレームを有効にする] をクリックします。

 

[操作] ツール > [オブジェクト] サブツールに移動します。

 

さて、ここで最初に SCALE で行うこと – このフレームのキーを設定します。フレーム11

 

数フレーム戻しましょう。フレーム 9 で、ボールの位置を確認します。

 

まだ床の近くにあるので、この影を拡大できます。

バウンディング ボックスのハンドルをつかんで影を拡大しています。

 

フレーム 9; [スケール] シャドウを移動すると、自動的にキーフレームが取得されますよね？

 

でも、[位置] も見ましたか？

キーフレームも取得しました。

 

これは、シャドウ レイヤー自体を移動したためです。

 

フレーム 11 に戻ると、次のようになります。

キー入力した [スケール] またはサイズは保持されましたが、以前の位置は保持されませんでした。

 

どうして？ FRAME 11の[位置]が空だから。

ということで、FRAME 9の[Position]キーを読み込みます。

 

FRAME11 の [Position] を固定するため、シャドウを BALL の下に移動します。

はい！これで、FRAME 11 の [位置] にキーが設定されました。

では、反対側に行きましょう。

 

フレーム 13;ボールが跳ね返るため、影を移動する必要があります。

そしてフレーム 14 で。ボールは今よりはるかに高くなります。

では、それを少し動かしてみましょう。

よし！

 

次に、透明度または[レイヤー不透明度]に移動します

ここでの最初のキーフレームは、ボールが床に直接ある位置になります。それがFRAME 11です。

 

[レイヤー不透明度]のFRAME11に100%でキーフレームを追加

次に、1 フレーム後ろに移動します。フレーム10

この値が保持されるように、[レイヤーの不透明度] を 100% で再度キー設定します。

次に、別のフレームを戻します。フレーム 9 では、ボールがちょうど地面に触れようとしているので、影が薄くなるはずです。

 

FRAME 9では、[レイヤー不透明度]を60%程度にキープします。

次に、別のフレームを戻します。 FRAME 8. ボールが地面から離れているので、影を隠しましょう。

 

FRAME 8 では、[レイヤーの不透明度] を 0% にキー設定して、シャドウ レイヤーを完全に非表示にします。

はい！反対側で作業すると、ボールが跳ね返ります。

 

ただし、最初に、FRAME 12 に [レイヤー不透明度] キーフレームを 100% で追加する必要があります。

⭐ヒント！ FRAME 10 と 12 はどちらも 100% なので、実際には FRAME 11 の [Layer Opacity] キーフレームを削除できます。これらの 2 つのキーは、その値を保持するのに十分です。

 

次に、フレーム 13 に移動します。ボールが床から跳ね返ってきているので、[レイヤーの不透明度]を50%に変更します

そして最後に、ボールは地面から高くなります。

 

フレーム14に[レイヤー不透明度]キーフレームを追加。値を 0% に変更します

そして、それを再生すると、ボールがバウンドするようになりました!

 

また、地面には影があり、実際に環境の一部であるかのように見えます。

アニメーションのエクスポート

輸出する; [ファイル] > [アニメーションのエクスポート] に移動します。

アニメーションはさまざまな方法でエクスポートできます。

 

がある：

•GIF

• ムービー

• 画像シーケンス

•アニメーションステッカー

 

これらすべてについて話しましょう。話が長くなりますので、少々お待ちください。

;u; )/

このエクスポートでは、どのエクスポート オプションが透明度をサポートしているかを確認できるように、バックグラウンドの一部を切り取ります。

エクスポート | GIF

GIF画像としてエクスポートするには

[ファイル] > [アニメーションのエクスポート] > [アニメーション GIF] に移動します。

 

ファイルの名前を変更するように自動的に求められるので、適切に名前を変更してください。

ファイルの名前を変更したら、[保存] をクリックするか、キーボードで Enter キーを押します。

 

次に、これらの設定を取得します。

• 最大の幅と高さは、キャンバスのサイズによって異なります。

 

• エクスポート範囲: どのフレームからどのフレームまでエクスポートするか。

 

• フレーム レート: アニメーションのフレーム レート。元の値よりも低く設定すると、アニメーションの表示が遅くなる可能性があります。高くすると、エクスポートの速度が速くなる場合があります。

 

• ループ カウント: アニメーションを 1 回だけ再生するか、永久に再生するか (無制限)

 

• エクスポート オプション: ディザリングは、混色の量です。

 

ディザリングを無効にすると、色のパッチが表示されます – シェードまたはブレンドが適切にブレンドされません

ディザリングを有効にすると、スムーズなシェーディングが得られます。

 

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

 

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

GIF エクスポートには透明性がありません

エクスポート |映画 | MP4

ムービーとしてエクスポートするには、[ファイル] > [アニメーションのエクスポート] > [ムービー] に移動します。

 

ファイルの名前を変更するように自動的に求められます。

 

⭐2 つの方法でムービーをエクスポートできます。 1 つは MP4 で、もう 1 つは AVI です。まずMP4について話しましょう

[ファイルの種類] にチェックを入れてください。この例では、MP4 を選択します。

 

次に、エクスポートする前にこれらの設定を確認します。

• スケーリング設定: 動画の最大幅と高さ [MP4] は 1920 x 1080

 

• オプション |フレームレート;アニメーションのフレームレートを入力してください。

 

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

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

映画 [MP4] のエクスポートには透明性がありません

エクスポート |映画 | AVI

AVI としてエクスポートするには; [ファイル] > [アニメーションのエクスポート] > [ムービー] に移動します。

 

ファイルの名前を変更するように求められますが、[ファイルの種類] もチェックします。

それをAVIに変更

次に、次の設定を取得します。

-------------------------------------------------- - 

次に、AVI 圧縮のこれらの追加設定を取得します。

• コンプレッサー：たくさんあります。ただし、フル フレーム (非圧縮) を選択してください。

これにより、アニメーションが最もオリジナルの状態と解像度でエクスポートされます。

 

完了したら、[OK] をクリックするだけです。

AVI MOVIE エクスポートには透過性があります

 

⭐ご注意ください！

透過のある AVI エクスポートは非常に負荷がかかります。

この 1.3 秒のアニメーションは、すでに 155 MB です。

 

それは正常です。透明度があり、圧縮されていないビデオ ファイルは非常に重くなります。

 

⭐⭐ AVI は、CLIP STUDIO PAINT の最も鮮明なビデオ エクスポートです。

 

 

⭐⭐⭐ ヒント！マンガやウェブトゥーンの予告編を作成している場合。 AVI としてエクスポートすることをお勧めします。

次に、Premiere Pro などのビデオ編集ソフトウェアでそれを合成します > MP4 (H.264) としてエクスポート 高ビットレートで十分

*Premiere Pro では、最大レンダリング品質を有効にして、元の品質を維持しようとすることもできます。

 

エクスポート |画像シーケンス

次は画像シーケンスです。

画像シーケンスはビデオタイプのエクスポートではありません。これにより、アニメーションがフレームにエクスポートされます。

そして、フレームごとに画像を取得します。

 

画像シーケンスとしてエクスポートするには、[ファイル] > [アニメーションのエクスポート] > [画像シーケンス] に移動します。

 

次に、これらの設定が表示されます。

-------------------------------------------------- --------------- 

完了すると、画像がフォルダーの宛先に送信されます。

エクスポートするファイルの種類とサイズによっては、時間がかかります。

 

これらの画像は、GIF およびビデオ編集が可能なソフトウェアで合成できます。

オンライン ソースもあります。私は時々これを使用します：

画像シーケンスは、MP4 ファイル (H.264 | 高ビットレート) として次のようになります。

画像シーケンスのエクスポートには透明性があります。

⭐ PNG としてエクスポートする限り

エクスポート |アニメーションステッカー | APNG

最後はアニメーションスタンプです。

これは、APNG またはアニメーション PNG とも呼ばれます。

 

エクスポートするには、[ファイル] > [アニメーションのエクスポート] > [アニメーションスタンプ] に移動します。

 

その後、すぐにファイルの名前を変更するように求められます。

ファイルの名前を正しく変更してください。

完了したら、[保存] をクリックするか、キーボードの Enter キーを押します。

 

次に、チェックするこれらの設定を取得します。

-------------------------------------------------- ---------------- 

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

 

エクスポートは次のようになります。

アニメーションステッカーに透明感があります!

⭐ 短所。すべてのソフトウェアと Web ブラウザが APNG に精通しているわけではありません。

自己責任でご利用ください。

完了|ダウンロードするファイル |次の演習 →

以上です;これが最終的なアニメーションです。

 

これから：

これに (GIF エクスポート):

これらのファイルは次のとおりです。

だからあなたはそれを自分で試すことができます！

⭐次の練習、POCHIに取り掛かりましょう

基本的なまばたきと光のアニメーションについて話します。

キーフレーム補間とその使用方法とともに。

 

 

次のトピックでお会いしましょう！

安全を確保し、マスクを着用し、手を洗ってください。

乾杯！