ILLUSTRATOR ABC
Technical Sample 12

IllustratorをWeb作業に

最適化するためのポイント

このエントリーをはてなブックマークに追加

※解説バージョンは、基本的にCS5です。これ以外のバージョンでも、このメニューがあれば操作はできますが、結果が異なったり、うまくいかない場合があるかもしれません。

Illustratorは印刷系に強いソフトウエアだと思われがちですが(実際そっちの機能のほうが充実してるんですが)、設定をきちんと調整することで、Webなどのピクセルベースの作業も正確におこなえます。

 

2013.07.10

記事内に、『Illustrator ABC』の関連ページが記載されています。そちらもご覧いただくと、機能やメニューについての理解が深まります。

ABC P78
レイヤーについては

Illustrator ABC

井上のきあ著

2,415円

A5版/296ページ/MdN

書影をクリックすると、アマゾンへジャンプします

Technical Sample01

トラッピングを利用して

紙色の露出を防ぐテクニック

Technical Sample02
POINT1 Illustratorでも、ピクセルに特化するよう
作業環境を調整すると、スムーズに作業できます。

Illustratorは滑らかに補完されたベジェ曲線のイメージが強いせいで、ピクセルの作業とは縁遠いように見られがちですが、設定を調整するだけで、一気にピクセルワールドになります。作業環境の設定といえばまずは[環境設定]ダイアログですが、[一般]のところでは、[キー入力]、[アートワークのアンチエイリアス]あたりが影響すると思います。

[単位]も重要です。[一般]はドキュメント作成のときにも設定できるし、定規経由でも切り替えできるんですが、それ以外はここをいじらないと変更できません。直前に印刷系の作業で[ミリメートル]とか[歯]とか使ってたりすると、調整する必要に迫られることもあるかも。

ABC P34
単位については

[ピクセルグリッドを表示]をオンにしておけば、高倍率のピクセルレベルの作業になったとき、どのみちピクセルグリッドが表示されるので、とくに設定しなくても困らないかもしれないです。グリッドを設定する場合は、1ピクセルを2で割るようにしておくと、ピクセルの中央にアンカーポイントが打てて便利です。

ABC P251
グリッドについては

ピクセルの見え方は[表示]メニューと関連があります。影響するのは[ピクセルプレビュー]、[ピクセルにスナップ]あたりです。実際にどうなるのかは、このあと解説します。

 

グリッドをピクセルと関係ない単位(ミリなど)で設定したり、端数が出るような設定([グリッド:2.53px]で[分割数:2]とか)に設定することも可能ですが、ピクセルプレビューモードで作成したオブジェクトと通常モードで作成したオブジェクトで、[グリッドにスナップ]が効いたり効かなかったりといった差が出るなどの変な現象が出るので、いまからピクセルで作業する、と決めたら、妙なことはしないほうがよさそうです。

ABC P260
ピクセルプレビューについては
POINT2 正確な描画作業は、Illustratorの得意とするところです。
アンカーポイントの位置には、気を配ったほうがよいでしょう。

作業環境をピクセルに最適化してしまえば、オブジェクトの位置やサイズのコントロールは簡単です。

 

デフォルトではアートボードの左上角が原点になり、変形パネルにはそれを基準にしたオブジェクトの座標が表示されます。ただし、バージョンによっては(とくに古いバージョン)、アートボードの左下角がデフォルトの原点だったりするので、変更が必要でしょう。

 

左図は、通常モード(ピクセルプレビューモードではない)で表示した状態です。

ABC P66
変形パネルについては
表示:通常
アンチエイリアス:オン
線の位置:中央

これはピクセルプレビューモードに変更した状態です。表示倍率が600%を越えているので、うすいグレーの線でピクセルグリッドが表示されます。

 

[線幅:1px]だと、線がちょうどピクセルグリッド上にのる状態になり、アンチエイリアスがかかることで線がぼやけます。

表示:ピクセルプレビュー
アンチエイリアス:オン
線の位置:中央

環境設定でアンチエイリアスをオフにすると、線はクリアになりますが、表示のシステム上どちらかのピクセルにはめこまないといけなくなるので、この場合こんな感じに位置がずれます。

表示:ピクセルプレビュー
アンチエイリアス:オフ
線の位置:中央

線をはめるピクセルをきっちり管理したいときは、[線の位置]が便利です。ただし、[線幅]が整数でなかったり、水平/垂直線でなかったりすると、ぼやけたり位置がずれたりは避けられないです。あくまでオブジェクトが長方形の場合に便利な方法です。

 

