Adobe Illustratorで大量のSVGサムネールを書き出す

画像化された文字の見出し、カード型のサムネールや、かるたなど
同フォーマットで文字違いのSVG画像をIllustratorで大量に書き出す場合のコツを紹介します。

基本的には、SVG保存で選べる「アートボードごとに作成」での一斉出力なのですが
アートボードパレットの機能も活用すると、画像を複製してたくさん作る作業もかなり楽になることがわかったので、そちらのほうも紹介します。

サンプルとして、この47都道府県のカードを作ってみました。
コツをつかめば、だいたい20分で作ることができます。

北海道
青森県岩手県宮城県秋田県山形県福島県
茨城県栃木県群馬県埼玉県千葉県東京都神奈川県
新潟県富山県石川県福井県山梨県長野県
岐阜県静岡県愛知県三重県
滋賀県京都府大阪府兵庫県奈良県和歌山県
鳥取県島根県岡山県広島県山口県
徳島県香川県愛媛県高知県
福岡県佐賀県長崎県熊本県大分県宮崎県鹿児島県
沖縄県

ベースのオブジェクトとアートボード複製していく

あとから、文字がはみ出すモチーフがあるからやり直し… というのを避けるため
最初の1枚は文字数の多いモチーフを基準にすると失敗しにくいです。

今回は都道府県なので、神奈川県を選んでみました。

最初の1枚を作る

ここから、アートボードパレットの複製機能を使って
神奈川県のオブジェクト+アートボードを47セットに複製していきます。

  • アートボードは、書き出されるファイルの表示サイズにしておきます。
  • アートボードツールを選択したとき、画面の上のほうに表示される「オブジェクトと一緒にコピー」が有効になっていることを確認します
    (初期設定で有効になっています)
  • レイヤーパレットの右隣のタブでアートボードパレットに切替ます

アートボードを複製

アートボードパレットの右上にあるメニューから「アートボードを複製」を選択すると
アートボードとオブジェクトが右隣に複製されます。

オブジェクトも一緒に複製されている

ささっと47セット作ってしまいたいので、
1→2→4→8→16→32→64と倍々で増やしていきます。

さらに複製するためアートボードを選択

倍々で複製していく

2、4、8、16、32、64と増やしていく

作りすぎたアートボードを選択し、パレット右下のゴミ箱アイコンから削除します。

48〜64はいらないので削除

アートボードを削除してもオブジェクトは残るので
ドキュメント上の余分なオブジェクトを選択して削除します。

アートボードを削除してもオブジェクトは残るので選択して削除

アートボード名が、書出したSVGファイルの名前の一部になるので
リネームしていきます。

アートボード名が書き出し後のファイル名になるのでリネームしていく

これで、下地となる神奈川県を47セット作成できました。

作業しやすいように並べる

このように、ベースを47セット複製できたのですが
ただただ横並びになっている状態で編集しにくいので
自動できれいに整列させます。

全て横並びだと編集しにくいので並べ替える

アートボードパレットメニューにある「アートボードを再配置」を選択すると

アートボードの再配置

ダイアログが開き、並べ方や間隔を指定できます。

並べ方や間隔を指定できる

オブジェクトごと一気に整列させられました。

きれいに整列できたので編集しやすくなった

文字を個別に打ちなおしていく

ここまでIllustratorの機能で効率よくできたので
あとはひたすら都道府県名を打ちなおしていきます。

文字の部分を打ち直していく

こうして47種類が全部そろいました。

全て打ち直した

そして、SVGで書き出す場合、わすれてはならないのが文字のアウトライン化。

全選択して、一括でアウトライン化します。

書き出す前にアウトライン化

文字のアウトライン化は、ショートカットキーで実行すると
グループ化されていてもアウトライン化もれがなく便利です。

  • アウトライン化 … ⌘ or Ctrl + Shift + o

ショートカットキーでアウトライン化すると一気にできて便利

アウトライン化もれの確認は、アウトライン表示に切り替えるとわかりやすいです。

  • アウトライン表示切替 … ⌘ or Ctrl + y

アウトライン表示にして拡大したところ

あとは、別名保存から、SVGを選択して書き出すだけです。
大量の画像が書き出されますので、新しいフォルダを作ってから、そこを保存先にするのをおすすめします。

別名で保存からSVG保存

複数ファイルのファイル名を一括変換

書出されたSVGのファイル名は
「aiファイル名_アートボード名.svg」
となっており、場合によっては長すぎたり冗長だったりします。

Macの場合、ファインダーの機能で複数ファイルの名前を一気に書き換えできるので
その方法も紹介します。

残念ながらWindowsにはこの機能はないため、ファイル名一括変換くんなどのフリーソフトを活用します。

アートボードごとに書き出される

ファインダーで、「aiファイル名_アートボード名.svg」で書きだされたファイルが保存されているフォルダを開きます。

ファイルを複数指定して名前を変更メニューを選ぶ

名前を変更したいファイルをすべて選択し、右クリックメニューから
「N項目の名前を変更…」を選択すると

「テキストを置き換える」で一括置換できる

このように、テキストの置換などが簡単にできます。

一気に47ファイルの名前を変更

47ファイルぶん、一気にスッキリしたファイル名に変更できました。

関連記事

Pocket