Clipstudioの図形ツールは、シェイプやインターフェースの描画に非常に役立ちます!!

このチュートリアルでは、図形ツールを使って以下のような監視インターフェースを描画する方法を紹介します。

• レーダー

• GPS

• 音波

• 正弦波

 

そして、これをアニメーション化して、この素晴らしい結果を得ます!!

始めましょう！

ビデオチュートリアル

ディスプレイインターフェースのデザイン

インターフェースディスプレイをデザインするには、その仕組みを知ることで、よりリアルな詳細をデザインに加えることができます。インターネットで資料を見つけたり、実際の計器に基づいて独自のものをデザインしたりできます。

 

インターフェースディスプレイの主な目的は、計器によって監視される情報を表示することです。したがって、表示する情報に注意を払う必要があります。

 

 

レーダーは、信号波を送信し、何らかの物体に反射したときにそれを受信して、位置と距離（レーダーからの）を検出する計器です。

 

GPSは、私たちの携帯電話で慣れ親しんでいるもので、単純に地図上の位置を上空から表示します。その仕組みを知らなくても、それがあなたの情報をどのように表示するかはすでに知っているので、知る必要はないかもしれません。

ここでは、実際の計器に基づいたクイックデザインを示します。

このデザインは、実際の計器と同様のデータを提供します。

レーダー：角度位置（度）、オブジェクトマーク、中心からの距離

GPS：地図上の障害物、基準点からの距離

 

 

 

 

図形ツールでインターフェースを描く：レーダー

クイックデザインが完成したら、図形ツールで描いてみましょう！

 

グリッドを有効にします。[表示>グリッド]へ進みます。

 

デフォルトのグリッドが見にくい場合は、[ファイル > 環境設定]で色を変更してください。

[定規・単位]タブで、[グリッド線の色]と[グリッド分割線の色]を変更できます。

このメニューでグリッドの不透明度も調整できます。

 

これでグリッドがより見やすくなりました。

 

 

グリッドのスケーリングは、メニュー[表示 > グリッド・ルーラー設定]で調整します。

 

開始点を[中央]に設定すると、ルーラーがキャンバスの中央で0に揃って開始されます。

 

デフォルト設定でグリッドの間隔が小さすぎる、または大きすぎる場合は調整してください。グリッドが小さすぎると、図形を描き始める位置が見えにくくなります。

（ここでは2000*2000 pxのキャンバスサイズに対して200に設定しています。）

距離スケールから始めましょう。

新しいベクターレイヤーを作成します。

サブツール[図形]で、楕円を選択し、アンチエイリアスを無効にします。

[グリッドにスナップ]を有効にします。

端のグリッド点から円を描き始めると、円がグリッドにスナップします。

グリッドを使うと、円のサイズや、キャンバスの中心点に揃っているかどうかが簡単にわかります。

（ドラッグするときに[Shift]キーを押しながらだと、左右対称の比率で円を作成できます。）

 

小さな円の場合、開始点を次のグリッド交点に移動させることができます。円の上部と左側がグリッド線に揃います。これにより、円の調整が非常に簡単になります。

これは、私のデザインのすべての円の開始点のリファレンスです。

 

内側の円は少し狭い間隔で分割しているので、2つのグリッド交点（グリッド分割線上）の中間点を使用しています。

 

円の線幅を変更するには、オブジェクトツールを使用して円を選択します。

そしてツールプロパティパネルで、[ブラシサイズ]オプションで線幅を調整できます。

 

 

円に測定スケールを配置するには、大きな度数セクションからスケールを分離し、それを小さなものにトリミングします。（ここでは10度間隔を使用しています）

 

値をメモするための新しいレイヤーを作成すると、作業が容易になります。

距離スケールもメモします。

スケール用の分離線を描きます。

新しいベクターレイヤーを作成し、すべてのデザインを覆う円を描きます。

この円は、描画の中心点を中心に回転させるのに役立ちます。

