スライスの意味とイラレで作った画像について

質問

自社サイトの作成を任されているのですが社内に質問できる人がいないのでお願いします。（サイトはワードプレスで作っています）

●スライスって何のために使うの？どう使うの？

色んな質問をみて回ったのですが、スライスを使う意味がよく理解できません。どうしてわざわざ画像を分割するんですか？
リンクを貼ったりしやすくするため？
それなら画像をひとつずつ作って並べて貼ればいいのでは？

スライスツールで画像を分割しweb用に保存すると、htmとimagesフォルダが作られました。フォルダはわかりますが、htmはどう使うんでしょうか・・？これ意味あるんですか？
イラレにもスライスツールありますが一度も使ったことがありません・・

●イラレで作った画像をフォトショで読み込み保存って意味ある？

イラレで作った画像はwebでは少しぼやける。それを相談すると、イラレで作るからじゃん～フォトショで作るのが当たり前。と言われたのですが、イラレのデータをフォトショで開いてweb用に保存しても「フォトショで作った画像」ってことになるんでしょうか？
（もしなるのだったら、
“フォトショでweb用に保存”
“イラレでweb用に保存”
どちらもweb用に保存なのに、どうして画質に差ができるのか・・）

幼稚園レベルですみません。

回答No.1

maleficium · ベストアンサー

・スライス
用途は様々なんですが、
　大きな画像を分割して読み込ませるため分割する
　（低速度回線で体感速度を上げる）
　ロールオーバー画像が簡単に作れる
…などが理由として挙げられます。
また同じ寸法で文字だけ違う小さなボタン画像を一個ずつ別ファイルで
作るよりもPhotoshopなどで1ファイルにまとめて作って、それを
スライスで分割してしまった方が楽だと私は思います。

・Web用保存のHTMLファイル
Web用に保存する際に、特にオプションを変更せずOKを押すと分割した
画像のほかにその画像群を表示させるためのHTMLファイルも生成してくれます。
HTMLが不要なら保存オプションを「HTMLと画像」にせず「画像のみ」
に変更してください。

・イラレで作ったデータをフォトショでWeb用保存
以前少し実験したのですが個人的には「あんまり意味ない」ですね。
そもそもイラストレーターは印刷媒体用のソフトでWeb向けのデータには
弱いみたいです。
仰るとおりカンバスサイズ等をきちんとピクセルで指定しても、何故か
ボケが発生しますがこれは仕様みたいですね。
イラレで書き出したPSD画像を「あ、ここボケてる！」とフォトショで修正
するくらいなら最初からフォトショで作った方が作業時間の短縮に
なるんじゃないでしょうか。
イラレの方が操作しやすい、とかフォトショに慣れる時間が無いという
理由でもない限り、WEB用の画像はPhotoshop、Imageready、Fireworks
などで作ることをおすすめします。

お礼

とてもご丁寧な回答ありがとうございます。
・スライスで分割したほうが楽
そうなんです、文字や色だけ違うボタンはスライスで作ったほうが楽、
ということを友人にも言われたのですが、どういう風に作るのか・・？？
私にとっては未知のツールで全く想像できないのでまずは実際に作ってみることにします。

・Web用保存のHTMLファイル
確認できました。

・イラレで作ったデータをフォトショで・・
意味ないんですか。ということはイラレで作ったデータはフォトショで保存し直してもぼけるって事ですか。
ガーン・・・・作った画像全てフォトショで一から作り直さないとダメなんですね・・

これからはWeb用の画像はフォトショで作ります！
ただ、今アップしてる沢山の画像を一から作り直すのは時間かかるなあ・・orz

友人はFireworksで作る事が多いと言う言葉で初めてこのソフトの事を知ったのですが（そーいうことも教えてくれる人が会社にいない・・）、会社のPCに入っていて、フォトショとどっちが使いやすいかなーと思って使ってみたんですが、勝手がよくわからなかったので保留にしました。勉強しなきゃですね～

ありがとうございました

回答No.3

Hoyat

