クリスタの指定濃度グラデーショントーン作成方法!!

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

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

イラスト・漫画制作ソフトCLIP STUDIO PAINT(クリップスタジオペイント)にはトーンを簡単に貼る機能が搭載されています。

クリスタ:トーンレイヤー


そしてこのクリスタのトーンはグラデーションで表示させることもできます。

クリスタ:マンガ用グラデーション


このクリスタのグラデーショントーンはそのまま使用するだけでは濃度100%~0%のグラデーション表示になってしまいます。

しかし、このグラデーションのトーン濃度は調整・指定が可能です。

今回はこのクリスタでグラデーショントーンの濃度を調整・指定する方法を紹介させていただきます。

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


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

CLIP STUDIO PAINT PRO


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

CLIP STUDIO PAINT EX


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

CLIP STUDIO PAINT(クリスタ)でグラデーショントーンを作成する方法!

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

クリスタでトーンを表示させるときの注意点

クリスタでトーンを表示させる場合はキャンバスの解像度を600 dpi以上に設定しましょう。

解像度が低いとトーンがきれいに表示されません。

クリスタのツール「マンガ用グラデーション」でグラデーショントーンを作成する方法

クリスタに標準搭載されている「グラデーションツール」の中には「マンガ用グラデーション」というものがあります。

クリスタ:マンガ用グラデーション


また、「サブツール詳細」の「インク」の項目内にある「描画対象」が「グラデーションレイヤーを作成」になっていることを確認しましょう。

クリスタ:マンガ用グラデーション(サブツール詳細)


このマンガ用グラデーションツールでキャンバス上をドラッグしますとドラッグの始点が100%(黒)、ドラッグの終点が0%(透明)のグラデーショントーンが作成されます。

※どの色を選んでも同じグラデーショントーンになります。

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


そしてレイヤーパレットには設定通りグラデーションレイヤーが作成されています。

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


また、作成した選択範囲の中でマンガ用グラデーションツールを使用しますとその選択範囲部分にしかトーングラデーションが表示されないようにレイヤーマスクも一緒に作成されます。

クリスタのマンガ用グラデーション(選択範囲                                  )


参考記事

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

クリスタのレイヤーメニューからグラデーショントーンを作成する方法

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

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

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

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


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

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


詳しい詳しい設定内容は後述の『クリスタ「グラデーションレイヤー」でトーン濃度を調整・指定する方法』で紹介します。


するとグラデーションレイヤーが作成され、カラーパレットの「メインカラー~サブカラーのグラデーション」が作成されます。

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


クリスタの新規作成で「基本表現色」を「モノクロ」に設定したキャンバスで「グラデーションレイヤー」を作成しますと作成される色をトーンに変換したグラデーションが作成されるのです。

※トーン濃度はメインカラー・サブカラーの「L値」(後述)に合わせて設定されます。

クリスタのグラデーションレイヤー(基本表現色モノクロ)


こちらも選択範囲を作成することでその部分しか表示されないようにレイヤーマスクが作成されます。

クリスタのレイヤー効果「トーン」を使用してグラデーショントーンを作成する方法

通常のグラデーションツールで黒(グレー)~白(透明)のグラデーションを作成したレイヤーを選択した状態でレイヤープロパティの「効果」という項目にある「トーン」のアイコンをタッチしますと作成したグラデーションがグレー濃度に合わせてトーン表示に変化します。

クリスタのレイヤー効果「トーン」


このトーン効果はカラーの絵もトーンに変換することもできます。

クリスタでカラーイラストをトーン化

グラデーショントーン編集はクリスタEX・PROどちらでも利用可能!

上記で紹介したグラデーショントーンの作成方法、そして後述するグラデーショントーンの濃度を調整・指定する方法はクリスタEXはもちろん、下位グレードのクリスタPROでも利用することができます◎


CLIP STUDIO PAINT PRO


CLIP STUDIO PAINT EX


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

CLIP STUDIO PAINT(クリスタ)でグラデーショントーンの濃度を調整・指定する方法!

クリスタ「グラデーションレイヤー」でトーン濃度を調整・指定する方法

