ブレンドモードを使用したディスコ/レイブライトアニメーション

395 view

[注意:点滅するライトに敏感で、特定の視覚効果にさらされたときに吐き気/頭痛/発作/めまいを起こしやすい人は、このチュートリアル内でほぼ正確にそれを行うアニメーションがいくつかあるため、これ以上先に進まないでください-ほとんどの人もそうすべきではありませんアニメーションを長時間見つめない限り、大きな影響を受けます

このアニメーションチュートリアルでは、明るい渦巻きライトを利用します]

前書き

レイヤーブレンドモードは、調整するレイヤーに直接触れることなく、すばやく色を調整したり変更したりできるため、アートの作成を支援するために不可欠なツールです。


つまり、これらは非常に使いやすく、色、色合い、またはテクスチャを別のレイヤーに適用してから、レイヤーパネルの上部にある選択したレイヤーのレイヤーブレンドモードを設定します。これで基本的に完了です。 (要素を微調整して、作業に適したブレンド機能を持たせる以外に)


次のリンクは、レイヤーブレンディングモードの使用方法とブレンドモードの基本的なタイプをカバーする公式チュートリアルへのリンクです。

ブレンドモードの適用方法について-https://tips.clip-studio.com/en-us/articles/656

https://tips.clip-studio.com/en-us/articles/656

さまざまなブレンドモードタイプの一般的な概要については、https://tips.clip-studio.com/en-us/articles/867

https://tips.clip-studio.com/en-us/articles/867

概要概要

このチュートリアルでは、アニメーションの作成にブレンドモードが重要であるいくつかの単純なアニメーションの作成を通じて、レイヤーブレンディングの潜在的な使用法(具体的には、追加、減算、乗算、および除算機能)について説明します。


まず、いくつかの混色理論を使用して、加算/減算/乗算/除算のブレンドモードの簡単な解釈から始めます。これは、実用的な用途の1つへの出発点として機能します。


次に、光を混ぜ合わせて利用する基本的なアニメーションの作成に取り組みます


その後、ブレンドモードアニメーションでのフォルダ使用の実際的な例を紹介するために少し分岐します

最後に、元のアニメーションに戻って、ネストされたアニメーションを使用した別の実用的な使用法で終了します。これにより、カバー画像アニメーションが作成されます(健康/安全上の理由から静止画像として表示されます)。

混色理論と加算/減算/乗算/除算ブレンドモード

次のブレンディングモードの場合:加算、減算、乗算、除算-これらの2つ(加算と乗算)が基本的に特定の色混合システムと同じように機能するため、これらを色混合ブレンドモードと考えるのが好きです-補完的なブレンドモードは、本質的にブレンドを中和します(例外を除く)。私が言及する2つの混色システムは「加法混色」と「減法混色」と呼ばれます


数学関数の名前に忠実に、ブレンドモードは、同じ正確な値のレイヤーをブレンドするときに補数を無効にします(合計値が255を超えるか、差が0を下回る場合、および乗算と除算に値がある場合の加算と減算の特定の例外を除く)計算のどこかで0の)。これが、これらのブレンドモードをそれぞれの混色方法と組み合わせて分類する理由でもあります。

================================================== ==

混合物に光を「追加」してベースカラーを明るくすることでRGBライトを処理する「加法カラーミキシング」の場合、「追加」と「減算」のブレンドモードはその機能と完全に一致します。ブレンドの追加モードは値を「加算」し、ブレンドの減算モードは混合物から光を「減算」します。これは、ブレンディングレイヤーのRGB値をベースレイヤーに「加算」するか、ブレンディングレイヤーのRGB値をベースレイヤーから「減算」することで簡単に計算されます。

上記の例は、RGB値、ブレンドカラーと値(R 144)、および加算と減算のブレンドの結果を含むベースカラーグレーです。


注意として、RGB値は255を超えたり、0を下回ったりすることはできません。このため、RGB値の1つを加算したときに255を超えたり、減算したときに0を下回ったりすると、加算と減算は互いに完全に中和されません。中和の計算は、255を超えた合計または負になった合計差ではなく、255または0に基づいて行われます。

