various sun 18:ポンコツ兄さん(3P/19P) 公開中!

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

クリスタ3色以上グラデ作成サムネ

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

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

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


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

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

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


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

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


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


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


CLIP STUDIO PAINT:製品版クリスタ・ダウンロード版をコンビニ支払いで購入する方法!!(全工程画像付き)

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

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

以下の説明で紹介するウィンドウ・パレット・項目が見当たらない場合は設定で非表示になっている可能性がありますので、以下の記事を参考に探していただければと思います。

CLIP STUDIO PAINT画面クリスタのウィンドウ・アイコン・項目がない時の見つけ方!!

「グラデーションツール」で作成する

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

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


このグラデーションツールを選択し、サブツールパレットでグラデーションの種類を選択します。

MEMO

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

クリスタ:カラー


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

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


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

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


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

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

※「ベクターレイヤー」ではグラデーションツールは使用できません。

「グラデーションレイヤー」で作成する

ラスターレイヤー上に描画するのではなく、グラデーションが表示されたレイヤーを作成する方法です。

クリスタでグラデーションを作成する場合、この「グラデーションレイヤー」を使用すれば後から色や形状など、全ての設定を何度でも変更することが可能ですので個人的にはグラデーションツールよりおすすめです◎


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

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


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

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


それと同時にオブジェクトツールを選択した状態になっています。

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


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

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


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

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


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

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


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

クリスタのグラデーションレイヤー(マスク)
クリスタ:レイヤーマスクアナログではできない!クリスタのマスク(隠す)機能と使い方!!
MEMO

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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


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

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


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

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


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

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


●「位置」

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

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


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


●「不透明度」

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

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

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


●「色」

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

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


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


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

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


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

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


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

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

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

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

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


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


●「左ノード」「左の色」

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


●「右ノード」「右の色」

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


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

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


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

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


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

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


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

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


※操作するのは「■」ですので、グラフの線を端にピッタリつけることができないなど、操作上の制限はあります。

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

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


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

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

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


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

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

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

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

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


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

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


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

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

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

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

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


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

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

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

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

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

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

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

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


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

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


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

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


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


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


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


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

パルミー