今やっている仕事で、Illustratorで作成したカンプを私がコーディングすることになったのですが、いただいたデータがもの凄くきちんと作ってあって、大変参考になったので、設定項目だけメモしておきます。

Illustratorはもともと、印刷用データの作成が目的だったソフトなので、Web用の画像も、ちゃんと作れるのですが、設定を気をつけておかないと、いざ書き出してみると、線がにじんだり、大きさが意図したものにならなかったりします。
Photoshopだと、もともとベクターグラフィック用のソフトなので、そういうことは無いのですけどね。

気をつけている項目は以下の通り。

単位をpx（ピクセルに揃える）

090218_ill01

とにかくWebの世界の単位はピクセルです！
センチメートルとかは使えないです！

印刷用データの仕事が同時にあったりすると、設定をその都度変えなくちゃいけないので、ちょっと面倒ですね。

1pxのガイドにオブジェクトが吸着するように

まず、環境設定の続きで「ガイド・グリッド」の数値を、グリッド→10px、分割数10にします。
これで、1pxずつ分割される設定になるりますね（だよね？）。

090218_ill02その後、設定をOKして閉じて、メニューの「表示」から、「グリッドにスナップ」を選び、チェックを入れます。

090218_ill03

この設定をしておくと、オブジェクトを移動したときに、必ず1pxのグリッドに沿って配置されるようになるので、線のにじみやボケがかかるのをかなり防げますよ。

オブジェクトのサイズに小数点を使わない

時々、DTPのデータをそのままお借りするときがあるのですが、Web用の単位に変換すると、600.25pxとか、微妙な数字になってる時があります。

1px以下の数字は、どんなに頑張っても1pxになりますから、この場合は期待しない滲みが出ることになります。
数字は必ず整数値になるように気をつけましょう。

”1pxの線” は0.25pxの線を4つ重ねる

Illustratorのバグなのか、仕様なのかは不明ですが、1pxの線を1pxとして表現するのは、意外と難しいです。
にじみを回避する手段として、アピアランスパネルで0.25px（0.25pt）の線を複製して3つか4つ重ねるという方法を教えてもらったことがあります。

その他、慣れている人は、線を使わない人が多いみたいですね。

構想雑文 : Illustrator使いのためのWebデザインの基礎1 – livedoor Blog（ブログ）

線はアンチエイリアスがかかる場合があるので、なるべく使わない。できれば線は仕上げる前にアウトラインや塗りに変換する。

アウトラインを取る方法も良さそうですね。

普段はFireworksでラフを作っているのですが、細かい部分の表現はIllustratorのほうが得意なこともありそうなので、時間に余裕のあるときは、なるべく使ってみるようにします。