皆さん、こんにちは！今日は魔法のソフトウェア「CLIP STUDIO!!」を使って、魔法の授業を受けてみましょう！

 

このワークショップチュートリアルでは、召喚シーン用の魔法のエフェクトを作成する方法を紹介します。このエフェクトは、あなたのイラストを魅力的にするために応用できます。

 

または、アニメーションシーンに変形を加えて追加することもできます。

このチュートリアルは、対称定規ツールを使った対称的な召喚リングの作成方法、オブジェクトツールを使ったシンプルな回転ループの作成方法、そしてアニメーションシーンへの適用方法の3つの主要なパートで構成されています。

 

私のチュートリアルは、主にCLIP STUDIOのツールを使って物を作成する方法に焦点を当てています。ソフトウェアの初心者の方でも簡単にステップバイステップで進めることができますし、ツールのエキスパートの方でも作業方法を改善するためのアイデアを得ることができます。

さあ、始めましょう！

ビデオチュートリアル

パート1：召喚リングを描く

召喚リングの作成は対称定規を使えば簡単です

完璧に一点で回転できる対称的な図形を描くことができます

ただし、対称定規は手描き召喚リングの方がうまく機能します。

 

後から図形を追加すると、オブジェクトの回転の中心が対称定規の中心と同じにならないことがあります。

 

この画像は90度回転可能であるはずですが、ループで作成すると、回転の中心に対称定規が配置されていない場合、90度の完璧な回転にならないことがわかります。

（ループ中に少しジャンプすることがあります。ただし、この問題は360度回転させることでも解決できますが、滑らかにゆっくり回転させるにはより長いタイムラインが必要になります）

グリッドを使って描くと完璧に回転させることができます。

 

後で素材変形方法を使ってグリッド内に描画された対称定規を配置することもできます。

ヒント：

ここで述べた回転角度は、ファイルの最適化に役立ちます。角度が狭いほど、ゆっくり回転させるために必要なフレーム数が少なくなります。

 

これらの例から：同じ速度で、

90度対称の場合、完璧なループで回転させるには16フレーム必要です。

60度対称の場合、わずか12フレームで済みます。

180度対称の場合、32フレーム必要です。

 

（心配しないでください。ファイルサイズを少し小さくする必要がある場合にのみ役立つだけです）

 

リングにシンプルなデザインを作成します。デザインの作成には対称定規を使用します。

 

[定規]サブツールで見つけることができます。ここでは、線対称にチェックを入れて8分割対称定規を使用しています。

 

[Shift]キーを押しながらキャンバスの中央に線をドラッグすると、キャンバスの垂直、水平、および45度のアライメントにスナップします。

ここでは、召喚リングを2つのレベルで作成し、動いたときに詳細で凝った見た目になるようにします。

 

単純に2つのレイヤーに分けて描画します

対称定規を必要としないルーンを描く場合は、

対称定規を非表示にするか、コマンドバーの特殊定規にスナップを無効にすることができます。

 

ヒント：グリッド上でベクターインクを作成しやすくするために、デザインをクリーンな形状に保つようにしてください。幾何学図形を使用すると、よりすっきりした見た目になります。

 

次のステップでは、デザインのベクター線を描画します。

 

グリッドを有効にし、[表示] > [グリッド] に移動します。

 

次に、[グリッド・定規設定]でグリッドを設定します。

グリッドを作品の詳細に合わせて設定し、図形をドラッグしやすいように線間にいくつかの隙間を設けます。

インクレイヤーの不透明度を下げ、新しいベクターレイヤーを作成します。

グリッドにスナップが有効になっていることを確認してください。

円の部分から始めます。私は[図形]サブツールの楕円ツールを使用します。

円の縁の上部と左側に触れるグリッド線の交点からドラッグします。

円はグリッドにスナップします。スケッチ線に合うまで下にドラッグします。

小さな詳細に取り組む際は、後でグリッドを調整することができます。

ここでは、円の内側の四角形に合わせてグリッドを調整します。調整前のグリッドが線上にない場合、実際のスケッチに描画できないことがわかります。

長方形または多角形ツール（[図形]サブツールの長方形）を使用して四角形を描画します。

他の多角形の場合、図形選択で「多角形」を選択し、角の数を設定できます。

新しいベクターレイヤーを作成し、スケッチに表示されているように三角形を描画します。

