Webデザインが学べるコミュニティを作りました!

【Photoshop】Webデザインで超便利!デュオトーンの作り方

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」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA