Table of Contents
イラストレーターのアセットでSVGを大量生産
crftの右サイドメニューにあるアイコンはWebアイコンフォントでできています。このアイコンは実際にAdobe Illustratorで作成して、Illustratorのアセットの書き出しでSVG保存、icomoon でフォント化して、crftに実装しました。
一連のAdobeアプリケーションのアイコンに使われている書体ですが、Adobeオリジナルのもののようで公開されているものではないようです。
なので、Macのデスクトップでアイコンを大きく表示してそれぞれをトレースしました。キーボードのアイコンはMyriadを使っています。
大まかな作業の流れ
1.Illustratorでアイコンを作ってSVGで保存する
2.icomoonでwebfont化する
3.wordpressに実装する
ここでは１のIllustratorでアイコンを作る部分に焦点をあてていきたいと思います。２と３に関してはWordpressの部分で詳しく紹介します。
イラストレーターでアイコンを作る
このようなある程度フォーマットのあるアートワークを繰り返し作成していく作業は、Illustratorが得意とする作業のひとつです。コツはルールを決めるガイドラインを使うこと。デザイン上、統一できるものは限りなく統一していくこと。
今回はIllustratorのアセット機能を意識して作成するので、アイコン一つは1つのグループにまとめられていて、さらに1レイヤーに１アイコンというルールにしました。
そうすることによってアセットに読み込むときにアイコン単位できれいに読み込むことが可能になります。
10mm x 10mmのドキュメントを作りトレースを始める
10mm x 10mmにこだわる必要はありませんが、アイコンなので大きなドキュメントサイズは必要ないと思います。
さらに画面で再現するものなので、実寸という概念はそもそもありません。やりやすいサイズでよいと思います。
もしかしたら、後々紙面に資料として残す場合大きいとなんとなく都合が悪いと思って、新田はこのサイズで始めました。
Macでキャプチャしたアイコンをイラストレーターに読み込んでトレースを始めます。
アイコンはWindows10よりMacのほうが大きく表示できました。キャプチャした画面はPhotoshopであらかじめトリミングしておくと、Illustratorに読み込んだときに扱いやすくなります。
ピクセル画像のトレースは頻繁に行う作業です。新田の場合は読み込んだら、画像を少し透明にして、(Win) /(Mac) + で配置した画像をロックしてしまいます。
ガイドラインはA アセンダライン、C ベースライン、B ハイトくらいを引いておくと統一感を出すことができます。それと同じパーツを繰り返し使うと、文字の太さを保つことができます。文字の縦ライン、横ラインのデザインを読み取ることが重要になります。
この作業をひたすら繰り返します。時間を節約するためにキャプチャしたアイコンのファイル をアップしておきましたので利用してください。良いトレースの練習になると思います。
アイコンのトレースができたらグループ化して、次のアイコンにとりかかるときに新規レイヤーで作業を進めていきます。
アセットパネルにアートワークをドロップする
一つのアイコンが一つのレイヤーに配置されていれば、すべてを選択してアセットパネルへドラッグ＆ドロップするだけでアイコンをアセットの内容として正しく登録できるはずです。
