Font Awesome PSでシェプレイヤーとしてアイコンを使う

Share on facebook
Share on twitter
Share on pinterest
Share on email
このエントリーをはてなブックマークに追加

Table of Contents

Webページには欠かせなくなってきたアイコンWebフォント集のFontAwesomeですが、Photoshopでページデザインをしていると、頻繁にFontAwesomeのアイコンを使いたくなることがあります。

FontAwesomeのサイトからフォントファイルをダウンロードして、システムにインストール、使いたいアイコンをウェブサイトで探して、指定フォントをFontAwesomeにしてからペーストすれば、文字としてFontAwesomeアイコンを使えますが、いったりきたりのワークフローがイマイチな感じです。

FontAwesomePS

そこで導入すると便利なのがFont Awesome PSです。Font Awesome PSウィンドウパネルからは、キーワード(アイコン名)でアイコンを検索するテキストフィールドがあります。検索は文字を入力したその場で実行されます。アイコンが見つからない場合は、やっぱりFont Awesomeのサイトを参照する必要がありますけど。。。

Font Awesome PSはPhotoshopのエクステンションで、インストールするとウィンドウ>エクステンションからアクセスできるようになります。

まずはそのFont Awesome PSをダウンロードしましょう。

  1. ダウンロードページへアクセスします
  2. DOWNLOAD FREEボタンをクリックします
  3. メールアドレスを入力します
  4. ダウンロードボタンをクリックします

ZXPInstaller

昨今主流になっているエクステンションファイルインストールファイルの拡張子は.zxpというもので、専用の解凍・インストールソフトウェアを使うのが良いです。と、いうかそれ以外の方法を、ワタシは知りません。Adobeのサイトを見るとコマンドラインからのインストールという記事がありましたが、zxpインストーラーを使ったほうがはるかに簡単です。

ZXPInstallerのウェブサイトからZXPInstallerをダウンロードします。ページには大きくZXPファイルをインストールできるけど、管理とアンインストールはできないよ、と書いてありますけど、少なくともアンインストールはできました。もちろんインストールも問題ありません。ちなみにこのZXPInstallerはAfterEffectsでもよく利用するエクステンションインストーラーでaescriptsなどで購入できるエクステンションも、ZXPInstallerでインストールを行います。

正常にインストールできて、正常に起動できると上のような画面が表示されます。このウィンドウへzxpファイルをドロップすると、どのソフトへエクステンションを追加しますよという旨のメッセージが表示されるので、OKをクリックでエクステンションのインストールが完了します。

FontAwesomePSをうまく起動できなかった場合

実は自分のケースではインストール後にウィンドウ>エクステンションメニューにFontAwesomePSは表示されるものの、以下のようなメッセージがでて起動することができませんでした。

正しくサインされていません。

もっと普通の日本語を話してほしいものですが、これは署名のないエクステンションなので起動を許すわけにはいかないです、という意味なんだと思います。

自分と同じ症状が出たwindowsユーザーは以下の操作が必要になります。

  1. winキー+rで”ファイル名を指定して実行”を表示します。
  2. regeditと入力してEnterでレジストリエディターを起動します。
  3. HKEY_CURRENT_USER / Software / Adobe /CSXS.9 というエントリーを見つけます。最後のCSX.9は最新の環境になっていなければCSXS.8かもしれないし、CSXS.7かもしれません。ここではCSXS.9とします。
  4. CSXS.9をクリックすると右側にPlayerDebugModeというエントリーが表示されますので、その値を0から1に変更します。

これで準備完了です。

Font Awesome PSの使い方

ウィンドウ>エクステンションからFontAwesomePSを選択します。ウィンドウパネルが表示され、その中にFontAwesomeのアイコンが表示されます。目的のアイコンが見つかったら、パネル内にあるそのアイコンをクリック。カンバス上にシェイプレイヤーとして追加されます。カンバスの解像度によっては、ものすごく小さくインポートされることがあるので、見失ったら、Ctrlキー(win)/Commandキー(Mac)+tでバウンディングボックスを表示してみましょう。あとはもう自由自在です。

実はFontAwesomeからSVGをダウンロードしてCCに登録しておけば、おなじようなことなんですけど、まぁそれはそれとして、今回はFontAwesomePSの紹介でした。

ところで、こんなまどろっこしい話はどうでもよくて、Adobeアプリのアイコンをお探しの方はAdobe CCアプリアイコンをご覧ください。

勝手マニュアル更新中

進捗状況 28%

Minoru Nitta(父)

Tetsuro Nitta(長男)