皆さんこんにちは！このチュートリアルでは、Clip Studio Paint Ex の特別な機能を使用して、ステージ デザインとビデオ ゲームのアートに焦点を当てた簡単な方法でアイソメ アートを作成する方法を説明しますが、この手法はデザインやイラストにも適用できます。 .

● 私はこの分野の専門家ではないので、実験を続けてきました。私にとって有効だった方法とテクニックを皆さんと共有したいと思います。お役に立てれば幸いです

 

■注意事項：CLIP STUDIO PAINT EXを使用しています。他のバージョンでは一部機能が使えない場合があります。

 

これから習う技法で描いた作例です▼

 

1. はじめに |等角図または投影

■ 異なるタイプのパースペクティブの違いを見てみましょう。

 

• 2 点透視: 遠近法でオブジェクトを観察すると、消失点に向かって遠ざかるにつれてオブジェクトが小さくなっていることに気付くことができます。このようにして、人間の目は認識します。

 

• アイソメトリック パースペクティブ: 従来のパースペクティブとは異なり、アイソメトリック パースペクティブは軸測投影の一種です。常に 3 つの側面が表示され、それらの測定スケールは同じです。 「カメラ」の位置に関係なく、オブジェクトは小さくも大きくも見えません。側面は垂直軸と 30 ° の角度を成します。

このタイプの投影の利点は、初心者でも簡単に遠近法を構築できることですが、オブジェクトの奥行きと高さを知覚する問題が発生する可能性があることを考慮する必要があります。

 

• 2:1 パースペクティブ: ビデオ ゲームやデザインで広く使用されている別のタイプの軸側投象。この場合、2 つの辺は約 26.6 ° の同じ角度になります。

アイソメ図と比較すると、オブジェクトはあまり目立たない上面図で表示されるため、目には少し自然な方法で認識されます。

 

 

2:1 のパースペクティブは、ビデオ ゲームのピクセル アートで使用されることで一般的になり、角度によりアイソメ ビューと比較してきれいな直線を生成できます。

 

■ 注: 最適な投影法は、探しているスタイルによって異なります。戦略ゲームや建築デザインでは、アイソメ図法が非常に便利です。デザインとピクセル アートでは、2:1 を使用できます。

個人的には、2:1 の視点で提供されるビューの方が楽しいと思いますが、各プロジェクトのニーズや個人的な好みに応じて正しく選択して実験するのが最善です。別の角度を探索して異なる視点を取得することもできます。

2. 最初の方法: 変換

• クリップ スタジオの変換ツールを使用して、等角投影を作成します。

 

■[1]例では四角を使っています。まず、[編集] > [変形] > [スケール/回転] に移動するか、キーボード ショートカットの CTRL + T を使用します。

■ [2] ハンドルまたは [ツール プロパティ] パレットを使用してレイヤーを 45° 回転させ、OK または Enter キーを押して変形を確認します。

■ [3] 再度変換を適用します。

• [3.1] [Maintain Ratio] を無効にしました

• [3.2] 遠近感を実現するために高さを変更します。等角投影では60がよく使用されますが、個人的には58が30°の角度を達成するための最良の結果をもたらします。

OK または Enter キーを押して変換を確認すると、ベースとして使用できるタイルができました。

▼ この方法でボリュームを作成するには?

 

■ [4] ファンデーションを使って簡単にボリュームを出すことができます。まず、移動ツール (ショートカット V) を使用してレイヤーを複製します。Alt キーを押しながら複製し、Shift キーを押して垂直に移動します。オブジェクトの高さを定義するために、少し高く配置します。

■ 注: ショートカット CTRL + J または [レイヤー] > [レイヤーの複製] のドロップダウン メニューを使用して複製することもできます。

 

■[5]一番好きな線ツールを使って、縦軸の点を結んでボリュームを作っていきます。

• [5.1] シェイプ ツールでは、15 ° の角度ステップを使用して、30 ° の垂直線と側面の両方を作成できます。

■ 注: この例では、側面も接続し、塗りつぶしに役立つように最上層を参照として設定しました。この手順はオプションです。

■ [6] 下のレイヤーのペイント ポットを使用して側面を塗りつぶし、ショートカット CTRL + E を使用してレイヤーを結合します。

• これらの簡単な手順で、オブジェクトのベースの準備ができました。これで、これを使用して、想像するオブジェクトを作成できます。

 

▼ ベースを使用して異なる素材を作成する

 

■ [7] ベースの形状に従って、アイソメトリック パースペクティブでさまざまなマテリアルを作成できます。

必要に応じて、同じレイヤーで作業することも、新しいレイヤーを作成することもできます。

 

プロセスはそれぞれに依存しますが、私の場合は、素材のテクスチャや亀裂などの詳細をスケッチします。オブジェクトをより有機的に見せるために、エッジを分割しようとしています。 ▼

仕上げは、お気に入りのブラシでマテリアルをペイントするだけです。

光の方向を考慮して、視点でベースから面白い形を生成しようとしています。

 

詳細のレベルは、それぞれのニーズとスタイルによって異なります。いろいろな素材を想像して実験するのはとても楽しいです。

 

■ タイルから始めてボリュームを与え、次に等角投影で有機材料を定義します。

 

• この簡単な例で、この方法が持つ表現力の可能性についてお分かりいただけたと思います。

2.1 |自動アクション

