Photoshopで特定の色を別の色に置き換える方法

こんにちは。㈱シンラウンド代表の中島 達(@NakajimaSatoru)です。

ホームページ用の画像や、写真を扱っていて、

  • アイコンの色を変えたい
  • 写真の特定部分の色を別の色に変えたい

といった事もあるかと思います。

その際に、用意している画像が、SVGやpsdなどPhotoshopでそのまま操作ができる場合には問題ありません。
しかし、pngやjpegなど操作ができない画像の場合には、Photoshopの機能を利用して変える必要があります。

そこで今回は、pngやjpegなどの画像の特定の色を変更するための方法をご紹介します。

注意事項:著作権にはご注意ください

画像を操作する場合など、製作者が改変を認めていない場合もあります。
そのため、画像の著作権や、改変しても良いかは、必ず確認するようにしてください。

2つの簡単な実施方法

Photoshopで特定の色を別の色に置き換えるには、

  • 1.色調補正を利用する
  • 2.新規塗りつぶしレイヤーを作成する

の2つがあります。

上記2つの方法ですが、「1.色調補正を利用する」に関しては、非常に簡単にできるのですが、白黒グレーなどのモノトーンのカラーに対してはできません。

そのため、基本的には、「1.色調補正を利用する」を行い、モノトーンカラーの場合には、「2.新規塗りつぶしレイヤーを作成する」といった形で使い分けるのがおすすめです。

今回は、両方ともご紹介させていただきます。

方法1:色調補正を利用する

わかりやすいように今回は、イラストで行います。

[イメージ]-[色調補正]-[色の置き換え]をクリック

スポイトツールを利用し、変更したい色を選択

変更後の色を選択

[OK]を選択する事で画像の色が変わります。

また、この際に選択ツールなどで範囲を指定して変更する事も可能です。


方法2:新規レイヤーを作成する

今回はモノトーンのイラストを利用します。

[選択範囲]-[色域指定]を選択

スポイトツールを利用し、変更したい色を選択し、[OK]をクリック

特定の色の範囲が選択された状態で、[レイヤー]-[新規塗りつぶしレイヤー]-[ベタ塗り]をクリック

名前を入力し、[OK]をクリック

変えたい色を選択し、[OK]をクリック

まとめ

ホームページを製作する際に、画像は非常に重要で、印象を大きく左右させてしまいます。

もちろん、最初から想定した色の画像や写真が用意できれば一番です。
しかし、常に用意ができるとは限りません。

そのため、素材がなかった場合、用意が難しい場合などには、今回の方法をご活用ください。

投稿者プロフィール

中島 達(Nakajima Satoru)
中島 達(Nakajima Satoru)
株式会社Synround 代表取締役

「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。

web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。

過去の事業:Webサービス×2、レンタルスペース5店舗

ABOUTこの記事をかいた人

株式会社Synround 代表取締役 「続ける。 」をコンセプトに、Webマーケティングにおける戦略立案/サイト制作/システム保守/コンテンツ制作を実施。 web、動画は作っただけでは意味が無くて、そこから育てて行く物。ただ、中小企業、小規模税理士事務所では人や費用により続けることが難しいため、続けるための環境作りをしてます。 過去の事業:Webサービス×2、レンタルスペース5店舗