【作業効率UP!】アイコンフォントFont AwesomeをPhotoshopで使おう
2019.03.25
Font Awesomeとは、WEBベージ上でテキストとして表示出来るWEBアイコンフォントです。
Font Awesome
2017年末にはFontAwesome5がリリースされ、使えるアイコンはその数5000以上(有料含む)！WEB制作ではお馴染みの方も多い超便利なサービスですね。
今回はそんなFontAwesomeの「サイトに表示させる方法」ではなく、「デザイン時に効率よく使う方法」をご紹介します！
実は私…Font Awesomeは旧バージョンの時から使い大変お世話になっているのですが、phoshopでデザインする際にFont Awesomeのサイトからいちいちpngデータをダウンロードし配置していました。
拡大縮小を繰り返すとボケるので一旦スマートオブジェクトにし、
色を変える時はレイヤースタイルのカラーオーバーレイを使い….
といった効率のわるーいやり方をしていました。。
しかしFont Awesome、FontAwesomePSというエクステンションを使えば、
Photoshopの中でアイコンの検索が出来たり、シェイプでアイコンを配置出来るので作業効率がぐんとアップします！
またFontとしてインストールする方法も合わせてご紹介しますので、まだの方は是非チェックしてみてください！
FontAwesomePSをインストールする方法
まずはFontAwesomePSというエクステンションをPhotoshopにインストールする方法です。
早速FontAwesomePSをダウンロードしましょう。
▼ダウンロードはこちら
FontAwesomePSダウンロード
次にFontAwesomePS_1.1.0.zxpを解凍します。
▼解凍アプリが入っていない方はこちらのアプリを使ってみてください。
https://zxpinstaller.com/
解凍したらPhotoshopを立ち上げ直してください。
エクステンションの中にFontAwesomePSが入っているか確認しましょう！
FontAwesomePSを選択し、出てきたパネルの中から使うアイコンをワンクリックすればOKです。簡単！
FontAwesomePSの良いところ！
効率UPポイント1:Photoshopの中で検索できる
これが1番のポイントだと思います。いちいちFontAwesomeサイトを開く必要がなく、photoshop内で検索できます。
効率UPポイント2：お気に入り登録出来る
よく使うiconは右上の星マークをクリックすればお気に入りとして登録できます。
効率UPポイント3：シェイプなので拡大縮小してもボケない
pngを配置するとスマートオブジェクトに変換しないといけませんでしたが、最初からシェイプなので拡大してもボケません！
効率UPポイント4：カラー変更が出来る
こちらもpngとは異なり、レイヤースタイルをわざわざ開かずとも色を変える事ができます。
効率UPポイント5：SVGとして書き出す事も出来る
色をグラデーションにした時などはWEBアイコンとしてではなくシェイプをSVGに書き出してコーディングしたりします。デザインによりますが！
fontに追加しテキストとして使う方法
Font AwesomeはそもそもウェブフォントなのでフォントとしてPCにインストールすることが出来ます。
▼ダウンロードはこちら
https://fontawesome.com/download
ProとFreeは別になっています。Proを使っている方はProをダウンロードしてください！
あとは通常のFONTをインストールする方法と同じです。
フォントをインストールしたら早速使ってみましょう！
チャートシートがあるので、その中から必要なアイコンを選択しコピーします。
必ずアイコンをコピーしてください。
fontawesome cheatsheet
制作ソフト内でテキストとしてペーストし、フォントで【Font Awesome】を選択すればOKです！
Fontをインストールする方法の良いところ！
効率UPポイント１：テキストとして扱うので導入が簡単で使い易い
通常のfont追加を同じ手順なので、導入が簡単です
効率UPポイント2：サイズが一目瞭然。
fontをインストールする方法でこの点が最大のメリットだと思います。あくまでテキストなので、サイズが一目瞭然で便利です。
効率UPポイント3：テキストなので拡大縮小してもボケない
効率UPポイント4：カラー変更が出来る
まとめ
WEBサイト制作に欠かせないFontAwesomeをPhotoshopで使う２つの方法をご紹介しました。
デザインによって使い分けるとより効率化出来ると思います。
もしFontAwesomeを使っているけどPhotoshopで使えるようにしていない方はこの機会に是非導入してみてください！
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
Webサイト制作Webデザイン
