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

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

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

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

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

Font Awesomeサイトからフォントをダウンロードして、アイコンをPCやMACにインストールしてしまえば、サイト内の519種類のアイコンが並んだチートシートから利用したいアイコンをコピーし、フォトショップやイラストレーターでペーストができるようになります。ペーストした瞬間は文字化けをしていて焦るのですが、冷静に指定のフォントをFont Awesomeにしてあげれば問題ありません。知ってしまえばなんてことはないコロンブスの卵な知識。意外と知らない人が多いので周りの方に教えてあげると人気者になれるかも？説明はMACでの手順ですが、インストール方法以外はwindowsでも変わらないと思います。

試した環境

  • macOS10.12.2
  • photoshopCC(2017)
  • WEBフォント：Font Awesome

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

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

font

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

fonts2

フォントのインストール方法は以下をご確認ください。

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

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

typo

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

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

type

 

typo

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

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

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

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

おまけ

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

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

 

更新履歴

  • 2013年6月28日公開
  • 2015年1月28日改定(最新版に合わせて全体をリライト)
  • 2017年1月15日改定(最新版に合わせてリライト&文字校)
  • 2017年1月20日改定(文字校)
  • 2015/01/28
  • 2017/01/20
  • amishiro
  • 40,555
  • 2

関連記事

2 件のコメントあり

コメントを残す