Post

PREVNEXT


こんな事を気にする人は、他にいないような気がしますが….
Illustratorのアンチエイリアス処理が微妙でして、変な描画するので困っております。

何かを描くときに区切りのイイ数値じゃないと気持ち悪くなる質(たち)でして、その面倒くさい性質がIllustratorで遺憾なく発揮されます。
例えば、X:300, Y:250, W:500, H:600 といった具合に整数で(できることなら5の倍数で)作りたくなってしまいます。

線のアンチエイリアス

幅と高さが50pt、塗りが白、線が黒、線幅1pt の正方形を描いた場合、スクリーン上では、幅2pxのグレー線で描画されます。

デフォルトの状態で50×50のボックスを描いた場合

アウトラインデータの内側と外側それぞれに線幅の半分の数値(この場合、外側に0.5pt、内側に0.5pt)が描画されるのでしょうがないとは思います。Illustrator CSあたりに追加された「線の位置:」という機能がありまして、「アウトラインデータの内側/外側に1ptの線を描く」といったナイスな指定ができるようになりました。

線を内側に揃える

線を外側に揃える

ですが、「線を内側に揃える」または「線を外側に揃える」をしても、微妙にアンチエリアスがかかってしまいます。
理論的には「アウトラインデータの内側/外側に1ptの線を描く」ので、アンチエイリアスがかかることは無いハズなんですが….

そこで、アンチエイリアスをかけずに、キレイでクッキリした線を描く方法をまとめてみました。ああマイノリティ。
ちなみに、今回の「線のアンチエイリアス」は線幅が奇数値(1pt, 3pt, 5pt…..)の場合のみ発生します。

X軸とY軸を0.5ptずらす

X軸とY軸を0.5ptずらす

環境設定で「キー入力」の数値を0.5ptにしておけば、矢印キーを上or下、右or左と1回づつ押すだけで簡単にクッキリ線になります。
ただ、オブジェクトの幅と高さの数値が50ptに指定してあるのに、スクリーン上では51px × 51pxの正方形になってしまい気持ち悪いです。

基準点を中央に設定し、オブジェクトの幅と高さををそれぞれ1ptづつ縮める

基準点を中央に設定し、オブジェクトの幅と高さををそれぞれ1ptづつ縮める

スクリーン上では50px × 50pxの正方形になりますが、数値が49ptになってしまい気持ち悪いです。
いちいち変形パレットで数値を入力しなきゃいけないので面倒です。

アピアランスの塗りと線を入れ替えて、線幅を倍にする

アピアランスの塗りと線を入れ替えて、線幅を倍にする

線の上に塗りを持ってくることによって隠れた線部分を、線幅で補います。
比較的楽にできる方法ですが、スクリーン上では52px × 52pxの正方形になってしまい気持ち悪いです。

線を使わずに、塗りを2つ重ねる

線を使わずに、塗りを2つ重ねる

新規塗りを用意し、下の塗りを黒、上の塗り白にし更に「効果」→「パス」→「パスのオフセット…」でオフセットする数値を「-1」と指定します。この「-1」が線幅にあたる数値です。
これだと、スクリーン上でも数値的にも50px × 50pxの正方形になるのでスッキリしますし、線幅を変えたいときは、オフセットさせる数値をアピアランスパレットから変更すればイイだけなので簡単です。
頻繁に使う数値がある場合、グラフィックスタイルパレットに登録しておけば楽に適応させることができます。

角丸のアンチエイリアス

角丸オブジェクトを描くときに、フィルタや効果で「角を丸くする」を使用することが多々あるのですが、これらのアンチエイリアスの処理も変です。

角丸のアンチエイリアス

試しに角丸1pt〜21ptまでの黒ボックスを用意してみましたが、

角丸サイズ比較

角丸が3pt, 7pt ,13pt, 14ptのとき、ボックスの下にうっすらアンチエイリアスがかかってしまいます。また、3pt, 7pt ,12pt, 13pt, 14pt, 21ptのときは右上に、6ptのときは左下に薄いドットが描画されてしまいます。

これといった対処法は今のところ見つかっていないです….

テキストのアンチエイリアス

テキストのアンチエイリアスも汚すぎます。
そこで、どの表示が一番キレイなのか(といっても個人的な好みですが)いくつかスクリーンショットを撮ってみました

テキストのアンチエイリアス比較

テキストそのまま

テキストを入力したままの状態だと、文字のベースラインがガタガタにズレて見えてしまったり、込み入った文字がツブれてしまいます。フォントサイズが小さければ小さいほど目立ちます。

アウトライン化

若干太りますが、ベースラインは比較的キレイに揃ってる感じがします。アウトライン化した時点で、「テキスト」ではなくなってしまい、編集ができなくなってしまうので意味ないですね。

Photoshopにコピペ

