登録日
2014年4月1日

メンバー検索

  

hisax

名前(ニックネーム)
ひさぬこ
自分のconcrete5サイト
ホームページ
http://necomaneki.com
自己紹介
concrete5.org のユーザー名
concrete5 Slack Team ID
Twitterアカウント
@hisax23
フォーラム総投稿数
1

コミュニティバッジ

投稿

1から1までを表示 (計1)

Re: concrete5アイコンのウェブフォント化

ロゴのWebFont化についてのお話を聞いたので、分かる範囲で手順を書いておきますね。
手順としては二度手間になりますが、Illustratorでカラーモードの変換 > FireworkでWebFont用に文字毎のSVGファイル作成 > 再度IllustratorでSVGファイルのパスの調整 > WebFont化となります。

1.ダウンロードしてきたファイルをIllustratorで開いた時、CMTKの印刷データになっていますので、ドキュメントのカラーモードをRGBに、すべて選択(⌘+A / Ctrl+A)をして編集 > カラーを編集 > RGBに変換をして上書き保存。

2.事前にFireworksへ ExportFireworks SVG Extensionを導入しておき、コマンド > SVG > Open でSVGファイルを開き、使うアイコン別にコピペしてアイコン毎のPNGファイルを作成。※後で修正しやすいように

3.カンバスの余白を調整しておいて、コマンド > Export > Export SVG で別名としてSVGファイルを書き出す。

4.もう一度Illustratorで3.で別名保存されたSVGファイルを開き、アイコンのグラデーションやアピアランスをベタ塗りに変更。手のマークとRマークは複合パスにしておく。

5.それぞれの複合パスをパスファインダーで合体させるとグループ化されるので、一度グループ化を解除してもう一度、複合パスとして合体させる ( ⌘+8/ Ctrl+8) で複合パスになる。

6.複合パスができたら上書き保存をし、icomoonでWebFont化をする。

以上です。Illustratorの複合パスは操作自体に慣れが必要なので、ここは触りながら覚えていくしかないので、頑張って下さい。

追記:事前にIllustratorでアイコンの単一ファイルで複合パス化を済ませていれば、後は余白の調整をするだけでフォントの作成自体は可能です。上記手順は仮に出来ない場合の緊急手段となります。

Posted on 4月 01, 2014 at 11:22 午前