■ これらの反復的なアクションを退屈なものにするために、一連の自動アクションを準備します。

 

それらは、チュートリアルのために準備する他のツールと一緒に、CLIP STUDIO アセットにダウンロードできます。 ▼

 

■ [1] 自動アクションパネルが表示されない場合は、メニュー [ウィンドウ] > [自動アクション] からアクティブ化できます。

 

• [1.1] 次に、マテリアル パネルからドラッグしてアクションを読み込みます。

■ [2] 株式は2つの部分に分けられます。

• [2.1] アイソメトリック 30° (ベース、フロント、サイド)

• [2.2] Dimetric 2: 1 (幅 141、高さ 71 のスケールを使用)

■[3]アイソメトリック30°の3アクションで簡単に立方体が作れます。残念ながら、2:1 の視点の側面を定義できませんでした。 ▼

 

•アイソメ2：1アクションは、2：1パースペクティブの基礎を作成するのに役立ちます▼

■ 注: 変換オプションに小数点以下の桁数とゆがみがないため、形状は完全ではありません。それらはまだ時間を節約するのに役立ち、その後、ベースを洗練することができます。

■ [4] ヒント: 自動アクションにキーボード ショートカットを割り当てることができます。これにより、さらに効率的になり、ワークフローを最適化できます。

 

[ファイル] [ショートカット設定 (H)] またはショートカット CTRL + ALT + SHIFT + K

• [4.1] ドロップダウン メニューから [自動アクション] を選択します。

• [4.2] アイソメ アクションのセットを選択し、ショートカットを割り当てたいアクションを選択して、ショートカットの編集を押します。

• [4.3] ショートカットを追加して確認します。

 

 

•これで、キーボードショートカットを押してアクションを適用できます。非常に便利で効果的です。 ：D

3. 2 番目の方法: 特別なルール

洞察を生み出すもう 1 つの方法は、特別な CSP ルールを使用することです。

2つの異なるテクニックを紹介します。

■[1]最初の技は【平行線】という特殊ルールを使う

 

• [1.1] 角度ステップを 30 に設定して 30 ° の等角投影を定義し、編集レイヤーで作成をアクティブにします。

 

•[1.2] Shiftキーを押しながら、右に30度の定規を作成します

• [1.3] 次に、左側にもう 1 つ作成して、反対側を定義します。

 

• [1.4] 最後に垂直定規を作成します

• [1.5] レイヤーパネルで、すべてのレイヤーで見えるようにルーラーを設定します。

■ [2] ルールを定義したので、正しい角度を描くことができます。

 

• [2.1] アクティブなルールは紫色のルールです。コマンド バーのボタンまたはキーボード ショートカットの CTRL + 4 を使用して、各ルール間を回転できます。

 

• [2.2] コマンド バーのボタンまたはキーボード ショートカット CTRL + 2 を使用して、ルールの使用を有効または無効にすることができます。たとえば、ルールを非アクティブ化して、有機的な詳細を追加します。

■ [3] ヒント: ベクター レイヤーを利用してオブジェクトを構築できます。

• [3.1] 線が交差することを気にせずに線を引きます

• [3.2] ベクター消しゴムを使用して、余分な線を削除します。

■ 注: この方法は、おそらく 30° アイソメ図を作成するのに最も正確ですが、個人的には直感的でも効率的でもありません。

 

この問題を解決するために、いくつかの透視ルールとグリッドを準備します。アセットで共有したツールでそれらを見つけることができます ▼

■ [4] ルーラーとグリッドを使用するには、マテリアル パネルからキャンバスにドラッグするだけです。

 

• [4.1] オブジェクト | を使用して、グリッドを好みのサイズに調整します。操作。

•[4.2]遠近法定規を利用して、より直感的に描画します。

• [4.3] 前に行ったように、ショートカット CTRL + 2 を使用して定規の使用を有効/無効にすることができます。このようにして、必要なときに角度に制限されることなく描画できます。

• [4.4] 2:1 ルールを使用すると、30° アイソメ図と同じ方法でこの遠近法を作成できます。

• ルールがお役に立てば幸いです。それらを自動アクションと組み合わせてデザインを作成します。しかし、最初に、ビデオ ゲーム用のマップの作成について話しましょう。 ▼

4. タイルセットタイルマップ

ビデオ ゲームでシナリオを作成するための非常に用途が広く一般的な手法は、タイルセットとタイルマップの使用です。

 

■ タイルセットとは？

 

• タイルセットは、「タイルマップ」を形成するグリッドでマップを作成するために使用できる一連のタイルまたは「タイル」です。これらはマップを作成する効率的な方法であり、通常は Godot や Unity などのさまざまなゲーム エンジンで使用されます。 .

 

• それらは通常、正方形のフォーマットで作成され、通常は互いにパターンを形成し、モジュラー システムを確立します。

▼ タイルセットで動作するようにファイルを構成する方法と、アイソメ シーナリーを作成するための興味深いテクニックを紹介します。

■ ファイルの準備:

 

• [1] [ファイル] > [新規] を選択して、Tileset という名前のベース キャンバスを作成します。

 

• [1.1] サイズはさまざまですが、一般的には正方形のフォーマットの方が作業しやすいです。私の場合は 512x512px

サイズは異なる場合がありますが、一般的には正方形のフォーマットで作業する方が簡単です。私の場合は 512x512px

 

