クリスタで3色以上のグラデーションを作る方法!!

※記事内に広告を含みます

皆さん、本日も閲覧ありがとうございます。
山本電卓と申します。

デジタルペイントソフトでは色が段々変化していく「グラデーション」を作成する機能がありますね。

クリスタ:グラデーションレイヤー


イラスト・漫画制作ソフトCLIP STUDIO PAINT(クリップスタジオペイント)でもグラデーションを作成する機能はあります。

しかも、クリスタには2色間のグラデーションだけでなく3色以上(透明色を含む)のグラデーションを自由に作成する機能もあるのです!

クリスタの3色以上グラデーション


今回はクリスタで3色以上のグラデーション作成方法を紹介したいと思います。

それではよろしくお願いいたします
( `・∀・´)ノ!


▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】

CLIP STUDIO PAINT PRO

▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】

CLIP STUDIO PAINT EX

参考記事:クリスタを購入する3つの方法と手順紹介!!

CLIP STUDIO PAINT(クリスタ)の基本的なグラデーション作成方法

まずはクリスタで通常(2色間)のグラデーション作成方法を紹介します。


困った時は:クリスタのウィンドウ・アイコン・項目がない時の見つけ方!!

クリスタの「グラデーションツール」で作成する

グラデーションツールとはグラデーションを作成する為にクリスタが用意してくれているツールです。

クリスタのグラデーションツール


このグラデーションツールを選択し、サブツールパレットでグラデーションの種類を選択します。
基本的には「描画色から透明色」もしくは「描画色から背景色」のサブツールを使用します。

クリスタのグラデーションレイヤー「描画色から透明色」「描画色から背景色」
MEMO

「描画色」=「メインカラー」、「背景色」=「サブカラー」となります。

クリスタ:カラー


ちなみに、「青空」~「虹」は自身で選択した色ではなくクリスタ側で用意してくれている色が配置されています。(色の変更は可能)

クリスタのグラデーションツール(サブツール)


さらにツールプロパティもしくはサブツール詳細ウィンドウにてカラーの変更やグラデーションの形状、グラデーションの繰り返しなどの設定をします。

クリスタのグラデーションツール(ツールプロパティ/サブツール詳細)


設定が終わりましたらクリスタのキャンバスに作成したラスターレイヤー上にドラッグ操作でグラデーションを描画していきます。

クリスタのグラデーションツール


この時、ツールプロパティで「編集対象のレイヤーに描画」に設定している場合にはラスタレイヤー上に直接グラデーションを描画することができ、
グラデーションレイヤーを作成」に設定している場合には選択中のレイヤーに関係なく「グラデーションレイヤー(後述)」を作成します。

クリスタのグラデーションツール「描画対象」

クリスタのレイヤーメニューで作成する

クリスタではグラデーションツールの他にレイヤーメニューからもグラデーションを作成することができます。


CLIP STUDIO PAINT画面上部から「レイヤー」→「新規レイヤー」→「グラデーション」と選択します。

クリスタのグラデーションレイヤー
MEMO

クリスタVer.2.3.0以降ですと、ここでグラデーションの編集ウィンドウが開きます。

編集内容は後述の『クリスタ「グラデーションの編集ウィンドウ」の基本情報』にて紹介します。


この方法の場合、後からでもこのウィンドウを開いて再設定することも可能です。

内容を設定・確認しましたら右上の「OK」を押しましょう。


するとカラーパレットの「メインカラー」から「サブカラー」の色で上から下に変化するグラデーションが表示された「グラデーションレイヤー」が作成されます。

クリスタのグラデーションレイヤー


レイヤーメニューからグラデーションレイヤーを作成した場合、オブジェクトツールを選択した状態になります。

クリスタのグラデーションレイヤー(オブジェクトツール)

クリスタのグラデーションレイヤーとは

クリスタでグラデーションレイヤーを作成しますと、後から色や形状など、全ての設定を何度でも変更することが可能になります。

ですので個人的にはグラデーションツールでラスターレイヤーに直接描画するよりおすすめです◎


グラデーションレイヤーの操作はオブジェクトツールで行います。

クリスタのオブジェクトツール


作成されたグラデーションレイヤーとオブジェクトツールを選択した状態でツールプロパティもしくはサブツール詳細ウィンドウの設定やカラーパレットの色を変更することでグラデーションの内容が変更させることができます。

クリスタ:グラデーションレイヤー(オブジェクトツール)


クリスタでのグラデーション設定に関しては以下の記事も参考にしていただければと思います。

円形・縞模様も!クリスタのグラデーション形状変更方法!!


また、グラデーション上に表示されている「ハンドル」をオブジェクトツールで移動・変形させることでグラデーションの表示位置や方向も自由に変更できます。

クリスタのグラデーションレイヤー(ハンドル)
MEMO

グラデーションレイヤーのハンドルの長さと角度はツールプロパティもしくはサブツール詳細ウィンドウの「サイズ」「角度」の項目で数値で指定することも可能です。

クリスタのグラデーションレイヤー(形状)


さらに、グラデーションレイヤーを作成しますと「レイヤーマスク」も同時に作成してくれます。

クリスタのグラデーションレイヤー(マスク)

クリスタのレイヤーマスク(隠す)機能と使い方!!

MEMO

キャンバス上に選択範囲を作成している状態でグラデーションレイヤーを作成しますとレイヤーマスクの効果で選択範囲内にのみ表示されるようにグラデーションが作成されます。

クリスタのグラデーションレイヤー(選択範囲)

CLIP STUDIO PAINT(クリスタ)のグラデーションを3色以上にする方法!

上記で紹介したクリスタでのグラデーション作成方法は基本的にメインカラーとサブカラーの2色のグラデーションです。

クリスタのグラデーションを3色以上にする為には自身で色を追加していく必要があります。

クリスタで「グラデーションの編集ウィンドウ」を表示させよう!

クリスタの「グラデーションツール」を使用する場合は描画前に、
「グラデーションレイヤー」を使用する場合は作成後にオブジェクトツールを使用している状態でツールプロパティの「塗りつぶし設定」の項目のグラデーションが表示されている部分をタッチしましょう。

クリスタのグラデーション(塗りつぶし設定)


すると「グラデーションの編集ウィンドウ」が開き、ここでクリスタのグラデーションの色を編集することができます。

クリスタの「グラデーションの編集」ウィンドウ

※「混色モード」「輝度の補正」はVer.2.3.0以降で追加された項目です。

MEMO

「塗りつぶし設定」左にある「+」を押して表示される「詳細設定」のボタンからも「グラデーションの編集ウィンドウ」を開くことができます。

クリスタのグラデーション(詳細設定)

クリスタ「グラデーションの編集ウィンドウ」の基本情報

「ノード」でグラデーションの編集・調整ができる!

クリスタの「グラデーションの編集ウィンドウ」上部には編集するグラデーションのプレビューが表示されています。

クリスタ:グラデーションの編集


このグラデーションのプレビューの下部に配置されている「∧」マークを「ノード」と呼びます。

クリスタ:グラデーションの編集(ノード)


ノードを動かすことでグラデーションの変化具合を調整できます。

クリスタ:グラデーションの編集(ノード)


さらにノードを選択している状態で下に表示されている各アイコンをクリックするとノードの操作・編集を行えます。

クリスタ:グラデーションの編集(ノード編集)


また、ノードを選択している状態で「グラデーションの編集ウィンドウ」の右中央部にある項目を設定することで選択したノードがある箇所の色を編集することができます。

クリスタ:グラデーションの編集(ノードの色)


●「位置」

「グラデーションの編集ウィンドウ」上部のグラデーションのプレビューにおいて左端が「0」、右端が「100」という位置の数値となっています。

クリスタ:グラデーションの編集(ノードの位置)


この「位置」項目で1~100の数値を入力しますと選択しているノードをその位置に移動させることができます。


●「不透明度」

選択したノードの位置にある色の不透明度を変更できます。

ここで不透明度を「0」にすれば透明色として配置することもできますね。

クリスタ:グラデーションの編集(不透明度)


●「色」

選択したノードの位置にある色を変更できます。

「メイン描画色」「サブ描画色」「指定色」の3つから選択する形になります。


「メイン描画色」を選択しますとカラーパレットのメインカラーの色に、「サブ描画色」を選択しますとカラーパレットのサブカラーの色に変更されます。


「指定色」を選択して下のカラー表示部分をタッチしますと「色の設定ウィンドウ」が開き、ここで色の選択ができます。

クリスタ:グラデーションの編集(指定職)


右端の「スポイトアイコン」を選択しますと画面内の色を採取してその色を指定色にすることができます。

クリスタ:グラデーションの編集(スポイト)


この時、クリスタを使用しているデバイスの画面内であればクリスタ外の色でも採取することができます

クリスタ:グラデーションの編集(スポイト)

「混合率曲線」で色の変化具合を調整!

選択したノードの右側にもう1つ別のノードがある場合、クリスタの「グラデーションを編集ウィンドウ」下部にある「混合率曲線」にチェックを入れることができるようになり、グラフの編集が可能になります。

クリスタ:グラデーションの編集(混合率曲線)


この「混合率曲線」のグラフは選択中のノードから右隣りのノードまでの色の変化具合の調整をするものです。


●「左ノード」「左の色」
選択中のノードとその位置の色を指します。


●「右ノード」「右の色」
選択中のノードの右隣りのノードとその位置の色を指します。


混合率曲線グラフは線上の「■」をドラッグ移動させることでノード間のグラデーションの内容を編集することができます。

クリスタ:グラデーションの編集(混合率曲線)
クリスタ:グラデーションの編集(混合率曲線)


このグラフ内をタッチすることで「■」を追加することができます。

※グラフ内であればグラフ線の上でなくても「■」の追加はできます。

クリスタ:グラデーションの編集(混合率曲線)


また、「■」をグラフの外にドラッグすることで削除することもできますよ。

クリスタ:グラデーションの編集(混合率曲線)


このグラフの操作でノード間の色の複雑な変化も表現できます。

クリスタ:グラデーションの編集(混合率曲線)


また、グラフの線を端にピッタリ付けたい場合は「■」を2つ使用しましょう。

クリスタのグラデーション「混合率曲線」(端にグラフを付ける)

「グラデーションセット」に関して

クリスタ:グラデーションの編集(グラデーションセット)


一部に描画色を利用するものもありますが、基本的には既に色や設定が用意されているグラデーションに変換させるものです。

上部のボタンで一覧の種類を切り替えて、その一覧の中から1つのグラデーションをダブルクリック、もしくは下部にある「上向き矢印のアイコン」をタッチすることで編集中のグラデーションをグラデーションセットの内容に変換します。

クリスタ:グラデーションの編集(グラデーションセット)


このグラデーションセットに自分の設定したグラデーションの内容を追加することもできますので、何度も使用する場合はここに保存しておくといいでしょう。

クリスタ:グラデーションの編集(グラデーションセットの追加)
【追記:2021.12.29】

Ver.1.11.6以降のクリスタでは画像編集ソフトのPhotoshop(フォトショップ)で読み込み・使用できるグラデーションファイルをクリスタのグラデーションの編集画面でも読み込みすることができます。

クリスタ「グラデーションの読み込み」

「混色モード」(Ver.2.3.0~)

※こちらはVer.2.3.0以降で設定できる項目です。

グラデーションでの色の交わる部分の表示内容を4種類から設定できます。

クリスタグラデーション「混色モード」

各設定を選択した時の表示具合は以下の通りです。

クリスタグラデーションマップ「混色モード」

●「通常」
クリスタVer.2.3.0より前のバージョンで表示していた内容です。


●「知覚的」
クリスタの混色モードにおける「知覚的」設定とは、実際(アナログ)での混色に近い表示にすることを指します。
「通常」より鮮やかな表示になりやすいです。


●「知覚的(Photoshop互換)・「リニア(Photoshop互換)」
Photoshopでの表示に近い表示にします。「知覚的」より混色部分が広くなっています。
また、「リニア」の方がやや淡い印象です。

「輝度の補正」(Ver.2.3.0~)

上記の「混色モード」を「知覚的」にした際に設定できます。

クリスタグラデーション「輝度の補正」

クリスタにおいて「輝度」とは各色が持つ明るさになります。


参考記事

簡単!クリスタで輝度を表示・調べる方法!!

混色部分の輝度の表現を5段階で設定します。
上に設定するほど混色の色が明るくなります。

クリスタグラデーションマップ「輝度の補正」

クリスタ「グラデーションの編集ウィンドウ」で色を追加して3色以上にしていこう!

クリスタのグラデーションの編集ウィンドウ上部の「ノード」が表示されている列をタッチしますとその場所にノードを追加することができます。

クリスタ:グラデーションの編集(ノードの追加)


追加したノードを選択し、上記の編集方法で色を変更すれば3色以上のグラデーションを作ることができるのです!

クリスタ:グラデーションの編集(ノードの色変更)


ノードを増やしていけばよりカラフルなグラデーションを作成することができますね◎

クリスタで3色以上のグラデーション

「OK」を押してグラデーション設定を確定しよう!

クリスタの「グラデーションの編集ウィンドウ」の設定が終わりましたら右上の「OK」を押して設定を確定にしましょう。

クリスタ:グラデーションの編集(OK)


グラデーションツールですとそこから描画することで設定した内容のグラデーションを作成することができ、

グラデーションレイヤーでしたらその場で設定した内容のグラデーションに変更されます。

これで3色以上のグラデーションをクリスタで作成することができます!

クリスタのグラデーション(3色以上)

CLIP STUDIO PAINT(クリスタ)では様々なグラデーションの表現ができる!

ご覧いただいたように、クリスタでは3色以上のグラデーションを作成できるだけでなく、その色の変化具合まで自分で自由に調整できます。

特に「グラデーションレイヤー」でしたら後から何回でもグラデーションの内容を変更できますのでかなり便利です!

皆さんもぜひ試してみてはいかがでしょうか◎


クリスタのグラデーションを円形や縞模様で表現したい場合は以下の記事を参考にしていただければと思います。

円形・縞模様も!クリスタのグラデーション形状変更方法!!


また、クリスタでは「等高線塗りツール」という2色間のグラデーションを自動で作成してくれるツールもありますよ。

2色グラデーションを作るクリスタ等高線塗りツールが便利!!


それではここまで閲覧ありがとうございました!
お疲れ様でした!!


▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】

CLIP STUDIO PAINT PRO


▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】

CLIP STUDIO PAINT EX


参考記事:クリスタを購入する3つの方法と手順紹介!!


▼動画視聴型お絵描き講座【Palmie(パルミー)

パルミー

▶パルミーについて詳しく見る