若干痩せます。これもベースラインはまともな感じがしますが…. 画像じゃん。

ラスタライズ / 文字に最適

テキストそのままのときと同じようです。意味なし。

ラスタライズ / アートに最適

Photoshopにコピペと似たような感じになりました。文字が痩せるのはフォントをウェイトで対処すればいいし、ショートカットを割り当てておけば比較的簡単に使えます。

効果 / パスのアウトライン

単なるアウトライン化と同じようです。これもショートカットを割り当てておけば簡単そう。

ということで、最近は 効果 / パスのアウトライン で落ち着いています。

全体的に、Illustrator10以降のアンチエイリアス処理が汚いように思えます。Illustrator9時代が一番キレイでした。
新機能をゴリゴリ搭載するのも構いませんが、こういった小さいところも(個人的に全然小さくないんですが)改善していただけるとありがたいです。Adobeさま。


COMMENTS

    • 2007/08/05 21:37 | kanwa

    いやいや、全然小さいところじゃないからー。ウェブやらゲームやら画面デザインで大問題&余計な手間を増やすな的な話です。

    テキストのアンチエイリアスに関しても、DTPをやる時にすごくやっかい。試し印刷してみて、あー、やっぱりもう少しウエイト変えなくちゃダメじゃんってことが多々あります。ギャップが大きすぎ。

  1. 小さいことではなかったんですか(笑)
    周りに聞いても、気にしてる人がいなかったもんで安心しました。
    いやいや、安心とかそんなんじゃなくて、
    とっとと改善してほしいですよね。

    気に入らない部分はもっといっぱいあるので、
    ちょっとづつ投稿してみようかな。

    • 2007/08/06 15:22 | wa

    いつも拝見しています。

    ボクも小さいことじゃないに一票。
    気にしてる人がいて安心です(笑)

    ちなみにA型。

  2. はじめまして。
    気にしている人がまだ他にもいてうれしい限りです。
    いままで周りに解ってもらえなかった悲しみが少し癒されました(笑)

    ちなみにボクもA型。

    ※kanwaさんとontheheadのコメント文章がラリってたので少し修正しました。

    • 2007/08/06 22:24 | type100

    こんにちは。

    やっぱり気にしていた方がいらっしゃるんですね。
    まさに、私もアンチエイリアスに納得いっていません!
    自分だけかな〜?なんて思っていたのですが、
    ちょっと?安心しました(笑)
    なので、サイトデザインの時はPhotoshopだけでやっちゃいます。

    ちなみにボクもA型。

  3. ども、はじめまして。
    本当はtype100さんのように、
    Photoshopで完結しちゃうのが一番なんですよねー。
    Illustratorバカとしては、できる限りIllustratorで作っちゃいたいので、
    試行錯誤しながら悪あがきしております。

    • 2007/08/08 01:06 | kanwa

    個人的にはPhotoshopでもいいんだけど、
    デザインの試行錯誤する時は
    Illustratorの方が圧倒的に素早いんですよね。

    Illustratorでじっくり詰めて、
    その通りにPhotoshopで1から描きなおすことも
    あるので、そのままデータが使えるようになるとうれしいなー。

    • 2007/08/09 23:54 | type100

    そうなんです!kanwaさんが言われるとおり、
    Illustratorの方が圧倒的に素早いんです。
    でもボクの場合、その素早さがサイトデザイン時には
    なぜか生かされないのです(笑)

    紙メディアの場合はページモノでないかぎり
    100%Illustratorなんですが・・・

    Illustratorの利点をもっと生かさないとダメですね。
    気持ちよくデザインできるようにボクも試行錯誤してみます。
    ありがとうございました。

    • 2007/08/24 17:23 | ude

    角丸の嫌なアンチエイリアス、私も常々気になっておりました。
    Flashの角丸図形の線も嫌アンチエイリアスが出るのですが、
    これは線を塗りにすると解消できました。

    整数ピクセルに沿った絵をつくるときはFireworksを使うようにしています。

    あ、Illustratorの話題なのに、別アプリのことばかりですみません。

  4. kanwaさん
    前にも話してたけど、Illustratorオブジェクトを全て「シンボル」扱いにしてくれればいいんですよねー。シンボルにフィルタかけたり。流用しやすそう。

    type100さん
    ボクの場合、紙メディアのページモノをやらないので
    紙もウェブも95% Illustratorです。もう、ただの馬鹿です。

    udeさん
    いやいや、ぜんぜんオッケーです。参考になります。
    角丸具合で、でき上がったモノの質が変ってくるので、
    その辺の問題を解決して欲しいもんですね。
    「すいーと」と言うわりに、ソフトウェアごと線や角丸、アンチエイリアスなどの扱いが統一されていないことに不便を感じます。

TO TOP

PREVNEXT