• [1.2] 重要: [動くイラストの作成] をアクティブにして、いくつかのフレームを定義します。このステップは、私が開発したシステムにとって重要です。

 

各フレームはタイルを表します。最初は 12 が適切な数ですが、必要に応じて追加できます。

■[2]当ファイルには既に12セルのアニメーションフォルダが用意されています

• [2.1] フレームを表示するには、[ウィンドウ] > [タイムライン (X)] に移動します。

• [2.2] 前のメニューで構成したように、時間を節約し、フレームごとに 1 つのセルが既に割り当てられています: D

 

■[3]タイルごとに複数のレイヤーを操作するには、右クリックして[フォルダーを作成してレイヤーを挿入（F）]するか、ショートカットCTRL + Gを使用します。

• [3.1] セルごとにフォルダを定義します

■[4]メニュー[表示]> [ルーラー/グリッド（N）設定...]からガイドグリッドを定義します。

• [4.1] 定規 / グリッドの原点: 中心

• [4.2] キャンバスのサイズに等しい間隔、この場合は 512px。 4分割

■ [5] 最後に、アクセスしやすい場所にファイルを保存します。

次に、タイルをペイントします。モチーフが正しく繰り返されることを確認するために、参照ファイルを作成できます。

■ [6] 最初のフレームをペイントして、ファイルをセットアップします。

• [6.1] 新しいファイルを作成します。サイズを定義するために、9 タイルのグリッドを作成します。したがって、ベース ファイルのサイズに 3 を掛けます。この場合、512 x 3 = 1536

• [6.2] メニュー [ファイル] > [インポート] > [ファイル オブジェクトの作成] からタイルセット ファイルをファイル オブジェクトとしてインポートします。

• [6.3] 操作で |オブジェクト、ツール プロパティ サブメニューから理由を設定します。

 

• [6.4] 参照できるようにウィンドウを設定します。元のタイルセット ファイルに加えた変更は、保存時にこのレイヤーに反映されます。

■ [7] 例として、最初のタイルのバリアントを作成します。レイヤーを複製し、2番目のフレームまたはセルに対応するフォルダー「2」に配置します。

 

• [7.1] CTRL + U ショートカットで、色相/彩度/明度補正を使用し、色相を変更してカラー バリアントを作成します。これは、アートを活用して時間を節約するためにビデオ ゲームで広く使用されている手法です。

• [7.2] 準備したこのシステムの私のお気に入りの部分: ツール プロパティ サブメニューでは、ファイル オブジェクトから表示される特定のフレームを選択できます。

 

このように 0 から 1 に変更すると、TILE 1 から 2 になります。

 

▼ この方法を使用して、単一のファイルで作成されたタイルを使用してマップを作成します。個人的には、CLIP STUDIO PAINTのこの機能を使用するのは非常に興味深くクリエイティブな方法だと思います:D

4.1 ヒント |動機またはパターン

■ 私は繰り返しのパターンやモチーフを作成する専門家ではありませんが、ペイントするときに役立つと思われる 2 つの方法を共有したいと思います。

■ 注: 2020 年 3 月の今月の TIPS のトピックの 1 つは、動機とパターンでした。必要に応じて、コミュニティの他の作成者が作成した素晴らしいチュートリアルを確認できます。ここで、私のお気に入りをいくつか共有します。 ▼

■ [1] 「LAVA」タイルを作成します。最初のステップは、必要なテクスチャをペイントすることです.それでも、モチーフにすることは心配ありません. ▼

• お気に入りのブラシを使用します。

■ 注: 1 つのオプションは、最初にテクスチャをスケッチし、それをパターンに変換してから微調整することですが、ここでは時間を節約するためにタイルをカラーにすることにしました。

■[2]先ほど用意したグリッドを4分割で発動。

• [2.1] [グリッドにスナップ] (ショートカット CTRL + 3) をアクティブにし、長方形の選択ツール (ショートカット M) を使用して、1 つのコーナーから中心まで選択します。

• [2.2] 選択がアクティブな状態で、CTRL + C および CTRL + V を使用して、新しいレイヤーにコピーして貼り付けます。

• [2.3] 他の 3 つのコーナーで繰り返し、「タイル」を 4 つの部分に分割しました。

■ [3] レイヤー移動ツール（ショートカット V）で 四分の一ごとに反対側のコーナーに移動します。

SHIFTを押したままにして対角線を維持できます。画像を隅に配置したら、キーボードの矢印を使用して、正しいピクセルに配置されていることを確認します。

 

•[3.1]他の3つの部分で繰り返します。

• [3.2] CTRL + E を使用して、レイヤーを 1 つに結合します。

前後 ▼ 今度は中央の継ぎ目を修正してテクスチャーを完成させます。

■[4]中央の縫い目を修正する塗装を開始します。必要に応じて、同じレイヤーで作業することも、新しいレイヤーを作成することもできます。

 

• [4.1] リファレンス ファイルでは、操作/オブジェクト ツールとツール プロパティ パレットを使用して、TILE に対応するフレームを構成します。

• [4.2] テクスチャを確認するためのリファレンスを使用して、満足のいく結果が得られるまでペイントとリファインを続けます。

■注：参照キャンバス上のファイルオブジェクトを更新するためにテクスチャに変更を加えるときは、ファイルを保存することを忘れないでください（ショートカットCTRL + S）。 (「タイルセットチェック」)

