【Photoshop】白黒画像にする方法を徹底解説forフォトショ初心者

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

Photoshop（フォトショップ）で白黒画像にする方法をフォトショ初心者の方に分かりやすく解説します。

これからPhotoshopを始められる方、まだフォトショップに不慣れな方にオススメのコンテンツです。
白黒画像の作り方をゼロからマスターしてみませんか？

この記事の目次

白黒画像の作例

元画像

通常の白黒画像

暗めの白黒画像

明るめの白黒画像

色味を変えたモノトーン画像

2値化した白黒画像

カラー画像を白黒画像にした作例です。
同じ白黒でも黒っぽい白黒画像、白っぽい白黒画像、別の色味に統一したモノトーン画像など。
当記事では様々な白黒画像、モノトーン画像を効率的に作る方法を分かりやすく解説いたします。

白黒画像の作り方

Photoshopで白黒画像を作る方法を解説します。

Photoshopを導入しましょう

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

スマートフィルターを使った方法

STEP.1

スマートオブジェクトに変換

画像をPhotoshopに読み込みます。
サンプルはコチラの画像を活用しました。

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

レイヤーパネル上を右クリックし、対象レイヤーを [ スマートオブジェクトに変換 ] します。

STEP.2

白黒を追加

[ イメージ ] → [ 色調補正 ] → [ 白黒 ] を追加します。

STEP.3

白黒を設定

プロパティが自動的に開きます。

初期設定では対象画像をグレースケールにした白黒画像にできます。

[ レッド系 ] 、[ イエロー系 ] 、[ グリーン系 ] 、[ シアン系 ] 、[ ブルー系 ] 、[ マゼンタ系 ] のスライダーを動かすことで白黒の色味を変更できます。

STEP.4

着色する方法

[ 着色 ] にチェックを入れると白黒画像の色味を変えられます。

[ 色相 ] 、[ 彩度 ] を調整し、お好みの色味に変更可能です。

イエロー系で統一、ブルー系で統一など、白黒以外の色味に変更できます。

FINISH

完成

レイヤーパネルに追加されたスマートフィルターの [ 白黒 ] をダブルクリックすると再編集ができます。

プリセットを変更してみよう

白黒パネル上部に [ プリセット ] があります。

ブルーフィルター、暗く、グリーンフィルター、ハイコントラストブルーフィルター、ハイコントラストレッドフィルター、赤外線、明るく、ブラック（最大）、ホワイト（最大）、ＮＤフィルター、レッドフィルター、イエローフィルターの12種類が収録されています。

調整レイヤーを使う方法

STEP.1

画像を読み込む

白黒にしたい画像をPhotoshopに読み込みます。サンプルはコチラの画像を使いました。

STEP.2

白黒を追加

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ 白黒 ] を追加します。

プロパティが自動的に開きます。

[ レッド系 ] 、[ イエロー系 ] 、[ グリーン系 ] 、[ シアン系 ] 、[ ブルー系 ] 、[ マゼンタ系 ] のスライダーを動かすことで白黒の色味を変更できます。

白黒画像の色味を調整した例です。

FINISH

白黒を再調整

レイヤーパネルに白黒の調整レイヤーが追加されます。
後から設定を変更したり、削除等が簡単に行えます。

レイヤーマスクを活用する

レイヤーマスクを黒色で塗ると白黒の設定が除外されます。一部のみ白黒にしたい場合などはレイヤーマスクを活用してみましょう。

CameraRawフィルターを活用する

STEP.1

画像をスマートオブジェクトに変換

編集したい画像を読み込み、[ スマートオブジェクトに変換 ] を行います。

STEP.2

CameraRawフィルターを追加

[ フィルター ] → [ CameraRawフィルター ] を適用します。

※ショートカットは [ Shift + Ctrl + A ]
(Mac：Shift + Command + A)

STEP.3

露光量を設定

[ 基本補正 ] → [ 彩度 ] → [ -100 ] に設定。
あとは露光量、コントラスト、ハイライト、シャドウ、白レベル、黒レベル、カーブ等を設定してお好みの白黒画像にしましょう。

[ カラーグレーディング ] → [ 全体 ] を設定すると色味を変更できます。

STEP.4

完了

レイヤーパネルにスマートフィルターに [ CameraRawフィルター ] が追加されています。
ダブルクリックで再編集する事ができますよ。

