Photoshopのスライスについて。

質問

こんにちわ、kaituといいます。
最近スライスをもちいて、デザインを勉強しています。

しかし、HPをデザインした場合、
画像をスライスして色数等編集し、そのままDreamweaverに持っていき、
文章の所だけ、画像を削除(白くする)して、文章入れてupします。
すると、やはりブラウザで見た場合デザインがずれてしまい、それを直すのが一苦労なのです。。
グリッドを表示して、それに合わせて構成するとずれなくなるんでしょうか；

他の方法として、1×1の透明GIF画像を画像と画像の間にいれ、
ずれるのを防ぐ為にやっていますが、効果が全然ありません。。；
後、できるだけ画像を少なくするよう、
スライス画像の不要な部分(白い部分等)は、Dreamweaver上で画像を消していっています。

まだまだ勉強中なので、試行錯誤してやっているのですが、やりなおしで時間ばかりがすぎてしまって中々；
デザイン重視なので、スライスが多いのも原因でしょうか。。
皆さん、スライスをどのようにして使っているんでしょうか？
参考になるサイトや、ずれを防ぐアドバイス等あれば回答お願いします。

回答No.2

noname#107580 · ベストアンサー

こんにちは！

【Web用に保存】の時に、画像のいらない部分のスライス上でダブルクリックします。

【スライスオプション】がでますので、『スライスの種類』を『画像なし』にして設定してみてください。

スライスはあまり複雑にならないように工夫してみてください。

お礼

ありがとうございますっ。
これ知らなかったです。。これでずれなくなりました！
いつも1×１スペースでなんとかやってたんですが；（変形させてとか）
簡単でずれなくなりました、ありがとうございましたっ！

回答No.1

gammo194

作り方は人各々、ズレる原因も色々あるので、一例として参考になればと思います。
スライスの入るテーブルの最上段と最右段に1pixelの隠しセルを作り、
各セルのwidthとheightの値を指定します。
(隠し部分の結合セルは全て分割)
これだとズレなく作れると思います。
※作業中は隠しセルが選択しづらいので、テーブルのセル余白を
10pixelくらいにして作業し、終わったら0pixelに戻します。

●意味がわかりにくい場合のために以下、サンプルソースです。
DWにコピペして見てください。

<table width="601" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="1"><img src="spacer.gif" width="120" height="1"></td>
<td width="180" height="1"><img src="spacer.gif" width="180" height="1"></td>
<td width="130" height="1"><img src="spacer.gif" width="130" height="1"></td>
<td width="170" height="1"><img src="spacer.gif" width="170" height="1"></td>
<td height="1" width="1"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><img src="image.gif" width="300" height="110"></td>
<td>text</td>
<td><img src="image.gif" width="170" height="50"></td>
<td width="1" height="50"><img src="spacer.gif" width="1" height="50"></td>
</tr>
<tr>
<td rowspan="2"><img src="image.gif" width="130" height="80"></td>
<td>
<p>text</p>
</td>
<td width="1" height="60"><img src="spacer.gif" width="1" height="60"></td>
</tr>
<tr>
<td>text</td>
<td rowspan="2">text</td>
<td rowspan="2"><img src="image.gif" width="170" height="65"></td>
<td height="20" width="1"><img src="spacer.gif" width="1" height="20"></td>
</tr>
<tr>
<td><img src="image.gif" width="120" height="45"></td>
<td>text</td>
<td height="45" width="1"><img src="spacer.gif" width="1" height="45"></td>
</tr>
</table>

お礼

ふむふむ、なるほどぉ。
試してみました～。
少しやりずらいですが、具体的にサンプルソースまでありがとうございますｗ
やはり隠しセルでずれを防止する方法が主なのですね～。回答ありがとうございましたっ！