■ [5] CLIP STUDIO アセットでは、優れたパターンやモチーフを見つけることができます。それらを使用するには、マテリアル パレットからキャンバスにドラッグするだけです。

 

• [5.1] 正しく構成するには、オブジェクト ツールを使用し、[ツール プロパティ] パレットで [位置の調整] を [キャンバス] に構成します。

このようにして、モチーフはキャンバスの端にぴったりです。

 

■ 注: 理想的には、アセット マテリアルをベースとして使用してタイルを作成し、独自のスタイルでペイントして一貫したビジュアル システムを生成するのが理想的です。良い結果を得るために、誰もがさまざまなテクニックを自由に検討できます。

▼ タイルの例。それぞれのフレームに 1 つずつあります。

 

▼ 例で使用したいくつかの材料。

4.2 ヒント |タイルセットを使用したマップの作成

前のセクションで作成したタイルセットを使用して、マップまたはシナリオを動的に作成するいくつかのテクニックを紹介します。

■[1]新しいキャンバス（この場合は1920x1080px）を作成します

• [1.1] パースペクティブを定義するために、2:1 グリッドと定規マテリアルを使用します。

• [1.2] メニュー [ファイル] > [インポート] > [ファイル オブジェクトの作成] からタイルセットをファイル オブジェクトとしてインポートし、ファイル「タイルセット」を選択します。

 

■ [2] 「タイル」を遠近法で定義するために、自動アクション「アイソメトリック 2:1」を使用します

コントロールを使用してタイルの位置を変更し、拡大縮小します ▼

• [2.1] ツール プロパティ パレットのフレームを変更して、正しいタイルを選択します。

• [2.2] Motif をアクティブにして、繰り返しパターンに変換します。このようにして、シーンの床を定義します。

• [2.3] 他の要素を作成するには、ファイル オブジェクトを複製し、フレームを変更して別のタイルを選択します。

• [2.4] Reason オプションでは、繰り返しの方法を選択できます。水平または垂直を選択すると、2 つの方向のいずれかで 1 行のタイルのみが作成されます。この場合、Water Tile で一種の川を定義します。

• [2.5] もう一度複製して、今度はモチーフの向きを変えます。

次に、フレームを変更してタイルを定義します。

■ [3] マップはまだ平らに見えますが、深みを与えてみましょう。

定規と手動でペイントを使用して、簡単に寸法を作成できます。

まず、ブロックの下にレイヤーを作成します。

 

• [3.1] アクティブな定規と一番好きなブラシで、タイルの側面をペイントします。

• [3.2] ヒント: タイルのバリアントを作成する場合、レイヤー マスクを使用して興味深いブレンドとテクスチャを作成できます。

まず、フレームを複製して変更します。

 

• [3.3] ALT を押しながらボタンを押してレイヤー マスクを作成します。このようにして、レイヤー全体を非表示にします。

• [3.4] ソフト ブラシを使用してペイントし、2 つのバリアント間の遷移を作成します。色の明かりと透明な皮。

• [3.5] 最後に、すべてのレイヤーをフォルダーにグループ化します。

• [3.6] 作成する要素の高さを定義するために影を作成します。

グループの下に新しいレイヤーを作成します。

次に、CTRL キーを押しながらフォルダーをクリックして選択を作成します。

選択範囲を濃い青色で塗りつぶし、レイヤーを下に移動して、タイルと地面の間の距離を作成します。

• [3.7] 欠けている部分をブラシで塗りつぶします。

レイヤーを乗算モードにして、オプションを下げます。

• [3.8] 効果を完成させるには、[フィルター] > [ぼかし] > [ガウスぼかし] に移動し、値を調整して影のエッジを柔らかくします。

■ [4] 今度は川に少し水深を与えます。

水のタイルの上に新しいレイヤーを作成します。

パース定規を使用してエッジをペイントします。

▼この場合、水中で重なる部分を気にせずに塗装してください。次に、CTRL キーを押しながらレイヤーのサムネイルをクリックして、水のレイヤーを選択としてロードし、残っているものを消去してきれいなエッジを取得しました。

 

•[4.1]ルーラーを非アクティブ化し、より有機的なエッジと詳細を手動でペイントできます。

• [4.2] 水中に影を作成するには、最初にレイヤーを選択範囲として再度読み込み、[選択] > [選択範囲を縮小] メニューに移動して、10px の値を指定します。

•[4.3] [選択]> [ぼかしエッジ]メニューからの選択を柔らかくし、40pxの値を与えます。

次に、後で選択としてのみ使用するため、新しいレイヤーを任意の色で塗りつぶします。

• [4.4] 水のレイヤーを複製し、乗算ブレンドモードにします

• [4.5] 仕上げに、以前に作成した選択範囲を読み込み、レイヤーマスクとして使用します。

柔らかいブラシで手動でペイントすることで、マスクを微調整します。

▼比べると、微妙な陰影の方が少しボリュームが出ます。これらのタイプの詳細は簡単に作成でき、作品を豊かにします。

■【5】要素を作り続ける。今回は木のタイルを使って橋を作ります。

まず、以前と同じようにファイル オブジェクトを複製し、森のタイルに対応するフレームを選択します。

• [5.1] Alt キーを押しながら、レイヤー全体を隠すレイヤー マスクを作成します。

