影のような表現

質問

トップページでページのテーブルが
浮いて見えるような表現をしたいと考えています。
単純に右側に黒～白（透明）のグラデーションgifを入れればいいと思うのですがうまくいきません。
良い方法をお教えください。

高1×横5のグラデーションのスペーサーを作って
テーブルに増やした列のtdの背景に入れたのですが
崩れてしまいました。

こんな感じにしてみたいのですが
http://www.womenjapan.com/index.html

また他にトップページはこんな方法を知ってると良いよというのがありましたらお教えください。
（紹介サイトへのリンクでも結構です）

宜しくお願いします。

回答No.2

Dpop

#1 です。

なんとなく。言いたいことが分かってきました。

浮いているように見えるのは、やはり影とハイライトによる効果です。

簡単な実験をやってみました。

1.PictBearを使って適当なサイズの画像を開きます。
2.それをレイヤー1へ移動させます。(背景レイヤーは白色になっています。)
3.キャンパスサイズを広げます。
4.レイヤー2を作って、レイヤー1の下に配置します。
5.レイヤー1の画像と同じサイズで、レイヤー1を黒く塗りつぶします。
6.レイヤー1を右下に1ピクセル移動して、選択範囲を解除します。

と、浮いている様に見えませんか?
いろいろと試したところ、5ピクセルがダメな様で、1ピクセルか2ピクセル位が適当な様な気がしました。

もっと強調させたい場合、左上にハイライトを入れると更にキツい表現ができるみたいです。ただ、ハイライトが強いと、浮いている。と言うより、浮き上がってくるイメージになるかも知れません。

この様にして、適当な影のサイズや濃さを確認した後、本当に入れたい内容に同様な適用を行えば、近い雰囲気になると思います。

お礼

そう浮いているような表現です。
作ったグラデを画像にくっつけたままスライスを設定し、書き出せば可能でした。
とりあえず背景がいけないような感じがあります。
ありがとうございました。

回答No.1

Dpop

拝見しましたが、「テーブルが浮いて見えるような表現」と言うのが、どれの事を指して言われているのか、分かりませんでした。

多分。影がついている。と言うことを言いたいのでは無いかな。と思いました。影を付けたいのであれば、グラデーションでは表現できません。
このページの場合、テーブルの中身は GIF 画像になっている様ですね。そのため、GIF画像を作成した際に、影を付けた画像ファイルを用意したのだと思います。

さて、本題に。。

影ですが、ぼかし を利用して作成します。通常は「ガウスぼかし」と言う機能を利用するのが一般的です。フリーソフトでは PictBear などが「ガウスぼかし」を利用することができます。

影を付けたい画像(テーブルの場合、テーブルと同一サイズの画像ファイルを用意して作業してください。)を用意します。
キャンパスサイズをその画像より、やや大きめに設定しておきます。
その画像の下に新しいレイヤーを追加し、画像と同じ範囲を黒で塗りつぶします。
ガウスぼかしを適当なサイズ(お好みのサイズ)で適応させます。
影部分のレイヤーを、右下方向に数ピクルスずらします。
影部分のレイヤーの表示濃度をお好みの大きさに設定します。
レイヤーを重ねて、画像と影の部分を切り出します。

大雑把に言うと、こんな過程で影が付きます。パラメーターや画像のサイズをいろいろと調整する(上記の説明では、お好みの様にはなっていないので(^^;) 事前に影の部分を意識して、テーブルサイズに入るように画像サイズを決定するか、影をつけた後で画像のサイズをテーブルサイズに合わせるように、縮小する必要があります。)と良いでしょう。

なんどか、影付けをやっていると、ご自分の思ったような影が付けられるようになりますし、テーブルの端に影部分の画像を追加する。などと言ったこともできる様になると思います。

参考URL：

http://www20.pos.to/~sleipnir/

補足

ありがとうございます。
わかりづらかったですよね。補足します。

１）FireWorksを使用しています。
２）1×5の長方形をつくり
３）塗りの線形でグラデ状にしてtdの背景に設定しました。

ガウスぼかしとどうちがうのでしょう？
ガウスぼかしにすると角が丸まってしまうのですがどうすれば良いのでしょう？

あと
ネスケ7では大丈夫なのですがIEで見られません。
背景に画像を入れるというのがいけないのでしょうか？

その辺もご存じでしたらお教えください。