印刷およびゲーム開発用のグラフィックスを作成するための完全なワークフローとプロセスの内訳。

 

ベクターアートとは？いつ使用するのですか？

今日は、Clip Studio Paint で線、色、シェーディングを使用してベクター アートを作成する方法を紹介します。このワークフローは、ゲーム開発や印刷イラストレーション作業 (ロゴ、デカール、ステッカー) で使用できます。

品質を落とさずにアートを拡大または縮小する必要がある場合は、ベクター アートが最適です。

 

まず、このようなプロジェクトでベクター アートが重要な理由を視覚的に証明しましょう。

以下のグラフィックがモバイル ゲームのアセットであるとしましょう。現在のモバイル画面の解像度 (1920x1080) 向けのゲームをターゲットにしていたので、幅 300 ピクセルの画像で十分に見えます。

 

下の画像で、左側のグラフィックはビットマップです。

ビットマップは、グリッド上にポイント/ピクセルを配置して作成された画像です。グリッドが大きいほど、解像度が高くなり、詳細を描画できます。

 

右側のグラフィックはベクトルです。これは、数式によって画面上に線と形状が描かれた画像です。サイズを変更するには、新しい計算を行う必要があります。

// 画面に表示される結果は常にビットマップですが、作成方法はさまざまです。

 

ゲームがリリースされてから 1 年後、クライアントはゲームをホーム プラットフォームに移植することを決定し、ターゲットの解像度を 4K に上げました。

 

元のアセットがビットマップ モードであるため、CHANGE IMAGE RESOLUTION オプションを使用してグラフィックをアップスケール (解像度を上げる) ことはできません。

元のアセットがベクター モードの場合、品質を損なうことなく画像をアップスケールできます。 （以下の比較を参照）

 

// 左: 元のサイズの 10 倍に拡大されたビットマップ画像。右: ベクトル画像も 10 倍に拡大。ベクトルが元の品質 (シャープな線と形状) をどのように維持しているかを見てください。

逆も真です。クライアントが小さな画面でゲームを実行する必要があるとしましょう。以下の例で、元のアセットがビットマップ/ラスターの場合、縮小されたグラフィックが機能しないことを確認してください。

//左: ゲームでは使用できません。右: グラフィックはまだかなり読みやすい。

最も重要なこと: ベクターレイヤー

これからは、1 つのことを覚えておく必要があります。アートをベクターとして作成するには、ベクター レイヤーで作業する必要があります。

//レイヤー パレット メニューまたは CTRL+ALT+N ショートカットを使用してベクター レイヤーを作成します。

ベクター レイヤーでは、任意のブラシ、シェイプ、またはライン ツールを使用できます。

不透明度/透明度のあるテクスチャ ブラシでさえ、ベクター レイヤーに描画するために使用できます。

//これは、ベクター レイヤーに描画されるさまざまなテクスチャ ブラシの例です。エアブラシのぼやけさえもがベクター レイヤー上で維持される様子をご覧ください。

ベクターレイヤーの主な用途は、ラインワークを作成することです

ベクター ラインは、操作、編集、微調整できます。アニメ (アニメーション) プロダクションでは、アーティストがフレーム間の線の一貫性 (太さと幅) を維持するためのツールを持っているため、通常はベクター線が好まれます。

 

ベクターレイヤーに線を描くには、ペン、鉛筆、またはブラシツールを使用できます。

それでも、適切な Lines and Curve サブツールを使用して Linework を作成することをお勧めします。

//2 つの異なるツールで描かれた同様の S 線。しかし、その背後には重要な違いがあります…

線は明らかに同じですが、Curve サブツールを使用して線を作成するときに使用されるコントロール ポイントがどれだけ少ないかを見てください。

//左: ブラシ ストロークで描画された線は、簡単な編集と操作を保証するにはあまりにも多くのポイントを生成します。これは、ベクトル モードで作業する利点の 1 つです。

ベクターラインアートを作成するための私のお気に入りのツール

FIGURE カテゴリのサブツール、直線、曲線、ポリライン、連続曲線に慣れることをお勧めします。

 

また、直線、スパイン、2 次ベジェ、3 次ベジェなど、さまざまな曲線作成方法を試してみてください。

 

このプロジェクトでは、最も汎用性が高く高速なサブツールであると私が考えるもの、つまり CUBIC BEZIER 描画方法を使用する CURVE サブツールを紹介します。

 