上記で紹介したクリスタでのグラデーショントーンの作成方法のうち、「マンガ用グラデーションツール」と「レイヤーメニュー」を使用する方法でレイヤーパレットにグラデーションレイヤーが作成される場合にできるトーン濃度の調整・指定方法です。

レイヤー不透明度でグラデーショントーンの濃度を調整・指定する

トーン表示させているグラデーションレイヤーを選択している状態でクリスタのレイヤープロパティの「レイヤーの不透明度を反映」にチェックが入っていることを確認しましょう。

クリスタ「レイヤーの不透明度を反映」


この状態でグラデーションレイヤーの不透明度を下げると表示が半透明にならず、不透明度の数値に合わせてトーン濃度が下がる表示になります

不透明度を45にすると濃度100%の部分が45%になるといった感じですね。

クリスタのトーンレイヤー(不透明度を変更)


この方法を利用すれば[指定濃度のトーン~0%のグラデーショントーン]を作成することができます。

オブジェクトツールでグラデーショントーンの濃度を調整する

クリスタではトーン表示させているグラデーションレイヤーを選択している状態でオブジェクトツールを使用しますと、キャンバスのグラデーショントーン上に「ハンドル」が表示されます。

クリスタのトーンレイヤー(オブジェクトツール)


↑この「ハンドル」の「+」部分がグラデーションの始点であり、「●」部分がグラデーションの終点になります。

この「ハンドル」は移動させたり長さ・角度を変更することができるため、グラデーショントーンの表示位置を変更することでトーン濃度の調整が可能なのです。

さらにこの「ハンドル」はキャンバス外への配置も可能です。

クリスタのトーンレイヤー(ハンドル操作)


また、この「ハンドル」の長さ・角度はツールプロパティもしくはサブツール詳細ウィンドウにて数値指定が可能です。

※「サイズ」とはハンドルの始点(+)~終点(●)までの長さのことです。

クリスタのトーンレイヤー(ツールプロパティ/サブツール詳細)

混合率直線でグラデーショントーンの濃度を調整・指定する

先述のように、トーン表示させているグラデーションレイヤーを選択している状態でオブジェクトツールを使用しますと、ツールプロパティに選択中のグラデーションレイヤーの設定内容が表示されます。

クリスタのトーンレイヤー(ツールプロパティ)


ツールプロパティの表示の中からグラデーションが表示されている部分をタッチしますと「グラデーションの編集」ウィンドウが開きます。

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


「グラデーションの編集」ウィンドウの上部(カラーバー)には選択中のグラデーションレイヤーのグラデーション変化が表示されています。

クリスタ「グラデーションの編集」(カラーバー)


このカラーバーの下部にある「∧」マーク(ノード)を左右に動かすことでグラデーションの変化の範囲を変えるとができます。

クリスタ「グラデーションの編集」(ノード移動)


また、反転アイコンをタッチすることでグラデーションの変化を反転させることもできます。

クリスタ「グラデーションの編集」(反転)
【追記:2021.12.29】

Ver.1.11.6以降のクリスタでは、ツールプロパティにも「反転」の項目が表示されるようになりました。

クリスタグラデーションツール「反転」(ツールプロパティ)


さらに左側の「∧」マーク(ノード)を選択している状態で下部の「混合率曲線」にチェックを入れますとグラフが表示されるようになります。

※正確に言いますと、ノードは追加・削除ができますので「選択したノードの右側に別のノードがある時」に混合率曲線のチェックを入れることができます。

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


この「混合率曲線」のグラフを操作・変更することでグラデーションの変化を変更することができます。

「混合率曲線グラフ」の仕様

●「左ノード」「右ノード」

選択中のノードが「左ノード」、選択中のノードの1つ右隣にあるノードが「右ノード」になります。

クリスタ「グラデーションの編集」(左ノード/右ノード)


●「左の色」「右の色」

選択中のノードの位置の色が「左の色」、選択中のノードの1つ右隣にあるノードの位置の色が「右の色」になります。
(画像の場合は「左の色」がトーン濃度100%(黒)、「右の色」がトーン濃度0%(透明)となります)

