超簡単！Photoshopで写真を今どきのデュオトーンに加工する方法（無料グラデーション収録）

ウェブサイトやグラフィックデザイン、音楽サービス Spotify などで見かけるようになったデザインのひとつが、鮮やかでシンプルな配色の組み合わせが特長のデュオトーン（英: Duotone）です。

デュオトーンとは、２色（Duo）の色合い（Tone）から構成されたデザインを指し、かつて60年代に生まれたポップアートの旗手のひとり、アンディー・ウォーホルの作品が分かりやすいでしょう。

今回は、たった2ステップで手軽にデュオトーンを作成できる Photoshop チュートリアルをご紹介します。また、ダウンロードしてすぐに使える、デュオトーンエフェクトに適した無料グラデーションファイル10個セットも、記事の後半で公開しています。

詳細は以下から。

Photoshopで写真を今どきのデュオトーンに加工する方法

ステップ1: 加工する写真を開こう。

まずはデュオトーン・エフェクトを加えたい写真を Photoshop で開きましょう。今回はサンプル写真として、こちらを利用しています。

ステップ2: グラデーションマップを開こう。

メインメニューより「レイヤー」>「新規調整レイヤー」>「グラデーションマップ」を選択しましょう。または、レイヤーパネル右下にあるから「グラデーションマップ」を選択することもできます。

ステップ3: グラデーションを適用しよう。

白黒グラデーションが表示されるので、ダブルクリックで編集をしましょう。お好みの色で構いませんが、補色などの色の基本原則を取り入れることで、より魅力的なデザインを表現できます。ここでは茶色（#5b3b2f）と水色（#98c8ca）のグラデーションカラーを利用しています。

完成。

こちらが完成デザイン、たったこれだけの手順ですが、スタイリッシュな雰囲気を演出できるお手軽テクニックと言えるでしょう。

デュオトーン用グラデーションファイル無料公開中。

あらかじめいくつかのグラデーションをつくっておくことで、ボタンをクリックするだけで色を反映させることができます。デュオトーンに適したグラデーションカラー１０色ファイルを無料公開中です。

ダウンロード

デュオトーンをWebサイトで表現する方法。

Colorfilter.css

デュオトーン加工したいイメージ写真をCSSブレンドモードを利用することで、特定のCSSクラス名の記述だけで表現することもできます。