図形を重ねて描画するだけでは、図形の一部の側面が重なってしまいます。ここでは、三角形の底辺が四角形の一辺に重なります。

重なり合う線を避けるには、[線修正]サブツールの[制御点]ツールを「分割」モードで使用して、三角形から側面を分割します。

その後、消しゴムツールのベクター消去モードで線を簡単に削除できます。

ここでは、CLIP STUDIOにまだオブジェクトをグリッドに移動してスナップする機能がないため、私がパーツの回転に使用するテクニックを紹介します。

（そして、これをベクターレイヤーインクとして作成したいので、CLIP STUDIOで完璧に作成する方法をお教えします）

 

新しいベクターレイヤーに円を描き、すべての図形を覆います。

 

[Shift]キーを押しながら三角形レイヤーと青い円のレイヤーを選択します。

自由変形境界線を作成します。[編集] > [変形] > [自由変形]

 

または [Ctrl + T]

 

これで[Shift]キーを押しながら、好きな方向に（45度ステップで）図形を回転させることができます。

[OK]をクリックするか、[Enter]キーを押して変形を確定します。

 

この方法を使用すると、回転の中心を中心にすべてを簡単に回転させることができます。

 

レイヤーをコピーして手順を繰り返します。すべてのパーツに同じ青い円を使用できます。

 

完了したら、レイヤーを結合します。青い円は完成した図形とは結合せず、他のパーツの回転に使用できるようにしておきます。

月の形については、2つの円を重ねて描き、不要な部分を消去します。

 

[重要！] 図形の対称性は、回転の中心から伸びるグリッド線にのみ合わせる必要があります！

作成したスケッチに対してサイズが大きすぎる場合があります。

 

自由変形を作成して拡大縮小します。

[重要！] 画像をドラッグして拡大縮小しないでください（グリッドにスナップしないため）。ツールプロパティパネルで拡大縮小比率のみを設定してください（[アスペクト比を維持]がチェックされていることを確認してください）。

[Ctrl]キーを押しながら[↓]キー（キーボードのカーソルキー）を使用して図形を下に移動します。

（[移動]ツールで[Shift]キーを押しながら移動して整列させることもできます。）

 

描画がまだ青い円の内側にあることを確認してください。

三角形のパーツに行ったのと同じ手順を繰り返します。

45度ステップで回転できない一部のパーツについては、ツールプロパティで回転角度を設定します（ここでは+記号を動かしています）。

片側に25度、もう片側に-25度を使用します。

その後、レイヤーを結合し、他のパーツと同じように移動します。この方法を使用すると、各オブジェクトのすべての回転角度を計算する必要がありません。

 

反対側に配置するために反転させることもできます。

星はこのように作られています。

完了したら、すべてを1つのレイヤーに結合し、不要な部分を消去します。

内側の召喚リングが完成しました。

外側のリングも同じ方法で描画します。

（ルーンについては、グリッドにスナップを無効にして、中に書き込むだけです。）

インクの太さを変更したい場合は、オブジェクトツールを使用できます。

複数のベクターパーツを選択するには、[Shift]キーを押します。

そして、ツールプロパティでブラシサイズを調整できます。

召喚リングの準備ができました。

パート2：召喚リングをイラストに適用する

このパートでは、私が作成したイラストに動く召喚リングを追加します。

インポートするファイルを準備します。

 

[レイヤーを右クリック > ファイルオブジェクト > レイヤーをファイルオブジェクトに変換]

描画領域で変換します。

この方法を使用すると、透明な背景でファイルを簡単に保存でき、回転の中心に変化を与えることなく適切にトリミングできます。

さあ、アニメーションを作成しましょう。

 

ファイルを開き、[編集] > [キャンバスサイズを変更] で画像にさらにオフセットを追加します。

 

キャンバスの両方の寸法に数ピクセル追加します。

召喚リングの光のエフェクトとして使用するために、リングのぼかしバージョンを作成するためのオフセットを作成する必要があります。

 

レイヤーをコピーしてラスタライズします。

 

次に、フィルター[ガウスぼかし]を使用します。

柔らかな光のエフェクトを作成するために強度を調整します。

次に、リングとエフェクトレイヤーに回転運動を適用します。変形を助けるためにレイヤーキーフレーム機能を使用します。

 