途中で切り替えるのではなく、最初からピクセルプレビューモードで作業していると、[線]に何らかの色が設定されている場合、アンカーポイントがピクセルの中央になるように自動的に調整してくれることがあるようです(設定をいじくりまわしているとならないこともあり)。この場合、[内側]とか[外側]にすると位置がずれることになります。

ABC P44
線の位置については
線の位置:外側
線の位置:内側

長方形ではなく、水平線や垂直線の場合も、奇数&整数値の[線幅]で、ピクセルグリッドにのっかるようにアンカーポイントが打たれていると、アンチエイリアスによってにじみます。

表示:ピクセルプレビュー
アンチエイリアス:オン

この場合、アンカーポイントがピクセルの中央になるように移動すると、ピクセルにはめこむことができるので、クリアになります。こういうときに、環境設定の[キー入力]を0.5pxなどにしておいた成果がでます。

 

升目を埋めるつもりでアンカーポイントを置いていくとうまくいくんじゃないかと。

表示:ピクセルプレビュー
アンチエイリアス:オン
表示:ピクセルプレビュー
アンチエイリアス:オン
(左右とも)

変形パネルに[ピクセルグリッドに整合]というチェック項目があって、なんだこれ、と思いつつ放置されてそうですが、同じ形状のオブジェクトでも微妙な位置の違いでアンチエイリアスのかかり方が変わるので、それを維持することもできるよ!っていう機能らしいです。CS6では。

 

ただし、CS5ではこれオンにすると、オブジェクトのサイズがかってに整数ピクセル値に変更される(座標もきりのいい数値になります)、という機能のようです。オフにしても元に戻らないので、注意が必要です。どっちが本来の仕様なのかわかんないですが……(サイズを整数値にしたければピクセルにスナップで間に合いそうなので、6のほうが本来の目的なんじゃないかなあという気もするんですが、5と6であまりにも動きが違うので、4と5の間に起こった、4で「アートボード定規」と呼んでいたものを、5で「ビデオ定規」っていう名前にしただけ、みたいな現象なのかなあという気もします)。

ABC P261
[ピクセルグリッドに整合]については

色については遜色なく作業できます。共通色の選択や置き換えなどといった操作も、おそらくどのソフトウエアより柔軟に対応できるでしょう(選択肢がありすぎて使いこなすのが大変ですが)。パネルの表示は、Webセーフカラーモードに切り替えることも可能です。

ABC P118
色については
ABC P260
Webセーフカラーモードについては
表示:ピクセルプレビュー
アンチエイリアス:オン
表示:ピクセルプレビュー
アンチエイリアス:オフ 表示:通常
アンチエイリアス:オン

角丸加工は[角を丸くする]で可能です。効果を拡張しない限り、半径はあとから調整できます。ピクセルプレビューモードにすると、角丸のアンチエイリアスのかかり具合を見ることができます。

 

Illustratorはこのほか、整列、シンボル、グラフィックスタイルあたりの機能も充実しているので、描画やレイアウト作業については、まず困ることはないのではと思われます。というか、このへんが弱かったらIllustratorの意味がないので……。

ABC P179
[角を丸くする]については
POINT3 文字のアンチエイリアスをオフにして
ピクセルフォント風に使うこともできます。

文字のアンチエイリアスのオンオフは、環境設定のほかに、文字パネルでも切り替えできます。

 

普通に文字を入力するとこんな感じ。

ABC P196
文字の入力については
表示:通常
アンチエイリアス:オン
文字パネルのアンチエイリアス:オン

ピクセルプレビューに切り替えると、サイズの小さい文字はこんなふうににじみます。

 

テキストオブジェクトのベースラインの先頭の■は、ピクセルグリッドにスナップされます。

表示:ピクセルプレビュー
アンチエイリアス:オン
文字パネルのアンチエイリアス:オン

そこで、文字パネルでアンチエイリアスを[なし]に変更すると、ピクセルフォント状態になります。環境設定でアンチエイリアスをオフにしても、同じ状態になります。ただし環境設定のほうは、画面の見え方が変わっただけで、文字自体にはアンチエイリアスが設定されている状態です。たとえばラスター書き出し時にアンチエイリアスをオンにして書き出すと、アンチエイリアスがかかった状態で書き出されるので、上図の状態にはなりません。

