KOJIKA17

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

illustratorのaiデータをWeb用の画像にスライスすると、画像が1pxズレが生じたり、Photoshopのスライス機能と違うので戸惑うことが多いと思います。

関西の某勉強会の懇親会でも「外注に頼んだデザインがaiデータで来て、スライスに凄い時間がかかった」という意見が多く聞いたので、illustratorのスライスの仕方をご紹介させて頂きます。
紹介するillustratorのバージョンはCS2ですが、CS以降のバージョンならほとんど機能が使えるはずです。

スライスの準備

単位

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

カラーモード

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

表示

[表示]→[ピクセルプレビュー][スマートガイド][ピクセルにスナップ][ポイントにスナップ]の全てにチェックを入れます。

  • ピクセルプレビューにチェックを入れると、擬似的にピクセルで見せてくれるのでWeb用の画像に起こした時の仕上がりが分るようになります。
  • スマートガイドにチェックを入れると、オブジェクトを基点にガイドを表示してくれます。ただし使う人の好みが分かれる場合があるので不要であれば、チェックを外して下さい。
  • ピクセルにスナップにチェックを入れると、オブジェクトのx, y軸、Width, Heightの数値の端数がでなくなります。数値の端数については後で説明します。
  • ポイントにスナップにチェックを入れると、オブジェクトにスナップしてくれます。

ウインドウ

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

レイヤー

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

スライスの方法

代表的なものをピックアップします。

スライスツールを使う

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

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

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

選択範囲からスライス

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

スライス→作成

オブジェクトを選択した状態で、[オブジェクト]→[スライス]→[作成]を選択すると、「選択範囲からスライス」と同様にオブジェクトを元にスライスを行ってくれます。

ただし「選択範囲からスライス」はオブジェクトとスライスが分離しているのに対し、「作成」の場合はオブジェクトとスライスがグループ化されています。

スライスの分割

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

スライスする時にillustratorで気をつけること

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

変形ツールの端数に気をつけて下さい。
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用に保存のウィンドウを表示、[保存]をクリックして下さい。

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

不要な画像が保存されず、スライスした画像だけを保存することができます。

でもやっぱりillustratorでスライスするの面倒くせー!!!

そんな声も当然あるだろうと思います。
例えば下記のような画像があるとします。

  1. illustratorでスライスしたいaiデータを開きます。
  2. [ファイル]→[書き出し]をクリック。
  3. ファイルの種類を「Photoshop (*.PSD)」で保存。
  4. Photoshop書き出しオプションが出るので、「レイヤーを保持」「テキストの編集機能を保持」などにチェックを入れておきます。
  5. aiデータのレイヤーに近い形で保存されます。

書き出されたPSDをPhotoshopでスライスして下さい。
CS5ならPhotoshopとFireworksの互換性が非常に良いので、このPSDをFireworksで開いてスライスするという手もあります。

ただしこの方法もillustratorの隠れ端数も含め、端数が存在していると単純な図形であろうと微妙なアンチエイリアスがかかってしまう場合があるので、気をつけて下さい。