================================================


乗算と除算は、CMYK、顔料、および光フィルターを扱う機能の観点から、「減法混色」に向けて調整されます。基本的に、「減法混色」は、スペクトルからの光の除去、つまり「減算」を扱います。ただし、乗算と除算を使用した混色の実際の計算では、CMYKは使用されません。


この次のチュートリアルを読むまで、乗算と除算の計算を実際には理解していなかったので、ここにリンクします(これらは、松米トオルによる今月のヒントの提出です-彼らにあなたのサポートを示してください!!):
https://tips.clip-studio.com/en-us/articles/4162#82d9cc41 https://tips.clip-studio.com/en-us/articles/4162#82d9cc41
https://tips.clip-studio.com/ja-jp/articles/4163#7c67e4ed https://tips.clip-studio.com/ja-jp/articles/4163#7c67e4ed

https://tips.clip-studio.com/en-us/articles/4162#82d9cc41
https://tips.clip-studio.com/ja-jp/articles/4163#7c67e4ed

基本的に、レイヤー間の計算では、それぞれ乗算と除算が使用されます。チュートリアルで提供される式は次のとおりです。

かける:
[最終色] = [ベースRGB] * [ブレンドRGB] / 255
-最終的なRGB値は通常減少します(RGB値が最大255でない限り、[Blend RGB] / 255の結果は1未満になり、特定のRGB値に変化はありません)

分割:
[最終色] =([ベースRGB] / [ブレンドRGB])* 255
-最終的なRGB値は通常増加します(再配置式については以下を参照してください:[ベースRGB]に乗算される255 / [ブレンドRGB]は1より大きいです。ただし、RGB値が255の場合、結果は1になり、変更はありません。 -または、RGB値の1つが0の場合、結果は0になります)

除算の代替数式配置:
[最終色] =([ベースRGB] / [ブレンドRGB])/(1/255)
[最終色] =([ベースRGB] * 255)/ [ブレンドRGB]
[最終色] = [ベースRGB] *(255 / [ブレンドRGB])



ただし、実際の使用では、2つの値を乗算してからRGB値ごとに255で除算し、それらを追跡するのは面倒で非現実的です。代わりに、CMYKを利用し、CMYK値を加算または減算することで、代わりに顔料として扱います。ただし、期待値と最終的な色の結果は異なります。一般に、何らかの理由で大まかな計算の見積もりを行う必要がある場合は、これは目的に「十分に近い」はずです(ただし、最初にブレンドモードを適用して「推測して確認」することになるでしょう。ただし、計算はおそらくかなり無意味です。 ..)

[注意:RGB値のいずれかがいずれかの時点で0に等しい場合、乗算/除算でそれぞれの色を中和することは機能しません-式を処理するときに0は0に等しいままです。つまり、CMYK値の加算と減算には次の可能性があります。 RGB値のいずれかが元々0であった場合、完全にオフになります]

上記の例は、加算/減算の例と同じですが、加算の代わりに乗算を使用し、RGBの代わりにCMYK値を比較として使用します。右側の色の値は、CMYK値を加算または減算することによって行われる「推測」です。 RGBに適合するように再計算されるため、入力後に少しシフトします



Multiplyは、従来の物理媒体で使用されている混色と非常によく一致するため、これがより使用されているブレンドモードの1つであることは驚くべきことではありません。

==================================================


それで、ここに質問があります:これは実際にどこで役に立ちますか?


目的の結果の色がわかっていて、2つの色(ベースイメージの色または下のレイヤーにブレンドする色)のいずれかがある場合は、RGBカラー値を使用して3番目の色に必要なものを計算できますブレンドモードを利用するときに、目的の混色効果を作成すること


ニュートラルグレーを作成しようとしている場合、RGB値を同じ数値に変換しようとしているので、基本的に何をする必要があるかを正確に示します。[追加]または[乗算]を使用するときに混合されている色は100%になります。ベースカラーを「中和」する補色


実際、フォルダーやクリッピングレイヤーとの相互作用と組み合わせて、加算/減算/乗算/除算ブレンドモード(およびその他のブレンドモード)の使用法を習得すると、ロジックに反するように見えるいくつかのトリックを実行できます- -例:異なる色の乗算レイヤーと分割レイヤーの組み合わせを使用して、隠しレイヤーを使用することにより、赤とシアンの交差を黒以外の結果にすることができます。

RaveLightsアニメーション-基本的なアニメーションとアイデア

まず、このタイプの照明効果に特定の色が選択される理由について簡単に説明します。


明るい混色では、原色は赤、青、緑です。これらは一般に、錐体と呼ばれる色の目の光受容体と並んでいます-これはあなたが色の光を知覚することを可能にするものです(私が最後にチェックしたときから実際には4つの錐体があり、明暗の棒があります-しかし、4つの錐体はまだ多かれ少なかれ赤、青、緑の波長範囲と一致しています)。シアン、マゼンタ、イエローは二次色です。つまり、一次色の混合物です。


プライマリは、2つ(またはそれ以上)の波長を含み、制御が少し難しい二次色ではなく、スペクトルに1つの波長の光しか追加しないため、主にプライマリの使用に焦点を当てています。 「シアン、マゼンタ、イエローは印刷に使用されているのに、なぜ代わりに使用できないのですか?」と思うかもしれません。 -カラー印刷用のシアン、マゼンタ、イエローは減法混色の原色であり、通常、顔料/フィルターとしてスペクトルから1つの波長範囲を削除します。したがって、なぜそれらが減法混色の原色であるのか


言い換えると、RGBは、光を扱っているため、それらを混合するときに使用できる色の範囲を最大化するように選択されています-乗算ブレンドモードを使用していて、顔料タイプのモデルと同様のことをしたい場合は、シアンを使用します、マゼンタ、代わりに黄色

================================================== ==

まず始めに-この効果のためにブレンドの追加モードを利用します

白はすでに光の最大値を持っているので、最大光値を超えることはできないため、Addは基本的に白では何も達成しません-したがって、最初に背景を黒に変更します(背景/紙のレイヤーをオフにすることもできます-ブレンドするレイヤーが下にない場合、レイヤーブレンドは適用されません)

ライトをアニメートするために、ライトがどのような動きをしているのかを正確に把握する必要があります。ライトはたくさん踊っていますか?それとも基本的に円を描くのでしょうか?すべてのライトポイントの動きはほぼ一貫していますか?光が形を変えるかどうかという問題もあります


このデモの目的のために、同じ色のライトを同じポイントの周りで同じ速度で渦巻かせます。したがって、ライトの色ごとに1つのレイヤーを作成します。そして、このアニメーションプロセスでは、キーフレームアニメーションを利用してシンプルにしています。スケーリングや回転では再現できない形状が大幅に変化するアニメーションでは、アニメーションフォルダを使用したフレームごとのアニメーションが必要になります。

カラーセレクターを使用して、できれば正確なRGB値を入力して色を選択します。私は100%黒でペイントし、[レイヤープロパティ]パネルで色を調整することで色を利用しています。これをここで示します。これはおそらくほとんどの人にとって厄介な作業方法なので、レイヤーの色を配置するために別の方法を自由に使用してください(この方法で作業することにはメリットとデメリットがありますが、この特定のシナリオでは実際のメリットはありません)


その後、レイヤーパネルで3つのカラーレイヤーを選択し、パネル上部のオプションを使用してブレンドモードを[通常]から[追加]に変更します。


次に、タイムラインをまだ設定していない場合は有効にします。 [アニメーションタイムライン]パネルから[新しいタイムライン]をクリックするか、上部の[アニメーション]> [タイムライン]> [新しいタイムライン...]と表示されているメニューに移動して有効にできます。

おそらく、アニメーションにある程度の長さが必要になるでしょう。残念ながら、EXバージョンのClip Studioを使用していない限り、フレームには上限があります。私は120フレームの長さで毎秒24フレームに設定しているので、長さは5秒です。アニメーション化できる非EXバージョンには、私が覚えているものから24フレームの制限があるため、非常に単純な混色アニメーションしか利用できません。


タイムラインを作成したら、すべてのカラーレイヤーを再度選択し、選択したレイヤーのキーフレームを有効にします

