西宮でホームページ制作やワード/パワーポイントでの企画書・提案書をSOHOで制作しています

Illustrator:ピクセルパーフェクトを実現するために「ピクセルグリッドに整合」をチェックするよりも前にチェックすべきたった1つのこと

いろんなところで、ピクセルパーフェクトな画像書き出しをイラレで実現するためのTipsが書かれているにもかかわらず、あまり気づかれていない気がするので書いておきます。
どなたかが書かれていましてもやさしく教えていただければと思います。

通常イラレでデザインを行いますとアンチエイリアスがかかって輪郭がぼやけてしまいます。
印刷用データなどでしたら問題ないのですが、Webで使用を使用する場合には「変形」パネルの「ピクセルグリッドに整合」にチェックをいれたり、0.5ピクセル単位で調整をされたりしているのではないかと思います。
それにもかかわらず、スライスのサイズよりも1ピクセル大きく書き出されてしまうようなことはないでしょうか?例えば、200px四方のスライスを書き出したら201*200pxの画像が書き出されていたとか。

これはアートボードの位置の設定に起因しています。
「ウィンドウ」-「アートボード」からアートボードパネルを表示して、下図のように「アートボードオプション」を選択します。
イラレ アートボードオプション

開いたダイアログの「位置」に小数点が含まれていたら整数に直してください。
アートボードオプションの位置がキモです

ちゃんと確認してないですが、たぶんこれをきちんと設定していると、0.5ピクセルとかで調整する必要がないのではないかと思います。
少なくとも、私はそういう細かい調整をしていないです。
「アートボードの位置を整数に」+「ピクセルグリッドに整合」でピクセルパーフェクトになるかと思います。
モヤモヤしていた方、一度お試しください。

CS3か4か5かいつからか分からないですが、アートボードを複数作ることができるようになりましたが、アートボードを追加すると新しいアートボードの位置はピクセルグリッドに沿ってくれません。
これがデフォルトでピクセルグリッドに合わせてくれたらいいんですけど、このためにクライアントから送られたデータを毎度チェックしなければいけません。
最近、いくつもの案件で各ページをそれぞれのアートボードに入れてくれたりするので、この作業だけでも半端無いんです(^^ゞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です