サブツール[マーカー]の[ミリペン]または[塗りつぶし用モノペン]を使用して分割線を描きます。

アンチエイリアスを[なし]に設定します。

 

90度と180度の分割線を描きます。

レイヤーを新規レイヤーアイコンにドラッグして複製します。

レイヤーを選択し、自由変形を作成します（[Ctrl+T]を押すか、[編集>変形>自由変形]に進みます）。

 

その後、ツールプロパティパネルで回転角度を30度に変更します。

 

[Enter]を押して変形を確定します。

 

手順を繰り返し、レイヤーを再度コピーしてさらに30度回転させます。

 

30度間隔の線が得られます。

 

[Shift]キーを押しながらすべてのレイヤーを選択し、右クリックして結合します。

10度刻みの場合は、レイヤーを再度複製し、手順を繰り返しますが、30度ではなく10度だけ回転させます。

オプション：[オブジェクト]ツールを使用し、ツールプロパティパネルで線幅と色を設定します。

完了したら、10度線のレイヤーを結合します。

 

ハード消しゴムを使用し、[交点まで消去]モードでベクター消しゴムを有効にします。

 

外側の円も消去すると、スケール用の線分離が得られます。

30度線分離でも手順を繰り返し、その後[オブジェクトツール]で色を変更します。

描画の上に円を作成する別の方法として、選択ツールを使用することもできます。これもグリッドにスナップします。

 

10度スケールのレイヤーをコピーし、描画の上に[楕円]を描きます。

 

変形を作成し、5度回転させます。

もう一度繰り返すと、スケールが完成します！

注意：プロキシ円よりも選択範囲の欠点は、選択範囲を何度も描き直す必要があるかもしれないことですが、ご自身がより簡単だと感じる方法を使用してください :)

 

私は30度スケールでより長い線を作成するために、レイヤーをコピーし、自由変形を作成してサイズを少し調整しました。

 

（[ベクターの線幅を変更]がオフになっていることを確認してください）

 

スケール数値には、テキストツールで入力します。

次に新しいレイヤーを作成し、数字と全体の描画を覆う円を描きます。

テキストのみをコピーし、テキストレイヤーと円レイヤーの両方を選択します。

自由変形を作成し、90度回転させてから、数字を編集します。

次に両方のレイヤーをコピーし、90度回転させて手順を繰り返します。

手順を30度回転で再度繰り返すと、すべての30度ステップの数字が得られます。

すべての数字をフォルダーに入れ、より小さなスケール用に再度コピーします。

フォントサイズを少し小さく調整します。

フォルダーに自由変形を作成し、描画に合わせて調整します。変形の中心が描画の中心にあることを確認してください。

スケールの位置に回転させます。

フォルダーをコピーし、再度回転させます。

次に、数字をステップの度数に編集します。

数字を選択し、[右クリック > 選択中のレイヤーを結合]でグループ化できます。

[オブジェクト]ツールと[テキスト]ツールで、グループ内の数字を編集できます。

オプション：小スケールの不透明度を少し下げて、大スケールがより際立つようにします。

距離線用の数字も追加します。

スケールができました。

 

次のステップでは、レーダーのスキャンを作成します。

新しいレイヤーを作成し、内部領域を覆う白い円を描きます。

 

重要！：アンチエイリアスをオフにします。

 

レイヤーをファイルオブジェクトに変換します。レイヤーを右クリックし、[ファイルオブジェクト>レイヤーをファイルオブジェクトに変換]を選択します。

領域は[描画領域]に設定する必要があります。

ファイルオブジェクトを開きます。

グリッドを有効にし、中心から開始するように設定し、少し大きな間隔を設定します。これにより、円の中心を簡単に見つけることができます。

 

[直線]ツールを使用してグラデーションの領域を作成します。

重要！：ここでもアンチエイリアスをオフにします。

 

 

レイヤーの透明部分をロックします。

 

カラーパレットでグレー -95%を選択し、中心点から端までドラッグして線を描きます。

