アニメーションイラスト - 初級編

11,574

マナ|Mana

マナ|Mana

こんにちは、まなです!

 

これは、この小さなシリーズの最初の演習です。これは、イラストのアニメーション化の BEGINNER BASIC です。

最初に簡単なことについて話します。

• 点滅

• 光

• キーフレーム補間

 

マスコットPOCHIを担当させていただきます。デザインはシンプルなので、編集もとても簡単です。

次のようなことを行います:

このプロジェクトは CLIP STUDIO PAINT PRO で作成されています。大多数の人がフォローできるように、このバージョンを使用します。これには EX バージョンを使用することもできます。

 

これのビデオ版はここにあります:

このプロジェクトの生ファイルと最終ファイルは、以下のリンクにあります。

ダウンロードできますので、フォローしてください。

 

図面をカットする

まずはイラストを開いてみましょう。

キーボードの CTRL O を押すか、キャンバス タブの アイコンをクリックします。

 

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

 

そして、これが私たちのイメージです。

はい!ご覧のとおり、この画像は JPG であり、1 層の画像です。

また、これは POCHI であり、私が使用している背景は Clip Studio アセットからのものです。必要に応じて、ここでそれを取得できます。

 

後ろのライト ブラシは次のとおりです。

まず最初に;私たちが念頭に置いているアニメーションは何ですか?

• 点滅

• 照明

 

ライティングについては、再描画や切り取りを行う必要がないので、まばたきに移ります。

 

まばたきでは、目をボディから分離する必要があります。

 

それを分離するには、[選択] ツールを使用して、必要な選択ツールを使用します。

普段は【投げ縄】と【選択ペン】を使っています

 

そして、目の領域全体を選択するだけです

完了したら; CTRL X で切り取り、次に CTRL V で新しいラスター レイヤーに貼り付けます。

そのレイヤーの名前を変更することを忘れないでください。

名前を Open_Eyes に変更しました

ここで、メイン イラストレーション レイヤーに戻る必要があります。以前は目があったこの空白の領域を再描画する必要があります。

 

[選択ペン] を手に入れて、目の位置の真ん中を選択するだけです。

CTRL C でコピーし、CTRL V で新しいラスター レイヤーに貼り付けます。

その新しく貼り付けた領域を空白の穴に移動します。

 

他のエリアも同様に行います。

 

現在選択されている部分を複製するだけです。 [レイヤー] > [レイヤーを複製]に移動

そして、その部分を別の穴に移動します。

さて、両方の穴(?)が覆われているときは、もちろん、目以外のすべてのメインイラストを組み合わせるのを忘れないでください!

 

これで、体から分離された目ができました。次は目の表現に取り組みましょう。

アイエクスプレッション

次はアイ・エクスプレッションをやってみましょう。

 

次に行うことは、別の目の表現を作成することです。なぜなら、メインのイラストから抽出したこの目は、実際には私たちの開いた目だからです。

 

そして今、まばたきまたはClose_Eyeを作成する必要があります。

 

新しいラスター レイヤーを作成するか、キーボードで CTRL Shift N を作成します。

目を閉じるには、[選択ツール] > [長方形] > を使用して、薄い長方形を作成し、その上に色を塗ります。

 

⭐ヒント! Open_Eye レイヤーの不透明度を下げて、Close_Eye の位置を参照できるようにします。

 

デザインはとても簡単なので、作るだけです。

 

次に、[レイヤー]> [レイヤーの複製]に移動します

そして、この複製された目のコピーをもう一方の目に調整するだけです。

この 2 つの Close Eyes を結合するか、キーボードで CTRL E を選択します。

このレイヤーの名前が Close_Eye に変更されていることを確認してください。

 

以上です。これで目の式ができました。

 

⭐ いくつかの目の表情は、最大 6 つ以上の表情の範囲にできます。通常は、アニメーションの種類によって異なりますが、非常に基本的なアニメーションを行っているためです。

素早く開閉する目は問題ありません。

 

よし!

さっそくアニメ化しましょう。

 

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

それでは、タイムラインを取得しましょう。

[ウィンドウ] > [タイムライン] に移動します。

または、そのためのワークスペースがある場合。それをロードしてください。

 

次に、[タイムライン] タブでこのアイコンをクリックします。新しいタイムラインまたはシーケンスを作成しましょう。

次に、タイムライン設定を取得します。

• このタイムラインの名前を POCHI に変更します

• フレームレート: 12 FPS

• 再生時間: 24

• 画像補間: スムーズに進みます

• フレーム開始: 1 から始めましょう。従いやすいので。

 

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

アニメ:光Ver1

まず、ライト アニメーションを行います。

ご覧のとおり、私はこれにバージョン 1 というラベルを付けました。 2つのバージョンを作ります。

 

最初は光のちらつきです

2つ目はライトのON/OFF

 

この最初のものはFlickeringになります。

 

では、新しいラスター レイヤーを作成するか、キーボードで CTRL SHIFT N を作成しましょう。

この Light_1 の名前を変更しましょう