次に、木の橋を作成するために、水周りの領域のみを露出させてペイントします。

手動でペイントしてレイヤーマスクを改良し、興味深い形状を作成します。

• [5.2] 下のレイヤーを複製します。次のステップは、レイヤー マスクをラスタライズして適用することです。

次に、少し下に移動して、ブリッジのボリュームを作成します。

(CTRL + U) 色相/彩度/明度でレイヤーを暗くして、シルエットが見えるようにします。

• [5.3] ブリッジのエッジは、シルエットの形に合わせて手作業でボリューム感のある塗装を施しました。照明を定義しようとします。 (完璧である必要はありません)

• [5.4] 仕上げに、橋の下に乗算モードで新しいレイヤーを作成し、床と水に影を塗り、オブジェクトをシーンに統合します。

▼橋はこんな感じでした。

▼ これらのテクニックを組み合わせることで、さまざまなオブジェクトを作成し、風景や地図を定義できます。

■ [6] この例の最後の詳細:

強い光モードのレイヤーで、柔らかいエアブラシで雰囲気を高めるためにいくつかの光の効果をペイントしました。

• [6.1] もう一度「タイルセット」オブジェクトを複製してタイルを選択しますが、今回はモチーフを無効にして、タイルを 1 つだけにします。

• [6.2] タイルの下の新しいレイヤーで、定規を使用して側面の 1 つをペイントし、ボリュームを定義します。

• [6.3] サイドを複製し、ショートカット CTRL + T を使用して自由に変形します。次に右クリックして[左右反転]を選択します

最後に、コピーを配置してキューブの反対側を取得し、レイヤーをフォルダーにグループ化します。

■ ヒント: 透明なピクセルをブロックして、型崩れを心配せずに照明/テクスチャをペイントできます。

• [6.4] グループのコピーを作成し、タイルを変更してカラー バリエーションを取得します。

• [6.5] CTRL + T で自由変形。オブジェクトを縮小し、その位置を定義します。

• [6.6] 最後に、それらをシーンに統合するために、乗算モードでオブジェクトの下にレイヤーを作成し、影のキャストを手動でペイントしました。

▼緑のタイルのレイヤーマスクのテクスチャを変更して、トランジションでより面白いテクスチャを生成することにしました。

▼ これが私の例の最終結果です。このシステムの可能性について考えていただければ幸いです。手動ペイント技法とタイルセットを組み合わせることで、創造的かつ効率的な方法で無数のシナリオを作成できます。

(この例を描くよりも、手順を説明する方がずっと時間がかかりました)

■ 注: ファイル オブジェクトをラスタライズしない場合でも、タイルセットに変更を加えることができ、最終的なアイソメ レイアウトに反映されます。これにより、作品を細かく制御できるようになり、私の意見では、これは非常に強力なクリエイティブ ツールです。

▼たとえば、タイルを「水」から「溶岩」に変更すると、残りの調整はほぼすべて色相/彩度/明度(CTRL + U)で行われ、5分でシナリオのアンビエントバリアントができあがります。

5. 等尺性シーンのペイント 2:1

提示されたテクニックを組み合わせて、より複雑なシーンをビデオ ゲームのコンセプトとして描いていきます。

■ [1] この例のキャンバスは 4k (3840x2160px) です。

 

• [1.1] 私が選んだ視点は再び 2:1 です。

 

• [1.2] これは、私が準備したタイルセットで、使用するタイル パレットがあります。お気づきのとおり、多様性を生成できる「岩」タイルのバリエーションがいくつかあります。

• [1.3] 空白のキャンバスを分割するには、基本的な環境をペイントします。ほとんどをカバーするので、詳細は省略します。この手順はオプションですが、最初からシーンを統合するのに役立つと私は考えています。

• [1.4] 定規を使ってシーンのスケッチを作成しました。スパイダーボスとの戦いです。ゲーム内でキャラクターが相互作用できるさまざまな平面と要素を定義しようとしました。

■ [2] 要素の定義を開始します。まず、タイルセットをファイル オブジェクトとしてインポートします。

[ファイル] > [インポート] > [ファイルオブジェクトの作成]

• [2.1] 正しいフレームの「岩」タイルの 1 つを選択します。

• [2.2] 自動アクションの助けを借りて、前の例で以前に行ったように、タイルを 2:1 投影に変換します。

• [2.3] グリッドとスケッチを参考にして、タイルを適切な縮尺に縮小します。

• [2.4] タイルの下の新しいレイヤーで、グリッドを基準としてブロックの高さを定義します。この場合、ブロックは高さ 1 x 幅 4 です。

次に、レイヤーを Tile Roca 1 という名前のフォルダーにグループ化し、自分自身を整理するために色を付けます。

• [2.5] サイドレイヤーの透明ピクセルを固定し、Alt キーでタイルから色を選択して、詳細をペイントし始めます.岩のテクスチャなので、輪郭に沿ってリアルなボリュームを出します。遠近法が完璧である必要はなく、素材の錯覚を作り出すのに十分です。

• [2.6] ライティングを強調するために、レイヤーを複製し、乗算モードにして不透明度を下げ、不要な部分を消去します。

• [2.7] タイルを選択としてロードし、スクリーン モードの新しいレイヤーでペイントして、ブロックの上部の明るさを上げます。