グレー -50%を選択し、別の線をドラッグします。これも中心から開始し、最初の線との間に角度をつけます。

より明るいグレーの色を選択して、中心点から別の線を描きます。

（ここに4本の線がありますが、最後の線はグレー -5%を使用しているため気づきにくいかもしれません）

 

グラデーションタブで、フリーフォームグラデーション、[通常描画]ツールを選択します。

 

[許容誤差]を0に設定します。

 

（許容誤差を0に設定しないと、色が明るすぎる場合、たとえばグレー-5%でグラデーションが漏れてしまいます。）

 

クリックして領域を塗りつぶすと、2本の線の値でグラデーションが作成されます。

 

他のすべての領域を塗りつぶします。

2本の線間のグラデーション量を選択するオプションもいくつかあります。

 

たとえば、[最も薄い影]は、暗い線よりも明るい線に多くの比率を与えます。

 

グラフを調整することで、値の量を調整することもできます。

すべての領域を塗りつぶすと、結果はこのようになります。

-5%のグレー以外のほとんどの部分がグレーになっているのがわかるかもしれません。

明るさを調整して白くするには、[編集 > 色調補正 > 明るさ・コントラスト]に進みます。

薄いグレーの領域が白くなります。

不要な領域を削除します。[選択範囲]サブツールの[折れ線]を選択します。

 

最も暗い領域と白い領域を横切る選択範囲を作成します。

 

そして削除します（[Ctrl+D]で選択範囲を解除）。

透明な部分にするには、[編集 > 輝度を不透明度に変換]に進みます。

ファイルを保存し、メインの描画に戻ります。自動的に表示されます。

（表示されない場合は、レイヤーを右クリックし、[ファイルオブジェクト>ファイルオブジェクトの更新]を選択します。）

レイヤーパネルのこのアイコンをクリックして（またはレイヤープロパティパネルで有効にして）レイヤーの色を変更します。

色を緑色に設定すると、レーダースイーパーの完成です！

 

オブジェクトファイルに変換すると、オブジェクトキャンバスのレイヤー境界ができます。

レーダーの中心に簡単に回転させることができます。

 

レーダー画面にオブジェクトを追加します。

 

新しいベクターレイヤーを作成し、図形サブツールの[直線]または[折れ線]でレーダー上のオブジェクトのアイコンを描画します。

 

[オブジェクト]ツールを使用して、サイズを変更し、希望の位置に移動させます。

選択したオブジェクトは[Ctrl+C]と[Ctrl+V]でコピー＆ペーストできます。

コピーされたオブジェクトは元のオブジェクトの上に配置されるので、別の位置に移動させます。

 

[オブジェクト]ツールで線の色を変更すれば完成です!!

図形ツールでインターフェースを描く：GPS

これから描く地図のクイックスケッチです。

強調表示されたエリアは、地図上の高地を表します。

 

スケッチの角をグリッド線に合わせることをお勧めします。次のステップで地図グリッドを描くのが簡単になります。

[長方形]ツールで境界線を描きます。

新しいベクターレイヤーを作成し、グリッドを描きます。

グリッドを描く方法はいくつかありますが、私が好んで使うのはこれです。

 

1. [長方形]ツールで描き、フレームの境界線よりも大きくします。

2. [折れ線]サブツールで描き、フレームの境界線を連続的に横切るように描きます。

完了したら、フレームの境界線より少し大きい選択範囲を作成します。

反転アイコンをクリックして（または[Ctrl+Shift+i]で）選択範囲を反転させ、グリッド描画の不要な領域を削除します。

 

[オブジェクト]ツールで線のサイズを調整します。

 

線を選択し、[Ctrl+X]で切り取り、別のベクターレイヤーにペーストして、分離し、不透明度を個別に調整することができます。

 

これが結果です。

数字も追加して、よりリアルに見せます。

新しいラスターレイヤーを作成し、[投げなわ塗り]ツールで地図を描きます。グリッドにスナップさせることで、クールなピクセルルックが作成されます！

 

