DTP Transitでタグ「アートボード」が付けられているもの

2015年1月にIllustratorを使うとき、私が手放せない10個のスクリプト - DTP Transitに公開してから2年。現在の10スクリプトをまとめてみました。

加えて、スクリプトでできること(一覧)と題して、入手できるスクリプト(無料・有料)をカテゴリで分類し、何ができるか、また、そのリンク先をまとめました。

#やりたいことスクリプト
1アートボード作成、修正、書き出し 
2選択したテキストの編集をダイアログボックス内で行う 
3位置を変えずに行揃えを変更する位置を変えずに行揃えを変更する
4フォントのウエイトを変更する文字のウェイトだけをサクサク変更できるスクリプトができました!(Illustrator) : GOROLIB DESIGN - はやさはちから -
5アートボードと同じサイズの長方形を作成する
6選択したアイテムをドキュメントウインドウの中央に、画面いっぱいに表示する 
7複数行のテキストを、改行ごとに別のテキストにするテキストばらし(イラレで便利: テキストでちょっと便利) 
8改行を削除する改行キーを1秒ですべて取り去るスクリプトです(Illustrator) : GOROLIB DESIGN - はやさはちから -
9プレビュー境界を使用/不使用の切り替え
10次(前)のアートボード、先頭・末尾のアートボードに移動

第178回バンフーセミナー終了後、「アートボードの10mm内側にガイド作成する」という定型フローがあるので、これをアクションでラクしたいというご相談をいただきました。

タイトルおちなのですが、Illustratorで 複数のアートボードで作業しているとき、どのアートボードがアクティブなのかを知るのにビデオ定規が便利です。

オブジェクトをほかのアートボードに移動しても、移動先のアートボードはアクティブになりません。アートボード内でクリックしてはじめて、そのアートボードがアクティブになります。

オブジェクトをアートボードの中央に揃えたいときなど、「あれっ?」となってしまいます。

結論からいうと、オブジェクトを移動後、そのアートワーク内でクリックしてはじめて、そのアートボードがアクティブになります。

Photoshopでは、CC 2015からアートボードを使えるようになっています。

新規ドキュメント作成時のプロファイルとアートボード

[新規]ダイアログボックスで選択する[ドキュメントの種類]によって、従来通りのカンバスのままか、アートボードかが別れます。

「Web」、「モバイルアプリデザイン」、「アイコノグラフィ」および「アートボード」を選択しているときには、アートボードが作成されます。

ドキュメントの種類初期設定
Photoshop初期設定カンバス
US標準用紙カンバス
日本標準用紙カンバス
写真カンバス
Webアートボード
モバイルアプリデザインカンバス
フィルムとビデオアートボード
アイコノグラフィアートボード
アートボードアートボード
カスタムカンバス

#95 CC2015特集フォト 04 ぼかしが超リアルに、JPEGが超コンパクトに | Creative Cloud 道場 - YouTubeのムービーにて紹介されている新しいJPEG書き出しにはちょっとうなってしまいました(7分30秒くらいから)!

しかしながら、Web向けに使う場合、ちょっとややこしくなっているのでまとめてみます。

次期バージョンのPhotoshopにアートボード機能が搭載されるようです。

追記(2015年7月31日):

「プレゼンスライドをIllustratorを作っている」という方に、いろいろ質問をいただいたので、 まとめてみました。

Illustratorのアドバンテージ

  • 合成フォントや自動カーニングを使える(InDesignも同様)
  • ベクトル形式の素材が多い場合には、コピー&ペーストなどで配置できるだけでなく、直接編集できる

スタート

[新規ドキュメント]ダイアログボックスで、作成したいページ数を[アートボードの数]に入力し、ページサイズなどを指定します。

このとき、覚えておきたいキーボードショートカットは、command+option+0(すべてのアートボードを全体表示)です。

最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。

これらを提供してくださっている作者さんたちに感謝します。

はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。

追記

2017更新版を公開しました。

