Upgrade to Pro — share decks privately, control downloads, hide ads and more …

イラストの色選びはナチュラルハーモニーを意識しようって話

 イラストの色選びはナチュラルハーモニーを意識しようって話

2020年6月7日に開催された「なごやデザイナーLT会 Vol.3.5」で発表した資料のうちの1つです。

A3db1cdacad2a1b5de5af000a1c94fda?s=128

Keisuke Watanuki

June 07, 2020
Tweet

Transcript

  1. イラストの色選びは ナチュラルハーモニーを 意識しようって話 なごデLT会 vol.3

  2. PCがMacで昼ごはんがマックで ファンデがMACです。 Incrementsのデザイナーです。 主にQiita Jobsの開発をしています。 綿貫 佳祐 @xrxoxcxox

  3. 自前でイラストを用意する機会 ありますよね?

  4. 自前でイラストを用意する機会、ありますよね? フラットなイラスト ちゃんと描いてる(?)イラスト

  5. 自前でイラストを用意する機会、ありますよね? - 自分は色選びを感覚でやると大抵破綻する - ので、理屈で覚えた - 割と汎用的に使える - それがナチュラルハーモニー

  6. そもそも ナチュラル ハーモニー って何?

  7. そもそもナチュラルハーモニーって何? - りんごがあるとして - 光が当たってる場所は黄色っぽい - 光が当たってない場所は紫っぽい - 葉っぱがあるとして -

    光が当たってる場所は黄緑っぽい - 光が当たってない場所は青緑っぽい - 光側は黄色く、陰側は青い配色
  8. そもそもナチュラルハーモニーって何?

  9. そもそもナチュラルハーモニーって何? 明るい 暗い

  10. 具体的に どう選ぶの?

  11. 具体的にどう選ぶの? - 箱に色をつけていきます - ピンクい箱だとしましょう

  12. 具体的にどう選ぶの? - ベースの色を選びます

  13. 具体的にどう選ぶの? - 光側の面 - 色相を黄色に振る - 明度を上げる - 彩度を少し下げる

  14. 具体的にどう選ぶの? - 陰側の面 - 色相を青(紫)に振る - 明度を下げる - 彩度を下げる

  15. 明度だけの変化でも 良くない?

  16. 明度だけの変化でも良くない? ナチュラルハーモニーに沿ったもの 明度だけ変化させたもの

  17. 明度だけの変化でも良くない? - それぞれの面の明度の数値は同じ - 違いは色相と彩度 - 明度だけの変化だと - 光の面は若干濁った色になる -

    陰の面は鮮やか過ぎる
  18. まとめ

  19. まとめ - 単に明度を変えるだけでなく - 光側は黄色に - 陰側は青(紫)に - そして彩度も調整する -

    ナチュラルハーモニーは自然光っぽく見える - ということで、だいたいいつでも使える