大丈夫やで☆イラレでウェブデザイン【その4】たぶん世界で一番簡単なスライスの書き出し方

Adobe Illustratorでウェブデザインを組む場合のコツをお届けするシリーズです。レイアウトが固まったら、次はHTML化するために画像が必要です。今回は、その画像の書き出しについてのお話です。

あんまり一般的ではないかもしれませんが、niaoはこんな方法で一気にスライスを書き出しています。画面も見やすいんです。

ご存じ? Adobe CCを安くする方法

名付けて……「黒四角法」

ああっ、なんか中2病っぽくなっちゃった！

こんな方法です。

1. 新しいレイヤーを作る。名前は仮に「スライスカバー」。他のレイヤーはロックする。
   
2. 画像で書き出したい部分に、四角形を描く。黒で20%くらいの透明にしておく（←これは好み）。
   
3. 描き終わったらコマンドAして、「オブジェクト」→「スライス」→「作成」
   
4. 「スライスカバー」レイヤーを非表示にして、「web用に保存」で一気に書き出す。

この方法のメリットは、全部Illustratorで完結できることと、なんとなく扱いづらいイラレのスライスツールを触らなくていいことと、黒四角を動かせばいっしょにスライスもついてきてくれるので、移動を伴う修正が入ったときに扱いやすいことです。まあ、まあ、ほんまに世界で一番カンタンかどうかは置いといて、方法のひとつとして覚えておいてください。

実はレイアウト中のオブジェクトに直接スライスを付けることもできます。私は好みでレイヤーを分けていますが、この方法でも移動についてきてくれるので、おススメです。

四角を描くときには、レイアウト時と同じように「ピクセルにスナップ」を効かせた状態にしておきます。

イラレにも「web用に保存」、ちゃんとありますよ！

ところで、スライスの書き出し方法にはこれぞという正解が無く、人それぞれにいろんな方法を使われているようです。

一旦ビットマップ化する派

イラレのスライスや「web用に保存」は使わず、一度全体をpsdやpngに書き出しするんです、というお話はよく耳にします。
（Photoshopのほうがスライスツールが持ちやすいから、かな？）

アートボードを使う派

スライスを切る代りにアートボードを切り、それぞれの画像を書き出すというもの。
（画像の最適化は、あとで改めてやるのかな？）

でも、イラレのウェブ機能、できる子ですよ

はっきり言って、どの方法が間違っているとか「こうすべし」ということはありません。ですが、Illustratorでもスライスや「web用に保存」が使えることを忘れているというか、無視してしまう方が多いような感じがします。紙もののレイアウトを作るソフトでしょ、というイメージが根強いのでしょうか。

Illustratorの「web用に保存」機能はPhotoshopと同じようにちゃんとしていますから、せっかくなので使ってあげてみてくださいね。