序章

こんにちは！私の名前はHira Karmachela a.k.a BABE ODEDです。この投稿では、Clip Studio Paint でタイルセット用のピクセル アートの木と森を作成するためのヒントを共有します。この記事を読んでいる皆さんは、CLIP STUDIO PAINT が他のグラフィック ソフトウェアと比較して優れていることをよく知っていると思います。

 

CLIP STUDIO PAINTを専門的に使用した経験に基づいて、このソフトウェアは、描画とデザインの両方で私のすべてのグラフィックニーズを完全に満たしました.特に今回は、CLIP STUDIO PAINTのゲームアセット制作やドット絵風イラスト制作などの機能をお見せしたいと思います。

 

この投稿が、CLIP STUDIO PAINTでドット絵を作るコツをお探しの方にとって、興味深いヒントになれば幸いです。

ピクセル アート タイルセットについて

ピクセル アートは、現代のデジタル グラフィックスの先駆者であるデジタル グラフィック アートです。登場から数十年が経ちましたが、ピクセル アートは時代を超越し、現代のビジュアル アートと並んで今も存在しています。

純粋なアートとは別に、ピクセル アートは通常、特にピクセル スタイルまたは 8 ビット スタイルを持つゲーム アセットとして適用されます。ピクセル ゲーム アセットの作成では、通常、背景はコンセプト アート、イラスト、およびタイルセットの形式で作成されます。

 

この場合、ピクセル アートは、タイル要素ごとに作成されるグラフィックスのコレクションであるタイルセットを作成するのに適しています。これは、より広い統一イメージを生成するために繰り返し使用できます。

#1 ファイルの設定

ちなみに、この作品ではモバイル版のCLIP STUDIO PAINT for Androidを使用しています。

始めましょう。 [Create new file] を選択すると、ポップアップ ダイアログ ボックスが表示されます。

ピクセル アートを作成する場合、通常は 128 ピクセル x 128 ピクセル、解像度 72 dpi のキャンバスを使用します。このサイズは、十分に詳細で、ピクセルを配置するのに狭すぎず、広すぎない画像を作成するのに最適です。

 

CLIP STUDIO PAINTでドット絵を作成する際の次の重要なステップは、「グリッド」の設定と表示です。

[表示] メニュー > [グリッド] に移動します。

 

キャンバスにグリッド線が表示されます。ただし、表示されるグリッドは、ピクセル アートのニーズと一致しません。したがって、最初に調整する必要があります。

[表示] メニュー > [グリッド/ルーラー バーの設定...] に戻ります。

 

ダイアログウィンドウが表示されます。開始点を中央に設定し、Gap(D) を 1px に設定します。キャンバス上に小さな正方形を形成するグリッド線がキャンバス上に表示されます。

#2 配色の設定

ピクセルの描画またはペイントを開始する前の次のステップでは、使用する配色を決定する必要があります。理論的には、8 ビット ゲームとは、1 ビットが 2 つの色で構成される 8 ビットの深さの配色を使用することを意味するため、8 ビットは 2 の 8 乗が 256 色に等しいことを意味します。

 

ただし、必要なニュアンスに合わせて配色を維持するために、色の数をさらに狭く制限することをお勧めします。

そのために、独自のカラーセットを作成することをお勧めします。下部のバーの [カラー セット] アイコンをクリックし、[カラー セットの編集] アイコンをクリックします。

ポップアップ ダイアログが表示されます。カラー セットの名前を指定し、[新しいセットの作成] をクリックします。

次に、カラー セットに入れる色を選択します。下部のバーにある [カラー ホイール] アイコンをクリックします。色を選択します。

「カラーセット」アイコンをもう一度クリックし、作成したカラーセットを選択します。内部には、まだ空のカラー スロットがあります。選んだ色をひとつずつ塗りつぶしていきましょう。空のスロットの 1 つをクリックします。次に、左下隅で選択した色をクリックします。次に、右側のパネルの下部にある [色を追加] アイコンをクリックします。

「カラー ホイール」で色を選択することから始めて、選択した色でカラー スロットが満たされるまで、この手順を実行します。

#3 キャンバスを並べて表示する

ゲーム アセットの作成では、各要素のサイズは約 16px x 16px または 32px x 32px です。要素のサイズが小さいほど、ディテールを追加するのが難しいため、印象を作るのが難しくなります。

 

そのために、最小サイズが 32px x 32px の要素を作成します。ピクセル化プロセスを簡単にするために、タイリング ベース レイヤーを作成しましょう。

