illustratorのaiデータから画像を綺麗にスライスする方法

単位

[ファイル]→[ドキュメント設定]で単位がピクセルになっているか確認します。
ここを変更すると、定規などの値も全てピクセルになるはずです。

カラーモード

[ファイル]→[ドキュメントのカラーモード]がRGBカラーになっているか確認します。
CMYKのままだとjpgなどに変換した時に、色が変わる可能性があります。

ウインドウ

[ウィンドウ]→[レイヤー][変形]を表示させておきます。

レイヤー

レイヤーにロックがかかっている場合が多々あります。
[オブジェクト]→[すべてをロック解除]であらかじめ全てのロックを解除しておきます。
ここでスライス用のレイヤーを作っておくと便利です。

スライスツールを使う

Photoshopなどと同様にツールバーのスライスツールを使います。
複雑なスライスを行う場合に使います。

オブジェクトのスライスを使う

[オブジェクト]→[スライス]にいくつかの項目が存在します。

選択範囲からスライス

オブジェクトを選択した状態で、[オブジェクト]→[スライス]→[選択範囲からスライス]を選択すると、オブジェクトを元にスライスを行ってくれます。
またショートカットで[alt]+[o]→[s]→[s]でスライスを作成することができます。

スライスの分割

スライスを選択した状態で、、[オブジェクト]→[スライス]→[スライスの分割]を選択すると、スライスを正確に分割できます。メニューの画像など分割する時に使います。

ピクセルの端数に気をつける

変形ツールの端数に気をつけて下さい。
CS以前であれば、オブジェクトを選択した状態で変形ツールを見れば端数が出ている場合が多々あります。
ここのx, y軸, Width, Heightの幅を整数にし、スライスを行うと綺麗に1pxもズレずに画像を作成することができます。

CS2以降では変形ツールは整数しか表示ません。
一見良いように見えますが、下記の画像を見ると変形ツールは整数ですが、四角の周りにアンチエイリアスがかかってしまっています。
実は変形ツールは整数しか表示されませんが、"隠れ端数"(勝手に名前をつけました)が存在します。

この対処方は、2つあります。

1. マウスでオブジェクトを少しズラす。

   1つ目の方はスライスの準備の方で「ピクセルにスナップ」にチェックを入れているので、マウスで少しズラすとオブジェクトを隠れ端数を出さずに、スナップしてくれます。ただしオブジェクト自体の端数は取れません。

2. 変形ツールで別の数値を入れなおす。(X, Y, W, Hの値)

   2つ目の方はCS以前のやり方と同様ですが、位置もオブジェクトも整数化できるので非常に効果的です。

線に気をつける

オブジェクトに線がついている場合があると思います。
この線はスナップ、選択範囲としても認識されません。
線がある場合は[オブジェクト]→[スライス]→[選択範囲からスライス]でスライスを作成した後に、スライスを選択。
変形ツールで線分のWidth, Heightの値を足す必要があります。

画像に名前を付ける 1

スライスデータができたら、画像の名前を付ける必要があります。
このようなサンプルを用意しました。

名前を付けたい画像のスライスを選択し[オブジェクト]→[スライス]→[スライスオプション]をクリックし、「名前」に画像名称をつければ、その名前で画像がスライスされます。
ただし画像枚数が多くなると、この方法だとかなり時間がかかります。

画像に名前を付ける 2(Photoshopも使えます)

[オブジェクト]→[スライス]→[スライスオプション]だとかなり時間がかかるので別の方法を使います。

ここからPhotoshopも同様にスライス設定を行うことができます。

名前をつけずに[ファイル]→[Web用に保存]をクリックします。

スライスが表示されているので、名前を付けたい画像のスライスをダブルクリック。
クリックするとダイアログが表示されますので、「名前」の部分を変更、[OK]を押して下さい。

全ての名前を変更し終えたら、一度「完了」を押し、aiファイルを上書き保存して下さい。(Photoshopの場合はpsdファイル)
上書き保存しなければ、折角変更した名前が全て元に戻ってしまいます。

画像の種類を変更(Photoshopも使えます)

「Web用に保存」のウィンドウで、スライス画像の種類を変更できます。
プリセットから変更を行ってください。

スライスを書き出す(Photoshopも使えます)

これを回避する場合は、Web用に保存のウィンドウを表示、[保存]をクリックして下さい。

画像保存先のディレクトリを指定するのですが、下のオプション設定でファイルの種類を「画像のみ」に変更。
スライスで「すべてのユーザ定義スライス」に変更し、[保存]を押して下さい。