【作業効率UP!】アイコンフォントFont AwesomeをPhotoshopで使おう

Webサイト制作
サイト制作
2019.03.25

Font Awesomeとは、WEBベージ上でテキストとして表示出来るWEBアイコンフォントです。

Font Awesome

2017年末にはFontAwesome5がリリースされ、使えるアイコンはその数5000以上(有料含む)WEB制作ではお馴染みの方も多い超便利なサービスですね。

今回はそんなFontAwesomeの「サイトに表示させる方法」ではなく、「デザイン時に効率よく使う方法」をご紹介します!

実は私…Font Awesomeは旧バージョンの時から使い大変お世話になっているのですが、phoshopでデザインする際にFont Awesomeのサイトからいちいちpngデータをダウンロードし配置していました。
拡大縮小を繰り返すとボケるので一旦スマートオブジェクトにし、
色を変える時はレイヤースタイルのカラーオーバーレイを使い….
といった効率のわるーいやり方をしていました。。

しかしFont AwesomeFontAwesomePSというエクステンションを使えば、
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ポイント5SVGとして書き出す事も出来る

色をグラデーションにした時などはWEBアイコンとしてではなくシェイプをSVGに書き出してコーディングしたりします。デザインによりますが!

 

fontに追加しテキストとして使う方法

Font AwesomeはそもそもウェブフォントなのでフォントとしてPCにインストールすることが出来ます。
▼ダウンロードはこちら
https://fontawesome.com/download

ProとFreeは別になっています。Proを使っている方はProをダウンロードしてください!

あとは通常のFONTをインストールする方法と同じです。

 

フォントをインストールしたら早速使ってみましょう!

チャートシートがあるので、その中から必要なアイコンを選択しコピーします。
必ずアイコンをコピーしてください。

fontawesome cheatsheet

 

制作ソフト内でテキストとしてペーストし、フォントで【Font Awesome】を選択すればOKです!

Fontをインストールする方法の良いところ!

効率UPポイント1:テキストとして扱うので導入が簡単で使い易い

通常のfont追加を同じ手順なので、導入が簡単です

効率UPポイント2:サイズが一目瞭然。

fontをインストールする方法でこの点が最大のメリットだと思います。あくまでテキストなので、サイズが一目瞭然で便利です。

効率UPポイント3:テキストなので拡大縮小してもボケない

効率UPポイント4:カラー変更が出来る

まとめ

WEBサイト制作に欠かせないFontAwesomeをPhotoshopで使う2つの方法をご紹介しました。
デザインによって使い分けるとより効率化出来ると思います。
もしFontAwesomeを使っているけどPhotoshopで使えるようにしていない方はこの機会に是非導入してみてください!

SEOやWEB制作に関する情報を検索する

コラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。