●塊のデザインを見るためにも便利っていうのはどういう事ですか？

具体的に例を挙げてアップルのサイトをご覧ください。
（でもここは多分イラレ・フォトショとか使ってませんが^^;）
http://www.apple.com/jp/

上のメニューバーが一画像の様に「塊」になっているのが
お分かりいただけると思います。
で各メニューにマウスを運ぶと同じ調子で「へっこんだ」様に変化するはずです。
つまりは「塊」であるように見せている別パーツなのです。

これを作成する場合一つの画像で作っておいて
スライスすしてGIFやPNGで出力すると同じ色彩が維持されますが
各パーツ別々に作成すると微妙に維持されない場合があります。
色数が多いとその差は顕著になってきます。

「塊」と書きましたが一般用語ではないので念のため^^;
イメージを解っていただこうと書いたのですが
却って解り辛かった様で申し訳ないです。

イラレで全て完結させる事も可能ですよ、実際は。
何故ボケるのか？を理解しないと難しいですが
スケールを「pixel」にしてそのスケール間を
なるべく跨がないようにすると意外と綺麗にいきます。
（ただちょっと経験が必要です）

お礼

お返事遅くなりました。
いえいえ読解力に欠けていてすみません。とてもよくわかりました。
もしかしてここはひとつの画像をスライスで作った方が楽なのかな？という所が見えてきましたので、うまく使っていこうと思います。

イラレで全て作りこめるようになるためにも、まずは一般的な作り方からきちんとマスターしていかなければならないですね私の場合。

とても助かりました。ありがとうございました！

回答No.2

Hoyat

●スライスって何のために使うの？どう使うの？

元々はナローバンド時代に大きな画像を表示させるにあたって
パケットの負担を減らす為に画像を分割していたからです。
分割次第では体裁を損なうことなく
JavaScriptでロールオーバーなどの装飾が使えるので
今でも重宝されています。
まだ塊のデザインを見るためにも便利です。
パーツ単位で作るよりも色を合わせやすいのです。

保存時に書き出されるhtm(又はhtml）は
分割されたパーツの配置を記述している物です。
（JavaScriptの記述も含んでいます）

●イラレで作った画像をフォトショで読み込み保存って意味ある？

ベクトルデータで編集した方が楽な物があるからです。
例えば角丸四角囲みなどはフォトショで作ると
バランスよく作る事が出来ません。
素地を作っておいてフォトショで修正と言うのはプロでも良くやることです。
フォトショで書き出せば「フォトショで作った画像」になりますけど
元の素地を作っているのはイラレと言うのは珍しい事ではありません。

画質に差が出るのは元々のデータがイラレの場合ベクトルデータなので
それをラスタライズ（ピクセル化）します。
フォトショの場合はほぼそのままなので（元々ピクセルデータですから）そこで差が出てしまいます。
これは仕様なのでどうにもならないですが
ある程度回避する事は出来ます。
例えばラスタライズ処理をする際に大きめに作るなどです。
CS以降の両ソフトはデータのやり取りを重視していますので
書き出さずに読み込んだ方が綺麗ですよ。

お礼

早速ご丁寧な回答をありがとうございます。
もともとの理由はパケット負担解消のためだったんですか。
本にも分割したほうが表示されるまでのストレスが減るみたいな事が書いてありました。
●塊のデザインを見るためにも便利っていうのはどういう事ですか？
後の文を読むと、作業上での話なのかな？と思うのですがうまく理解できません。お時間のあるときにお答え下されば嬉しいです。

画質に差がでる理由がよくわかりました！ありがとうございます。
ラスタイズってピクセル化って意味だったんですね。なるほど～～。回避方法も参考になりました。

今既にアップしてしまっている画像は、フォトショで一から作り直すのは大変なので、倍くらいの大きさでラスタライズしてから縮小してみます。

お2人の回答者さんのような人が職場にいたらなあと切実に思います。。
もうすぐ転職予定。やはり先輩という存在は貴重ですね。ありがとうございました！