• [2.8] フォルダーのコピーを作成し、それを移動してブロックがどのように重なるかを確認します。結合が少し緊張しているように感じるので、新しいレイヤーを作成し、エッジの周りにボリュームをペイントして、ブロック間の遷移を改善します。これは有機的なテクスチャなので、グリッドから少しずれても構いません。

• [2.9] ブロックがどのように重なるかを理解することが重要です。正しい効果を得るには、レイヤーパネルでキャンバスの右側のブロックがレイヤーの上部にある必要があります。次に、下から上に向かう「行」が順番に並んでいる必要があります。

■ 注: 「岩」タイルのバリエーションを作成したとき、中央のみを変更したことを確認しました。したがって、フレームでタイルを変更するだけで、使用できる「岩」の 3 つのブロックがすでにできました。

 

地形を簡単に定義するために、作成したブロックを複製します。

■ [3] 要素の定義を続けます。

同じ手順を繰り返して、他の「タイル」でブロックを作成します。

この場合、ピッチを変更してブロック バリアントを作成しました。

• [3.1] フォルダーで CTRL + T を使用して、ブロックのスケールを変更して、シーンの他の要素のベースを簡単に定義します。

• [3.2] 定規の助けを借りて、タイルのテクスチャを側面に広げました。

• [3.3] コピーを作成して配置し、2 ブロックのステップを形成します。

• [3.4] 2 つのブロックをフォルダーにグループ化し、さらに 3 つのコピーを作成します。縦位置を変えることで段差の高さを変えることで、余計な手間をかけずに面白い構造を実現しています。

• [3.5] 重なり方を改善するために、乗算モードの新しいレイヤーで影をペイントします。エッジを残さないようにするには、ブロックを選択としてロードし (CTRL + SHIFT + レイヤーのサムネイルをクリック)、レイヤー マスクを作成します。次に、不要な部分を削除します。

• [3.6] 他のブロックの手順を繰り返します。スクリーン モードのレイヤーで同じマスクを使用して、一番上のステップにライトをペイントできます。

最後に、すべてのステップを 1 つのフォルダーにまとめます。

• [3.7] マップを定義する「岩」のブロックのコピーを作成し続けます。位置を調整することでより良い視覚的構造が得られる場合、グリッドに完全に固執する必要はありません。

• [3.8] 極端なブロックのエッジを改善するために、レイヤー マスクを作成し、岩の形状に従って構造の一部を消去します。

• [3.9] 2 番目の行を定義し、すべてのブロックをフォルダーにグループ化します。このようにして、行を簡単に複製して床を完成させることができます。

• [3.10] シャンデリアの床が高い面になるように、3 ブロックの高さを使用します。

• [3.11] 床が完成し、あまり繰り返されないようにタイルをランダムに調整します。

• [3.12] いくつかのブロックを上下に垂直に移動するだけで、グリッドを壊してシーンにボリュームを与えることができます。

これらのタイプの詳細は微妙ですが、シーンに命を吹き込み、完成するのにそれほど時間はかかりません。

また、ゲームのコンセプトについてストーリーを語ったり、メカニズムを説明したりするのにも役立ちます。一部のブロックは、キャラクターが踏んだり、トラップを作動させたりすると落ちることがあります。

■このシーンのフロアを完成させました。要素を再利用して、グリッドとブロック システムを使用して無数のシナリオを作成できます。

■ [4] はしごと岩のブロックを一体化する グループでレイヤーマスクを作成し、透明色を塗って端の一部を消し、完全に見えないようにします。

• [4.1] スケッチに従い、グリッドの助けを借りて、以前に作成したタイルを配置して浮遊面を作成します。

•[4.2]乗算モードのレイヤーでは、最初のブロックが石の床と接触する場所に影を描きます。このようにして、シーンを統合します。

• [4.3] タイルの形状を選択範囲として読み込み、暗い色の影で塗りつぶします。

グリッドを使用して、遠近法の錯覚を壊さないように、影が正しい場所に配置されていることを確認します。

レイヤーの不透明度を変更して、影の強度を調整します。

• [4.4] レイヤーを複製し、次のブロックの下に配置します。

構造を形成する4つのブロックの影は、各タイルを選択範囲として読み込み、同じレイヤーに塗りつぶします。次に、グリッドに従って床に影を配置します。

• [4.5] 各シャドウに [フィルター] > [ぼかし] > [ガウスぼかし] を適用して、エッジを柔らかくします。最後に、すべてのレイヤーをグループ化し、レイヤー マスクを適用して最終結果を調整します。

▼ このタイプの遠近法の主な問題の 1 つは、オブジェクトの高さを認識するのが難しいことです。影を使用して奥行きの錯覚を作成しますが、それは非常に現実的である必要はありません。

■ [5] スケッチ要素の作成を続けます。次のステップ、溶岩の川。

手順はまだ非常に似ています。まず、チルセットを複製します。

溶岩タイルを選択し、岩ブロックの後ろの正しい位置に配置します。

今回は「Reason」を発動してラインを作ります。

レイヤーマスクと透明色を使って、いらない部分を隠します。

• [5.1] 「tall」ブロックの側面は、繰り返しの部分のために少し奇妙に見えます。より自然に見えるように、新しいレイヤーに手動でペイントします。

• [5.2] ブロックをグループ化し、ベースの一部をマスキングしてラバと統合します。

