font_awesome010

Webサイト上でアイコンを表示させたいときに使えるFont Awesomeを画像編集ソフトでも使えるようにしたいと思って探したら海外のサイトに方法が載っていました。

スポンサードリンク

実際に使ってみるとこんな感じ

tweet_btn_sample

ツイートボタンを作ってみました。TwitterのアイコンにFont Awesomeを使っています。このようにPixelmatorでアイコンフォントを利用することができます。

使い方

まずはFont Awesomeのページからフォントをダウンロードします。

font_pixelmator001

ダウンロードしたファイルの中身はこんな感じ。fontsフォルダ内にあるfontawesome-webfont.ttfをダブルクリックすると、Font Bookが起動するのでFont Awesomeをインストールしてください。

Font Awesomeをインストールしたら通常通りPixelmatorを起動して新規作成してください。

font_pixelmator002

テキストツールを選択してキャンバス上をクリックするとテキストボックスが追加されます。そのテキストボックス内のフォントをFont Awesomeに変更します。

font_pixelmator003

次にFont Awesomeのチートシートから使いたいアイコンを選択してコピーします。

font_pixelmator004

さきほど作ったテキストボックス内に貼付けするとアイコンが表示されます。

like_btn_sample

うまくできました!

これで終わりでもいいのですが、このアイコンを今後使う場合にいつもこんな作業していたら時間が勿体ないですよね。アイコンをシェイプに追加することで簡単に呼び出すことができます。その方法も合わせて紹介します。

font_pixelmator005

貼りつけたアイコン上で右クリックをして、シェイプに変換を選択します。

font_pixelmator006

シェイプパネルの右下の歯車アイコンよりシェイプを追加を選択します。

font_pixelmator007

アイコンがシェイプに追加されました。

Pixelmatorをお持ちの方、バナーなどを作るときに試してみてください。

Use Font Awesome Shapes In Pixelmator

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。