TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

SCHOOL

Illustrator(イラレ)で簡単にスライスする方法





WEBデザインが終わった後の工程として、
コーディングに入るためのスライス作業を行いますよね?

WEBデザインはPhotoshopが当たり前とされていたので
Photoshopでのスライス方法は多く知られていると思います。

ただIllustratorでのWEBデザインも当たり前になった今、
Illustratorでのスライス作業も増えてきたと思います。

そこで今回は、Illustratorで簡単にスライスする方法をご紹介したいと思います!

そもそもスライスとは

スライスとは、Webサイトのモックアップが完成して実際にパーツとして各部分を画像編集ツールやスライスツールを使って切り出すことです。

引用:イケサイWeb制作用語辞典

Illustratorを使用する際は、
ベクターデータやpsdデータを使ってデザインを行いますが、
今度はそれをWEB用の素材として画像書き出しを行う作業のことを言います。

部品で書き出された複数の画像を、
コーディングでデザイン通りにパズルのように組み合わせ、WEBサイトが完成します。

スライスの手順

スライスする部分は、WEBサイト上に画像として配置する部分になります。

そのため、デバイスフォントやWEBフォントの部分などは切り出さず、
それ以外の部分をスライスで画像化します。

下画像の場合はこんなイメージです。

ピンク:画像部分のためスライス
青:テキストがデバイス or WEBフォントの場合CSSでも表現可
オレンジ:デバイスフォントのためスライスの必要なし

画像化せずともCSSで制作できる部分もあるので、
スライスが必要かどうか、事前打ち合わせをしっかり行いましょう!

方法1 スライスツールを使用する

Illustratorのツールバーに「スライスツール」というものがあります。

選択ツールなどと同様に、スライス部分を選択しスライスを行う方法です。

ずれた部分はスライスツール、または選択ツールで調整ができます。




方法2 選択範囲から作成

僕は断然こちら派です。

選択ツールにて対象物を選択し、
メニューバーの「オブジェクト」→「スライス」→「選択範囲から作成」で簡単にスライスができます。

僕の場合はショートカットを設定しているので、
選択+ショートカットを押すだけでスライスできる設定にしています。

とっても便利ですよ!

スライスは重ねることができない

同じアートボード内でスライス対象物が重なっている場合があります。

その場合そのままスライスを行うことができません。

そうなった場合は重なっているオブジェクトをずらし、スライスを行なってください。

スライス前のデザインデータは必ずバックアップを取りましょう!

スライス後の書き出し方法

すべてのスライスが終わったら、今度はデータとして個別に書き出します。

メニューバーより「ファイル」→「Web用に保存」をクリックします。

そうすると書き出しのウィンドウが表示されるので、
書き出しフォーマットや画質等細かい設定を行います。

こちらで右下の「保存」で書き出されるわけですが、
スライスはあくまでもページを細かく分割しているだけなので、
このままだと余分な部分まで書き出されてしまいます。

それを防ぐために、
まず「書き出し」の部分を「選択したスライス」に変更します。

書き出したい部分をクリックで選択し、保存を押します。
※複数選択の場合は「shiftキー」を押しながら選択してください。

そうすると指定した場所に「image」フォルダとして保存され、
各部品として画像の書き出しが完了です。




書き出し前の小ネタ

スライス部分ごとに名称を設定できる

「WEB用に保存」で出現したウィンドウ内で、スライス部分に個別に名称を設定できます。

名称を設定したい部分をダブルクリックし、
新たにウィンドウが出現するので、こちらで名称を設定します。

これで名称を事前に設定しておくと、書き出されたファイル名が
設定した名称に自動でなるのでとても便利です。

スライス部分ごとに保存フォーマットを設定できる

スライス部分に個別にJPEGやPNGなどの形式を設定することができます。

設定は簡単、変更したい部分をクリックし、保存フォーマットを変更するだけです!

スライス作業はWEBサイトのみに使用するわけでなく、
1つのアートボードに、多数のバナーを制作した際にも使用します。

その際に、入稿規定により、違う形式に書き出す際などに使用することがあります。

まとめ

いかがだったでしょうか?

企業によってスライスする人がデザイナーか、コーダーかはそれぞれだと思いますが、
WEBデザイナーならスライスは覚えといたほうが良いと思います。

数が多いとスライス作業で無駄に時間がかかってしまうので、
いかに早く効率良くスライスするために、
ショートカット等を設定してスライスは早く終われるようにしましょう。

またWEB用素材の書き出し方法として、アセットという機能もあります。

こちらもスライス同様に便利な機能なので、別の記事でご説明できればと思います。

少しでも参考になれば幸いです。