PhotoshopやCSSを使い、背景だけを薄くしてデュオトーン加工する方法

• 作成：2016/12/19
• 更新：2017/06/06
• Photoshop > Webデザイン

デュオトーンを採用したアーティスティックなWebサイトも増えてきたことですし、今回は「写真全体をデュオトーンに加工するのではなく、人物と背景の透過度を変えてデュオトーン加工を施しおしゃれに見せる」方法を書きます。

エンジニア速報は Twitter の@commteで配信しています。

デュオトーンとは

デュオトーン（Duo Tone）は中間的な明るさを持つ色（グレースケール）と明るい色を重ね２色で表現します。使い方によっては、レトロでアーティスティックな外観を演出することができるし、白文字との相性もいいです。印刷用語では「ダブルトーン（double tone）」と呼ばれています。

デュオトーンを採用してあるサイトを色々見ていると、

１．写真全体をそのまま加工してあるタイプ

Home | Plant Chicago

Visitez nos bateaux, découvrez nos métiers

２．人物にマスクをかけ背景無しかベタ塗りに加工してあるタイプ

Finesse Design Atelier - Digital & Creative Studio

NewDealDesign

３．背景を消した上でグラデーションをかけてあるタイプ

Stinkdigital

などなどありますが、個人的な感覚としては、「３．背景を消した上でグラデーションをかけてあるタイプ」がテクニカルで、美しい感じがします。 今回はこのタイプを作ります。

CSS を使う方法

CSSを使って、どこまでできるのか実験。まずは画像をメインと背景に分割します（いずれにしてもPhotoshopは必要ですね）。マスクの方法は後述します。

２枚の画像を合成する:cross-fade()を使い、読み込みます。2枚目（背景）の写真を薄くしたいので透過度は10%に設定します。

<div class="mask-synth"></div>

.mask-synth {
  background: -webkit-cross-fade( url(メイン.png) ,url(背景.png) , 10% );
  background-size: cover;
  width: 100%;
  height: 450px;
}

その上にグラデーションのレイヤーを置きます。これで、CSSのみで様々な色のデュオトーンを作ることができます。

.mask-synth:before {
  content:"";
  position: absolute;
  background: linear-gradient(rgba(204, 51, 153, 0.8), rgba(255, 204, 102, 0.6));
  width: 100%;
  height: 450px;
}

しかし、IE/Firefoxが駄目。

Can I use

IE/Firefoxが未対応なのとpngを使うはめになるので、以下で紹介するPhotoshopを使う方法がいいかもです。

Photoshopを使う方法

こういった感じのデュオトーンを作っていきます。

ダブルトーン

超簡単にデュオトーンを作る方法。まずは、イメージ＞モード＞グレースケール。

次に、モード＞ダブルトーン。

プリセットを選んで

しかしこれだと全体に同じ加工が施され、セピアの色を変えただけみたいでパッとしない。この方法はやめてグラデーションマップとマスクを使うことにしましょう。

グラデーションマップとマスク

ペンツールかクイック選択ツールでくり抜きたい部分を選択、くり抜きたくない部分はAltキーを押しながら消します。

下のマスクアイコンを押します。

境界線の調整などを行います。

下のアイコンからグラデーションマップを選択。

アイコンから、写真調を選択

色を選択

マスクの下に新規レイヤー（長方形）を置き、ベタ塗りの背景。

マスクを複製して下に配置し、反転を押すと背景ありのデュオトーン。

背景レイヤーの透明度を変更して背景を薄くします。これで背景だけが薄くなりました。

フォントを選んで

文字をのせて完成。人物と背景の透過度が違うデュオトーンができました。

グラデーションマップを複製して、エディタで変更してあげれば、パステル調に変えたり

「シンプル」を選択して、「逆方向」にすると、それっぽくなります。

明るめの背景なので白抜きではなく補色の文字を使ってみます。柔らかい雰囲気。

#0099ff/#ff0099の組み合わせ。ポップで若い雰囲気。

#ff0033/#333366の組み合わせ。力強いイメージ。

文字の存在感を高めたい場合、暗めの背景なら明るめの文字をのせて明度対比を高めます。ということで白抜き。

#cc0066/#ffcc33は活発な雰囲気。

全体に斜めのグラデーションを入れる

Stinkdigital - Year In Musicのような雰囲気を出したいので、全体にグラデーションを入れたいと思います。

チャンネルミキサーを使うパターン。

アイコンからプリセットをカスタム、モノクロにチェックを入れます。

さらに、#cc3399/#ffcc66の組み合わせでグラデーションとコントラストの調整をします。角度は-140くらい。

全体に斜めのグラデーションが入ったデュオトーン完成。「人物はっきり、背景見えない」のがポイント。

最初の写真と比べると、随分変わりました。

詳しくはこちらの動画をご覧ください。

以上、人物と背景の透過度を変えてデュオトーン加工をする方法でした。