カラーホイールでの色の設定方法と明暗をつけるコツ

色の指定方法については過去の記事で簡単にしか説明していません。 この記事では、もう少し踏み込んで色の指定方法やコツなどを紹介します。

 

ここでは楕円をトマト色に塗ることで、カラーホイールでの色の指定方法およびハイライトや影をつけるためのコツについて解説します。 では、新規に画像を開いてください

1. 楕円の形状に選択する
1. 楕円の形状に選択する

上図のように楕円の形状に選択します。 この選択範囲の内側をトマト色に塗っていきます。

  
上部は明るく、下部は暗く色づけを行います。
2. 前景色ボタン
2. 前景色ボタン

上図のようにツールボックスのボタン群の下にある前景色をクリックします

3. 描画色の変更ウィンドウが開く
3. 描画色の変更ウィンドウが開く

上図のように描画色の変更ウィンドウが開きます。 左にある四角いボックスの上にある "色相環" タブをクリックします。

4. 色相環と三角セレクタに切り替わる
4. 色相環と三角セレクタに切り替わる

上図のように左部のボックスが "色相環" と "三角セレクタ" に切り替わります。 色相環(カラーホイール)で色相を、三角セレクタで彩度と明度を指定することができます。

用語 説明
色相 色あい
彩度 鮮やかさ
明度 明るさ

色相・彩度とは


『色相』とは色合いのことです。 色相は円で表され、0度が赤色、60度が黄色、120度が緑色、180度が水色、240度が青色、300度が紫色です。

『彩度』とは鮮やかさのことです。 彩度が0になると黒色や灰色、白色のように色味がなくなります。


まずは、色相(色合い)から選びましょう。 基本色となるトマトの色合いを選びます。

5. 色相環のトマト色をクリックする
5. 色相環のトマト色をクリックする

上図のように色相環の時計でいう3時の少し上をクリックします。

6. 色相を表す白線が移動する
6. 色相を表す白線が移動する

上図のように色相を表す白線が移動します。 このように色相環には現在の色相が白線の位置で示されます

では次に、彩度と明度を選びましょう。

7. 鮮やかでかつそれなりに明るい位置をクリック
7. 鮮やかでかつそれなりに明るい位置をクリック

上図のように鮮やかで、かつ、それなりに明るい位置をクリックします。

8. 現在の色がトマト色になる
8. 現在の色がトマト色になる

上図のように選択した彩度・明度の位置に小さな円が描かれ、また下部の現在の色にも反映されています

では、描画色の変更ウィンドウを閉じて楕円の内側を塗ってください

9. トマト色に塗る
9. トマト色に塗る

上図のように楕円の内側を描画色で塗ります。 トマト色というよりはトマトケチャップ色になってしまいましたが、まあいいでしょう。 なお、この色が基本色となります。

もちろんこれで終わりではありません。 上部を明るく、下部を暗く塗る作業が残っています。 色相は変化させずに、彩度・明度だけを変えて明暗をつけていきます。

では、再び描画色の変更ウィンドウを開きましょう。

10. 描画色の変更ウィンドウを開く
10. 描画色の変更ウィンドウを開く

上図のように描画色の変更ウィンドウを開きます。 ではここで、三角セレクタについてもう少し説明しておきます。

三角セレクタには3つの頂点がありますが、"現在の色相" を指している頂点が彩度が最も高い場所です。 残る2つの頂点が、明度が最大値と最小値となる場所です。

ではここで "暗くする部分" と "明るくする部分" の色が、三角セレクタのどの領域に該当するのかを考えてみましょう。

11. 黒色と白色の頂点への線上の色が徐々に暗く・明るくなる色
11. 黒色と白色の頂点への線上の色が徐々に暗く・明るくなる色

上図のように黒色の頂点へ向かう線をたどると徐々に暗くなります。 同じように白色の頂点への線をたどると徐々に明るくなります。

この線上の色を選んでいけば、違和感なく暗く(または明るく)色を変化させることができそうです。

では、その線を想像して引いてみましょう。

12. 色を変化させるための線を引いてみる
12. 色を変化させるための線を引いてみる

上図のように現在の色と明度の最小値・最大値を結ぶ線を引きます。

  
解説の都合での想像上の線です。 描画色の変更ウィンドウ上に実際に線を引くことはできません。

