Illustratorから綺麗にWebサイト向けのスライスを作成する

今回はwebデザイナーさんやコーダーさん向けのネタとして、Illustratorから綺麗にwebサイト向けにスライスを作成する方法についてです。

僕の知り合いのコーダーさんでも意外と知らなかったことでしたので、今回のテーマにしてみました!

Illustratorを使ってウェブサイトのデータを作成している、といったデザイナーの方は現在でも多いと思います。

しかしながら、Illustratorにスライスを設定しても、書き出しを行う際に1pxズレてしまったり、指定したサイズと違う大きさの画像がスライスされてしまったりり、Illustratorでのスライスはお世辞にも使いやすいとは言えません。

そこでよく利用する方法が、Illustratorから画像を書き出し、Photoshop上でスライスをすると言う方法です。

この方法であればPhotoshopのスライス機能が使えるため、ピクセルのズレなどを全く気にせずにスライスを行うことができます。

ですが、Illsutratorから書き出した画像に問題が起きる場合があります。
具体的には、「文字」や「細い線」などが太ったり、アンチエイリアスが切れたようにジャギーがかかってしまうのです。

そのため、Illustratorから直接書き出した場合と、画像のクオリティが大きく違ってしまうと言うことになります。

実は、このIllustratorから画像を書き出す方法にコツがあったのです。

最初にIllsutratorから全体の画像データを書き出す時に、画像ファイル形式の選択ができるようになっているのですが、ここはデフォルトで「PNG」ファイルとなっており、このまま書き出してしまうと、上記のようなジャギーが発生します。

また、書き出しをする時に「アンチエイリアス」の処理を設定する箇所がありますが、PNGファイルの場合どの設定になっていても、ジャギーがかかってしまうようです。

そこでどうすればよいかというと、PNGファイルではなく「PSD」ファイルで書き出しをしていただくと、文字のアウトラインが綺麗に出力されるようです。

PSDファイルを書き出す際のアンチエイリアスの設定は、「文字に最適」としてください。「アートに最適」などとなっていると、P`NGファイル同様に文字が太くなったり、
ジャギーが発生する原因になるようです。

まとめますと、

1. Illustratorから全体の画像を出力するときは、PSDファイルで出力する
2. アンチエイリアスの処理を「文字に最適」で行う

として頂きますと、Illustoratorから綺麗に書き出しができます。

もし、Illustratorからの書き出しでお悩みの場合、こちらの設定を試してみてください。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

インスパイアデザインの取締役兼、エンジニア。WordPressのテーマ・プラグイン開発を年間100件以上、独自のフレームワークを用いて開発をしています。