こんにちは、制作部の青木です。ホームページ制作をするに辺り、写真素材や画像は必ず使用します。画像加工をしているときや、ホームページ全体の色味を見たときに、「この写真素材のこの色が青色だったら・・・」などとあるかと思います。
また、商品のカラーバリエーションをホームページやCMでも見たことがあると思いますが、実際に写真撮影をしても実物と似た色を出すことが難しいことがあります。
その際に、色の置き換えでカラーバリエーションを量産していることもあります。
難しいように感じるかもしれませんが、Photoshopを使用すればPhotoshop初心者の方でも簡単に色の置き換えができてしまいます。

そこで今回は、Photoshop初心者の方でも分かりやすく、色の置き換えについて書かせていただきます。
※Photoshopのバージョンはcc2018を使用していますが、CS6,CS5,CS4,CS3,CS2でも対応しています。

今回は、こちらの写真素材のアイマスクや唇、目の色を違う色に変えていきたいと思います。

編集したい画像や写真をPhotoshopに表示させます。
レイヤーを見たときに、レイヤーが背景になっていますので、鍵ボタンをクリックして、画像を編集できるようにします。尚、Photoshop CCの場合は、レイヤー上にある鍵マークをクリックするだけで、鍵を外すことが出来ます。

「イメージ」→「色調調整」→「色の置き換え」を押します。

下記の画像のように、色を調整するスライダー画面が出てきます。「カラー：」と書いてあるところがスポイトで選ばれている色となっているので、変更する色となっています。

まずは、写真素材の赤色部分の青色に変えたいとします。赤色のアイマスクの部分にスポイトをクリックして、色相を青色にすると、マスクの一部や唇の一部分だけが青色になっていると分かります。

しかしこれでは、赤色の部分が残っていて、アイマスクや唇の色が不自然になってしまいます。その時に「許容値」の数字を上げます。「許容値」を上げることによって、色を置き換える色の数が多くなります。つまり許容値が上がるほど、スポイトで拾ってくれた色に近い色まで拾ってくれます。
同じ設定で、「許容値」だけを200に変更をしたのが下記の画像です。

【応用編】
上記の色の置き換え方法では、赤色の部分がすべて、他の色に変ってしまいます。状況によっては、一部の赤い部分だけを他の色に変えたいなど出てくると思います。

例えば、先程色を変えた下記の画像ですが、唇だけを緑色にしたいとします。

先程と同じやり方で唇だけを色を変えようとすると、アイマスクや目の色まで置き換わってしまうでしょう。そんな時は、唇だけを選択範囲で選択をしてから、「色の置き換え」をしますと、選択した場所のみ色を変えることができます。

さらに選択範囲は細かく選択することができるので、ピンポイントで色の変更が可能となります。選択範囲は様々なやり方があります。今回は「選択とマスク」を用いて、髪飾りを境界線調整ブラシツールで選択をすると毛先まで選択することができます。選択の方法につきましては以前のブログ記事をご覧ください。

まとめ

Photoshopを使用することによって、Photoshopをあまり触ったことがない方でも、簡単に写真や画像の一部の色を別の色に置き換えることができます。また、選択範囲をうまく駆使することによって画像加工の幅が広がってくると思います。
また、商品のカラーバリエーションの写真撮影をしても実物と似た色を出すことが難しいことがありますので色の置き換えでカラーバリエーションを実物と近づけることができます。髪の毛の色を暗くして欲しいなどとご要望もあるので、こちらの機能を覚えておくといいでしょう。