[グラデーション] ツールを取得しましょう > [前景から透明] になっていることを確認します。

形をCircleかEllipseに変えて、[Ellipse]にします。

この街灯の色を選択するか、キーボードのAltキーを押したままにします。

マウスがスポイト > に変わり、色を取得してみましょう。

OK。では、LIGHT を作成します。

 

この光源の真ん中をクリック>マウスをドラッグして円を作ってみてください

角度を修正 > もう一度クリックして離します。

 

OK?

 

描画とより一致するように描画モードを変更できます。オーバーレイします。

 

ここでタイムラインエリアに行きましょう。

 

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

レイヤーの名前にこの「変換」が表示されます。

 

これは、このレイヤーがキーフレームの準備ができたことを意味します。

 

開始するには、[操作]ツール> [オブジェクト]サブツールの下にいることを確認してください

[ツールプロパティ] > [変形] オプションの下

ここから[レイヤー不透明度]へ

 

始める前に、キーフレーム補間を確認してください。

[SMOOTH] 補間を使用して Light_1 レイヤーで作業します。

次に、再生ヘッドをタイムラインの最初にドラッグします。

フレーム 1 – [レイヤー不透明度] キーフレームを追加します。

 

タイムラインにキーフレームを表示する場合は、Light_1 レイヤーの横にある + アイコンをクリックします。

 

次に、FRAME 6th に移動し、[Layer Opacity] に戻ります。このスライダーを少なくとも 50% に移動します -- キーフレームを取得します。

フレーム 12 で、この値を 100 に戻しましょう。スライダーを動かすだけで自動的にキーフレームを取得します。

OK。

それを遊んでみてください。

 

光は不透明度を変化させていますよね?

続けましょう。

 

⭐一部のキーフレームをコピーして貼り付ける場合。

キーフレームを選択する必要があります > 右クリック コピー > 希望の時間に移動 > 右クリック 貼り付け

 

または

 

⭐ コピーするキーフレームを選択します。

たとえば、50% と 100% > キーボードの ALT キーを押したまま

キーフレームを目的の場所にドラッグします。

 

そして、ただ手放してください。

 

キーフレームをコピーして貼り付けました。

OK。

 

これをもう一度プレイしてみましょう。

いいね。

よくやった。

 

再び、

特にループを作成する場合は、終了キーフレームをタイムラインの最後に移動します。

 

なぜそうする必要があるのですか?

 

⭐ 開始キーは 1/2 フレームで、終了キーは同じ値ですが、1 フレームで再生されているためです。したがって、同じ値が 1 フレーム半で再生されます。

ループを狙っている場合は特にそうです。

 

⭐ したがって、終了キーをタイムラインの最後に移動すると、開始時と同じように半分のフレームになります。

2 つのキーフレーム (First と Last) を同じ値で 1 つのフレームで再生するようにします。

 

OK?

 

次に、他のキーフレームを移動して、タイムライン上のマークと位置合わせします。これは面倒で、時間の同期を促進するためです。

 

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

この変更はわずかですが、フリーズ フレームを使用せずにループを作成する場合に役立ちます。

アニメーション: Light_Ver2

それでは、Light_2を作成しましょう

これらのライトを後ろでアニメートします。

これはライトのオンとオフです

ここでも、新しいラスター レイヤーを作成するか、CTRL Shift N を作成します。これを Light_2 に名前変更します

[グラデーション] ツール > [前景から透明へ] > [シェイプ] を取得します。 [楕円]

*この時点では、街路灯と同じ前景色がまだ残っているはずです。

***これを英語でどう説明したらよいかわかりません。

 

後ろにこれらの小さなライトを交互に作ります。

代わりの!

 

オプション: 描画モードを [覆い焼きカラー] または希望の [明るい色] または [コントラストの描画モード] に変更します。

対面荘厳 色相もお好みで変更できます。

色相と彩度に移動するか、キーボードで CTRL U > 色相スライダーを変更するだけです。

ここで、もう一度新しいラスター レイヤーを作成します。キーボードの CTRL Shift N;

その名前を Light_2 1 に変更します – このレイヤーは、前にスキップした代替ライト用になります。

Gradient Tool > Foreground to Transparency > Shape Ellipse を取得し、残りの Lights に Gradient を追加するだけです。

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

アニメーション化します。

 

Light_2とLight_2の両方で[このレイヤーでキーフレームを有効にする]をクリックします1

 

[操作]ツール→[オブジェクト]サブツール→[ツールプロパティ]→[レイヤー不透明度]で

ちょっと待って。

 

キーフレーム補間を変更します。ここです。この矢。これをクリックしてください。これを HOLD に変更します。

⭐ ホールド補間 別の値に変更するまでキーフレームを保持します。

 

そして、このライトに HOLD を使用します。

 

今すぐ始めましょう。タイムラインの最初にいることを確認してください。フレーム 1.

Light_2 で – 100% でキーフレームを追加します。

Light_2 1 で – 0% でキーフレームを追加します。

では移動します。 FRAME 7に行きましょう。

Light_2 で – レイヤーの不透明度の値を 0% に変更します。

