font
前置き(2015/1/28最新版に合わせリライトしました。)

webフォント(特にアイコンフォント)をphotoshopやillustraterなどで簡単に使う方法がないかgoogleで調べてみたが英語の説明しか出て来なかったので備忘録としてメモをのこします。

  • photoshopやillustraterでアイコンを多用するデザインを作る人。
  • 指定のwebフォント(アイコンフォント)を利用しなけれないけない。てか使いたい。
  • アイコンは一覧から選ばないと量が多くてわかんなくなる。

みたいな人におすすめです。最近はライセンスフリーで優秀なのwebフォントのアイコンが多く出ています。このやりかたを覚えておくと、photoshopやillustraterなどで、アイコンを利用したデザインカンプを制作する際に極めて便利かと。

今回は519種類のアイコンがひとまとめになったFont Awesomeで試してみます。

519種類のアイコンフォント(Font Awesome)をコピペで使う。

Font Awesomeサイトからフォントをダウンロードして、アイコンフォントを利用しているPCにインストールしてしまえば、サイト内の519種類のアイコンが並んだチートシートから利用したいアイコンをコピーし、フォトショップやイラストレーターでペーストすれば使えます。コピペした瞬間は文字化けをしており焦るのですが、冷静に指定のフォントをFont Awesomeにしてあげれば表示されます。

知ってしまえばなんてことはないコロンブスの卵な知識。意外と知らない人が多いので周りの方に教えてあげると人気者になれるかも(?)です。

下記、macでの手順ですが、インストール方法以外はwindowsでも変わらないでしょう。

試した環境:mac OS10.9.5 / photoshopCC(2014)
試したWEBフォント:Font Awesome

Font Awesomeをダウンロードしてインストール。

まずは、Font Awesomeのサイトトップページからフォントセットをダウンロードします。

font

ダウンロードしたファイルを解答すると、cssやlessと言ったフォルダーとともに「fonts」というフォルダーがあります。
そのなかの「FontAwesome.otf」を選びます。
Font Awesomeは、そもそもwebフォントのセットですので使いやすいように記述済みのcssのセットがはいっています。今回は使いませんがとても便利なセットとなっています。

fonts2

そして各PCにフォントをインストールしてください。

Macユーザーの方は、apple公式の「Font Book の使い方」をご覧ください。非常に分かりやすい。
windowsユーザーの方は、windows公式の「フォントをインストールまたはアンインストールする」をご確認ください。

Font Awesomeサイトの519種類のアイコンが並んだチートシートページから利用したいアイコンをコピー。

Font Awesomeがとても素晴らしいとおもうのは、519種類もあるとフォントの一覧が欲しくなることを知っていることです。ずらっとアイコンが並んだチートシートとよばれるページがあり、さらにこのページではアイコンがコピーできるようになっています。

typo

フォトショップなどでテキストとしてペースト。

フォトショップなどでテキストツールを選択した後、ペーストを実行してください。
すると、文字化けした状態でペーストされるかと思いますが焦らずにフォントの種類を「Font Awesome」にしてください。

type

typo

コピペ出来ました!なんて簡単マーベラス!

この方法に気がつくまで、フリーのEPSアイコンやwebで表示されているアイコンを大きめにキャプチャーしてカンプデザインを制作していました。今までの苦労を考えると・・・かなりシンプルな方法ではないでしょうか。


最後に、Bootstrapアイコン(約140種)が含まれたおススメwebアイコンセットを2つ紹介。

硬めが好きだったら。Elusive Icons(299種)
柔らかめが好きだったら。やっぱりFont Awesome(519種)かな

個人的には、Font Awesomeの柔らかい感じが好きです。

おまけ

MACユーザー限定ですが、Font Awesome以外のアイコンフォントでも簡単に使う方法を纏めました。

アイコンフォントのElusive Iconsをphotoshopで簡単に使う -amiten.inc


  • 2013年6月28日公開
  • 2015年1月28日改定(最新版に合わせて全体をリライト。)
page
1 / 1