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

2014年3月31日 at 23:47

お世話になっております。
concrete5の機能等と直接的な関係はない部分ですが、アドバイスをいただきたく質問させていただきます。

ウェブサイトでconcrete5の紹介をする際に、concrete5のアイコンをウェブフォントで使いたいと考えております。
本家公式サイトのアイコン配布ページ
http://www.concrete5.org/help/legal/logo_usage/
からSVGファイルをダウンロードし、右下の、アイコンのみの部分を切り取ってウェブフォントにしようと考えたのですが、SVGの切り出し、SVGからwebフォントへの変換ともにうまくできません。

Illustratorの使い方の問題もあるのかもしれませんが、スライス後のSVG保存ができなかったり、ほかのアイコンを非表示にした上で欲しいアイコンをアートボードの幅の全体に拡大してSVGで保存しても、アイコン化する時点で出力されたファイルにconcrete5のアイコンが描画されていなかったり(あるいは潰れている)、などの状態になってしまいます。
Illustratorについては、スライス後の「ウェブ用に保存」でのSVG保存はできなくなったとの情報もありますが…。

ウェブフォントへの変換の方法について、アドバイスいただければと思います。
また、今後concrete5アイコンなどのウェブフォントの配布等を検討していただければ幸いです。

よろしくお願いします。

使用ソフト:
Adobe Illustrator CC ( 17.1.0 )

webフォントへの変換に使用したサイト:
http://iconvau.lt/
http://icomoon.io/app/#/select

タグ:

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

2014年4月1日 at 8:09
ロゴのウェブフォント化については、本家に聞いてみましょうか。

ぼくは分からないので、誰かイラレ職人〜
 

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

2014年4月1日 at 11:22
ロゴの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でアイコンの単一ファイルで複合パス化を済ませていれば、後は余白の調整をするだけでフォントの作成自体は可能です。上記手順は仮に出来ない場合の緊急手段となります。
 

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

2014年4月1日 at 13:55
hisaxさんに作ってもらったフォントデータ置いておきますね wink
 

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

2014年4月1日 at 15:25
こんにちは。
ちょっと興味があるテーマでしたので(ちょうどWebフォントを自作してたので息抜きも兼ね)私もチャレンジしてみました。

シンボルマークはUnicodeの使用領域に登録。
ついでに「concrete5」と打つとロゴタイプの書体で出てくるようにもしてます。
とりあえずOpenType形式にしましたが、カーニング対応のソフトであれば字間も大体再現してくれると思います。

※権利関係の事がよく分からないのでとりあえず画像だけ…
添付: .png
 

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

2014年4月1日 at 19:34
おお、ロゴタイプも!いいですね!
せっかくなのでみんなのアイコンを1書体にまとめたいですね。
 

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

2014年4月7日 at 15:54
アップしておきます。
メタ情報はロゴの説明ページを読んで「こういう感じかな?」と記入しました。
ライセンスのところがよく分からず、空欄のままです。
添付: c5.zip
 

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

2014年4月1日 at 16:27
皆さま、ありがとうございます!
作っていただいたフォントで無事アイコンフォントでのデザインができました。
助かりました。
 

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

2014年4月1日 at 18:29
せっかくなので自分も勉強がてらにまとめてみました。
まあ参考程度に置いておきますね。
http://nekomimi-taicho.com/archives/21205/