クリスタ「グラデーションの編集」(左の色/右の色)


●グラフの中の点(■)

ドラッグで移動させることでグラフの線を変更することができます。

※縦方向は自由に移動できますが、横方向は隣りの点(■)を越えての移動ができません。

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


また、グラフ内の場所をタッチしますとその場所に点(■)を追加することができます。(最大数16)

※グラフの線上でなくても点(■)を追加できます。

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


点(■)をグラフの外にドラッグすることで削除することができます。

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


●グラフの見方

横軸が「∧」マーク(ノード)間のグラデーショントーンの表示範囲、縦軸がグラデーショントーンの濃度を表しています。

クリスタ「グラデーションの編集」(グラデーショントーンの表示範囲)
クリスタ「グラデーションの編集」(トーン濃度範囲)


画像のグラフでいいますとグラフが下側に行くほどその位置のトーン濃度は100%(黒)に近付き、グラフが上にいくほどその位置のトーン濃度は0%(透明)に近付くということになります。

クリスタ「グラデーションの編集」(グラデーションの位置と濃度)

上記の混合率曲線のグラフの仕様を利用し、グラデーションの変化具合を自由に調整・指定することができます。

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


ただしグラフの操作は手動で行うため、トーン濃度を数値で指定することができません

グラフの軸線によって25%、50%、75%、100%の位置は把握できますが細かいところは視覚的・感覚的に操作する形になります。

クリスタ「混合率曲線」(トーン濃度位置)


トーン濃度を数値でしっかり指定したい場合は後述の『クリスタ「レイヤー効果」のトーン濃度を調整・指定する方法』の項目で紹介する方法を参考にして下さい。

ポイント

混合率曲線のグラフ上の点(■)を端まで移動させてもグラフの線そのものは端まで届きません。

クリスタ「混合率直線」(グラフ編集)


グラフの線を端に持っていきたい場合は点(■)を1つ端まで移動させた後、近くのグラフ内をタッチして点(■)を追加し、その点(■)を端まで移動させることでグラフの線を端に持ってくることができます。

クリスタの混合率曲線でグラフを端に持っていく方法

クリスタVer.2.3.0から「混色モード」「輝度の補正」が追加

クリスタVer.2.3.0からグラデーションの編集に「混色モード」と「輝度の補正」という項目が追加されました。

本来はカラーでの色の混ざり具合の表示を設定するものなのですが、グラデーショントーンでも設定によってグラデーションの表示が変化します。


「混色モード」では4種類の表示内容を選択することができます。

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


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


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


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


また、「混色モード」にて「知覚的」に設定しますと下部の「輝度の補正」からさらに5段階の変化具合を選択できます。

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

【補足】グラデーショントーンの表示(向き・サイズ・形)を変更する方法

グラデーショントーンの仕様は基本的に通常のグラデーションと同じですのでグラデーションの向きや形の変更も可能です。

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


詳しくは以下の記事を参考にしていただければと思います。

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

漫画でグラデーショントーンを使用する場合

「グラデーションレイヤー」を使用したグラデーショントーンを漫画の中で使用する場合は、

グラデーショントーンを表示させたい範囲を自動選択ツールでタッチして選択範囲を作成

選択範囲がある状態で「マンガ用グラデーションツール」か「グラデーションレイヤーの作成」でグラデーショントーンを表示

グラデーションレイヤーのトーン表示を調整・指定

クリスタのグラデーションレイヤーを利用してトーン濃度を調整する(漫画応用編)


という手順で行えばいいでしょう。

また、グラデーションレイヤーはレイヤーマスクで表示範囲を決めているので自由に表示範囲を追加・削除が可能です。

クリスタでグラデーションレイヤーを利用したトーン表示

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

クリスタ「レイヤー効果」でグラデーショントーンの濃度を調整・指定する方法

描画するグレー濃度でグラデーショントーンの濃度を調整・指定する

クリスタのレイヤープロパティにある「トーン効果」を利用してグラデーショントーンを作成する場合は、トーン効果を使用する前のグラデーションの濃度を指定して描画することでトーン濃度を調整・指定することができます。