なぜ、スクリプトを使うの?

Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。

  • Illustratorではできないこと
  • できるけれど手間がかかること(→結果としてミスが生じやすいこと)

なお、スクリプトには、Mac/Windows両方で使えるJavaScriptがよく使われます(過去には、MacはAppleScript、WindowsではVBScriptが使われることが多かったです)。

拡張子は「jsx」。手を加えるにはソースコードを読む必要がありますが、使うだけならブラックボックスのまま使えます。

Illustratorだけでなく、PhotoshopやInDesignなどのアプリケーションもJavaScriptによる制御が可能です。

スクリプトの利用方法

『10倍ラクするIllustrator仕事術』からの抜粋

Illustratorでスクリプトを動かすには、次の3つの方法があります。

PDFのアイコンをクリックすると『10倍ラクするIllustrator仕事術』(増強改訂版)の抜粋版(「スクリプトの使い方」)をダウンロードいただけます。

  • 「/Applications/Adobe Illustrator CC 2014/Presets/ja_JP/スクリプト」に入れる(Illustratorを再起動すると[ファイル]→[スクリプト]のサブメニューに表示される)※「スクリプト」にアクセスしやすいようにエイリアス/シンボリックリンクを作成しておくとよい
  • command+F12キーでスクリプトファイルを指定する([ファイル]→[スクリプト]→[その他のスクリプト])※スクリプトファイルがどこにあっても実行可能
  • ScriptKeyAi、SPAi、Keyboard Maestro、Ai Script Assist、Script Slot Liteなどを使う(キーボードショートカットを与えることができる、スクリプトファイルがどこにあっても実行可能)

eef7ee41-4027-4177-a1dc-eb3fce83ecd0.png

Illustrator CC/CC 2014では、Layer Exporterを使うことで、スライスを行わずに、SVG/PNG/JPEG書き出しを行うことができます。

スライスの難点

主にWeb向けの制作フローでは、画面全体から“切り出す”領域を指定し、ファイル形式やスライス名を設定する「スライス」という作業を行ってきました。このスライスには、次のような難点がありました。

  • スライス作業そのものが面倒
  • スライスを重ねることができない
  • 背景を透過したい場合、一時的に背景のオブジェクトを隠す必要がある

Layer Exporterでできること

  • レイヤーやグループ化されたオブジェクトに拡張子を付ける(消す)
  • 複数レイヤーをひとつに統合する
  • グループ化されたオブジェクトごとに異なるレイヤーに分配する
  • 拡張子がついているレイヤー(オブジェクト)ごとにSVG/PNG/JPEGで書き出しを実行する
  • CSS書き出し

アートボードを切り替えるには、次の方法が用意されています。

  • [A][アートボード]パネルで、アートボード番号をダブルクリックする
  • [B]ドキュメント下部のステータスバーで▶ボタン(◀ボタン)をクリックする
  • [C]ドキュメント下部のステータスバーで▼ボタンをクリックして、表示されるポップアップメニューから表示したいアートボード番号(とアートボード名)を選択する

IllustratorをWeb制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます(ツッコミ歓迎ですので、何かあればお気軽に)。

  • ドキュメントプロファイルは「Web」。[プレビューモード]を「ピクセル」に変更、[新規オブジェクトをピクセルグリッドに整合]はオフ
  • [線の位置]を「内側」にして作業
  • [アピアランス]パネルメニューの[新規アートに基本アピアランスを適用]のチェックをはずしておく
  • [新規オブジェクトをピクセルグリッドに整合]はオフに
  • [プレビュー境界を使用]にチェックを入れる
  • キー入力を「1ピクセル」に
  • アートボードの座標に注意
  • sRGBを基準に

