【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション
最終更新日: Update!!
海外のwebサイトなどではよく使われている、2色で構成されたデザインイメージをご覧になったことはありますか?アーティスティックで、どことなくレトロな雰囲気が表現できるこのデザイン手法は「Duotone」(デュオトーン)と呼ばれており、2色のトーンという意味です。
今回はこのDuotoneを使ったデザインのバリエーションサンプルを幾つか挙げていきたいと思います。
その名の通り、Duotoneでは全体を2色の構成でまとめていきます。色数の制限がある中でどのように組み合わせるかでイメージが決まってしまうのでカラーのチョイスが重要なポイントになってきます。
ちなみに今回はこちらの写真を使ってサンプルデザインを作成していきます。
Duotoneデザインにおいて写真を選ぶポイントとしては、
・被写体の存在が明確
・背景と被写体の境界がはっきりしている
・コントラストが強い
といった項目をチェックすると大丈夫だと思います。
2.写真に対して調整レイヤーのグラデーションマップを適用します
3.グラデーションのカラーを調整します
こんな感じに仕上がりました!次にこのデザインに少し変化をつけていきたいと思います。
グラデーションマップの設定で、グラデーション幅を狭くしてコントラストを強くしてみます。シャドウとハイライトの色味が強くなりメリハリが強くなります。
B.階調数を減らす
ポスタリゼーションで階調数を減らしてみます。グラデーション状の色のつながりが無くなることでフラットな印象に近づきます。
C.カラーハーフトーンを適用する
カラーハーフトーンを使うと2色トーンが互いに混在するイメージになり、コントラストが弱くなります。インク印刷物のような雰囲気が出ます。
シャドウ:#a20000
ハイライト:#86ffa2
補色の組み合わせなので色相としてもコントラストが強く、またナチュラルハーモニーで色みが持つ本来の明度を保つので最もインパクトのある組み合わせになります。
2.補色+コンプレックスハーモニー
同じく補色の組み合わせですが、青紫に近いほうの色の明度を高く、黄色に近いほうの色の明度を低くするコンプレックスハーモニー配色でのパターンです。
シャドウ:#006818
ハイライト:#ffa4a4
補色なので色みのコントラストはありますが、コンプレックスハーモニーのため、色みの明度差が小さくなるのでややコントラストが抑えられます。メリハリをつけながらも2つの色が馴染むようなイメージになります。
3.近似・類似色+ナチュラルハーモニー
2つの色相が近い、もしくは中間にあたる組み合わせでナチュラルハーモニー配色を使ったパターンです。色みが近すぎるとモノトーンに見えてしまうので注意が必要です。
シャドウ:#6700b7
ハイライト:#7bf4f5
色みが近づくことでイメージの雰囲気を統一させることができます。補色に比べてコントラストは弱くなりますが、ナチュラルハーモニー配色でメリハリも適度に残っています。
4.近似・類似色+コンプレックスハーモニー
同じく色みが近い組み合わせでコンプレックスハーモニー配色を使ったパターンです。色みの組み合わせは中間色くらいまで離したほうが雰囲気がでます。
シャドウ:#1e7473
ハイライト:#d89bfe
これまでの組み合わせのなかでは最もコントラストが弱い組み合わせになります。シャドウとハイライトが比較的馴染みますので、上にテキストが載るような背景としてはちょうどいいかもしれませんが、Duotoneとしてはあまり効果が得られないように見えます。
上記のパターンであれば、よりDuotoneが持つイメージを出す場合には、ナチュラルハーモニー配色が有効になるのではないでしょうか。色みについてはインパクトが強い分全体の世界観に合わせていくのがベターです。
これまでの内容を踏まえてサンプルデザインを作成してみました。
Duotoneは日本ではあまりみられませんが、海外では比較的使われているデザイン手法のように思います。アーティスティックで独特な世界観を表現するのにオススメなので是非使ってみてはいかがでしょうか。

Duotoneデザインの作成
DuotoneデザインのイメージはPhotoshopを使って作成していきます。ここでは「グラデーションマップ」機能を使った方法で進めていきたいと思います。 1.ベースとなる写真を用意します



Duotoneデザインのバリエーション
A.グラデーションのコントラストを強くする





Duotoneデザインにおける配色
2色という限られた配色のなかで、どのような色を選択するのが良いのでしょうか。幾つかのパターンをあげながら見ていきたいと思います。(下記の例はわかりやすいようにグラデーションのコントラストを少し上げています) 1.補色+ナチュラルハーモニー 色相環においてちょうど正対する位置にあたる補色の組み合わせで、青紫に近いほうの色の明度を低く、黄色に近いほうの色の明度を高くするナチュラルハーモニー配色でのパターンです。




sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories