最近のグラフィックデザインやWebサイトなどでよく見かける、シンプルでポップな配色が特長のダブルトーン。その昔のアーティストたちが時間と手間をかけて作成していたこのデザイン手法を、Photoshopの「グラデーションマップ」を使って簡単に再現する方法をご紹介します。

まずは、下の1分動画で制作工程を確認しましょう。


難易度2/5

 

本チュートリアル内で使用する主な機能
グラデーションマップ、グラデーションエディター、カラーピッカー

グラデーションマップの仕組み

作業に入る前に、Photoshopの「グラデーションマップ」という機能について解説します。

グラデーションマップは、カラー画像をグレースケールに変換し、明暗の階調に応じてグラデーションのカラーを適用する機能です。画像の最も暗い部分(シャドウ)がグラデーションの始点、最も明るい部分(ハイライト)が終点、ちょうどその中間のカラーが中間点になります。この始点と終点のカラーや位置を変更することで、様々なバリエーションを試すことができます。

グラデーションマップは調整レイヤーとして使用できるため、いつでも元の画像に戻ることができます。

写真を簡単にダブルトーンに加工する方法

手順1/5

写真にグラデーションマップを適用する

Photoshopを起動し、「ファイル」→「開く」をクリックして、ダウンロードしたサンプルファイル(strat.psd)を開きます。次に、「ウィンドウ」→「レイヤー」をクリックし、「レイヤー」パネルを開きます。「レイヤー0」が選択された状態で、パネル下部の「塗りつぶしまたは調整レイヤーを新規作成」ボタンを押し、ドロップダウンメニューから「グラデーションマップ」をクリックします。カラー画像がグレースケールに変わります。

写真を簡単にダブルトーンに加工する方法

※初期設定では、グラデーションのカラー分岐点の始点が黒、終点が白に設定されています。

手順2/5

グラデーションを編集する

「属性」パネルまたはオプションバーにある現在のグラデーションサンプルをクリックすると、「グラデーションエディター」が開きます。プリセットから「紫、オレンジ」の線形グラデーションをクリックします。カラーバーの左端(始点)のカラー分岐点が紫、右端(終点)のカラー分岐点がオレンジに変更され、紫からオレンジへのグラデーションが画像に適用されます。

写真を簡単にダブルトーンに加工する方法

 

カラーを変更してみましょう。カラーバーの終点のカラー分岐点をダブルクリックし、「カラーピッカー(ストップカラー)」を表示します。カラースライダーのつまみをドラッグし、上の方まで持ち上げていくと、オレンジが赤系のカラーに変更されます。カラーフィールド内をドラッグして任意のカラーを選択します。カラーが決まったら、「OK」をクリックします。

写真を簡単にダブルトーンに加工する方法

 

同様に、始点のカラー分岐点をダブルクリックし、カラーピッカーを開いてカラーを変更します。ここでは、紫から少しブルー寄りのカラーに変更します。

写真を簡単にダブルトーンに加工する方法

※カラースライダーまたはカラーフィールドを使って直感的にカラーを選択できるほか、HSB、RGB、Lab、CMYKの各カラー値や、16進数値を指定することによってカラーを選択できます。詳しくは、カラーの選択を参照してください。

手順3/5

カラー分岐点の位置を調整する

今度は、カラー分岐点および中間点をドラッグして、グラデーションの明るさとカラーの割合を調整します。ここでは、始点と終点のそれぞれのカラー分岐点を内側にドラッグし、シャドウ部とハイライト部を少し際立たせて、画像にメリハリをつけます。中間点を移動することで、さらにきめ細かく調整できます。

※カラー分岐点および中間点の位置は、グラデーションエディター内の「位置」に数値を入力して変更することも可能です。

写真を簡単にダブルトーンに加工する方法

手順4/5

カラーを追加する

現在は2色のカラーでグラデーションが構成されていますが、新たにカラーを追加することも可能です。何層にも重なった奥行き感のあるグラデーションを作成できます。カラーバーの下をクリックすると、その位置に新しいカラー分岐点が追加されます。

ここでは、カラーバーの始点および終点の下をクリックして、2つのカラー分岐点を追加します。それぞれのカラー分岐点ダブルクリックしてカラーピッカーを開き、カラーを選択します。最後にカラー分岐点と中間点の位置を調整して、完成です。

写真を簡単にダブルトーンに加工する方法

手順5/5

グラデーションを保存する

作成したグラデーションを保存することで、他のドキュメントでもすぐに使用できます。グラデーションエディターで、「グラデーション名」を入力し、「新規グラデーション」をクリックするとプリセットに追加されます。また、「保存」をクリックすると、プリセットをファイルとして書き出すことができ、他のユーザーと共有することも可能です。

写真を簡単にダブルトーンに加工する方法

 

ダブルトーンは配色の組み合せを変えるだけで、与える印象は驚くほど変わってきます。様々な配色のバリエーションを試してみてください。ダブルトーンは、Webサイトのビジュアルやポスター、ポストカードなど、幅広いデザインに活用できます。

写真を簡単にダブルトーンに加工する方法
このページは役に立ちましたか。