引いてみたのはいいですが、これでは角が鋭角すぎます。 この線上の色を選んでしまうと違和感が出てしまうかもしれません。

違和感を避けるため角を丸めてみましょう

13. 角を丸める
13. 角を丸める

上図のように角を丸めてみます。 うん、これなら大きな違和感は出ないでしょう。

ただし、まだまだ問題があります。 現状では黒色から白色まで線が通っています。 実際のトマトには真っ暗・真っ白な部分なんてありません。 つまり、両端を狭める必要があります。

14. 両端を狭める
14. 両端を狭める

上図のように両端を狭めます。 こうすることで暗くなりすぎる(明るくなりすぎる)ことはないでしょう。

では、暗い色と明るい色をそれぞれ2箇所ずつ決定しましょう

15. 基本色も含めて5色を決定する
15. 基本色も含めて5色を決定する

上図のように暗い色と明るい色をそれぞれ2箇所ずつ決定します。 基本色も含めて5色になります。 この位置の色で、これから実際に楕円を塗っていきます。

  
解説の都合で描画色の変更ウィンドウ上に○を描いています。 描画色の変更ウィンドウ上に実際に○を描くことはできません。

では、少し暗い色から塗っていきましょう。

16. 少し暗い色を選択する
16. 少し暗い色を選択する

上図のように少し暗い色を選択します。 では、この色で楕円の内側を塗りましょう。

17. 中心からやや下を塗る
17. 中心からやや下を塗る

上図のように中心からやや下を塗ります。 違和感なく暗い部分を表現できているのではないでしょうか。

続いては、さらに暗い色を塗っていきます。

18. さらに暗い色を選択する
18. さらに暗い色を選択する

上図のようにさらに暗い色を選択します。 選択したら下部をこの色で塗ります。

19. 下部を塗る
19. 下部を塗る

上図のように下部を塗ります。 これも違和感なく塗れているように思えます。

次は少し明るい色を塗ります。

20. 少し明るい色を選択する
20. 少し明るい色を選択する

上図のように少し明るい色を選択します。 では、この色で楕円の内側のやや上側を塗りましょう。

21. 中心からやや上を塗る
21. 中心からやや上を塗る

上図のように中心からやや上を塗ります。 明るい部分も違和感はありません。

残すは最上部の一番明るい部分です。

22. さらに明るい色を選択する
22. さらに明るい色を選択する

上図のようにさらに明るい色を選択します。 選択したら上部を塗りましょう。

23. 上部を塗る
23. 上部を塗る

上図のように上部を塗ります。 うん、違和感なく塗り終えることができました。

24. 完成
24. 完成

上図のように範囲選択を解除します。 うん、これだけ塗れればいいのではないでしょうか。

色相も多少変化させるのが正しい

今回のトマト色での明暗の塗り分けですが、実は少し問題があります。 色相を変化させていないため、やや不自然な結果になっているのです。

現実の世界では、空の青色などの環境光が色に影響を与えます。 また、近くにある物からの色移り(照り返し)もあります。 つまり、間接的な光である『間接光』が当たっているのです。

色相を変えずに明暗をつけてしまうと間接光を感じることがありません。 そのため、やや不自然な印象になってしまいます。

具体例を見てみましょう。 間接光を考慮せずに陰影を計算した3DCGの画像です。

間接光を考慮しない陰影
間接光を考慮しない陰影

上図のように間接光を感じないため違和感を覚えます。

続いては、間接光を考慮して陰影を計算した3DCGの画像です。

間接光を考慮した陰影
間接光を考慮した陰影

上図のように比較にならないぐらい自然な印象になっています。

自然な陰影に見せるためには色相も多少変化させることが大切です。 色相環で15度から30度ぐらい変化させても大丈夫です。

  
もっと大胆に変化させてみるのもいいかもしれません
  
  

まとめ

明暗をつけるには色相環と三角セレクタで色を選ぶのがオススメです。 基本色を決めたら、そこから黒色と白色の頂点への緩やかなカーブを描きます。

そのカーブ上の色を選択することで違和感のない色選びができます。 ただし、多少の色相の変化も必要になることでしょう。