このグラデーションの描画はトーン濃度を把握しやすくするためにグレーで行います。

グレーの濃度=トーンの濃度となるわけです。


グレーの濃度はクリスタのカラーパレットでHLS表示した時の「L(輝度)」の値で確認します。

0に近いほど黒に、100に近いほど白に近付きます。

クリスタのカラーパレット(L値)
MEMO

カラーパレットのHLS表示はカラーサークルの右下のマークを選択することでできます。

クリスタ:カラーサークル表示切り替え


また、下部の数値がRGB表示になっている場合は数値部分をタッチしますと表示が切り替わります

クリスタのカラーサークルで表示を切り替える

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


また、カラーパレットのタブを切り替えて「カラースライダー」に表示を変えますとL値の数値を直接入力することができます。

クリスタのカラーパレット(カラースライダー)


ではグレーを描画していきます。

描画用のラスターレイヤーを新規作成し、レイヤープロパティにて表現色を「グレー」もしくは「カラー」にしましょう。

画像では表現色を「グレー」にしています。

※ベクターレイヤーでは今回紹介する方法が利用できません。

クリスタのレイヤープロパティ(表現色:グレー)


そしてグラデーショントーンの端の濃度にしたい数値(L値)のグレーを指定し、グラデーションの起点となる線を1本描画します。

※アンチエイリアスなど線の周囲にぼやけが出ない設定で描画しましょう。

クリスタでグレーを描画


次にもう片方のグラデーショントーンの端の濃度にしたい数値(L値)のグレーを指定し、グラデーションの終点となる線を1本描画します。

クリスタでグレーを描画


そして「等高線塗りツール」で描画した線の間の箇所をタッチします。

クリスタの等高線塗りツール


これだけで2本の線の間をグラデーションで結んでくれます

クリスタの等高線塗りツールでグラデーション作成


参考記事

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

注意

グラデーションの端の線は隙間があると表示させたくない範囲までグラデーションが作成されてしまいますので注意しましょう。

クリスタの等高線塗りツール(隙間がある場合)


これで後はレイヤープロパティで「トーン効果」を選択するだけです。

この方法ですとトーン濃度を数値でしっかり指定することができます。

クリスタでグラデーションをトーンに変換する(レイヤー効果)


また、グラデーションの変化具合を調整したい場合は始点と終点の間にも指定した濃度のグレーの線を引いて等高線塗りツールを使えばお好みの変化具合のグラデーショントーンを作成することができます。

クリスタでグレーを


線の形や濃度を変更すれば自由度の高いグラデーショントーンも作成できますね◎

クリスタのグレーグラデーション作成後にトーン化する

漫画でグラデーショントーンを使用する場合

上記の方法で表現するグラデーショントーンを漫画で使用する場合は、

絵の範囲内でグレーを描画

等高線塗りツールを使用

「トーン効果」を使用

クリスタの等高線塗りツールを使用したグラデーショントーン調整(漫画応用編)


という方法もありますし、

等高線塗りツールとトーン効果を使用してグラデーショントーンを作成

レイヤーマスクやクリッピングで表示範囲を指定

クリスタの等高線塗りツールを使用したグラデーショントーン調整(漫画応用編)


という方法もあるでしょう。

参考記事

クリスタのクリッピングで簡単マスク作成&色塗り!!

CLIP STUDIO PAINT(クリスタ)でグラデーショントーンを自由に作成しよう!

今回はクリスタのグラデーションレイヤーとトーン効果を利用したグラデーショントーンの作成方法を紹介しました。

グラデーションレイヤーを利用する方法は何度でも設定を変更できるという利点があり、

トーン効果を利用する方法は自分で描画してグラデーションの形や濃度を指定できますので制作としてはシンプルで自由度も高いという利点がありますね。


いずれにせよ、アナログではできない表現方法ですので漫画制作でグラデーショントーンを使用したい場合はぜひクリスタの機能を利用してみて下さい◎

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


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

CLIP STUDIO PAINT PRO


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

CLIP STUDIO PAINT EX


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


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

パルミー「陰影をマスター!」

▶講座について詳しく見る