masaca（@masaca_dApps）です。
デュオトーンとは、2色のグラデーションを使った画像の加工で最近のWebデザインでよく使われている手法です。
Webサイトのメインビジュアルやコンテンツ、バナーの表現とあらゆる場面で使うことができるので覚えておくと便利です。
Photoshopを使って、簡単にデュオトーンを作る方法を解説します。
2ステップで完了するので、Webデザイン初心者でも安心です。
PSDデータもダウンロード可能にしたので参考にしてみてくださいね。
masaca
目次
デュオトーンとは
デュオトーンを使った代表的なWebデザインといえば「Spotify」が有名です。
国内のWebサイトでもデュオトーンはよく見かけます。
このように2色のグラデーションで構成されており、印象的なビジュアルを作ることができます。
Photoshopを使ったデュオトーンの作り方
この画像を使ってデュオトーンを作ってみましょう。
Photoshop上部のメニューから「レイヤー」→「新規調整レイヤー」から「グラデーションマップ」を選択します。
「#000000」と「#026ec1」のグラデーションを設定しました。
グラデーションを適用するとこんな感じになります。
このままでは少し暗いので、写真が見えづらいですね。次のステップでもう少し調整してみましょう。
デュオトーンの完成
画像が少し暗いので「トーンカーブ」を使って画像を少し明るくしました。
写真素材によっては少し調整したほうが、見栄えが良くなります。
キャッチコピーを追加すると、メインビジュアルとして使えそうですね。
こんなに簡単にできちゃいます！
デュオトーンを作るときに便利な素材・ツール
デュオトーンを作るときはグラデーションの設定が大事なのですが、自分で設定するのは結構大変・・・。
という方は便利な素材やツールがあるのでご紹介します。
デュオトーンを作るのに便利なPhotoshopのグラデーションプリセット
以下のリンクからデュオトーン用のグラデーションが60種類セットになったPhotoshop用のプリセットをダウンロードできます。
グラデーションを選択するだけで、簡単にデュオトーンが作れます。
デュオトーンを作るのに便利なツール
Gradient Huntを使えば、たくさんのグラデーションを参考にすることができます。
デュオトーンに使えそうなグラデーションを選んでみましょう。
左下の「COPY GRADIENT CODE」でCSSコードがコピーできます。
「PNG」ボタンから画像をダンロード可能です。
選んだグラデーションを適用してみるとこんな感じになりました。
PSDデータのダウンロード
今回作ったデュオトーンの作例を以下からダウンロードできます。
参考にしていただければと思います。
まとめ
Photoshopを使ったデュオトーンは覚えておくと、メインビジュアルやバナーで大活躍します。
効率的に作るなら素材やツールを使うと便利です！
masaca
Webサイトのメインビジュアルの作り方を極める！良質な記事まとめ 
初心者デザインから脱出！写真の上の文字を見やすくするテクニック7選 
Webデザインのフォント選びに迷ったときに便利なサイト「wordmark.it」
コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！
SPONSORED LINK
コメントを残す