title_img

意外と簡単だった!自分でつくったアイコンを2ステップでWebフォントにする方法

どうもどうも
無心でアイコンを作っている毎日です。

この前、ブログでご紹介した参考サイト(記事はこちら!)を
全く参考に出来ていないクソデザインですがなんとか終わりそうです!いろんな意味でね!

 
 
スポンサーリンク




 
 

このアイコン作成にあたり、エンジニアでもありデザイナーでもあるK氏から
「Font Awesome」というサービスを教えてもらいまして。

いやこれ、すごい感動した。
PCにフォントを登録しておけば文字としてアイコンを出すことができるのですが、
これがかなり便利。

メリットとして
・サイズ変更が楽
・画像が粗くなりにくい
・サイトに実装した場合、アイコンを画像にするより手間が少ない(と、思う)

ご興味ある方がいらっしゃたら一度お試しください!ほんとに便利ですよ!
参考にさせていただいたサイト
”アイコンをWebフォントで表示できる「Font Awesome」”
 
 

そんなこんなで、
「自分が作ったアイコンもWebフォントにしたいなーー」と思い調べてみたら
結構簡単に出来そうだったのでやってみましたよ!
 
 

【ステップ1】まずは作ったアイコンをSVGで書き出し

i001

メニュー→ファイル→保存(または別名保存)で、
ファイル形式にSVGを選択して保存です!
 
 

i002
「SVG オプション」というのが出てきますが、わたくしは何もいじらず保存。
あとで調べよう。

【ステップ2】SVGファイルをフォントファイルに変換

いろいろ見てみると、どうもこの2つのサービスを使ってフォントファイルに変換してる方が多いですね。
IcoMoon
ICONVAULT
 
 
i003
どうやらICONVAULTはzipファイルをアップするだけでOKらしい!
迷わずこちらを選択してフォントファイルを作ってみます。

i004
zipファイルをポイッと入れて…
 
 
i005
ファイルをダウンロードしてPCにttfファイルを入れます
 
 
よし、では早速Photoshopでサンプルを作ってみよう。
あれ…そういえばどうやってこのアイコン出せばいいんだ……!
 
 
i006
Font Awesomeの時はサイトにあるフォント一覧からコピペしたなぁと思い出し、
FontBookに表示されているアイコンをコピペしてみると…
 
 
i007
できたーーーー!

すごい簡単にできました!
2ステップくらいですね!
ちょっと画像粗いけどそこはまぁあれです。うん。次がんばろう。

ちなみにダウンロードしたファイルにはHTMLとCSSも入っているので
Webサイトで使うときも迷わず出来ると思います!

サンプルはこちら!

みなさまの参考になれば幸いです!
ではでは
 
 
スポンサーリンク




 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です