まず強調表示された領域を描きます。

 

次に新しいレイヤーに別の領域を描き、2つのレイヤーの違いを見るためにレイヤーの[不透明度]を下げます。

オプション：画像の中央に基準点を追加しました。これで完成です！

図形ツールでインターフェースを描く：波形

音波については、[テクスチャペン]ブラシを修正して音波を作成します。

 

サブツールの詳細アイコンをクリックしてブラシを編集します。

 

設定手順は次のとおりです。

 

1. アンチエイリアスを無効にする

 

2. 間隔を[固定]モードに切り替え、間隔を広くします。

3. ブラシ先端オプションで、ブラシの太さを1000、方向を[水平]に変更します。

4. 太さのダイナミクスを[ランダム]に設定し、最小値を0にします（設定バーの後ろの小さなアイコンをクリック）。

5. 角度ダイナミクスを無効にし、角度を90に変更します。

ブラシの準備ができました。

ブラシをサブツール詳細パネルの[ブラシ形状]タブでプリセットに登録します。

新しいベクターレイヤーを作成し、[折れ線]サブツールで直線を描きます。

グリッド上に複数の制御点を作成するためにクリックします。

ダブルクリックで描画を終了します。

 

[オブジェクト]ツールで線を選択し、サブツール詳細パネルの[ブラシ形状]タブで作成したウェーブブラシを選択します。

これで非常に簡単な音波ができました。

[線修正]サブツールで、[線幅修正]ツールを[線幅拡大]オプションで使用します。

線をクリックして、波に異なる振幅を作成します。

 

正弦波の場合、ベジェ曲線ツールで描きます。

新しいラスターレイヤーを作成し、[図形]サブツールで[ベジェ曲線]を選択します。

 

クリックしてドラッグし、最初の制御点にアームを作成します。

次に波の中間点をクリックすると、曲線が作成されます。

（垂直方向の距離は6ブロックです）

 

クリックしてドラッグし、最初の曲線とミラーリングさせ、ダブルクリックして線を確定します。

 

ズームインして、開始点と終了点の両方の先端部分を消去します。

波を画像素材レイヤーに変換します。レイヤーを右クリックし、[レイヤー変換]を選択します。

画像素材レイヤーに設定します。

 

 

注意：オブジェクトに変換することもできます。後で線の太さを調整するのが簡単になります。

 

[オブジェクト]ツールでレイヤーを選択し、タイリングオプションを有効にしてリピートモードを設定します。

[縦横比を固定]を無効にすると、伸縮できます。

波を表示領域に固定するには、希望する領域に長方形の選択範囲を描画し、

次にレイヤーを右クリックし、[レイヤーマスク > 選択範囲外をマスク]を選択します。

波に境界線を描画すれば完成です!!

メイン画像に適用するには、すべてのレイヤーを1つのフォルダーに入れます。

次に、それを画像にコピー＆ペーストします。

 

レイヤーフォルダーを選択し、変形を作成します。次に、希望の位置に移動します。

画面の角度に合わせて傾けるには、モードをスキューに変更できます。

一部の線が配置されたときに細すぎる場合は、

同じ色のエッジを追加して、線を太くすることができます。

 

監視インターフェースのアニメーション化

このパートでは、簡単なアニメーション手順でパネルを魅力的にします！

 

[タイムライン]パネルで[新規タイムライン]アイコンをクリックします。

（このパネルはメニュー[ウィンドウ > タイムライン]で表示できます）

 

Clipstudio Proと互換性のあるループアニメーションの基本的な設定です。

フレームレート：8、再生時間：24

この設定をすべてのパネルに適用します。レーダーアニメーションから始めましょう。

 

用意したレーダーオブジェクトを選択し、レイヤーキーフレームを有効にします。

 

新しいキーフレームモードを[リニア補間]に設定します。

次にフレーム0と24に新しいキーフレームを作成します。

[オブジェクト]ツールに切り替え、オブジェクトをクリックします。

