Genericons を画像として使用する方法についての考察

WordPress.com で使用されている Web アイコンを画像として扱う方法について考察したので、その覚え書きです。環境は mac の OS X です。

まず、「Download」ボタンをクリックして、データ一式をパソコン上に保存。その中から「Genericons.ttf」を探し出して、そのファイルの上で右クリックして、「Font Book」をクリック。

genericons-1

以下の画面になるので、「フォントをインストール」をクリック。

Genericons

以上の操作で mac に Genericons のフォントがインストールできたようです。

Font Book

mac の Inkscape だとこんな感じで Genericons のアイコンを表示させることができました。

Fullscreen-6

フォントの貼り付けは「Copy Glyph」のところからコピペし、

Genericons - a free, GPL, flexible icon font for blogs!-1

フォントの指定は以下のアイコンより行いました。

NotesTab

変形させるときには、「パス → オブジェクトをパスへ」処理を行い、

Menubar

以下のアイコンをクリックしたら OK でした。

新規ドキュメント 1 - Inkscape

背景が透明の png ファイルの画像として抽出するときには、「ファイル → ビットマップにエクスポート」で OK でした。

Menubar-1

一方、Omnigraffle でも同様に Genericons を試してみたところ、表示できるものとできないものがありました。表示できないものには「PRIVATE USE」という表示がされているので、もしかしたら、Genericons には Web 上で使えるものと使えないものがあるのではないかと推測されますが、詳細についてはよくわかりません。

Fullscreen-5

Omnigraffle より、背景が透明の png ファイルを抽出するには、右クリックからの「Copy As → PNG」

Colors-1

OK でした。

スクリーンショット 2014-08-30 19.27.57

広告

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。