01

Date: 2017/06/20

Illustratorのアートボードを簡単に再構築&配列しよう!

2017年も梅雨突入ですね〜
とは言え、今年の夏はなかりの猛暑になるらしいので、皆様水分補給をしっかり摂るよう備えちょってください。

さて、今回は生まれも育ちも南国高知!
土佐のはちきん小松がIllustratorのアートボードの便利機能についてご紹介していきます。

複数アートボード管理で格段に作業効率がアップしたIllustrator

CS4以降から一つのaiファイルに複数(最大100個)のアートボードを設定できるようになりました。
印刷物なら表裏のチラシや、カタログなどのページが多い案件の場合でも一つのaiファイルで管理できるので作業効率が格段にアップしました。

さらに&_では、グラフィックだけでなくwebをデザインする際にIllustratorを使って制作しています。
webをデザインする場合でも、パソコン、タブレット、スマホなどデバイスに応じてサイズを変更しながら複数のアートボードでデザイン作業をおこないます。

印刷物なら、途中でサイズが変わるなんてことはあまりありませんが、webの場合は入る情報量に応じてページごとの高さ(長さ)はバラバラです。

クライアントにメールで確認データを送る際、ページ全体をPDFに書き出しをしていくのですが、書き出す前にアートボードサイズを調整していくのが、ちょっと手間なんですよね。

勿論各アートボードサイズは「オブジェクトに合わせる」を選択したり、オブジェクト自体のサイズを測ったうえで、数値入力で変更も可能ですが、何にしろアートボードを一つずつなので時間がかかってしまいます。

一気に複数のアートボードサイズを変更できたらいいのにな〜
そう思って色々調べてみると、とっても便利なスクリプトを発見しました!

オブジェクトを元にアートボードを再構築するスクリプト「Rebuild Artboards」

あらかじめ用意しておいたオブジェクトを元にアートボードを再構築するスクリプトです。
このスクリプトを使う前にちょっとした準備が必要ですが、複数のアートボードサイズが一気に変わるだけでなく、同時にアートボードの名前まで変更できるので、かなり作業時間短縮になります。

テストにデザインしたwebページのキャプチャ画像に添って説明していきますね。


①先にスクリプトRebuild Artboards(3flab-rebuild_artboards.jsx)をダウンロードして登録しておきます。

②webデザインの場合、ある程度のボリュームも入るように長めのアートボードを一気に作って作業を進めていきます。先程も書いたように、情報に応じてオブジェクトの長さが違うのでアートボードの無駄な余白が出てきてしまいます。

07

③アートボードごとにオブジェクト全体が入る一つのパスオブジェクト(キャプチャ画面では、分かりやすいようにピンクのラインで囲んだベージュ背景)と、アートボード外にアートボードの名前にしたいテキスト(ピンクのテキスト)を打ち込みグループ化しておきます。この時のオブジェクトが変更後のアートボードサイズになります。

06

④グループアイテムを、すべて選択した状態でスクリプトを実行。

05

⑤完了メッセージが出てきたら成功です!
グループ化するのは一つのオブジェクトとテキストの2つだけです。
複数オブジェクトを選択してグループ化した場合、またはグループ化ができていない場合は、エラーが出るので注意してください。

03

⑥現状のアートボードを全て削除し、選択したアイテムを元に複数のアートボードを一気に作り直します。同時にアートボードの名前も打ち込んだテキストに変更されています!
アートボードを再構築するためのグループアイテムをしっかり準備さえすれば、とても役に立つスクリプトです。

02

引用元:株式会社三階ラボ

Illustrator スクリプトとは

JavaScript、AppleScript、ExtendScript など書かれた外部ファイル(.js や .jsx)です。
Illustrator スクリプトを実行することにより、Illustrator に不足している機能を追加したり、操作の自動処理などを行うことができるので色々探してカスタムできるのも魅力的です。

ダウンロードしたスクリプトファイル(拡張子が .js や .jsx)をメニューに登録する方法

【OS X の場合】
> アプリケーション > Adobe Illustrator CC XXXX > プリセット > ja_JP > スクリプト

【Windows の場合】
C: > Program Files > Adobe > Adobe Illustrator CC XXXX > ja_JP > プリセット > スクリプト

上記にスクリプトファイルをコピーして、Illustrator を再起動すると、メニューの ファイル → スクリプト に追加され、ここからスクリプトを実行できるようになります。
※但しOSやIllustratorのバージョンによってコピーする場所が変わることがあるので注意。

Illustratorにデフォルトで入っているアートボードの便利機能「アートボード再配置」

複数並んだアートボードの、配列を簡単に変える機能のご紹介。
「横に配列」「縦に配列」「横一列」および「縦一列」オプションを使用して、アートボードを再配置していきます。

アートボードを再配置するには次の操作をおこないます。
カードを12枚のアートボードに貼り付けたキャプチャ画像に添って説明していきます。


①縦に3段、横に4列並べたアートボードを仮に2段×6列に変更するとして、アートボードパネルメニューから「アートボードを再配置」を選択します。

10

②「アートボードを再配置」からレイアウトを選択して、「横列数」を入力。この時に「オブジェクトと一緒に移動」にチェックを入れます。

09

③無事にアートボードが2段×6列に配列されました!

08

一度にアートボードを再構築できる便利なスクリプトと、配列機能で更にスピードアップを目指しましょう!