• 前へ
• 次へ

オリジナルなボタンを作成する

アイコン(フォント文字)の編集 に FontForge

アイコンを編集するには、当管理人は普段は「TTEdit」を利用しているのですが、
有料ですし、所持していない人がほとんどでしょうから、
ここでは、無料で使える「FontForge」という有名なソフトでの解説とします。

FontForgeをインストール

普通にインストールしてください

HmToolBar.ttfの読み込み

FontForge を起動して、HmToolBar.ttf ファイルを読み込みます。

デフォルトだと「Document」と見えているところをマウスでクリックして、
順番にファイルをたどっていくか、
もしくは、パスを指定してファイルを読みこむのですが
下の画像にあるようにパスの形式は「/」にする必要があり「\」のままでは読み込めません。

「ファイルが見つかりません」といったエラーは、ほぼ間違いなく「\」のパス区切りのままファイルを指定しています。

すでに存在する文字の位置を見つけよう

下の画像の右下の「スクロール位置」にあるように、全体の下付付近にだけ文字が入っています

文字を編集してみよう

今回はネットから「ロゴ画像」などなんらかの画像を取得し、
それをフォントにと変換する手順を軽く解説します。

下画像の赤い枠の部分の「フォントの文字」を編集しますので、
赤枠のフォントをダブルクリックし、 グリフを表示

最初から入っている「■」をクリア

「CTRL+AしてDEL」なり、「マウスをドラッグして範囲選択してDEL」なりして、
最初からあるグリフ情報を削除しましょう。
このクリアをしない場合、何か新しい文字を設定しても、全体が真っ黒なままになります。

↑全体を選択して削除 (CTRL+AしてDEL)

ネットから適当に画像取得

ここではネットなどから「ロゴ画像」などなんらかの画像を取得し、
それをフォントにと変換する手順を軽く解説します。

まず、今回は有名なPythonの画像をネットから探してきましょう。

.png 形式もしくは .bmp 形式で保存

FontForge のメニューから「ファイル」→「取り込み」

保存した.pngなり.bmp なりのファイルを指定して取り込んでください。

取り込むと画像が表示されますが、単に画像が表示されているだけで文字になってません。

FontForge のメニューから「エレメント」→「自動トレース」

画像を実際にフォントグリフにするためには、トレースします。

実際には手動で多少編集することが多いですが、今回は割愛します。

このPythonのマーク編集に使ったこのウィンドウを閉じます。

文字内容がちゃんと変化しました。

HmToolBar.ttf として出力

文字内容が変化しましたので、フォント内容を出力します。

FontForgeのメニューから、「フォントを出力」を選び、

フォントの基礎的な情報(フォント名や全体のフォント情報)は、
元々HmToolBar.ttfに設定されているため、編集や設定する必要はありません。

警告が出ますが、無視して「生成」を押しましょう

生成したフォントを改めてインストール

HmToolBar.jsonを改めてみてみる

一度秀丸を終了し、改めてHmToolBar.jsonを開いてみましょう

以下のようにPythonのアイコンが見えてればOKです

新たなに用意したアイコン(文字)を使う場合は、該当の見えてる文字をコピペすればよいだけですので簡単です。

HmToolBar.jsonを改めてみてみる

一度秀丸を終了し、改めてHmToolBar.jsonを開いてみましょう

以下のようにPythonのアイコンが見えてればOKです

新たなに用意したアイコン(文字)を使う場合は、該当の見えてる文字をコピペすればよいだけですので簡単です。

HmToolBar.jsonを改めてみてみる

一度秀丸を終了し、改めてHmToolBar.jsonを開いてみましょう

以下のようにPythonのアイコンが見えてればOKです

新たなに用意したアイコン(文字)を使う場合は、該当の見えてる文字をコピペすればよいだけですので簡単です。

FontForgeの文字一覧から「使いたい文字をコピー」する

使いたい文字をFontForgeから直接コピーすることも可能です。

コピーしたい文字を「右クリック」して、メニューから「グリフ情報」を選択します

「Unicode文字」とあるところの文字をコピーし、エディタにペーストすれば、該当の文字をエディタに挿入できます。

• 前へ
• 次へ