【Photoshop】ドット風デュオトーンのフォトエフェクトメイキング

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

Photoshop（フォトショップ）を使って写真にドットのデュオトーンの質感を付与する方法をフォトショ初心者の方に詳しく解説します。

所要時間は約5分！
簡単操作で写真の印象を大幅に変えられるレタッチテクニックです。

画像をドット風にし、更にデュオトーン（ダブルトーン）とノイズテクスチャを追加し、ざらつき感のある質感に大変身させる事ができますよ。

この記事の目次

何ができるの？

上図のように通常の写真素材の質感を大変身させられるフォトエフェクトの作り方です。
ドット表現とデュオトーン、そしてノイジーなテクスチャを重ねたエフェクトが自作可能！
Webサイトやバナー・SNS等をはじめとしたデジタル媒体のメインビジュアル、チラシ等の印刷物のデザイン等、幅広いクリエイティブに使えるレタッチテクニックですよ。

ドットデュオトーンエフェクトの作り方

Photoshopでドットデュオトーンのフォトエフェクトを作る方法を解説します。
フォトショ初心者の方にも5分で再現できる内容ですよ！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

画像を読み込む

ドットデュオトーンを適用したい画像をPhotoshopに読み込みます。
素材画像はコチラからダウンロードできます。

対象画像のレイヤーを右クリックし、[ スマートオブジェクトに変換 ] を行いましょう。

※スマートオブジェクトへの変換方法はコチラで詳しく解説しています。

STEP.2

ハーフトーンパターンを適用

[ フィルター ] → [ フィルターギャラリー ] を開きます。

フィルターギャラリーの編集画面が開きます。
[ スケッチ ] → [ ハーフトーンパターン ] を適用。

サンプルの設定値は下記です。
サイズ：7　コントラスト：25
※値は画像サイズや色味に合わせて調整して下さい。

すると左図のようにドット模様のハーフトーンパターンが適用できます。

背景色と描画色を変えると？

描画色を黒・背景色を白にしておくと白黒のハーフトーンパターンが適用できます。
描画色を青・背景色を赤など、別の色にすると表現が変わります。

※ [ D ] を押すと白黒の初期設定に戻せます。

STEP.3

明るさ・コントラストを追加

[ イメージ ] → [ 色調補正 ] → [ 明るさ・コントラスト ] を適用します。

明るさ・コントラストの設定値です。

明るさ：45
コントラスト：30

※編集対象の画像に合わせて設定値は調整して下さい。

すると左図のようにやや明るく、コントラストが強調された絵になります。

STEP.4

グラデーションマップを追加

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ グラデーションマップ ] をクリックします。

プロパティパネルのグラデーションをクリックすると色調整ができます。お好きなカラーを設定て下さい。

サンプルのカラー設定は下記です。
#c2332d
#4ed6e7

すると左図のように白黒のハーフトーンパターンに色を重ねる事ができます。

STEP.5

ノイズテクスチャを重ねて完成

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ べた塗り ] をレイヤーの最上部に追加し、白色で塗りつぶします。

その後、右クリックメニューから [ スマートオブジェクトに変換 ] しましょう。

Photoshop画面上部の [ フィルター ] → [ ノイズ ] → [ ノイズを加える ] をクリックします。

下記ノイズを加えるの設定です。

量：100%
分布方法：ガウス分布
グレースケールノイズにチェック

※ノイズテクスチャの詳しい作り方はコチラの記事で解説しています。

ノイズレイヤーの描画モードを [ オーバーレイ ] に変更したらドットデュオトーンエフェクトの完成です。

ノイズテクスチャで粗めの紙面っぽい質感が出せるので、よりハーフトーンパターンの雰囲気が生かせるエフェクトにできます。

一度ドットデュオトーンのフォトエフェクトPSDを作ってしまえば、後から画像を差し替えるだけで同じ質感のグラフィックが量産可能です。

また、ハーフトーンパターンやグラデーションマップの色を変えるだけで雰囲気を簡単に変える事も出来ますよ。

更に高品質なドットエフェクト系PSD

先に解説したドットデュオトーンエフェクトより高度で高品質なエフェクトPSD素材です。
全て商用利用可能な素材なので安心して活用できますよ。

#01 Mixed Art Watercolor and Halftone Effect

このエフェクトを使うと単なる写真を水彩風にし、一部をカラーハーフトーンにしたお洒落な作品にできます。
何の変哲も無い写真をアート作品に昇華できる魔法のエフェクト！

ダウンロード

#02 Duotone Effect with Halftone Pattern

ハイクオリティなカラーハーフトーンを一瞬で作れるエフェクトジェネレーターです。
カラーパターンが7色収録されています。

ダウンロード

#03 Risograph Matchbook Print Photo Effect Mockup

単なるカラーハーフトーンでは面白くない、そんな方はザラっとした紙の質感はいかがでしょうか？
ビンテージ調の味わい深い画像へ簡単に変身させられます。

ダウンロード

#04 Dots Pattern Effect

陰影がドットサイズで表現できるエフェクトモックアップです。
当PSDを使えば一瞬でサンプルのような作品が作れます。

ダウンロード

#05 Halftone Dots Effect

ハーフトーンのドット表現ができるエフェクトモックアップです。
見ての通り、非常に高品質な仕上がりの作品制作が可能です。

ダウンロード

ハーフトーン系PSD

【Photoshop】高品質なカラーハーフトーンのエフェクトPSD28選【商用可】

超高品質なハーフトーン系のフォトエフェクトPSD素材を28点ピックアップしました。1分でサンプルのような質感にできるチート素材をチェックされてみませんか？

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

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

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

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

様々なエフェクトPSD

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

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

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

フォトエフェクトを自作

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

おわりに

以上、Photoshop（フォトショップ）で写真にドットデュオトーンの質感を付与する方法でした。
スマートオブジェクト化したレイヤーにフィルターメニューを駆使する事で大幅な質感変更が可能です。

Webサイトやバナーのメインビジュアルとして、ポートフォリオや各種紙面デザイン等。
様々なクリエイティブに応用できるレタッチテクニックなので是非ご活用ください！

また、noteで当記事のサンプルPSDを配布しています。制作の参考にご利用ください。

ではまた！