manabuyasuda / styleguide

arrange coding rule.
MIT License
164 stars 32 forks source link

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

Open manabuyasuda opened 8 years ago

manabuyasuda commented 8 years ago

アイコンフォント用の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 commented 8 years ago

新規ドキュメントで[アートボードの数]を指定できる。例えばアートボード数10の[横列数]を2に設定、未使用のアートボードが5つになったら、アートボードを5つ選択して[アートボードを複製][アートボードを再配置]した方が楽にできる。