かっこいいデザインのアイディア1つに、白黒(モノクロ)カラーにカラーを1色だけ使ったようなデザインがあります。この法則を用いればかっこいい・クールなデザインを作り出すことができます!
今回は、初心者向けに「Photoshop(フォトショ)を使って写真を白黒(モノクロ)に加工する方法」と「白黒+1色デザイン」のアイディアを解説していきます!
バナーデザイン、webデザインでも紙デザインでも使えるテクニックなので、覚えておいて間違いなし!
写真を白黒(モノクロ)にする2つの方法!
今回は白黒にする2つの方法をお伝えします。フォトショを使えば、白黒に加工する方法はいくつかあるので、初心者の場合は、今回お伝えする2つの方法を最初に覚えておけばOKです!(どちらも超簡単!)

今回はこちらの写真をサンプルに、白黒に加工していきます!
【方法1】カラーモードを「グレースケール」にする
1クリックでできるので、一番な方法になります!

- 白黒にしたい画像をPhotoshopで開く
- 上部メニューバー→[イメージ]→[モード]→[グレースケール]
- 「モードを変更すると一部の調整レイヤーが破棄されます。」というポップアップでてきますが「OK」をクリック!
- 完成

注意点

写真だけを白黒にしたいという場合は、写真だけ別途開き、[方法1]で加工し、デザインデータに読み込むなどで使っていただくか、次項の[方法2]を試してみてください!
【方法2】調整レイヤー「白黒」を使う

- 白黒にしたい画像をPhotoshopで開く
- レイヤーパネル下の[調整レイヤーを新規作成する](上記画像参照)→[白黒…]を選択
- 完成!

とても簡単に白黒にすることができます!

こちらの方法で白黒にすると、色調補正ができるので、「写真の赤い部分をもう少し暗くしたい・明るくしたい」など細やかな調整を行うことができます。
【おまけ】写真の一部だけカラーに、他を黒白にする方法

今回は、赤系統の花の色だけのカラーを残し、他の部分は白黒にしていこうと思います!
白黒写真でもなく、カラー写真でもないような幻想的な写真にすることができます。

- レイヤーパネル下段の「新規調整レイヤー」→[色相・彩度]を選択
- 色相・彩度のプロパティの設定を以下のように調整します
- 今回はサンプル写真の赤い花の部分だけの色を残すので、「レッド系」の数値はそのまま
- 「レッド系」以外の色の[彩度:]を[-100]に設定
- 完成!
今回は赤い部分の色だけを残したかったので、「レッド系」の数値はそのままにし、それ以外の色の彩度を調整しました。写真や被写体に応じて調整すべきカラーが変わってくるので、ご注意ください!(例えば、空を含めた風景写真で、空だけ色を残したい場合は→ブルー系の数値をそのままにし、それ以外の彩度を-100に調整する、などです。)
白黒+カラー1色を取り入れたかっこいいアイディアのまとめ
写真を白黒で使いつつ、アクセントに1色だけカラーを使うことで、黒白の写真をとっても効果的に使うことが、かっこいいクリエイティブやデザインを作り上げることができます!
今回は白黒+1色でできたデザインのアイディアをご紹介します。
1色カラー背景、写真と文字は白黒でまとめる

背景に強めの色を使うことで、白黒の写真が目立たせることができる。背景が1色カラーなので、白文字が強調されるので、文字を立たせたいようなグラフィックにピッタリのアイディアです!
無彩色×有彩色のコントラストがもっとも強調されるので、「白黒+カラー1色」の見せ方でもっとも有効的でオススメの表現方法です!
文字にカラー1色、他要素は白黒でまとめる

写真や背景など文字要素以外は白黒に、文字だけに1色カラーの配色する。文字色は彩度が明るい色を取り入れることで、文字と背景のメリハリがくっきりさせることができます!
デザインはシンプルならが、雑誌の表紙のような見せ方ができるのがかっこいいです!
模様だけに1色カラーを取り入れる

文字や写真の主要な要素は白黒でまとめつつ、アクセントとしてパターンや模様などをオーバーレイで乗せカラーを取り入れる。入れるパターンや模様によって全然デザインに見せることができます。(今回のサンプルでは、ドット形をオーバーレイさせていますが、ストライプ形や三角形などの形でも面白いかなと思います!)
さいごに
白黒+1色はかっこいいデザインに簡単にまとめることができますし、アイディアとしてとても面白い方法です!
バナーや紙のデザイン、どちらでも使えるアイディアなのでぜひ、チャレンジしてみてください!