【Photoshop】写真をダブルトーン（デュオトーン）に加工する方法

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）で普通の写真をデュオトーン（ダブルトーン）のカッコいい画像に加工する方法を徹底解説します。

フォトショ初心者の方でもデュオトーン加工が再現できるよう、順を追って詳しく解説！
一気に写真の印象を変える事ができます。

これからPhotoshopを始められる方、更にフォトショップを使いこなしたい方にオススメのコンテンツ。
では早速始めていきましょう！

この記事の目次

どんな加工ができるの？

上記のように普通の写真を二つのライトで照らされているような加工が今回のチュートリアル内容です。

全く違った印象の画像になりますよね。
Photoshopを使えば簡単に作る事ができます。

デュオトーン（ダブルトーン）の作り方

それでは実際にPhotoshopを使ったデュオトーン（ダブルトーン）の作り方を解説します。
手順通りに進めていけばフォトショ初心者の方でも再現可能です。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

素材を準備

素材となる写真を準備し、フォトショップに読み込みます。

素材にこだわりたい方はAdobeStockが最強！3億点以上の商用利用可能で高品質な素材が制作を加速させてくれますよ。
詳しくはコチラで解説しています。

STEP.2

好みの色で塗りつぶす

レイヤーを1つ追加し、好きな色で [ 塗りつぶしツール(G) ] で塗りつぶします。
サンプルの色は [ #00ffda ] を使っています。

当然元の人物レイヤーは手前の塗りつぶしレイヤーによって見えなくなります。

STEP.3

ベクトルマスクを追加し、不要部分をマスクする

[ レイヤーパネル下部 ] → [ ベクトルマスクを追加 ]　
いわゆる「レイヤーマスク」を追加します。

[ ブラシツール ] → [ ソフト円ブラシ ] に変更。
ベクトルマスクレイヤーをアクティブに、右半分を黒く塗ります。

※ブラシツールの詳しい使い方はコチラ。

STEP.4

レイヤーの描画モードをカラーに

レイヤーの描画モードを [ カラー ] に変更します。

すると左図のような状態になります。

STEP.5

レイヤーをコピペして描画モードを変更

STEP.4で作成したレイヤーを [ Ctrl + J ] (Mac：Command + J) でコピーします。

コピー後に [ Ctrl + T ] (Mac：Command + T) で自由変形モードにします。
180度回転させましょう。
※[ Shit ] を押しながら回転させるとキッチリ180度回転が可。

すると全面がシアンっぽい色になりました。

レイヤーの描画モードを [ 減算 ] に変更します。

すると左図のような見た目になります。
補色（反対色）になりましたね。

※なお、サンプルはレイヤーの透明度を80%にしています。

STEP.6

レイヤーの描画モードをカラーに

STEP.5で作成したレイヤーのベクトルマスクを調整します。
黒色のソフト円ブラシで境界を塗り、少しマスク面積を増やすイメージで。

デュオトーン（ダブルトーン）のベースが完成しました。

STEP.7

レイヤーの描画モードをカラーに

STEP.6で終わってもいいのですが、少し調整を入れます。

[ レイヤーパネル下部 ] → [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ 特定色域の選択 ]
※調整レイヤーの基本操作はコチラで解説しています。

特定色域の選択のプロパティを設定します。

カラー：ブラック系
シアン：+2%
マゼンタ：+4%
イエロー：-10%
ブラック：-5%

調整している画像に合わせて調整項目を変更してください。

すると左図のようになります。

STEP.8

コントラスト比を高くする

[ レイヤーパネル下部 ] → [ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ 明るさ・コントラスト ] を追加します。

明るさ：40
コントラスト：20

陰影が強い方がデュオトーンの特性が活かされます。

FINISH

完成

以上でデュオトーン（ダブルトーン）の完成です。

色を変えると簡単に雰囲気を変える事もできます。

Photoshopがあれば簡単にデュオトーン化できますよ。
フォトショ未導入の方はAdobe公式サイトから入手できます。

更に高品質なダブルトーンエフェクト

先に紹介したデュオトーン（ダブルトーン）をさらに発展させた表現ができるPSDを紹介します。
全て商用利用可能！

ダウンロードして対象画像に適用するだけで再現できます。
高品質なグラフィックを数分で制作したい方にオススメです。

#01 Photo Duotone Effect Mockup

デュオトーンで尚且つ背景にパターンレイヤーを追加できます。
デザイン性の高いグラフィックがあっという間に作れます。

ダウンロード

#02 Soft Dual Light Overlay Effect

柔らかい表現のデュオトーンエフェクトです。
上品で繊細なイメージを作成されたい方にオススメです。

ダウンロード

#03 Duo Tone Double Exposure Photo Effect

人物と背景の色を分けてダブルトーンにする事ができるエフェクトです。
PSD形式なのでダウンロードしたら簡単に編集できます。

ダウンロード

#04 Pop Art Duotone Effect Mockup

ポップアート風のデュオトーンにできるエフェクトモックアップです。
デュオトーンにするだけでなく、スクリーントーンのようにドットによる陰影が付きます。

ダウンロード

#05 Summer Duotone Overlay Effect Mockup Set

まるでサマータイムのような印象でデュオトーンにする事ができるエフェクトです。
エフェクトパターンが複数収録されているのでパターン違の作成も楽にできます。

ダウンロード

写真を大変身させるモックアップ集

様々なジャンルで使える高品質なエフェクトモックアップをピックアップしました。
全て商用利用可能！
フォトショ初心者の方でもプロの品質を圧倒的短時間で実現できるチートアイテムです。

【Photoshop】写真を全く違うグラフィックに変える高品質なエフェクト50選【商用可】

【Photoshop】写真を超短時間で大変身させる高クオリティなエフェクト51選【商用可】

フォトエフェクトの作り方まとめ

フォトエフェクトの完全自作方法、そして超高品質なフォトエフェクトPSDについて解説しています。
Webサイトやバナーデザイン、各種DTPやUIデザイン等、様々なクリエイティブに使えるテクニックです。

1分で作れるエフェクトPSD素材

商用利用可能で超高品質なエフェクトが1分で作れるPSD素材の使い方と作例です。
気になるサムネイル画像をクリックすれば解説記事にジャンプします。

様々なエフェクトPSD

商用利用可能で高品質なフォトエフェクトPSDを厳選しました。クリエイティブを劇的に効率化できる素材を併せてチェックされてみませんか？

【Photoshop】写真を全く違うグラフィックに変える高品質なエフェクト50選【商用可】

【Photoshop】写真を超短時間で大変身させる高クオリティなエフェクト51選【商用可】

フォトエフェクトを自作

Photoshopを使いこなして様々な質感のフォトエフェクトを作る方法を解説しています。
気になるサムネイル画像をクリックすればメイキング記事にジャンプします。

おわりに

以上、Photoshopを使って写真をデュオトーン（ダブルトーン）に加工する方法についてでした。

特にカッコいい系の写真に適した加工です。
単にデュオトーンにするだけでなく、コントラストを強めると「より雰囲気」を出す事ができますよ。

Webサイトやバナー、チラシをはじめとした印刷物のメインビジュアルなどに適したグラフィック作成が手軽に行えるので是非お試しください。

また、noteで当記事で作成したエフェクトPSDを配布しています。

ではまた！