//曲線サブツールを使用して線を描画するには:

A. 始点をクリックし、終点でホールド、ドラッグ、リリースします。

B. 最初の制御点を配置して曲線を形成します。

C. 2 番目のコントロール ポイントを配置して、放物線を作成します。

D. 離すとラインが配置されます。

ラインはさまざまな方法で操作および編集できます。

ALT キーを押しながら曲線を左クリックすると、ベジェ ハンドルが表示されます (曲線の形状を変更できます)。 ALT + 右クリックを押したままにすると、いくつかのオプションを含むコンテキスト メニューが表示されます。

//図形カテゴリの異なるサブツールは、線の編集を有効にするために異なる修飾キー設定を持つことができることを思い出してください。 CSP でベクトルを操作および編集するための一般的なツールは、OPERATION カテゴリの OBJECT サブツールです。

ベクトル ラインの作成に使用するサブツールでは、必ず VECTOR MAGNET オプションをオンにしてください。このオプションは「スナップ」し、2 つの異なるラインのコントロール ポイントを 1 つのライン セグメントに結合します。

//左: ベクトル マグネット オン、線全体がセグメント/オブジェクトです。右: ベクトル マグネットがオフで、2 つの異なるオブジェクトがあります。

最後になりましたが、消しゴム ツールには VECTOR ERASER オプションがあります。

この時間を節約する機能を利用したい場合は、これをオンにします。

//Eraser に対して Vector Eraser がオンになっている場合、ベクトルの重なっている線のみを消去できます。例を見てください。重なり合った線を消して髪の形を描く方が簡単でした。

最後に、ベクター アートを作成しましょう。

このプロジェクトでは、次のコンセプトでゲーム キャラクター イラストを作成します。

アマゾンの森の動物の力を高めるために使用される神話上の装置である神のポーンを発見した若い生物学者。

 

その結果、ゲーム デザイン ドキュメントやさまざまなマーケティング資料 (プリント、ステッカー、Web、またはフルサイズのトーテンの 1 つ) で使用できるピンナップになります。

 

//キャラクターの元のアイデア。アマゾンのインディアンをイメージしたキャラクターデザイン。

クールで明確なシルエットのポーズにしたかったので、フィギュアのおおよその縮みを見つけやすくするために、CSP のマネキン ツールを利用しました。

これらは便利なツールであり、使用する必要があります。

 

// ポーズの最初のスケッチと最終的なスケッチ - マネキンをトレースするだけではないことが重要です。常にジェスチャーとアクションをさらに押してください。

これが、ベクター アートの作成に使用する最終的な図面です。

最終的なスケッチをデフォルトの A4/350dpi ファイルにインポートし、スケッチ レイヤーをロックして、前に紹介した曲線ツールを使用してトレースを開始しました。

 

//ベクター アートの作成中に高解像度ファイルで作業する必要はありません。これがこのワークフローの利点です。ただし、適切な解像度 (低すぎず、大きすぎない) で元のグラフィックを作成することをお勧めします。おそらく、画面サイズの 2 倍のサイズです。

ラインワーク プロセスの高速化 (3 倍) ビデオに続いて...

行の最終バージョンは次のとおりです。

プロに見えるように線画を微調整する

ペンやブラシで作成したように、線の太さを変えて描画したいと思います。

 

このような効果は、CORRECT LINE ツール カテゴリのサブツール CORRECT LINE WIDTH を使用して実現できます。

 

このサブツールには、線を調整するためのさまざまな機能があります。私が使用するのはTHIN WIDTHです。このオプションは、線を徐々に細く (または太く) します。影響を与えたい線の上にペイントするだけです。

 

最初は、[PROCESS WHOLE LINE] オプションをオンのままにして、線セグメント全体を細くします。

//Correct Line カテゴリのサブツールを使用すると、描画後に線画を変更、微調整、編集できます。

私は一般的に内側の線を細くします。例では、頭、襟、ズボンの内側の線を外側の輪郭よりも細くしたことに注目してください。

// 緑色の部分は、線幅補正ツールが機能するように影響をペイントした領域です。塗り重ねるほど線が薄くなっていきます。

線の最終的な詳細は、オプション CORRECT LINE WIDTH が選択された CONTROL POINT サブツールを使用して作成されます。

このツールを使用すると、実際のブラシ マークの効果のように、線の末尾をクリック アンド ドラッグして細くすることができます。

