styleguide icon indicating copy to clipboard operation
styleguide copied to clipboard

[add] アイコンフォント用SVGの書き出し方

Open manabuyasuda opened this issue 7 years ago • 1 comments

アイコンフォント用のSVGは500×500pxのようなアートボード単位で書き出します。

  1. [アートボード]ツールを選択する shift + O
  2. [新規アートボード]メニューからアートボードを作成する
  3. [アートボードオプション]で[幅]と[高さ]を500pxなどにする
  4. [基準点が]左上になっているのを確認する
  5. [アートボード]パネルで[アートボードを複製]を選択して複製する
  6. 任意の個数のアートボードを作成したら[アートボード]パネルの[アートボードを再配置]を選択、[レイアウト]を[横に配列]、[配列数]を[5]など、[オブジェクトの一緒に移動]にチェックを入れた状態で[OK]をクリックする
  7. アイコンを作成してグループ化をしたら、オブジェクトをクリックしてメニューから[アートボードに整列]を選択、[整列]パネル(shift + F7)の[オブジェクトの整列]で上下左右の中央に配置する
  8. command + option + Eで[画面に書き出し]を表示
  9. [アートボード]を選択して、アートボードの名前を書き出したいファイル名に変更する
  10. サムネイルをクリックして書き出すアートボードを選択
  11. [書き出し先]でSVGを書き出す場所を選択
  12. [フォーマット]は[SVG]
  13. [アートボードを書き出し]で書き出す

manabuyasuda avatar Aug 25 '16 06:08 manabuyasuda