無料ツールだけで「似顔絵イラスト」や「プロフィール写真」をアイコンフォント化する方法

先日、サイトロゴをアイコンフォント化する方法を紹介しました。

無料ツールでSVG画像をアイコンフォントに変換する方法(サイトロゴをフォント化してみる)
以前、簡単ロゴメーカー「Design Rails」でサイトのロゴを作ってみました。 そのとき、ジェネレートされたロゴフ...

これを書いている途中に、「自分の似顔絵イラストなんかで、アイコンフォントを作ったら汎用性が高くていいんじゃないか?」と思って、試してみたらうまくいきました。

今回試しに作ってみたアイコンフォントが以下です。

aaa

慣れると、1つ5分ぐらいで作成できます。

というわけで今回は、画像から上記のような、アイコンフォントを無料ツールのみを使って作成する方法を紹介します。

スポンサーリンク
レクタングル(大)広告

主な手順

画像などから、アイコンフォントを作成する主な手順は以下です。

  1. 画像を準備する
  2. JTrimで白黒画像(2階調化)にする
  3. Inkscapeを使ってSVG化する
  4. IcoMoonを使ってアイコンフォント化する

だいたいこんな手順で、どんな画像もアイコンフォント化することができます。

一つ一つ行っていけば、どれも単純作業ですし、利用するツールも無料なので誰にでも作れると思います。

画像を準備する

まずは画像を準備します。

今回は例として、僕が利用しているTwitterのアイコンを利用します。

Twitterのアイコン

Twitterアイコンのデフォルトの拡張子はPNGですが、画像ソフトでJPGで保存して、JPEG画像を使用したほうがいいかもしれません。(この後使うJTrimでPNGだと意味もなく透過になってしまったため)

JTrimで白黒画像化(2階調化)にする

僕はWindowsを使用しているので、今回はJTrimを使った方法を紹介します。(Macなどでも、同様の編集ができるソフトはあると思います。)

で、用意した画像をJTrimで開きます。

JTrimで画像を開く

次に、「カラー」メニューから「2階調化」を選択します。

カラーから2階調化を選択

すると、以下のようなダイアログが表示されるので、「境界のしきい値」好みに好みに調整してください。

2階調化のダイアログ

「OK」ボタンを押すと以下のようになります。

境界の閾値設定後

これで、以下のような画像を作成しました。

2階調化した画像

プロフィール写真などで作成する場合は、うまく白黒化(2階調化)できないかもしれません。そういった場合は、JTrimのメニューの「カラー」にある「明るさ/コントラスト」からコントラストの調整をしてから2階調化してみてください。
コントラストの調整ダイアログ

Inkscapeを使ってSVG化する

次に、作成した画像をInkscapeというベクトル画像を作成できる無料ツールを使ってSVG化します。

まずは、Download | Inkscapeから環境にあった、ファイルをダウンロードしてください。

Download  Inkscape

僕は、Windowsなので、Windows版の64bit用のものをダウンロードしました。

Inkscapeを起動すると以下のようになります。

Inkscape起動時

まずは、キャンバスの大きさを設定します。

メインメニューの「ファイル」から「ドキュメントのプロパティ」を選択します。

ドキュメントのプロパティを選択

すると、「ドキュメントのプロパティダイアログ」が表示されるので、「単位」を「px」にして、「幅と高さ」を「300」にします。

ドキュメントのプロパティダイアログ

すると、以下のようにキャンバスの大きさが変更されます。(大きさはズームなどを利用して調節します。)

キャンバスの大きさが変更された

Inkscapeの作業エリアに、先程2階調化した画像をドラッグ&ドロップします。

2階調化した画像をドラッグ&ドロップ

すると以下のような「PNGビットマップ画像のインポート」ダイアログが表示されますが、デフォルトの状態で「OK」ボタンを押します。

PNGビットマップ画像のインポート

すると、以下のように画像が読み込まれます。