これによって、次のような問題を回避できます。

  • プリントメディアの設定で制作されたドキュメントをWeb向けに利用しようとすると、エッジがにじむ。
  • [新規ピクセルグリッドを整合]をオンにしているとき、1ピクセルの線のオブジェクトを描くと、ピクセルグリッドでなく、ピクセルグリッドの中心に吸着する。そのため、実際の大きさは1ピクセル(=0.5+0.5)大きくなってしまう。
  • [線の位置]を内側(外側)にして作業しても、次に描くときには「中央」に戻ってしまう
  • せっかくいい感じに作業していても複数オブジェクトの整列を行うと、エッジがにじむ。または、見た目の通りに整列されない
  • [新規オブジェクトをピクセルグリッドに整合]がオンのまま描画すると、パスと描画のズレが生じる
  • アートボードごとに分けて制作しているとき、個別の書き出しでは問題ないのに、アートボード書き出しするとエッジがにじむことがある

Webで使うIllustrator(+SVG、+アイコンフォント) - NAVER まとめも併せてご覧ください。

ドキュメントプロファイル

後述する内容とダブりますが、新規にドキュメントを作成する場合には、ドキュメントプロファイルに「Web」を選択し、次の2点を修正しておくとよいでしょう。

  • [プレビューモード]を「デフォルト」から「ピクセル」に変更
  • [新規オブジェクトをピクセルグリッドに整合]のチェックをはずしておく

ドキュメントプロファイルについては、末尾にもふれています。

ひとことで言えば「カオス」です...

右が切れてしまうので、こちらをご覧ください。