• [5.3] 強い光モードで新しいレイヤーを作成し、ブロックにクリッピング マスクを適用します。次に、溶岩の効果を強めるためにオレンジ色のグローをペイントします。

• [5.4] 溶岩川にあるブロックについては、特別なバリアントを簡単に作成できます。まず「タイル」レイヤーを複製し、溶岩タイルに変更します。

次に、ALT を押しながら、すべてのコンテンツを非表示にするレイヤー マスクを作成します。

ペイントして、ブロックの表面に溶岩の詳細を作成することを明らかにします。

• [5.5] 新しいレイヤーでシャドウをペイントして、亀裂のボリュームを定義します。

Add Glow のレイヤーで光の効果も追加します

• [5.6] ブロックを複製し、溶岩の亀裂を少し修正します。それらを統合するために、私は再びファンデーションの一部をマスキングしてから、柔らかな輝きを加えます.

最後に、新しいレイヤーで、溶岩の表面に手動で詳細をペイントします。

▼これは溶岩川とブロックとの融合の結果

■ [6] シーンの詳細を段階的に説明していきます。次に準備するのは、川を構成する岩です。ベースとしてブロックの 1 つを使用しますが、CTRL + T を使用してそのサイズを大きくします。

これらのタイプの要素について説明することはあまりありません。私たちは視点を保つようにしていますが、完璧である必要はありません。色々な筆を使って手作業で描いています。

▼再びハイライトとマスクを使って要素を統合します。

いくつかの要素は作るのが難しいように見えますが、私たちは単純にパーツに分割し、同じ手順を繰り返して、必要なレベルの詳細を取得します。

できる限り、時間を節約するために要素を再利用するようにしています。

• [6.1] 正面から見た方が扱いやすい要素もあります。スケッチしてから遠近法を適用するか、タイルセットで行ったようにベースを色でペイントできます。

この場合、対称ルールを使用してプロセスを高速化し、ダンジョンへの入り口のアーチを設計します。

• [6.2] CTRL + T で変形し、CTRL を押しながらハンドルを中央から下に移動して、グリッドを参照して遠近法で円弧を変形します。

角度を定義したら、レイヤーを複製して移動し、弓のボリュームを与えます。

定規を使って側面を完成させ、基本的な形状を定義します。

• [6.3] 基本構造を使用して、マテリアルと照明を考慮して、詳細をペイントし、さまざまな平面を定義します。

ルールとグリッドを使用して最初にベースを定義するプロセスにより、複雑なオブジェクトを簡単に作成できます。その後、私たちが望むスタイルとディテールで作品を磨くことが重要です。

• [6.4] 仕上げに、強い光モードでレイヤーを作成し、クリッピング マスクを使用します。このレイヤーにテクスチャと照明設定を追加します。

乗算モードのレイヤーで、前に見た要素のように影を作成します。

• [6.5] 同じ手作業で、噴水の土台となる岩のブロックと「セーブポイント」としてのクリスタルをペイントしました。

いくつかの要素については、同じテクニックを繰り返すので、段階的に詳しく説明しません。何はともあれご理解頂けると幸いです。

•[6.6]もう1つのオプションは、正面図でガイドを作成し、共有した自動アクションを使用してガイドを遠近法で配置することです。この場合はフォントを作成するので、2 つの円といくつかの分割線を描画します。

ガイドを遠近法で配置します (選択できるように個別のレイヤーを使用します) そして、自由な変形を使用して、石のブロック上の正しい縮尺と位置を定義します。

• [6.7] レイヤーを複製して垂直に移動し、フォントの高さを定義します。これらの最上位レイヤーは、選択範囲を作成するのに役立ちます。

下のレイヤーでは、選択範囲を使用してボリュームをペイントします。

• [6.8] 内側の影を塗り、ガイドラインに従って構造をパーツに分割します。

ハイライトモードでレイヤーの内側の円を色で塗りつぶすには、レイヤーを垂直方向に下に移動し、選択範囲を反転してオーバーラップ部分を削除します。

• [6.9] 新しいレイヤーで、エッジとテクスチャに焦点を合わせて、個々の岩を手動でペイントします。

• [6.10] Assets からダウンロードしたブラシを使用して、水のテクスチャをペイントし、自動アクションを使用して遠近法で配置します。内縁選択で余剰分を消す

• [6.11] 乗算モードで影と色を調整して仕上げます。

ガイドの助けを借りて、以前に見たテクニックを組み合わせることで、円形のアイソメ オブジェクトを描画することは複雑ではありません。

■ [7] 私が説明してきたように、私は有機的なオブジェクトのために直接ペイントすることを好み、グリッドと参照パースペクティブだけを取ります。一部の部分もそれほど詳細を必要としません。

 

ステージの背景は、アイソメトリック ルーラーを使用して手動で構造をペイントしました。次に、それらを非アクティブ化し、さまざまなブラシで詳細を追加します。

• [7.1] モンスターのクモの卵をいくつかペイントします。最初のものをペイントしてから、それを複製し、スケーリングし、細部を微調整しました。

完全に遠近法ではありませんが、床の影がそれらをシーンに統合します。

• [7.2] これらの有機的な詳細を仕上げるために、クモの巣と光の効果を細部をあまり強調せずにペイントします。気候を生成するテクスチャを提案するだけで十分です。いつでも戻って、細部をさらに磨き上げることができます。

