IT工房|AI入門とWebの勉強サイトIT工房ABOUTBLOGSample置き場CONTACTHomeTipsIllustrator文字のアンチエイリアスの使い方〜Illustrator文字のアンチエイリアスの使い方〜IllustratorIllustratorで作成した文字がWeb用に綺麗に書き出せないと悩んでいませんか。「ピクセルが小数単位になっているから」とか「アンチエイリアスを切れ」だとか色々情報がありますが、それでもどういうわけか書き出すと汚くなる。使い慣れないと本当に悩ましいのですが、これは大体アンチエイリアスのしわざです。Illustratorには文字のアンチエイリアスの設定ツールが色々と分散して用意されているためにどれを使ったら適切かよくわからないことが原因していると思います。一般的に文字を書き出す時はアンチエイリアスを「なし」にするとと良いと言われます。それは細かい文字を書き出す時に有効であってケースバイケースで対応が変わります。?何らかのオブジェクト(文字を含む)をコンピュータ上で描くと、画面では1ピクセルが最小単位となるため、オブジェクトの輪郭にジャギーと呼ばれるギザギザが発生してしまいます。この輪郭のジャギーを目立たなくするために、輪郭の色を滑らかに変化させる事をアンチエイリアスといいます。アンチエイリアスをかけると輪郭がぼやけてしまうため、ビットマップフォントなどではアンチエイリアス処理は行われない事が多いのです。失敗例1まず12ピクセルの大きさで「美しい日本語」という文字列を作成してみます。下の例は文字パネル下方のaaの場所で「鮮明」を選んでいます。ここはアンチエイリアスの設定場所です。今回の設定はアンチエイリアスを「鮮明」になるようにかけているわけです。Web用PNG-8で書き出した結果は下のような感じです。「語」の文字がつぶれています。鮮明ぢゃないし!今度は文字パネルでアンチエイリアスを切ってみます。aaの場所で「なし」を選びます。その状態でWeb用PNG-8で書き出したものが下の例です。先ほどとかわらないような気がします。失敗例2今度は背景色のある四角形に大きな文字を表示してみます。Pr6N」のLで36ピクセルとしました。アンチエイリアスは「鮮明」にしています。これをWeb用PNG-8に書き出したものが下の例です。この辺でIllustratorは諦めてPhotoshopで作成しようかとなります。環境設定に「アートワークのアンチエイリアス」の設定箇所がありますので、これにチェックを入れたり外してみたりしてもうまくいきません。Web書き出しを思い通りにする解決方法ポイントはWeb用に書き出すときです。「Web用に保存」を行う際に、オプション項目の中に(「画像サイズ」の設定があるところ)アンチエイリアスの設定があります。この例はCC2015の例ですが他バージョン(CS5は確認済み)もどこかにありますので探してみてください。ここで今回の場合は「文字に最適」を選択します。するとアンチエイリアスがかかり、先ほどの「鮮明」のアンチエイリアスが実現されます。書き出し例は以下のものです。先ほどの例と比べて見やすくなっていると思います。先の汚い書き出しはアンチエイリアスを「なし」の状態で書き出したものです。最初の12ピクセルの文字の書き出しはアンチエイリアスを「アートに最適」にしたものです。再度ここに表示させます。今度はアンチエイリアスを「なし」にしてみます。見やすくなっていると思います。論アンチエイリアスは細かい文字の書き出しは「なし」にしておき、大きな文字の場合は適切なアンチエイリアスの種類を選択すると綺麗に見えます。小数以下の位置でないかなどにこだわるとよいでしょう。アンチエイリアスの最終設定は「Web用に保存」のオプションにあるアンチエイリアスを必ず希望のものに合わせることが最重要になります。しないと、たとえアンチエイリアスをなしの状態で文字を作成をしても、「Web用に保存」の段階でアンチエイリアスの設定しだいでまたアンチエイリアスがかかってしまう結果になります。これが綺麗に書き出せない原因です。ちなみに保存の際のアンチエイリアスの設定場所は「オブジェクト」の中の「ラスタライズ」の設定ボックスにもあります。最終の書き出しの際にチェックするのが一番良さそうです。SNSで共有しましょう。