STEP 2

Intermission 1：色のおはなし

STEP 3

●色の３要素

色の要素には３つあります。「色相」、「彩度」、それから「明度」。

• 「色相」は色あいのこと。赤っぽいとか、黄色っぽいとか、青っぽいとか。
• 「彩度」は鮮やかさのこと。地味とかハデとかかな？彩度が上がると鮮やかになって、下がるとモノクロっぽくなる。
• 「明度」は明るさのこと。黒っぽいか白っぽいか。明度が上がると白くなって、下がると黒くなる。

Windowsにくっついてる『ペイント』なんかで色を選ぶとき、こんな画面が出て来るのを見たことないですか？？
パレットの、縦軸が「彩度」、横軸が「色相」。そして、さらに右側に独立してるゲージが「明度」です。 この３つの要素を決めることで、一つの色が選ばれます。そして、選ばれた色の要素を少し変えることで、立体的に見せたり 雰囲気を変えたりすることができるんです。

●立体的に見せるためのコツ

立体的に見せるには、どこから光があたるかをまず決め、光が当たっている辺は明るく、その対角側は暗くします。
これは、普通のデジカメ写真の周辺の明るさを変えるだけで作ったものです。 左と上の辺は、外側から順に「明るく→暗く→明るく→暗く→・・・」、右と下の辺は逆に「暗く→明るく→暗く→明るく→・・・」 というふうに変化させたら、透明なフォトフレームに写真を入れたみたいに仕上がりました。
このように「明度」を変えるだけで、写真やリンクバナーなどの複雑なデザインの画像も立体的に見せることが出来ます。

●色相変換を使ってカラーバリエーションを作るためのコツ

「色相」を形に表すと、こんな感じに円になります。どの色からも、ぐるり360度の色相変化ができます。

色相変化で素材のカラーバリエーションを作るときには、下の２つのことに気を付けておくと、きれいに仕上がります。

• 元の画像はできるだけ一つの色相の色だけを使うようにする。
  さまざまな色相が入り交じった画像を色相変化させると、なんじゃこれ〜！？みたいなのが できてしまうことがあります。ボタンや背景などの画像は、最初に作るときから同一の色相内で 彩度や明度を変えるだけで作るよう心がけると、色相変化させてもきれいなものができます。
  たとえば、WallPocketのこのシリーズで 使われている色はすべて同一の色相内の色です。 色相変化だけで作ったカラーバリエーションも、 まったく違和感がないでしょう？
  
• 色相変化させて何種類か作るときは、同じ度数で規則的に変化させる。
  私はいつもバリエーションを作るときに、360を作るバリエーションの数で割った数値で色相変化させています。 たとえば、6個作るときは３６０÷６で60度ずつ変化させ、8個作るときは３６０÷８で45度ずつ 変化させる、という具合です。ま、これはそれぞれの好みですから、そうでないと駄目ってわけじゃ ないですけど(^^;