左ツールバーの「長方形」選択ツールをクリックします。次に、「アスペクトタイプ」にチェックを入れ、「長さを指定」を選択して、固定サイズで選択できるようにします。ピクセル画像にノイズが発生しないように、「アンチエイリアシング」を無効 (左端) に設定することを忘れないでください。

選択ボックスを 32px x 32px に設定します。次に、キャンバスをタップして選択します。

「塗りつぶし」ツールを使用して、選択ボックスを色で塗りつぶします。カラーセットで暗い色を選択します。

最初のタイルが作成されました。 「長方形」選択ツールを再利用して、選択範囲を最初のタイルの横にドラッグします。

別の色を選択して 2 番目のタイルを作成し、2 番目の選択ボックスを埋めます。キャンバス全体がチェス盤のようなタイルでいっぱいになるまで、この手順を繰り返します。このレイヤーに「base」という名前を付けることができます。

#4 ピクセル アートのツールの設定

以前に「長方形」選択ツールで設定したように、ピクセル アートを作成するには、アンチエイリアス機能を無効にする必要があります。アンチエイリアシングは、デジタル画像オブジェクトの周囲のサンプル ピクセルの色を追加して操作することにより、デジタル画像オブジェクトのエッジを滑らかに見せる機能です。

一部のツールのプロパティパネルで「アンチエイリアス」を設定できます。例えば以下の「図形(線)」ツール。

メインツールには、「ペン」ツールとサブツール「マーカーとドットペン」タイプを使用できます。このタイプのペンは、有機的なピクセル オブジェクトを簡単に作成できるように、1px の太さの線画を生成します。

確かに、作品の不要なピクセルを消去するには「消しゴム」ツールが必要です。痕跡を残さずにピクセルを消去するには、「ベクター」タイプを選択します。

プロパティ パネルで、ブラシ サイズを 1px に設定し、「アンチエイリアス」を無効に設定します。

#5 プロポーションと画角の決定

準備が整ったので、ピクセルパーティーを始めましょう。私たちの目標は、フォレストの背景または環境を作成することです。そのためには、その中のオブジェクトを比較する必要があります。

ゲームには、さまざまな角度のビューがあります。この機会に、3/4 のトップダウン ビューを使用します。この角度には魅力があり、オブジェクトの光と奥行きを探ることができるため、立体的な印象を与えます。

視点の向きを簡単にするために、プリミティブ 3D マテリアルを使用できます。

下部のバーにある [マテリアル] アイコンをクリックします。次に、「3D Cube」を選択し、図のようにボタンをクリックして、キューブをキャンバスに配置します。

立方体がキャンバスに配置されたら、下の画像に示すように、カメラ アイコンをクリックして立方体の角度を調整します。

次に、下の画像に示すように、3/4 トップダウン角度を選択します。

レイヤーパネルを開き、レイヤー「Cube」を選択します。オプションメニューが表示されるまで長押しします。スクロールして「ラスタライズ」を選択します。

次に、一番下のバーにあるアイコンをクリックして「自由変形」を使用し、立方体を 1 タイルまたは約 1 タイルにサイズ変更します。 32 ピクセル x 32 ピクセル。

次に、Forest で単純なオブジェクトの描画を開始します。草を描くことから始めます。タイルの 1 つを選択し、カラー セットの芝生のベース カラーで色付けします。

「マーカー」ツールを使用して、スタイルに合わせて芝生エリアを芝生のラインで塗りつぶします。草のベースカラーよりも暗い色から始めることができます。

別の明るい色を追加してから、暗い草の筋の間を塗りつぶします。

これで、草の比率をベースにしたオブジェクトを作成できます。茂みの植物を作ることから始めます。

「マーカー」ツールを使用して、選択したベースカラーで茂みの形を描きます。草と立方体のオブジェクトとサイズと角度を比較します。

次に、シェイプの上に明るい色を追加して、立体感を出します。

その後、紫や茶色などの他の暗い色をシェーディングとして使用して詳細を追加できます.

#6 木を描く

それでは、茂みのテクニックを適用して木を描きましょう。

 

まず、ベースカラーで木の形を描きます。この段階では、葉を緑、茎を茶色で描きました。

次に、明るい色を追加して寸法を作成します。立方体を角度ガイドとして使用します。

木の形がより立体的に見えるようになりました。シェーディングとして紫や茶色などの暗い色を追加します。次に、他の色を追加して詳細を示します。

私たちの木はほぼ完成しています。最後の仕上げとして、木々を芝生の背景に溶け込ませます。ツリーの下部に草のストライプを追加します。

