[Illustrator] ピクセルずれ問題解消スクリプト

2010-05-20 #Design #Illustrator

Illustratorの配置要素の座標や幅を整数値のピクセルに丸めて、

ピクセルずれ問題を解消するスクリプトを書いてみました。

必要になって探してみたけどなかなか見つからなかったので…

既に出回ってたらごめんなさい…


Illustratorのピクセルずれ問題とは?

イラレでWEBデザインをしている方なら多分ご存知かとは思うのですが、

ピクセルずれ問題というのがありまして、

1pxの線をイラレで描画するとアンチエイリアスがかかってしまって

2pxのグレーの線になってしまったりする事が多々あります。

これはIllustratorに配置した要素がピクセル区切りではなく、

小数点以下の座標で配置される事から起こる症状なのですが、

この症状の為に、イラレでデザインされたページを一旦PhotoshopやFireworksで作りなおす作業が発生したり…

flashやhtmlのコーディング段階で回り道が必要になったりしてしまいます。

ピクセルずれ問題について、詳しい症状と解消方法は

Memento Mac様がブログに非常に親切に判りやすく解説されておりました。

Illustratorでピクセル単位の作業を奇麗に行うための方法(イラレのピクセルずれ問題)


一括で直したい…

イラストレーターにはJavaScriptでプログラムを実行して、

配置されている各要素について、パスの移動や変更なんか一括で行えるという機能が備わっております。

なのでこれを使えば前述のピクセルずれの解消の際の数値の入力の手間が省けそうなので、

ちょこちょこっとスクリプトを書いてみました。(といっても10数行程度ですが…)

[illustrator_rounded.zipをダウンロードする。]

[機能]

・全ての選択要素の座標の小数点以下を繰り下げてアンチエイリアスがかからない状態にします。

・奇数の線幅の枠線付きの要素はそこからさらに0.5pxずらして配置する事で、

 同じくアンチエイリアスがかからない状態にします。

[Macの場合の使用方法]

1. /Applications/Adobe Illustrator CS3/プリセット/スクリプト/ にjsxファイルを入れる。

2. Illustratorを起動する。

3. 座標を修正したい要素を選択します。

4. 「ファイル」→「スクリプト」から「座標と画像サイズの整数化」を実行。


これでイラレで適当にフリーハンドで書いた枠線付きの四角もアンチ無しの線でくっきりに!