表示:ピクセルプレビュー
アンチエイリアス:オン
文字パネルのアンチエイリアス:オフ

上の文字を文字パネルで[アンチエイリアス:鮮明]、下を[アンチエイリアス:なし]に設定し、書き出し時のアンチエイリアスをオンに設定してラスター書き出しをおこなったものです。

 

文字自体のアンチエイリアスをオフにしておくと、書き出し時の設定に影響を受けないことがわかります。文字の場合はこの手が使えるんですが、ほかのオブジェクトについては、書き出し時にアンチエイリアスをオフにしないと、画面で見たようには書き出せません。

ABC P237
ラスター書き出しについては

極小サイズの文字の場合、文字を表現できるサイズには限界があり、構成ピクセル数でいって、だいたい5ピクセル角くらいが限界なんじゃないのかなあと。奇数だと、「A」とか「T」などの中心軸が必要なものなどがきれいに左右対称で表現できるんですよね。

 

上は小塚ゴシックELの[フォントサイズ:6px]、下はOrator Std Mediumの[フォントサイズ:7px]ですが、たとえば「H」や「E」を比較してみると、両方とも縦5ピクセル使っているのがわかります。

フォントサイズ=使用ピクセル数ではないうえ、フォントサイズによって、余白のとりかたが変わります。その差分は、一辺をフォントサイズと同じ値に設定したテキストエリアに文字を入力してみると、わかります。

 

ちなみに「N」の場合、[フォントサイズ:5px]では、「H」とほとんど区別がつかない状態になってますね。

 

アンチエイリアスをオフにした状態で使うことは、ビットマップをテーマにしたサイトでもない限り、あまりないと思いますが(アンチエイリアスかかってない文字を見かけることはほとんどなくなりました)、極小サイズの文字の可読性を優先させたいときなどは、いまだに便利です。

16px 10px 6px 5px 表示:ピクセルプレビュー
アンチエイリアス:オン
文字パネルのアンチエイリアス:オフ

こちらは、上図を一般的な表示設定で表示した状態です。

表示:通常
アンチエイリアス:オン
文字パネルのアンチエイリアス:オン
ABC P228
文字のアウトライン化については

文字の場合、もうひとつ気をつけないといけないことがあって、文字をアウトライン化すると、ピクセルフォント風にはならない、ということです。

 

左図の状態をパスに変換する場合は、いったんラスタライズして、モザイクオブジェクトに変換するのが一番簡単なんじゃないかと思います。

ABC P234
ラスタライズについては
ABC P242
モザイクオブジェクトについては
表示:ピクセルプレビュー
アンチエイリアス:オフ
表示:ピクセルプレビュー
アンチエイリアス:オン
POINT4 Illustratorのスライス機能について。

Illustratorにはスライス機能があり、アートボード、オブジェクト、ガイドなど、基準にするものがいろいろ選べます。ドラッグで、好きな位置で分けることも可能です。

 

[スライス選択ツール]を使うと、スライスエリアの拡大縮小もできます。わたしは普段スライス機能を使うことがないので、Illustratorのこれが、はたして使いやすいのか使いづらいのかのジャッジはできないんですが。

 

書き出しがからんでくると、やはりアートボードは避けて通れないですね。

ABC P262
スライス機能については

CS5まではHTMLも一緒に吐き出してくれてたんですが、CS6からブラウザに表示するのでそれコピペしてね!という仕様になっています。IllustratorはWeb系からやんわりと撤収しようとしてるのかなーと思っていたんですが(イメージマップあたりもどうにかしようという気概があまり感じられないし)、CCのここがすごいよリスト(Adobe製)をちらっと見たら、CSS吐き出せるよ!みたいなことが書いてあったりしたので、やる気があるのかないのかよくわかりません。

吐き出された画像を並べてみると、ちゃんとつながっていることがわかります。

 

Illustratorからラスター書き出しをすると、1ピクセル余分に書き出される、といった現象がよく起きるんですが、解像度72ppiで出す場合、アートボードの位置(座標)とサイズが整数ピクセル値であれば、余分なピクセルは出てこないみたいです。

 

 

 

Illustratorが弱いのは、マスター機能に相当する、共通オブジェクトを段階分けできるようなものがないところだと思うんですが、これWebに関係なくIllustratorにも欲しいです。シンボルを積み重ねれば代用できなくもないですが。InDesignにはあるので、そのうち入ってきたりしないかなーと期待。

© NOKIAINOUE. All Rights Reserved.