#7 タイルセットの構築

草、茂み、木のオブジェクトを取得したら。すでにタイルセットを構築できます。

草のタイルセットから始めます。下の画像に示すように、9 つのタイルで選択を行います。

次に、アースカラーのベースカラーで塗りつぶします。

次に新規レイヤーに下の画像のように真ん中に草地を作ります。

前と同じように、草の領域全体に草のテクスチャを描画します。

消しゴムでより自然に見えるように、芝生エリアのエッジを形作ります。

次に、草地の下に濃い色で影をつけます。

土をより質感のあるものにするために、明るい色で仕上げます。

次に、これらの草のタイルセットを作成する際にすべてのレイヤーを結合します。次に、左上の 32px x 32px の最初のタイルを選択します。

下部のバーにある [コピー] アイコンをクリックします。次に、新しいレイヤーを作成し、下部のバーにある [貼り付け] アイコンをクリックします。これで、1 つの独立した草タイルができました。

残りの 8 つの草タイルに対してこの手順を実行します。

これで、目的の環境を形成するために複製してさらに配置できる 9 つの個別の草タイルができました。

次は、茂みと木のタイルセットを作成します。両方の手順は同じなので、代わりに木のタイルセットを作成する方法を示します。

木のレイヤーを選択し、オプション メニューが表示されるまで長押しします。 「レイヤーを複製」を選択します。

ツリーのコピーを右のタイルに移動します。次に、木のレイヤーを再度複製します。

ツリーのコピーを調整して、各タイルで同じ位置になるようにします (ピクセルのすべての部分に注意してください)。

これで、ツリーがクラスター化されました。レイヤーパネルを開きます。次に、以下のアイコンをクリックして、コピー ツリー レイヤーをマージします。

次に、このツリー クラスターを 3 つの個別のタイルに分割します。 32px x 32px の長方形を選択して、ツリー クラスターの中央を選択します。

下部バーの「コピー」ボタンをクリックします。レイヤーパネルに移動し、新しいレイヤーを作成します。下部のバーにある [貼り付け] ボタンをクリックすると、クラスターとは別の木のタイルが 1 つ作成されます。

3 つの別個の木のタイルができるまで、残りの 2 つのタイルに対して同じことを行います。

#8 タイルセットの配置

では、作成したタイルセットを配置して、Forest 環境になるようにしましょう。この方法は非常に簡単です。必要なタイル レイヤーを複製するだけです。

次に、タイルを特定の場所に配置して、互いに接続し、環境を形成します。

すべての草タイルを最下層に保持します。

必要なタイル要素ごとにこの手順を繰り返します。茂みのタイルとすべての木のタイルを草のレイヤーの上に置きます。

すべてのレイヤーのロックが解除され、すべてのタイルが接続されてフォレスト環境が形成されるタイミングを見てみましょう。

#9 画像のエクスポートと公開

作業が完了し、エクスポートして公開する準備が整いました。ただし、画像サイズは現在 128 ピクセル x 128 ピクセルしかなく、公開するには小さすぎることにまず注意する必要があります。

したがって、最初にピクセルの品質を損なうことなく画像のサイズを変更する必要があります。

[編集] メニュー > (スクロール) [画像の解像度を変更...] に移動します。

ポップダイアログが表示されます。画像のサイズを 1080px x 1080px または必要なサイズに変更します。次に、補間方法のセクションで「ハード エッジ」を選択して、ピクセルの品質を維持し、ノイズが発生しないようにします。

画像が拡大され、画像内のピクセル数が増えます。

画像を PNG にエクスポートして、さまざまなデジタル プラットフォームやアプリケーションで簡単に表示できるようにします。

[ファイル] メニュー > [エクスポート (単一レイヤー)] に移動します。

次に、エクスポート結果として PNG を選択します。他のエクスポート設定を追加する予定がない場合は、既存のすべての設定に同意します。

エクスポート ファイルが携帯電話のストレージに保存されました。

CLIP STUDIO PAINTのモバイル版の最も興味深い点は、簡単な手順で作品をすぐにソーシャル メディアに公開できることです。

[ファイル] メニュー > [クイック共有...] に移動します。

ポップダイアログが表示されます。次に、作品を公開するソーシャル メディアを選択します。今回はツイッターを選びました。

システムが接続して Twitter アプリケーションを開き、私たちの作品が添付された新しいツイートを作成します。

OK！共有できるのはそれだけです。それが役に立つことを願っており、より多くのヒントを作るために私をサポートしてください.