Advertisement

duotone-effect-photoshop-tutorial

 

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

 

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

 

1st_track

 

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

 

 

 

詳細は以下から。

 

 

 

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

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

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

 

duotone-effect-step1

 

 

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

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

 

duotone-effect-step2

 

 

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

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

 

step3

 

 

完成。

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

 

duotone-effect-step4

 

 

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

step5

 

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

 

ダウンロード

 

 

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

Colorfilter.css

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

 

cssfilter (1)