//描画全体を処理し、いくつかの線の末尾を細くして、感圧ブラシによって作成されたマークをシミュレートします。

線画の前後です。変更と微調整により、図面が読みやすくなり、生き生きとしたものになった様子をご覧ください。

 

重要: このプロセスでは、Clip Studio Paint で A MOUSE を使用して描画する方法も示します。これらのツールはいずれも、感圧スタイラスを使用する必要はありません。

 

//ラインの細い端と力強く大胆なシルエットは、「90 年代のカートゥーン ルック」を実現するための古典的な組み合わせです。

 

色はどうですか？

これで、ベクター アートに色を付ける準備が整いました…

それから...

 

「ベクター レイヤーに色を付けられないのはなぜですか?」

 

はい。それは正しい。ラスター ベースのレイヤーのようにベクター レイヤーに色を付けることはできません。

 

このプロジェクトでは、色は他の種類のソフトウェアで作成されているため、CSP のベクター ツールは主にアニメ制作の線画ステージ用に作成されたのではないかと思います。

 

あなたが持っているかもしれない最初のアイデアは、ベクターレイヤーで線を維持し、ラスターレイヤーで色をすることです...

 

//ベクトル線とラスター カラーを使用した画像です。最初は、CSP 内のベクトルで色を付けるためのツールがないため、問題のない解決策です。

ただし、前述のように、ラスター レイヤーはピクセル解像度に基づいています。画像の解像度を上げたり下げたりするとすぐに、アーティファクトが発生します (線がぼやけたり、色の形の周りに白い縁ができたりするなど)。

//シャープな線とぼやけた色は、適切なベクター アートとは思えません。

あなたが本当に望むのは、色とシェーディングでもベクターレイヤーとツールを利用することです.

以下の例を参照してください。両方のバージョン (縮小および拡大) で、両方 (線と色) が鮮明で鮮明です。

 

次の手順では、CSP でこの機能を使用するための回避策を示します。

 

//これらの鋭いエッジを見てください。良い！

新しい「塗りつぶし」ベクター ツールの作成

ベクター モードで図面に色を塗りつぶすツールを作成する手順を紹介します。これは、CSP でコミック本のバロン ツールを試した後に見つけた解決策です。

 

まず、新しいサブツールを作成することから始めましょう。ここでは FILL カテゴリ (ペイント バケツ アイコン) に追加しますが、任意のツールセットに追加できます。

 

サブツール パネルの [プロパティ] アイコンをクリックし、[カスタム サブツールの作成] を選択します。

 

新しいツールに名前を付け (例: ベクター カラーを塗りつぶす)、[出力プロセス] で [バルーンの作成] を選択します。 INPUT PROCESS で、CONTINUOUS CURVE を選択します。 [OK] をクリックして確認します。

 

// カスタム サブツールを作成するには、注意して次の手順に従います。

次に、新しく作成したサブツール (レンチ アイコン) の構成ウィンドウを開き、これらのオプションを調整します。LINE/FILL は SOLID を選択します。 HOW TO ADD で目のアイコン オプションを有効にし、最後に CURVE で SPLINE 作成方法を選択します。

//画像をガイドとして使用して、サブツールを構成します。

終わり！ベクトル モードで単色の領域を塗りつぶすことができるツールを作成しました。

新しいツールで遊んでみてください。ポイントしなければならないシェイプを作成するには、クリック アンド ドラッグしてコントロール ポイントを配置し、カーブを調整します。

 

キーボードで ALT を押したままにすると、次のポイントがハード コーナーになり、下の黄色の多角形のような形状を作成するのに役立ちます。

//Celsys は次のバージョンでこのツールをデフォルトとして追加できるのだろうか... ;)

新しいツールの使い方

図面の色付けを開始するワークフローは次のとおりです。

 

1. 線の不透明度を下げて、線の下に色の形を描くことができるようにします。

2. 色の形状を閉じるとすぐに、レイヤーがレイヤー スタックの一番上に自動的に送信されることに気付くでしょう。線画の下に移動します。

//線画の曲線を描くときと同様に、制御点が少ないほど、後で形状を操作しやすくなります。心に留めておきます。

Fill/Shapes を編集するには、CTRL を押したまま OPERATION - OBJECT ツールをアクティブにします。

右クリックすると、コーナーのタイプを追加、削除、または変更できるメニューも表示されます。

// Vector の他のサブツールと同様に、Operation-Object モードは、形状の選択、変更、および編集に使用するツールです。

OPERATION - OBJECT ツールで形状を選択し、プロパティの FILL COLOR を変更すると、形状の色をいつでも変更できます。

以下の例のように、各シェイプを独自のレイヤーに保持することをお勧めします。

 

重要: カスタム ベクター カラー ツールに [選択したレイヤーに追加] オプションが設定されていることを確認してください。設定されていない場合、描画する新しい形状はそれぞれ新しいレイヤーに追加されます。

//ヒント: レイヤー マスクはラスター/ピクセル ベースですが、クリッピング マスクを使用してシェイプ内にシェイプを作成できます。

これが私のキャラクターの最終的な色です。

//多くのレイヤーだけでなく、多くのコントロール。必要に応じて、バロン レイヤー (それらのみ) を 1 つにマージできますが、後で調整のために各パーツを選択するのが少し難しくなります。あなたに最適なものを選択します。

ベクトル図の詳細

フラット カラーリングが完了したら、ゴールデン ガントレットにシェーディング レイヤーとリフレクションを使用してディテールを追加します。

 

シェーディングは、同じカスタム ベクトル サブツールで行われました。

レイヤーのブレンディングモードをハードライトに設定し、レイヤーの不透明度を下げて、微妙な影になるように、彩度の低い紫を影の色として使用するのが好きです。

 

ハイライトと反射は、それぞれ独自のレイヤーにペイントされます。

//左: 影と反射のみ。右: ローカル カラーと組み合わせたレイヤー。

 

光と影の間のエッジを変化させて、シェーディング フォームでよりリアルにすることができます。一部をハードに、他をソフトにします。

 

カラーとシェーディング レイヤーの上に新しいベクター レイヤーを作成し、エアブラシ ツールを使用して光と影の遷移を「ペイント」しました。

他の種類のブラシを使って、イラストに異なる仕上げを加えることができます (たとえば、絵画のような外観のテクスチャ ブラシ)。

//左: すべてのエッジがハードです。機能しますが、画像にセル シェーディングの外観を与えます。右: フォームの丸みを表すエッジは、キャスト シャドウによって作成されるエッジよりもソフトです。

注意: CORRECT LINE カテゴリの SIMPLIFY VECTOR LINE サブツールを使用して、ベクター ベースのブラシストロークを管理しやすくすることができます。

// Simplify Vector Line サブツールを適用した場合 (左) と適用しない場合 (右) の線の前の比較。

CONTENT OF PROCESS: CORRECT LINE WIDTH に設定された CONTROL POINT サブツールを使用すると、個々のポイントの不透明度をクリック、ドラッグ、調整することができます。

ソフトなグラデーションを作成するのに最適なツールです。

// コントロール ポイント サブツールのその他の機能を調べてみましょう。さまざまな方法でベクター線を微調整できます。

背景要素は、ベクター レイヤー内のシェイプの組み合わせによって作成されました。これらはすべて、これまでに紹介したツールを使用しています。バースト エフェクトを作成するために、コミック本で使用される FLASH サブツールを使用しました。

 

グラデーションは、オプション DRAWING TARGET: CREATE GRADIENT LAYER が選択された GRADIENT TOOL を使用して作成されました。これにより、グラデーションが編集可能、つまり「ベクターデータ」のままになります。

//クリエイティブになり、ベクトル化できる CSP の要素を試してみてください。たとえば、BRUSH PATTERNS、TEXTS などです。

終わり！イラストはこれで完成です。

最終テスト

ワークフローの効率を証明するために、イラストのサイズをさまざまなサイズに変更しました。

 

最初のテストでは、解像度を高さ 800 ピクセルに下げました。

2回目のテストでは、高さ300cmというとてつもない解像度に上げます！ （約35Kピクセル）。

 

私の古いコンピューターでは簡単な作業ではありませんでしたが (操作を実行するのに約 2 分かかりました)、待機後、キャンバスを正常に操作できるようになりました。

 

そして、これを成功と見なすことができると思います!

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

 

この記事と、Clip Studio Paint でのベクター ワークフローのデモンストレーションが、ある時点で役立つことを願っています。

 

このチュートリアルでアートを作成する場合は、ソーシャル メディアでお知らせください。

 

次回まで。

 

 

 

.CLIP ソース ファイルをダウンロードします。

ソーシャルメディアで私をフォローしてください：

• @dadotronic (ツイッター)

-@dado.tronic (インスタグラム)