なお、CameraRawフィルターを使ったレタッチテクニックはコチラの記事で詳しく解説しています。

色相・彩度でも白黒画像が作れる

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ 色相・彩度 ] を追加し、彩度を [ -100 ] にしても白黒画像が作成できます。スマートオブジェくトに対して [ イメージ ] → [ 色調補正 ] → [ 色相・彩度 ] でも構いません。

※色相・彩度の詳しい使い方はコチラの記事で詳しく解説しています。

2諧調化を使った白黒画像

STEP.1

画像をPhotoshopに読み込む

STEP.2

2諧調化を追加

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ 2諧調化 ] を追加します。

[ スマートオブジェクトに変換 ] してから [ イメージ ] → [ 色調補正 ] → [ 2諧調化 ] でも構いません。

STEP.3

しきい値を設定

プロパティが開き、[ しきい値 ] が設定できます。
スライダーを右に移動させると黒の領域が増え、左に移動させると白の領域が増えます。

2諧調化を適用した例です。

FINISH

再編集可能

レイヤーパネルを確認すると2諧調化の調整レイヤーが追加されています。
ダブルクリックすると2諧調化した画像を再編集できます。

ワンランク上の白黒エフェクト

白黒をベースとしたワンランク上のエフェクトPSDです。
全て商用利用が可能！
Photoshopが必須、事前にフォトプラン公式サイト（月額は最安の1,180円）から入手しておきましょう。

#01 Halftone Rasters Set

6種類もの高品質なハーフトーンパターンの白黒画像にできるフォトエフェクトPSDです。波線、ドット、ストライプなど、汎用的なハーフパターンなので様々なクリエイティブで活用できます。

ダウンロードする

#02 Money Print Effect

写真をリアルな紙幣のような質感にできるエフェクトPSDです。ゼロから作るのは非常に難易度の高いエフェクトですが、当PSDを使えば画像を差し替えるだけ！数秒でサンプルのような質感が再現できます。

ダウンロードする

#03 Photo Sketch Effect Mockup

写真を一瞬で鉛筆スケッチ風にできるエフェクトPSDです。画力とフォトショスキルがゼロでも問題なし！画像を差し替えるだけで完成しますよ。

ダウンロードする

#04 Vintage Vector Art Retro Photo Effect Mockup

ヴィンテージな質感の紙に描かれレトロアート風の表現ができるエフェクトモックアップPSDです。もちろん色味は簡単に変えられます。

ダウンロードする

#05 Photo Fractal Mirror Effect Mockup

写真に波紋のような効果がを加えられる白黒エフェクトPSDです。鏡が複数重なったようなミラーエフェクトを作るのは大変ですが、当PSDなら誰でも一瞬で再現できます。

ダウンロードする

#06 Monochrome Dispersion Photo Effect Mockup

対象物が粉々になる様子が再現できるエフェクトPSDです。非常にハイレベルなPhotoshopテクニックが使われており、破壊さる様子、粉塵になるようなシーンを簡単に再現可能！

ダウンロードする

#07 Grain Risograph Photo Effect Mockup

リぞグラフ印刷のような質感が再現できるエフェクトPSDです。リぞグラフ特有の粒子っぽい質感が見事に再現されています。

ダウンロードする

#08 Black and White Comic Book Effect Mockup

白黒で描かれたホラー系アメコミのようなタッチが再現できるエフェクトPSDです。雨のエフェクトやフキダシなども同梱されており、サンプルのようなグラフィックが簡単に作成できます。

ダウンロードする

#09 Image Vintage Comic Effect Mockup

ヴィンテージなコミック表現ができるエフェクトPSDです。紙にペンを使って描いたような白黒と斜線タッチが完全再現可能ですよ。

ダウンロードする

#10 Vintage Black and White Movie Title Text Effect

昔の白黒映画でありがちなタイトルが作成できるテキストエフェクトPSDです。文字ツールで文字を差し替えるだけ、1分で作業が終わります。

ダウンロードする

コミック風に加工できるPSD

【Photoshop】写真をマンガ風にできる高品質なPSD素材25選【商用利用可能】

写真をあっという間に高品質なマンガ風に加工できるエフェクトPSDです。全て商用利用可能！併せてチェックされてみませんか？

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。