画像をドラッグ&ドロップした後

ツールボタンの「矢印マーク」をクリックして、画像をクリックすると、以下のように画像の大きさを変化できるハンドルが表示されます。

矢印ボタンをクリックして画像をクリック

画像の大きさを調節して、以下のようにキャンバスの大きさに合わせます。(Ctrlボタンを押したままドラッグするとアスペクト比を保ったまま大きさを変更できます。)

画像をキャンバスの大きさに合わせる

次に、画像を選択したままメインメニューの「パス」から「ビットマップのトーレス」を選択します。

ビットマップのトーレスを選択

すると「ビットマップのトレース」ダイアログが表示されるので、デフォルトの設定のまま「更新」ボタン押して、「OK」ボタンを押してください。

ビットマップのトレースダイアログ

これで、トレースが完了したので、以下のように表示されます。この状態で2枚重なっています。

ビットマップのトレース後

上のレイヤーをドラッグ&ドロップして横にずらすと、下にもう一枚表示されるので、下にある方を選択してそちらを削除します。(画像が入っていると重いので)

2015-06-11_12h23_43

削除するとこんな感じになります。

下にある方のレイヤーを削除

あとは以下のように、ドラッグ&ドロップなどでキャンバス内に収めてください。

キャンバス内に収める

オブジェクトを選択した状態で、メインメニューの「オブジェクト」から「整列と配置」を選択すると

整列と配置

すると、以下のような数列パネルが表示されるので、手軽に中央ぞろえなどを行うことができます。オブジェクトの整列と配置パネル

最後に、メインメニューの「ファイル」から「保存」を選択してファイルを保存します。

SVGファイルの保存

保存時「ファイルの種類」は、SVGファイルで行ってください。

SVGファイルで保存する

これで以下のようなSVGの画像ファイルが作成されました。

face

IcoMoonを使ってアイコンフォント化する

最後に、IcoMoonを利用してSVGファイルをアイコンフォント化します。

IcoMoonに移動すると、以下のような画面が表示されるので、上の方にある「Import Icons」をクリックします。

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

すると、ダイアログが表示されるので、先程作成したSVGファイルをインポート後、読み込まれたアイコンを選択します。

インポートした後洗濯する

そして、画面下の方にある「Generate Font」リンクをクリックします。

アイコンフォントを生成する

すると、以下のようなフォントの修正画面になります。修正が終わる、もしくは修正の必要がない場合は「Download」ボタンを押してファイルをダウンロードしてください。

アイコンフォントの微修正

「icomoon.zip」というファイルがダウンロードされアイコンフォントが作成できました。

アイコンフォントが作成された状態

作成したアイコンフォントの使い方

あとは、IcoMoonで作成したアイコンフォントのWordpressでの使い方を一応説明しておきます。

アイコンフォントファイルの設置

先程ダウンロードした「icomoon.zip」を解凍して、フォルダ名を「face-icons」とでもしておきます。

face-iconsにリネーム

このフォルダをテーマ(子テーマ)フォルダ直下にコピーします。

テンプレートファイルから呼び出す

あとは、テーマの<head></head>があるテンプレートファイルから以下のようにスタイルシートを呼び出します。

アイコンフォントを利用する

あとは、ロゴで作成したアイコンフォントを表示させたい場所に、以下のようなHTMLタグを書きます。

イラストで作成

a

どうもaです。

猫の写真で作成

a

顔写真で作成

a

ちょっと工夫すればこんな使い方もできます。

いえす、ういーきゃん。
a

まとめ

無料で使えるJTrimInkscapeIcoMoonで、画像からアイコンフォントを作成することができます。

ベクター画像編集ツールで、自前で絵を書いて作るよりは、かなり手軽に作れるのではないかと思います。

また利用する場合は、同じTwitterへのリンクでも@MrYhiraのようにIDよりは、aののようにイメージの方が、憶えてもらえる可能性が多少は高いかもしれません