[回転角度]の値を-360に設定します。

 

その後、ループ間のギャップをなくすためにキーフレームを少し後ろにドラッグします。

 

これでレーダーが動きます!!

オプション：見た目をより魅力的にするために、レーダー上のオブジェクトがスイープされるときに、成長するエフェクトを追加することもできます。

このエフェクトを作成するには、レーダースイープと同じようにグラデーション円を作成しますが、暗い領域を大きくします。

次にぼかし効果を適用します。

それをオブジェクトファイルまたは画像素材レイヤーに変換し、アクティブな色を緑、非アクティブな色をより暗い緑に設定します。

シンボルレイヤーから選択範囲を作成します。右クリックして[レイヤーからの選択範囲 > 選択範囲を作成]を選択します。

次に選択範囲外をマスクします。

マスク付きのアニメーションオブジェクトの場合、レイヤーサムネイルをクリックして、マスクではなくレイヤーがアクティブになっていることを確認する必要があります。

その後、レーダースイープのアニメーション手順（同じ値で）を繰り返して、一緒に動くようにします。

GPSマップの場合、画像の中心に向かって縮小する円としてフォーカスアニメーションを配置します。

画像の中央に円を描き、画像素材レイヤーに変換し、レイヤーキーフレームを有効にします。

最初のキーフレームで、フレームよりも大きくなるまでサイズを拡大します。

そして最後のキーフレームで、中心点までサイズを縮小します。

次にレイヤーマスクでフレームに合わせます。

 

地図領域に長方形の選択範囲を作成します。

 

レイヤーキーフレームを無効にし、選択範囲外をマスクします。

レイヤーキーフレームを再度有効にすれば完成です！

音波アニメーションの場合、フレームバイフレーム方式を使用します。

新しいアニメーションフォルダーを作成します。

作成した波形をアニメーションフォルダーに入れます。

次にタイムラインを右クリックし、フレームに表示されるように設定します。

 

[線修正]サブツールの[線幅修正]ツールを使用して線をリセットします。

[幅を固定]モードと[線全体を処理]を使用します。

 

レイヤーの名前を「01」に変更し、レイヤーをコピーすると、自動的に「02」と名付けられます。

 

タイムラインに表示されるように設定します。

 

[線幅拡大]モードを使用し、[線全体を処理]オプションを無効にして線を調整します。

別のキーフレームでも手順を繰り返せば完成です！

正弦波の場合、波形が繰り返されるパターンを確認する必要があります。

アニメーション化するには、レイヤーキーフレームを有効にし、開始キーフレームと終了キーフレームを追加するだけです。

次に最後のキーフレームで、オブジェクトをその繰り返し位置に移動させます。

注意：移動時に[Shift]キーを押すと、元の位置から水平方向に揃えて移動させることができます。

アニメーションインターフェースを作品に適用する

すべてをまとめる前に、インターフェースファイルのキャンバスをトリミングし、用紙レイヤーを削除する必要があります。

 

画像を簡単にトリミングするには、長方形ツールで描画領域全体をカバーするように選択範囲を作成し、[編集>トリミング]を選択します。

 

用紙レイヤーを削除すれば準備完了です。

メインファイルで、表示ファイルと同じ設定（8フレーム/秒 / 24フレーム再生時間）で新しいタイムラインを作成します。

 

次に、表示をファイルオブジェクトとしてインポートします。[ファイル>読み込み>ファイルオブジェクトの作成]に進みます。

 

[オブジェクト]ツールでモードを[スキュー]に設定することで、その角度を調整できます。

適切な結果を得るためにレイヤーをマスクまたは再配置すれば、完成です!!

ディスプレイのホログラム風の外観については、ホログラム効果を作成する方法に関する以前のチュートリアルをご覧ください :

あなたの作品に何かアイデアが得られたら嬉しいです!! 図形ツールは楽しいです！ぜひ試してみてください <3

 

安全に過ごし、描画/アニメーションを楽しんでください!!