カテゴリー
Tips

Illustratorのアンチエイリアス処理(Webデザイナー向け設定)

私の会社では、Photoshopでモックアップ(ラフを制作)しています。
ウェブサイトの仕上がりや、画像のスライス、ひいてはSEOの面でシンプルなコーディングを実現するなどの観点から、アンチエイリアスの問題を回避するためです。
稀なケースではありますが、お客様によっては、デザインは自社制作(乃至は他社制作)で、コーディングとSEOだけを私の会社に依頼される場合もあります。

Illustratorでウェブサイトのラフを作るデザイナーさんも少なからずいらっしゃいますよね。
けれど、Illustratorでラフを作った場合、問題が発生してしまします。あの無駄なアンチエイリアスです。
アンチエイリアスが掛かっていると、デザインを再度Photoshopで作り直さないといけなくなります。

そこで、以下の設定をすればこのIllustrator特有のアンチエイリアスを少なくすることが出来ます。
どうぞご参考になさってください。

IllustratorのWebデザイン向け設定

[編集]→[環境設定]→[一般]をクリック

「プレビュー境界を使用」にチェック
[OK]ボタンをクリック

[編集]→[環境設定]→[単位・表示パフォーマンス]をクリック
「一般」を「ピクセル」に変更
[OK]ボタンをクリック

[表示]→[ピクセルプレビュー]をクリックして「ピクセルプレビュー」にチェックを入れる

[表示]→[ピクセルにスナップ]をクリックして「ピクセルにスナップ」にチェックを入れる

[表示]→[定規を表示]をクリックして定規を表示させる

[ズームツール]をクリック
アートボード左上をクリックし続けて6400%まで拡大する(アートボードの表示が消えちゃったら、消える手前まで拡大する)

[選択ツール]をクリック
ルーラー原点をクリックして、アートボード左上までドラッグ

あとは、オブジェクトの設定を気をつければアンチエイリアスは少なくなります。

線幅は、1px単位で行う。
線の位置は、線の内側に揃える。
などです。

Adobe Illustrator CS5 ピクセルグリッドに整合する機能

Illustrator CS5から、ピクセルグリッドに整合する機能が追加されました。
この方法で、アンチエイリアスが完全に一掃できるかは、未検証です。

ピクセルグリッドに整合したWeb画像の作成
2011/01/25