アイコンがpng画像で色を変えたいとき

アイコンがpng画像で指定されるのはLP作成ではよくあることなのでしょうか？

（今までサイトからダウンロードして使用するか、CDN利用しかありませんでした。fontawesomeバンザイ！！）

「png画像を使ってね、このフォルダの中にあるからね」

といわれ、見てみたけれど

「この画像の色ってどうやって変更するの？！」

状態でした。

この色のアイコンを・・・

この色にしたい。

cssで変更できるかな？と調べてみても方法は出てこず。。。

そこで思い出しました。

自分がphotoshopを持っていることを。

（もう上の画像で出てますが） 

photoshopで色を変えてみよう！ということで、やり方をまとめてみました。

 

①photoshopでファイルを開く。

②「レイヤー１」を右クリックして「レイヤー効果」を選ぶ

 

③「カラーオーバーレイ」にチェックをつけて、クリック。

②でレイヤー効果を押すと、「レイヤースタイル」というのが出てきます。

この「レイヤースタイル」から「カラーオーバーレイ」にチェックをつけて、クリック。

④アイコンのカラーを選択

この画像でいうと、白いボックス（人によって色が違うかも）をクリックします。

そうすると、どんな色にするか選択できるので、したい色を選びましょう。

 ⑤完成＆保存

赤いドル袋の完成！！！

保存するときは「別名で保存」（mac : command+shift+S）で新たに名前をつけて保存しました、僕は。

というわけで、アイコンの色を変更したいときにはこの方法でやっていこうと思います。

参考になれば嬉しいです。