WEBデザイン -デュオトーン-

はじめに

ファッションに流行があるように、デザインにも流行があります。
本日は、WEBトレンドデザインの中で、「デュオトーン」というデザインをご紹介します。
Photoshopを使えば、今どきのデザインがすぐに作れちゃいますよ。
デザインに困ったときは、ちょっとしたアクセントに是非お試しください。

デュオトーンとは

Duo(２色)＋Tone（色合い）というそのままの意味で、
２色の色彩で構成されたデザインのことです。
2016年頃から下記のようなデザインを、世界の様々なWEBサイトでみかけるようになり、
すでに目にしたことがある方もいらっしゃるのではないでしょうか。

デュオトーンでデザインしてみよう

Photoshopを開いて、たった３ステップ！

1. 編集したい画像を開く。
2. グラデーションマップからグラデーションエディタを開く。
3. グラデーションエディタで２色の配色を選択する。

１．まずは編集したい画像を開きましょう。

今回は女性の写真をサンプルに加工。動物写真・フード写真といろいろ試しましたが、
個人的に、人物写真をつかうとかっこよく決まる気がします。

２．グラデーションマップからグラデーションエディタを開く。

「調整レイヤー作成」ボタンを押して、「属性パネル」内の「グラデーションマップ」を選択します。
グラデーションをクリックし、グラデーションエディタを開きます。
※画像は背景色・描画色が白黒になっているため、モノトーンになっています。

３．グラデーションエディタで２色の配色を選択する。

グラデーションの左端、右端のそれぞれカラーをダブルクリックし、配色を選択します。
左側が暗い部分の配色、右側が明るい部分の配色になります。
今回はライトグリーンとディープブルーにしてみました。

応用：配色を変えてバリエーションを増やそう。

自分用のストックカラーを作っておけば、デザイン展開もスピードアップ！
デザインの幅も広がります。

まとめ

いかがでしょうか。
好きな画像とphotoshopさえ用意できれば、誰でも簡単につくれるデュオトーンデザイン。
画像の上に載せるタイポグラフィによっても、デザインのテイストが変わって面白いですよ。
扉画像は、ゴシックを使ってカジュアル＆シンプルに仕上げてみました。
インパクトをあたえたいバナーやLP制作に取り入れてみるのもいいかもしれませんね！
是非お試しください。

Written by Baycross Marketing