Photoshopで写真をモノクロにする3つの方法【初心者向け】

Photoshop(フォトショップ)で【写真をモノクロにする方法】を初心者向けに解説した記事です。グレースケールに変換、画像の彩度を下げる、1チャンネルだけを抜き出すという3つの方法があるのでそれぞれ紹介しています。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

監修してくれたメンター

関谷 純

専門学校卒業後、ゲーム開発会社で4年ほどゲームプログラマーとして働き、UI周り・ネットワーク通信・アクション部分などの開発に携わる。現在はゲーム開発方法を教えながら、個人でゲーム開発・販売を行う。

画像を編集する際に、デザインとしてモノクロ(白黒)にすることもあると思います。

Photoshopでのモノクロ加工には、いくつかの方法があります。

今回はそのうちの3つの方法を紹介します。

(※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。)

目次

 

田島悠介

今回は写真をモノクロにする方法を練習してみようか。

大石ゆかり

カラーから白黒にするってことですね。でもそんなことできるんですか~?

田島悠介

やってみると気付くと思うけれど、簡単なやり方ですぐできるんだ。
3つの手法で試してみよう。

大石ゆかり

分かりました!

 

モノクロ画像の用途

モノクロで印刷する場合に、画像はモノクロ画像を用意します。

他にも画像認識や画像加工の際に、3色(RGB)画像から1色(モノクロ)画像を作って使用します。

モノクロ画像は前処理用画像としてよく用いられるため、作り方を知ることは大切なことです。

 

 

写真をモノクロにすることの意味

カラーの画像は色のデータを持っています。

色は3要素(色相、彩度、明度)をもっていて、それをRGB成分の値で表現しています。

モノクロ画像とは主にカラー画像から明度データだけを取り出したものです。

一般的には3色データから1色データを作ることで、モノクロ画像を作ることができます。

 

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

写真をモノクロにする方法

モノクロ画像を作る方法は大きく分けて3つあります。

  1. グレースケール画像に変換する方法
  2. 画像の彩度を下げる方法
  3. 1チャンネルだけを抜き出す方法

順番に紹介していきます。

 

今回はこの画像をサンプルとしてモノクロにしていきます。

サンプル画像

 

1.グレースケール画像に変換する方法

文字通り、カラー画像をグレースケール画像に変換する処理です。

方法は処理対象の画像を選んだ後、「イメージ」メニューで「モード」→「 グレースケール」の順に選びます。

この方法はRGB(3色)成分の画像から、明るさ(1色)成分の画像を作成する処理です。

グレースケール

 

グレースケールを選択すると、「カラー情報を破棄しますか?」というアラートが出るので「破棄」を選びます。

破棄

 

これでグレースケールにする方法は完了しました。

グレースケール完了

 

田島悠介

グレースケール画像に変換する方法だね。

大石ゆかり

本当に一瞬でできちゃいました!

田島悠介

アラートのメッセージにも出ているけれど、カラー情報は失われてしまうよ。元の画像をとっておきたい場合は別に保存しておく必要があるよ。

大石ゆかり

いわゆる不可逆ってやつですね。
他にはどんな方法があるんですか?

 

2.画像の彩度を下げる方法

続いて、カラー画像の色の鮮やかさを落として無彩色にする方法です。

まずは「イメージ」メニューの「色調補正 」「 色相・彩度」を選びます。

色相彩度

 

ここで「マスター」の色に対して、彩度を-100に設定します。

すると写真がモノクロになりました。

色相彩度2

 

 

3.1チャンネルだけを抜き出す方法

最後に3つめの方法です。

チャンネルとはRGBのような色の成分のことです。

画像には3つのチャンネルがあります。

このうち1つを抜き出すと写真がモノクロになります。

 

まずは、「ウィンドウ」メニューから「チャンネル」にチェックを入れます。

チャンネル

 

するとPhotoshopの右下にチャンネルが表示されます。

チャンネル表示

 

ここで1つのチャンネルを選びます。

今回はレッドを選びました。

レッド

 

この状態のまま、範囲選択メニューで「すべてを選択」を選びます。

全てを選択

 

さらに、編集メニューで「コピー」を選びます。

コピー

 

コピーした画像を貼り付けましょう。

ファイルメニューで「新規」を選び、新しくドキュメントを作成します。

 

作成したドキュメントに先ほどコピーした画像を貼り付けます。

さらに、レイヤーメニューで「画像を統合」処理を行うことで、ペーストした画像が背景と統合されます。

完成

これで写真が白黒になりました。

最初に選ぶチャンネルで画像も少し変わってくるので、他のチャンネルも試してみてください。

 

 

おまけ:応用例

おまけとして応用例をご紹介します。

よくCMなどで1ヶ所だけカラーで、他は全部モノクロという画像(映像)があります。

今回紹介した「画像の彩度を下げる方法」と同じ考え方で作ることができます。

 

イメージメニューから「色調補正 」→「色相・彩度」を選びます。

次に残したい色(ここでは赤色系とします)を決めます。

その赤色系以外(グリーン系、ブルー系、イエロー系、シアン系)の色の彩度を-100にします。

赤色系に該当するレッド系とマゼンタ系は、そのまま(0のまま)にします。

色相彩度カスタム

 

すると赤色系だけを残してモノクロの画像が完成しました。

ハス完成

 

 

今回の記事はいかがでしたか?

ぜひ自分でもチャレンジしてみてください。

 

田島悠介

各色の要素を操作することで、こういった表現もできるんだ。

大石ゆかり

広告とかでよく見るやつですね
ちょっとした工夫でおしゃれな画像が作れそうです!

田島悠介

シンプルにモノクロにするだけならグレースケールで十分だね。
でも、色調補正を使うとカラーとモノクロの境目にしたり、上のような一部分だけを適用させたりというふうに、様々な調整ができる。
目的に合わせて活用しよう。

大石ゆかり

実際に触ってみて確かめてみます。ありがとうございました!

 

Photoshopを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • Photoshopを調べたけど分かりづらい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

Photoshopの学習や情報収集をしていて、このように思ったことはありませんか?

テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。