Light_2 1 で – レイヤーの不透明度の値を 100% に変更します。

Playhead をスクロールしてみましょう。

見る?

⭐ ホールド補間について少しお話しましょう。

Light_2 1 レイヤーを非表示にしましょう

 

点灯_2

1 番目のフレームの値は 100% であり、0% である 7 番目の異なる値の次のキーフレームまでその値を保持します。

 

OK?単純ですよね?

 

Light_2 1 を非表示にしましょう。

そして、これらの値をコピーして貼り付けるだけです

 

⭐ キーフレームを選択し、キーボードの ALT を押したままにします

キーフレームを目的の場所にドラッグします

Light_2 レイヤーでも同じことを行ってください。

それでおしまい。

 

それを再生:

アニメーション : 点滅

今すぐBlinkingに行きましょう

 

前に行った目の表現に取り組みます。

Open_Eye と Close_Eye の両方で [このレイヤーでキーフレームを有効にする] をクリックします。

[操作]ツール→[オブジェクト]サブツール→[ツールプロパティ]→[レイヤー不透明度]にあることを確認

因みにHOLD補間にとどめておきます。

OK?!

キーフレームの追加を開始します。

 

⭐ 必ずしもタイムラインの最初から始める必要はありません。

FRAME 5 などのランダムな場所から開始できます。

 

FRAME 5 で Open_Eye と Close_Eye のキーフレームを追加しましょう

ポチが目を開けた状態でアニメーションが始まります。

 

Open_Eye は 100% になります

Close_Eye は 0% になります

次に、FRAME 9 に移動します。ポチが瞬きするから。

 

したがって、Open_Eye は 0% になります。

そして Close_Eye は 100% になります

 

それをスクロールしましょう:

見えますか?単純ですよね?

 

続けよう、だってポチは目を開けなきゃいけないから

フレーム 11 としましょう。

 

Open_Eyes が 100% になります

そして Close_eye は 0% になりました

 

それを再生しましょう:

ポチはまたまばたきしたいですか?

 

Close_Eye にこれら 2 つのキーフレームをコピーして貼り付けます。 100% と 0%

これら 2 つも Open_Eye からコピーして貼り付けます。 0% と 100%

 

⭐再び;キーフレームを選択し、Alt キーを押しながらドラッグしてコピーして貼り付けます。

 

※Open_Eyeレイヤーも同様にしてください。

 

遊ぼう。

はい。それでおしまい。かなり単純ですよね?

 

⭐ おさらいしましょう。

 

フレーム 21 – ポチが瞬きをしたい場合

 

Open_Eyes は 0% または非表示にする必要があります。

Close_Eyes が表示または 100% になるように

 

そしてポチが目を開けたい時

 

フレーム 23 – クローズ アイは今すぐ非表示にする必要があります

Open_Eyes を表示できるようにします。

 

わかりましたか?

 

さっそく遊んでみよう~

そして今ポチが瞬く

(彼女はたくさんまばたきをしている...)

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

アニメーションのエクスポート用。私の最も好ましい方法は、画像シーケンスです。

私は自分でGIFとムービーを作成することを好みます。そうすれば、すべてを制御できます。

 

輸出する;

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

画像シーケンスは私のアニメーションをフレームごとにエクスポートします。したがって、ビデオタイプではなく画像になります。

 

これらの設定は難しそうに見えますが、エクスポート先を選択していることを確認してください。

画像の種類を確認してください。 JPEGは大丈夫です。

サイズを確認してください。

 

フレームとフレームレートも確認してください。

 

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

 

画像はフォルダの宛先に配置され、GIFまたはビデオ編集を実行できる任意のソフトウェアでこれらをスローできます。

普段はフォトショップでGIFを作っています。

Premiere Pro のムービーまたはビデオ。

 

オンラインソースもあります

GIFの場合; https://gifmaker.me/ および https://ezgif.com/maker

ビデオの場合; MakeAVI http://makeavi.sourceforge.net/ を使用してみてください。

または かんたん動画メーカー https://www.easymakevideo.com/

 

 

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

はい!これで、この初心者向けの基本演習は終わりです。

 

次の演習は初心者向けアニメーションです。アニメのまばたきについて話します。

いくつかの簡単な口の動き、簡単な髪のアニメーション。影と光の操作。ストック フッテージをインポートして使用し、問題解決も行います。

非常に長くなりますので、しばらくお待ちください。

繰り返しますが、POCHIのファイルはここにあります

これらを自由にダウンロードして、自分で試してみてください。

 

⭐⭐ 次のトピックは遅れます ⭐⭐

私は少し医療上の緊急事態に陥りました。

次のトピックはすでに記録されています。ただそれらを組み立てるだけです。

次のトピックは本当にかわいくて簡単なので共有したいと思います。

(ノアウ<0xE3><0xAE><0xAE>ション)ノ*:・゚ ✧ ✧ ゚

 

しばらくお待ちください。

 

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

それでは、次のトピックでお会いしましょう。

 

乾杯!

 

コメント

新着

公式 新着