PhotoshopでFont Awesomeを利用する方法 ( PNG & SVG )

PhotoshoopでFont Awesomeのアイコンを利用する方法を紹介します。

定番のFont Awesome PSプラグインがPhotoshop CC 2015では使えなくなり、またFont Awesome公式のチートシートからコピペする方法は手間がかかって煩わしいと感じたので、PNGデータを使う方法とSVGを使う方法を探しました。どうぞ参考にしてみてください。

１．PNG編

WEBのデザインカンプ作りなどの場合にはこちらがおすすめです。PNGデータなら普通にサムネイル画像を一覧表示して探すことやファイル名検索もでき、Photoshopへの配置もドラッグアンドドロップでよく、とても簡単です。

Font AwesomeのアイコンをPNGファイルでダウンロードできるサイトはいくつかありますが、「一括ですべてのアイコンをダウンロードできる」「最新版のFont Awesomeのアイコンに対応している」の両方を満たしているところではIcoMoonのみが一番使いやすかったです。

(1) IcoMoon Appへアクセスします。IcoMoonはFont Awesome以外の様々なアイコン集を扱っているのですが、今回はFont Awesomeのみをライブラリに追加して利用します。左上メニュー「Icon Liblary」をクリックします。

(2) Font Awesomeを追加します。

(3) 追加されたFont Awesomeのアイコンをすべて選択します。

(4) 画面下メニュー「Generate SVG, PNG, PDF」をクリックします。

(5) ダウンロードボタン右の歯車マークをクリックし、設定画面を開きます。

(6) 設定画面に入り、「Override Size」にチェックを入れ、サイズを指定します。（Web用であれば512px程度でOKかと）

(7) ダウンロードボタンよりダウンロードします。

ダウンロードしたzipファイルを解凍し、PNGフォルダ内のアイコンをPhotoshopにドラッグ＆ドロップすればOKです。

アイコンの色を変えたい場合には、レイヤー効果のカラーオーバーレイを利用します。

Photoshop CC 2015ではExtensionが廃止になり、「Font Awesome PS」プラグインが使えなくなりました。新たにはじまったAdobe Add-onサービスでもどこかのタイミングで同様のプラグインが出てくるかとも思いますが、とりあえず現状では利用できません。

ですので、面倒なのですがIllustoratorでSVGファイルを開いてコピペする方法を使います。一手間なのですが、公式チートシートからアイコンをコピペするよりは手軽だと思います。

(1) IcoMoonでFont AwesomeのSVGファイルをダウンロードします。（PNG編参照）
(2) SVGフォルダ内のファイルをIllustoratorにドラッグ＆ドロップします。
(3) 表示されたアイコンをPhotoshopにコピペします。

公式チートシートからのコピペは慣れれば大したことないのですが、作業が少しめんどくさいと感じました。ただ、常に最新のリストという保証があるので、ベクトルデータがほしい場合にはこれを使うのもありです。

Photoshop CC 2015に未対応です。Adobe Add-on対応版がでたら第一候補となりそうです。

「fontawesome png」で検索すると一番に出てくるサイトですが、アイコンセットがだいぶ古いです。

フォントアイコンをPNGに変換するサービスはたくさんありますが、ほとんどが単一のアイコンのみを出力するように作られており、アイコンセットすべてを一括返還することはできないようでした。

サーバーインストール系のジェネレーターツールですが、Pythonやnode.jsなどの必要環境がすでにある場合にはありかもしれません。動作に必須のモジュールなどもあり、少し敷居が高いと感じました。

以下、参考サイトです。