フレームレート8 fps（アニメーションイラストレーター用）の設定で新しいタイムラインを作成します。

 

両方のレイヤーを選択し、レイヤーキーフレームを有効にします。

最初のフレームを選択し、[線形補間]キーフレーム作成アイコンをクリックします（緑色で表示されます）。

タイムラインの最後にもキーフレームを作成します。

最後のフレームで[オブジェクト]ツールで描画を選択し、ツールプロパティパネルで回転角度を360に設定します。

注：値を編集するには1つのレイヤーのみを選択する必要があります。

 

最後のキーフレームをタイムラインの最後までドラッグして、ループのギャップをなくします。

 

完璧な回転リングが得られます。

（召喚リングは24フレームで360度回転します。）

リングの動きが速すぎる場合は、フレームを追加して動きを遅くすることができます。

 

タイムラインを右クリックして[フレームを挿入]します。

 

追加したいフレーム数を設定します。

これで召喚リングは72フレームで360度回転します。

ファイルを2つのファイル、インク線とぼかしエフェクト線として保存します。

 

エフェクトレイヤーを削除してファイルを保存します。

 

その後、[Ctrl+Z]で元に戻し、インクレイヤーを削除して[別名で保存]を使用して別のファイルに保存します。

内側のリングについても同じ手順を繰り返します。

 

内側のリングは90度対称なので、回転角度を切り替えます。

外側のリングが0から72フレームで360度回転するのに対し、

私は180から72フレームで0に回転させました（外側が完全に回転する間に、内側は半回転だけ回転します）。

 

外側のリング（時計回りに0 >> 360度を完全に回転）

 

内側のリング（反時計回りに180 >> 0度を半回転）

このように完璧なループで回転します。

4つのファイルができます。

イラストレーターに適用し、リングファイルと同じフレームレート設定で新しいタイムラインを作成します。

その後、[ファイル] > [読み込み] > [ファイルオブジェクトを作成] でリングとエフェクトをキャンバスにインポートします。

複数のファイルを選択してまとめてインポートします。

すべてのリングレイヤーを選択し、[移動ツール]を使用して一緒に移動します。

自由変形[Ctrl+T]を使用してサイズを調整します。

光のエフェクトを作成するために、エフェクトオブジェクトのブレンドモードを[加算(発光)]に設定します。

 

リングの色を変更するには、エフェクトのレイヤーカラーを使用します。このアイコンをクリックするか、レイヤープロパティパネルで設定できます。

色を選択し、バケツをクリックしてバーに適用します。

すべてのリングレイヤーの上に発光モードで新しいレイヤーを作成し、さらに光を追加します。

 

そして、柔らかなエアブラシで追加の光を描画します。

 

外側のリングエフェクトをコピーしてキャラクターの上に移動させ、キャラクターにも光のエフェクトを追加します。

光のエフェクトをキャラクターにクリップして、背景に漏れ出ないようにします。

より自然にするには、新しいレイヤーを作成し、柔らかなエアブラシで光の領域を描画します。

選択範囲を作成するには、右クリック > レイヤーから選択 > 選択範囲を作成

（または[Ctrl]キーを押しながらレイヤーサムネイルをクリック）

 

その後、エフェクトレイヤーを右クリックして[レイヤーマスク > 選択範囲外をマスク]を選択します。

エアブラシレイヤーを非表示（または削除）します（もう必要ありません）。

結果

パート3：召喚リングにトランジションを適用する

私のシーンでは、このように空中に浮かんで回転するようにします。

より立体的な見た目にするために、位置を少しずらします。

アニメーションシーンでは、タイムラインの適切なタイミングで表示されるようにトランジションも追加します。

アニメーションシーンの作成から始めます。

私のチュートリアルの以前のエピソードから、ベクターレイヤーでフレームごとのアニメーションを作成する方法を学ぶことができます。

ファイル（.clip）を別々に準備します。ここでは1秒あたり24フレームのフレームレートを使用します。

すべてのファイルが同じフレームレートであることを確認してください。

 

シーン用の新しいファイルを作成します。ムービープリセットを使用し、フレームレートを1秒あたり24フレームに設定します。

すべてのオブジェクトファイルをキャンバスにインポートします。

[ファイル] > [読み込み] > [ファイルオブジェクトを作成]

 

ヒント：オブジェクト（召喚リング）が表示されるべきフレームを選択してください。オブジェクトをインポートすると、タイムラインのその位置に表示されます。

