loading ...

PhotoshopやIllustratorで"Font-Awesome"をつかってみた

2015.04.07(Tue)

[ photoshop ][ デザイナーのひとりごと ]

今更ながら、"Font-Awesome"がとっても便利です。

"Font-Awesome"とはWEBフォントなのですが、アイコンのWEBフォントなのです。
Bootstrapから派生したものですが、最近は日本語のWEBフォントも出回っていて(無償は少ない・・・)WEBフォントばりばり使ったサイトも増えてきています。

"Font-Awesome"はアイコンフォントなので、大きさや色もスタイルシートで簡単に制御できます。519種類もあって、矢印なんかもたくさんあります!使い方は簡単!

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

上記のタグを
<head>タグに入れます。

で、
検索ページで検索して、つかいたいアイコンがあればそのページに行きます。そうするとソースが記載されているので、そのソースをコピペ。


<i class="fa fa-chevron-circle-left"></i>

とhtmlに入れるとなんと簡単にアイコンが!!!


キャッチコピーやアイコンを画像にすると「スマホ対応になった時に画像がぼけて見えにくい!」など、二次利用がしづらいんです・・・とっても・・・

アイコンだけでもWEBフォントになれば、拡大縮小も簡単だし、便利ですよね!!!

とここまでがwebフォントをWEB制作で使用する場合
でした。


でも・・・印刷会社でパンフレットを作っている会社はどうだろう・・・PhotoshopとかIllustratorでもWEBフォントも使えたらいいのに・・・

ということで調べてみました!!

PhotoshopやIllustratorで簡単にアイコン表示してみる!!

まずは
"Font-Awesome"のページに行って

Downloadからフォントをダウンロードします。

font.jpg

で、ダウンロードしたフォルダから
/fonts/FontAwesome.otf
を自分のマシンにインストールします。

"Font-Awesome"のさらに便利なのはiconを検索したり、チートシートを持っていて利用したいアイコンをコピペで使用できるところ!!!うーん素敵!!

font2.jpg

まずはチートシートで利用したいアイコンをコピーして、


photoshopを開いて・・・

コピーしたアイコンをペースト!

font3.jpg


すると、あれ?でない・・・

あわてずにフォントを選択して・・・
文字をFontAwesomeに選択しなおす

font4.jpg


アイコンが簡単にできました!!

こちらも
フォントなので大きさも色も自在に変更できます。

photoshopだけじゃなくwordやパワポでも使用できますね!アイコンをうまく使って人とは違う提案書や企画書を作ってみると新鮮かもしれません。

あー便利。

トラックバック

この記事のトラックバックURL

Clip to Evernote
福井:0776-52-2134 東京:03-6432-9221
コンサルティング・サイト制作に関するお問合せはこちらまで

最新Web制作実績

  • 天谷サニター
  • 兵助株式会社
  • 上坂会計グループ
  • 木造建築なら株式会社木だて家

制作実績をもっと見る

アーカイブ

Syndicate this site (XML)
RSS2.0
SBコンサルQ&A
Webコンサルティングに関する広範な情報を毎月配信します。

PageTop