このデモでは、シンプルに保ち、ループ回転のみを行います。アニメーションの最初に移動してキーフレームを追加し、次にアニメーションの最後に移動して、レイヤーごとに別のキーフレームを追加します。これを行うには、レイヤーを選択してからグラフエディターにアクセスしてタイムラインで編集するか、[オブジェクト選択]ツールを選択して編集するレイヤーを選択し、タイムラインパネルからキーフレームを追加して、 「ツールのプロパティ」パネル

ナビゲーション(丸で囲んだ「NAV」)を使用すると、タイムラインの最初または最後にすばやく移動できます(または、多くのアニメーションを計画している場合は、設定でタイムラインをナビゲートするためのショートカットキーを設定します)。タイムラインはキーフレームです。アニメーション全体で一定の動き(イージングインまたはイージングアウトなし)のためにキーフレームが「線形補間」に設定されていることを示す緑色で、タイムラインで丸で囲まれた最後の項目は「キーフレームの追加」です。キーフレームのタイプのトグルと一緒にボタン


アニメーション化するには、アニメーションがループしたときに回転が完了するように、終了キーフレームを360度の増分で回転するように設定します。したがって、+ 360、+ 720、-720、-1080などは使用するのに適切な値です-したがって、ツールのプロパティパネルでそれらの1つを設定します。代わりにグラフエディタを使用している場合は、作成したキーフレームを代わりに適切なポイントにドラッグします


アニメーションをループさせたいので、タイムラインの最後に作成したキーフレームを次のフレームにシフトする必要があります。これは、終了キーフレームを選択し、アニメーションシーケンスが終了した後、フレーム上の所定の位置に移動することで、グラフエディターで簡単に実行できます(この特定のアニメーションの最後のフレームは120なので、代わりにキーフレームをフレーム121に移動します)。オブジェクトセレクタとツールのプロパティパネルを使用してキーフレームを設定する場合は、タイムラインでキーフレームを選択し、代わりにタイムラインのエンドポイントを超えてドラッグできます。

注:.gifに示されている方法を使用する場合は、次のフレームを超えないように、次のフレームにドラッグする必要があります。次のフレームを超えてドラッグすると、キーフレームをドラッグしたフレームに登録されます。単にエンドフレームを超えたフレーム(たとえば、この例の120のエンドフレームを超えてドラッグしてもキーフレームは121に設定されません-キーフレームを130にドラッグした場合、キーフレームは代わりに130に登録されます。これ.gif記録で行ったのと同じ間違いが原因で、以下に投稿された例でわかるように、アニメーションループがスキップされます)


これらすべてのキーフレームを120フレームにわたって360度ずつ回転するように設定した後(次にドットのスケールを再調整)、次のようになります。

より興味深いアニメーションのために、より多くの交差点にもっと多くの光のドットを使用する必要がありました...そして私はキーフレームを移動するのを台無しにしたので、最後に少しスキップします...おっと?交差するライトの効果をまだ見ることができるので、これは紹介の目的を果たすのに十分です

実用的な使用法(1)-アニメーションカラーオーバーレイ

基本的なアニメーションができたので、次のステップに進んで実用化しましょう。


私が紹介する最初の方法は、アニメーションを他のものの上にオーバーレイすることです

これを行うには2つの方法があります。1つはアニメーションを別のドキュメントにインポートする(またはエクスポートしてからインポートする)方法です。もう1つはフォルダを利用する方法です。実際の使用法では、アニメーションを別のファイルにインポートすると、より柔軟になります。使用法


デモンストレーションの目的で、アニメーションを他の何かにオーバーレイするためにフォルダアプリケーションメソッドを利用します。「実用化(2)」の次のセクションで「ネストされたアニメーション」について説明します。

================================================== ==

フォルダの利用を開始する前に、まずブレンドモードがフォルダとどのように相互作用するかを確認する必要があります


フォルダーとのブレンドモードの相互作用については、次の公式チュートリアルを参照してください。

https://tips.clip-studio.com/en-us/articles/656#f6aef146 https://tips.clip-studio.com/en-us/articles/656#f6aef146