[ファイル]メニューパネルスクリプト
Web用に保存書き出し別名で保存CSSプロパティLayer ExportersaveSVG_GUI.jsx
デフォルトインストールが必要)
設定が必要)
キーボード
ショートカット
command+option+shift+S-command+shift+S---
ビットマップGIF
JPEG
PNG
SVG
(CS5までは
CSS3
書き出し単位オブジェクトスライスすればレイヤー名を付けた
オブジェクトのみ
選択したオブジェクトレイヤーに分ければ
アートボード
アートボード別、
レイヤー別に
書き出すときの
ファイル名
ダイアログボックスで指定
(スライスごとの設定を
優先)
指定したファイル名_アートボード名.拡張子-レイヤー名.拡張子アートボード名.svg
  • [Web用に保存]は、Illustrator CS5までは[Webおよびデバイス用に保存]
  • SVGの書き出しはIllustrator CS5までは[Webおよびデバイス用に保存]内にあったが、Illustrator CS6では[別名で保存]のみに。[Web用に保存]に復活するのが望ましいと思います。

2014年2月6日(木)サンシャインシティコンベンションセンターで開催されているpage2014のメディアクリエイションゾーンセミナーにて、『Webで使うIllustrator、その基本とはまりポイント』を鷹野雅弘(スイッチ)が担当しました。

20140206_page2014_092.JPG

ご参加いただいた方は、ぜひ、アンケートへの回答をお願いします(スライドなどを共有します)。受付終了しました。

正しいアプリケーションを使う、というのもスキルの内なので、こういうものはページものは100%、InDesignで行うべきだと思いますが、大人の事情的にIllustratorでマスターページ的なものを実現するアプローチについてまとめてみました。

 一括更新
Illustratorテンプレート
[すべてのアートボードにペースト]
(アートボードに)シンボル
(アートボードに)AI-AIリンク

“細かすぎて伝わらない”系の Illustrator CC(17.1)の改良点です。

アートボードのサイズを編集時、(バウンディングボックスのように)optionキーを押しながらハンドルをドラッグすることで中心点を保持できるようになりました。

アートボードをオブジェクトサイズにするには、[オブジェクト]メニューの[アートボード]→[オブジェクトに合わせる]を実行すればいいのですが、その逆の機能はありません。

新年につき、既存のスクリプトに手を入れてみる挑戦を行いつつも撃沈。探していたら「Fit Object to Artboard」というスクリプトを見つけました。

注意点は2つ。

  • オリジナルは残ります。
  • 四角形以外のオブジェクトがある場合、縦横比が狂います。

アートボードが複数ある場合、すべてのアートボードに複製するか、アクティブなアートボードだけに複製するか、選ぶことができます。

Illustratorの環境設定で設定する「プレビュー境界」オプションとアートボードの[選択オブジェクトに合わせる]の関係がトリッキーなので、まとめてみました。

Illustratorの環境設定で設定する「プレビュー境界」オプションは、アートボードの[選択オブジェクトに合わせる](または[オブジェクト全体に合わせる])には影響がありません。「プレビュー境界」オプションがオンでもオフでも、オンのような挙動をします。

たとえば、次のような状況で、[オブジェクト]メニューの[アートボード]→[選択オブジェクトに合わせる]を実行すると...

次のようになります。

InDesignにIllustrator(およびPDFの)を配置するときのオプションが、ちょっと難解です。ちょっと自信ないので、ツッコミ歓迎です。

IdCC-place-PDF-2-s.fw.jpg

InDesignのヘルプには次のように記述されています。

PDF(または Illustrator 9.0 以降のバージョンで保存されたファイル)を配置する場合、配置ダイアログボックスの「読み込みオプションの表示」を選択すると、ダイアログボックスに次のオプションが表示されます。

オプションを表示にしてみました。

項目名説明
バウンディングボックス PDF ページのバウンディングボックス、つまり、ページマークも含めて、ページ上の全オブジェクトを囲む最小限の領域を配置します。「境界線ボックス(表示中の レイヤーのみ)」の場合は、PDF ファイルで表示されているレイヤーの領域のみで配置され、「境界線ボックス(すべてのレイヤー)」の場合は、PDF ファイル内のすべてのレイヤー(非表示のレイヤーも含む)の領域で配置されます。
アート (例えばクリップアートなどの)配置可能なアートワークとして PDF の発行者が定義した領域だけを配置します。
トリミング Adobe Acrobat によって表示または印刷される領域だけを配置します。
裁ち落とし 裁ち落とし範囲が存在する場合、すべてのページ内容をクリップする領域だけを配置します。 ページを印刷物の製造環境で出力する場合に便利な設定です。 プリントされたページでは、裁ち落としの外側にページマークが表示される場合があることに注意してください。
メディア ページマークも含んだ、元の PDF ドキュメントの物理的な用紙サイズ(例えば A4 の用紙サイズ)の領域を配置します。
トンボ トリムマークが存在する場合、印刷工程で実際にカットされる最終的なページの領域だけを配置します。

さらに図版が掲載されています。

df_06-2.jpg

Web用にIllustratorを使う、つまり、ピクセルプレビューをオンにする場合、1ピクセルの線幅を持つ四角形を作成する場合、四角形の大きさが小さいと、[線の位置]が「中央」または「内側」だとつぶれてしまいます。

[線の位置]は外側にするのがベターです。

(クリックすると、拡大します)

Fireworksの機能拡張として開発されていた「Specctr」(スペクター)が、なんとIllustrator CC対応になっています。

SpecctrPreview.png

Specctrを使うことで次のことが可能になります(単位は選択している単位の種類に依存します)。

  • 選択したオブジェクトの幅、高さを計測して寸法線として描画する
  • 2つのオブジェクトの間隔を計測して寸法線として描画する
  • オブジェクトを1つだけ選択しているときには、アートボードの上と左からの距離を計測して描画
  • 選択したオブジェクトの塗りや線、不透明度などの情報を描画する
  • 選択したテキストのフォント、フォントサイズ、塗りなどの情報を描画する

Web制作を行われている方なら説明不要だと思いますが、カンプなどを作成するとき、ビジュアルデザイナーからコーダーへの申し送りの際に、むちゃくちゃ重宝します。

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。2014年に技術評論社から発売、現在5刷です。2011年版と合わせて35,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

画像:『10倍ラクするIllustrator仕事術』改訂版

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメ外部リンク

Adobe Creative Stationで「ベテランほど知らずに損してるIllustratorの新常識」と題して連載しています。

連載継続中です。

Adobe Creative Stationで「ベテランほど知らずに損してるPhotoshopの新常識」と題して連載しています。

連載は休止しています。

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る