■ [8] アイソメトリック パースペクティブの利点の 1 つは、要素を再利用して他の要素を構築できることです。

この場合、列を定義するために、サイズの異なる 3 つのブロックを重ね合わせました。

グループを複製して、縦軸に沿って下に移動します。

次に、定規を使用してエッジを接続し、最後にテクスチャと照明をペイントします。

• [8.1] 上のブロックをもう一度複製してサイズを縮小します。前の手順を繰り返して、小さな柱を定義します。

• [8.2] オーブを簡単に作成するには、最初に円形の選択を入力します。エメラルド素材を使ってクリッピング マスクを作成し、細部を表現します。

最後に、レイヤーを平坦化し、照明の詳細をペイントします。

• [8.3] 同じブロックを複製して、他の構造を生成できます。最初に上部を定義し、次に側面をペイントします。

• [8.4] 同じブロックで階段を作りました。影で次元を作ってみました。

▼マップの基本要素はすでに作成されています。キャラクターと一部の詳細が欠けているだけです。

5.1 3D 要素

私が本当に気に入っているCLIP STUDIO PAINTの機能の1つは、3Dレイヤーです。コミック、コンセプト アート、複雑な角度からの描画オブジェクトの参照に非常に役立ちます。

 

■ 残念ながら、3D レイヤー カメラではアイソメ ビューを単純に選択することはできません。これを解決するには、空の 3D レイヤーをいくつか用意し、カメラをできるだけアイソメ ビューに近づけます。この資料も Assets で共有しました

■[1]対応する3Dレイヤー（この場合は2：1）を配置します

空の 3D レイヤーと参照領域を持つグループを作成します。

•[1.1] 3Dレイヤーを選択した状態で、3Dオブジェクトをキャンバスにドラッグします。オブジェクトは、以前に設定したカメラで配置されます。 (改造しないでください)

 

• [1.2] 3D レイヤー コントロールを使用して、オブジェクトの回転、スケール、および位置を変更します。

■ 注: 可能な限り正確な遠近法を確保するために、オブジェクトは参照領域の上に配置する必要があります。

• [1.3] オブジェクトに満足したら、3D レイヤーを複製してラスタライズします。

CTRL + T を使用して、必要に応じてスケールと位置を変更します。

• [1.4] レイヤー 3d からオブジェクトを削除し、興味のある他のモデルで手順を繰り返します。

▼ さまざまなオブジェクトを使用して、シーンは完成です。 3D オブジェクトをベースまたは参照として使用してのみペイントできます。

▼使用したオブジェはこちら

https://assets.clip-studio.com/en-us/detail?id=1726790

■ [2] 各要素をペイントし、すべてをブラシで行い、いくつかのレイヤーをさまざまなブレンド モードで行います。必要に応じて、ブレンド モードに関する私のチュートリアルを参照してください。

最初に「セーブポイント」のガラスをペイントし、3D モデルの構造を少し崩して、ハイライトと色で魔法のような外観にしようとしました。

• [2.1] 2 番目のオブジェクトはバケットで、非常に単純です。最初にグラデーション マップで色を変更してから、手動でペイントしました。他のオブジェクトと同様に、地面と接触する影をペイントすることが重要です。このようにして、オブジェクトはシーンに統合されます。

• [2.2] ほぼ同じ色のメガネを残すことにしました。一部のエッジをぼかし、照明の一部を変更しただけです。レイヤーの複製を完了するために、ガウスぼかしを適用してラスター モードにしました。

• [2.3] より複雑に見えますが、「模倣」チェストも同じプロセスに従います。 3D オブジェクトのジオメトリを使用して、思い描いているイメージを定義するまでペイントします。

私は「口」を変更し、ある種の目とクモの足を追加しました。キャスト シャドウを配置すると、シーンに非常によく溶け込みます。

• [2.4] キャラクターをペイントするには、さまざまな要素をレイヤーに分割し、他の要素と同じように手動でペイントしました。

• [2.5] 最後にスパイダーをペイントします。 3D モデルを描画して、形状とテクスチャを定義していました。

ボディを3分割し、ストロングライトモードで色を重ねました。

すべての要素のプロセスは似ています。必要な詳細レベルに達するまで、辛抱強くペイントする必要があります。参考文献を見ることは常に良い考えです。

■ [3] シーンの仕上げに 魔法の照明効果をいくつかペイントしました。魔法の効果に関する私のチュートリアルで使用する方法を見つけることができます。

私は通常、レイヤーを追加（グロス）モードで使用しますが、目的の結果に依存します。

■ スケッチから魔法のエフェクトまで、これが最終結果です。

■ アイソメアートの面白いところは、要素を動かして新しいシーンを作ることができることです。

コンクリューション

私のチュートリアルを見ていただき、ありがとうございます。

ビデオ ゲームに焦点を当てたアイソメ アートを探索するのはとても興味深いことでした。

前の手順と同じテクニックを繰り返していたため、詳細を説明しきれなかった部分があるように感じます。少し長くなってしまい申し訳ありません。

 

■ 今回紹介した資料がお役に立てれば幸いです。ビデオゲームのアートだけでなく、イラストやデザインにも応用できます。

 

ご不明な点がございましたら、お気軽にコメントを残してください。

あなた自身の世話をし、あなたの創造性を探求してください。