https://tips.clip-studio.com/en-us/articles/656#f6aef146


フォルダーとのブレンドモードの相互作用の私の解釈は、数学とのアナロジーで要約することができます:演算の順序、これも次の形式で理解されます

[P]-括弧
[E]-指数
[M]-掛け算
[D]-分割
[A]-追加
[S]-減算

-各数学関数/ステップがその順序で実行および処理される場所


基本的に、フォルダーは操作の順序で「括弧」のセットとして機能します-フォルダー内のすべてのブレンドモードが最初に処理され、次に処理されたものの合計が、フォルダーのブレンドモードが設定されてレイヤーに適用されるものに変換されます未満。プログラムがレイヤーを分類してモードをブレンドする実際のプロセスは少し異なる場合がありますが、このバージョンの解釈は、プログラム内のほとんどの実際的なケースで機能するはずです。

================================================== ===


基本的に、カラーアニメーションをオーバーレイするFolderメソッドで行っているのは、ブレンドモードとフォルダーの相互作用を利用することです。


フォルダはブレンドモードをその中にあるものにのみ適用するように制限しているので、カラーブレンドアニメーションをフォルダ内にあるものだけに制限することができます-次に、フォルダのブレンドモードを変更して、ブレンドされたカラーアニメーションを新しいサーフェスに適用します


私が始めた例は、アニメーション全体に色が散在しているため、この特定のタイプの効果にはあまり役立たないため、例として代わりに以下のアニメーションを使用します-追加の代わりに乗算ブレンドモードを使用しますデモンストレーションの目的で(そしてはるかに短く、必要に応じて非EXバージョンのアニメーションでのアプリケーションを可能にします)


まず、カラーアニメーションと相互作用させたい画像を追加します

次に、アニメーションレイヤーを画像の上の新しいフォルダーに移動します

画像に対する色のブレンドが「通常」になっていることに注意してください。これは、フォルダ設定が「通常」に設定されているためです。


以下は、この不完全な形式でアニメーションがどのように再生されるかです。

次のステップは、フォルダブレンドモードを「通常」から下のレイヤーと相互作用するものに変更することです。デモンストレーションの目的で、「除外」ブレンドモードを使用します


結果のアニメーションは次のとおりです。


選択したブレンドモードは背景とも相互作用するため、画像だけでなく背景とも相互作用し続けることを許可するか、アニメーションをクリップして画像にのみ影響を与えるかを選択できます。

フォルダを右クリックし、[レイヤー設定]に移動して、[下のレイヤーにクリップ]を選択するだけです。

結果のアニメーションは次のとおりです。これは、フォルダが「下のレイヤーにクリップ」設定で通常のブレンドモードにある場合とまったく同じに見えるため、残念です。


したがって、フォルダブレンドモードで「下のレイヤーにクリップ」の機能をよりよく示すために、アニメーションを再生するための別の画像を作成します。アニメーションが両方の画像で再生されることを確認するために、両方の画像をに移動します。新しいフォルダには、代わりにそのフォルダへのアニメーションクリップがあります

(注:以下の例では、誤ってブレンドモードを「除外」ではなく「差異」に変更したため、ブレンドモードが除外であった場合とはわずかに異なります)


そして、これが最終的なアニメーションです。

灰色の円の代わりに白い円を使用した上記のアニメーションのバリエーション:



当然、参照される画像は実際にはアニメーションそのものである可能性があるため、必要に応じてこれをさらに一歩進めることができます。ただし、このデモはここで終了します

実用(2)-ネストされたライトアニメーション

ディスコ/レイブライトアニメーションに戻ります。これをサーフェスに配置します。残念ながら、フォルダを利用する以前の方法は、この効果を達成するには不十分です


お使いのプログラムのバージョンによっては、アニメーションをフォルダー内に配置し、フォルダーのキーフレームを有効にしてから、フォルダーをX軸またはY軸に沿って押し下げて、遠近法をある程度模倣できる場合があります。ただし、実際にはパースペクティブを無視していて、アニメーションで何ができるかを実際にはあまり制御できないため、これは不完全な方法です。

