こんにちは、なっちる先生（@nacchi_jagariko）です。
大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。
今回は、
あれ、png画像の色一気に変えられないかな。
という疑問にお答えいたします。
※フロントエンドのPhotoshop総まとめはこちらから↓
画像全体の色を変える方法
まずは単一色の画像の色を変える方法から紹介いたします。
こちらの画像で、
wifiをもっとwifiっぽくしたいから黄色にしてくれって！？
という注文がきたとします。
ほんの10秒で終わります、早速やってみましょう〜
手順としては以下の通りです。
- レイヤーを右クリックして「レイヤー効果」を選択
- 「オーバレイ」の項目で色を選択する
以下で解説していきます。
レイヤーを右クリックして「レイヤー効果」を選択
一番上にありますね。こちらクリックしてください。
「オーバレイ」の項目で色を選択する
「レイヤー効果」を選択すると自動で以下のような画面が出てきます。
そこの左側の項目にある「カラーオーバーレイ」をクリックして、あとは色を選択するだけです。
はい、黄色のwifiが出来上がりました〜！超絶簡単ですね！
画像の一部分の色を変える方法
次はこちら、画像のある部分の色だけを変える方法についてです。
こちらの画像で
なに、「HAPPY BIRTHDAY」の「HAPPY」の「A」だけ色を変えたい！？
という注文がきたとします。
今度は少し手順が増えますが、とっても簡単です。
手順としては以下の通りです。
- 「Command(Ctrl) + M」で変えたい部分を選択
- 「イメージ→色調補正→色の置き換え」を選択
- 変えたい色を選択する
- 色を変更する
以下で解説していきます。
「Command(Ctrl) + M」で変えたい部分を選択
選択ツールで選択します。
この手順を外すと「HAPPY」の「A」と「BIRTHDAY」の「T、A」の背景が一緒なので、今回の注文（「HAPPY」の「A」だけ変える）にそぐわなくなってしまいます。
この手順は用途に応じてするかしないかお決めください。
「イメージ→色調補正→色の置き換え」を選択
以下の画像参考にしてください
変えたい色を選択する
「色の置き換え」を選択したら画面が出てくるので、そこで変えたい色（今回だと緑）を選択します。
カラーと結果の部分の色が変わります。
色を変更する
結果の部分を選択して変えたい色にします。
これだけで完成です〜！
朝飯前〜
フロントエンドで、PSDファイルのなくて画像しかないものを少し手直ししなければいけないときなどに使えますね！
以上でなっちる先生の授業を終わります〜。
素敵なPhotoshopライフを〜！