文字のアンチエイリアスの使い方〜Illustrator

Illustratorで作成した文字がWeb用に綺麗に書き出せないと悩んでいませんか。

「ピクセルが小数単位になっているから」とか「アンチエイリアスを切れ」だとか色々情報がありますが、それでもどういうわけか書き出すと汚くなる。使い慣れないと本当に悩ましいのですが、これは大体アンチエイリアスのしわざです。
そしてIllustratorには文字のアンチエイリアスの設定ツールが色々と分散して用意されているためにどれを使ったら適切かよくわからないことが原因していると思います。

一般的に文字を書き出す時はアンチエイリアスを「なし」にするとと良いと言われます。けれどもそれは細かい文字を書き出す時に有効であってケースバイケースで対応が変わります。

失敗例１

まず12ピクセルの大きさで「美しい日本語」という文字列を作成してみます。
下の例は文字パネル下方のaaの場所で「鮮明」を選んでいます。ここはアンチエイリアスの設定場所です。
今回の設定はアンチエイリアスを「鮮明」になるようにかけているわけです。

Web用PNG-8で書き出した結果は下のような感じです。「語」の文字がつぶれています。全然鮮明ぢゃないし！

今度は文字パネルでアンチエイリアスを切ってみます。aaの場所で「なし」を選びます。

その状態でWeb用PNG-8で書き出したものが下の例です。先ほどとかわらないような気がします。

失敗例２

今度は背景色のある四角形に大きな文字を表示してみます。
黄色の背景に黒文字で「小塚ゴシック Pr6N」のLで36ピクセルとしました。
また、アンチエイリアスは「鮮明」にしています。

これをWeb用PNG-8に書き出したものが下の例です。

はい、きたないです。
この辺でIllustratorは諦めてPhotoshopで作成しようかとなります。

さらに、環境設定に「アートワークのアンチエイリアス」の設定箇所がありますので、これにチェックを入れたり外してみたりしてもうまくいきません。

Web書き出しを思い通りにする解決方法

ポイントはWeb用に書き出すときです。
「Web用に保存」を行う際に、オプション項目の中に（「画像サイズ」の設定があるところ）アンチエイリアスの設定があります。
この例はCC2015の例ですが他バージョン（CS5は確認済み）もどこかにありますので探してみてください。

ここで今回の場合は「文字に最適」を選択します。そうするとアンチエイリアスがかかり、先ほどの「鮮明」のアンチエイリアスが実現されます。書き出し例は以下のものです。

先ほどの例と比べて見やすくなっていると思います。
先の汚い書き出しはアンチエイリアスを「なし」の状態で書き出したものです。

また、最初の12ピクセルの文字の書き出しはアンチエイリアスを「アートに最適」にしたものです。
再度ここに表示させます。

今度はアンチエイリアスを「なし」にしてみます。

少し見やすくなっていると思います。

結 論

アンチエイリアスは細かい文字の書き出しは「なし」にしておき、大きな文字の場合は適切なアンチエイリアスの種類を選択すると綺麗に見えます。さらに小数以下の位置でないかなどにこだわるとよいでしょう。

また、アンチエイリアスの最終設定は「Web用に保存」のオプションにあるアンチエイリアスを必ず希望のものに合わせることが最重要になります。
そうしないと、たとえアンチエイリアスをなしの状態で文字を作成をしても、「Web用に保存」の段階でアンチエイリアスの設定しだいでまたアンチエイリアスがかかってしまう結果になります。これが綺麗に書き出せない原因です。

ちなみに保存の際のアンチエイリアスの設定場所は「オブジェクト」の中の「ラスタライズ」の設定ボックスにもあります。

けれども、やっぱり最終の書き出しの際にチェックするのが一番良さそうです。