実際、プログラムの現在の最新バージョン(1.10.6)では、フォルダーキーフレームのX軸またはY軸のみに沿って拡大縮小するオプションはありません。X軸とY軸はアスペクト比でロックされているため、 1:1の比率でのみスケーリングできます


したがって、アニメーションをサーフェスに適用する新しい方法が必要です。この方法はネストされたアニメーションです


ネストされたアニメーションの使用法は、けもによるこのアニメーションチュートリアル、つまりマジックサークルセグメントで確認できます。
https://tips.clip-studio.com/en-us/articles/2565 https://tips.clip-studio.com/en-us/articles/2565

https://tips.clip-studio.com/en-us/articles/2565


また、ネストされたアニメーションの利用方法に関する基本的なチュートリアルも作成しました。ただし、書き直し/更新する必要があります。まず、適切な定義(「タイムラインに表示されないアニメーション」)を利用しておらず、Adobe AnimateおよびAfterEffectsで行われていることの外観を模倣しています。理由は、一部の情報がおそらく古くなっているためです。3つ目は、特定の機能を備えたいくつかの発見/便利なトリックを見つけたためです。

https://tips.clip-studio.com/en-us/articles/3428 https://tips.clip-studio.com/en-us/articles/3428

https://tips.clip-studio.com/en-us/articles/3428

================================================== ===


基本的に、アニメーションを別のファイルに作成し、それをファイルオブジェクトまたはムービーとして最終的なアニメーションファイルにインポートする必要があります。[ファイル]> [インポート]>に移動し、[ファイルオブジェクトの作成]を選択します。 ..]または[Movie ...]をクリックし、インポートするアニメーションを含むClipStudioファイルを選択します。または、アニメーションをムービーとしてエクスポートしてからプログラムにインポートし直すこともできますが、アニメーションに変更を加える必要がある場合は、これにより手間がかかります。


ファイルをインポートした後、ファイルオブジェクトを変換して変形し、サーフェスに対して整列しているように見せることができます。これを行うには、「変換」(ショートカット:Ctrl T)を押してから、[Ctrl]を押したまま選択方法を変更して、角をドラッグしてオブジェクトを歪めることができます。

新しいファイルにタイムラインがない場合は、タイムラインを有効にすることを忘れないでください。


これが私たちの予備的なアニメーションです:


デモンストレーションの目的で、ファイルオブジェクトのブレンドモードを[追加]に変更し、背景を白から灰色に変更し、アニメーションのテクスチャを追加してブレンドします。独自の目的で任意のタイプのブレンドモードを使用できます。

結果のアニメーションは次のとおりです。


複数のサーフェスを利用するより高度な方法では、アニメーションにグリッドまたは同様のタイプの参照を追加して、アニメーションのさまざまなコピーをさまざまなサーフェスに揃えて一致させることができます。アニメーションを揃えた後、参照レイヤーを削除します。アニメーションファイル

この特定の方法では、おそらく2つの平らな面が結合されていることに制限されます。部屋の隅などの点で結合されている2つ以上の面は、適切に整列するのがやや困難です。

上はグリッドが配置されたアニメーションです

以下は、元のネストされたアニメーションファイルに戻ってグリッドを削除し、ファイルを保存してから、ネストされたファイルを含む作業ファイルに戻って、最終的なアニメーションをエクスポートした後です-ネストされたファイルに保存すると、作業中のベースアニメーションが更新されますファイル


これで、このチュートリアルのデモは終了です。以下のコメントに、改善が必要な点、または改善できる点についてのフィードバックを残してください。

読んでくれてありがとう!

変更ログ

2021.01.03-選択的な混色を伴うより技術的なアプリケーションのためにブレンドモードを詳細に使用する方法を学ぶためのインセンティブを追加しました
2021.01.03-乗算/除算のブレンドを無効にしようとしたときにエラーが発生する可能性がある場所(または除算が適切に適用されない場所)で見逃した詳細を追加しました

2021.01.12-使用されている用語を修正しました-以前に「スキュー」と述べました-正しい用語は「ディストーション」です

コメント

関連する記事

新着

公式 新着