すべてのオブジェクトを選択し、自由変形を作成して、タイムラインに表示されるべき位置に配置します。

作業中にエフェクトをより明確に確認できるように、用紙の色を設定します。

オブジェクトレイヤーにレイヤーエフェクトと色を適用します（チュートリアルの前のパートで行ったのと同じです）。

リングにトランジションの動きを追加してシーンと共にアニメーションさせるため、召喚リングオブジェクトのレイヤーキーフレームを有効にします。

キャラクターが召喚エフェクトを唱える間に隙間があります。

各リングのその位置にスムーズ補間キーフレームを作成します。これがエフェクトトランジションの終点になります。

[オブジェクト]ツールで内側のリングを少し移動させます。

キーフレームをコピーして別のオブジェクトに貼り付けることができます。これにより、キーフレームの位置プロパティがコピーされます。したがって、慎重に移動する必要はありません。

内側のリングが先に表示されるので、終点より前に別のキーフレームを作成します。

リングが表示され始めるフレームで、小さなサイズに縮小します。

その位置で不透明度も調整します。

タイムラインでは、[+]アイコンをクリックすることで不透明度のタイムラインを表示できます。

コピー＆ペーストすることもできます。

外側のリングでも同じ手順を繰り返し、最初のリングの後に表示されるようにキーフレームを少し後ろにずらします。

光のエフェクトには、加算(発光)モードのレイヤーに描画します。

リングの変形に合わせて不透明度も設定します。

注：外側のリングと内側のリング用に光のオーバーレイを別々に作成します。

 

変形の終点で光レイヤーの不透明度を上げて、詠唱完了のエフェクトとします。

 

キャラクターオブジェクトの上に加算(発光)モードの新しいレイヤーを作成して、キャラクターにも光を適用します。

 

光を描画し、キャラクターオブジェクトにクリップします。

 

アニメーションのタイミングに合わせて不透明度レベルを変化させます。

魔法が起こりました。

ボーナスパート：変形の追加エフェクト

ここに、カメラエフェクトと光の変形エフェクトを加えたシーンの最終レンダリングがあります。

エフェクトはフレームごとのアニメーション方法で作成されます。

 

新しいアニメーションフォルダーを作成し、オブジェクトキーフレームに空のキーフレームをマッピングします（シーンとオブジェクトが同じフレームレートであるため、完璧にマッピングできます）。

 

キャラクターオブジェクトの選択範囲を作成します。

選択範囲を拡張します。

そして、アニメーションフォルダーの最初のキーフレームに色を塗りつぶします。

オブジェクトの選択を解除し[Ctrl+D]、ぼかしフィルターを適用します。

レイヤーをフォルダーアイコンにドラッグしてフォルダーに入れます。

再びキャラクターの選択範囲を作成し、新しいレイヤーに色を塗りつぶします。

その後、ぼかしレイヤーの透明度をロックし、明るい色で塗りつぶします。

他のキーフレームでも手順を繰り返します。

オブジェクトに関連する表示フレームも適用します。

そしてレイヤーキーフレームを有効にし、オブジェクトの不透明度を設定します。

フォルダーを加算(発光)モードに設定すると、より魅惑的に見えます！

追加の光のエフェクトには：新しいアニメーションフォルダーを作成し、ペンツールで光のエフェクトを描画します。

ヒント：しずくエアブラシで粒子を追加します。

変形アニメーションにもエフェクトを適用します。

キーフレーム作業の時間節約のために、オートアクションを使用することもできます。Mattlamp氏のチュートリアルを確認してください：

アニメーションフォルダーを使用して、オブジェクトに追加のハイライトの詳細を描画することもできます。

召喚リングのエフェクトで揺れるように、カメラエフェクトを追加します。

すべてのレイヤーを2Dカメラフォルダーに入れます。

エフェクトが発生するタイムラインのポイントで、オブジェクトツールを使ってカメラを回転させます。

キーフレームはタイムラインに自動的に表示されます。

タイムライン上でカメラをランダムに回転させて、カメラの揺れを作成します。

そして、これが最終結果です!!

このチュートリアルが、あなたのプロジェクトで魔法のエフェクトを扱う上での何らかのアイデアになれば幸いです。

 

素敵な一日を!! 楽しいアニメーションを!! <3