影を両サイド（全方位）につける方法を教えてください。

はじめまして。
現在、手探り状態ですが、ホームページを作成しております。
そこで、お聞きしたいのですが、よく見かけるホームページの背景、というわ枠を影をつけて自分のホームページにも作成したいと考えているのですが、画像の作り方がわかりません・・・

参考サイト：http://www.maris-nail.com/top/index.html

こちらの参考サイトなどは両サイドに影がついていると思うのですが、これはどのようにして作成しているのでしょうか？

ドロップシャドウですと基本的には片面（４辺のうち２辺）しか影がつかないと思うのですが・・・

使用ソフトはphotoshopとillustratorになります。

どうかよろしくお願いいたします。

No.3 ベストアンサー 回答者： hiroleta 回答日時： 2008/01/08 08:32

イラストレーターなら。

効果＞スタイライズ＞光彩（外側）で出来ます。
例として。
背景用に１００ｍｍ角程度の四角を長方形ツールで描く（塗り、薄目の茶色）＞その中央に５０ｍｍ角の四角を描く（塗り、白・線、なし）＞効果＞スタイライズ＞光彩（外側）＞描画モード、通常・不透明度、１００・ぼかし、１ｍｍ・色の四角をクリックして、黒に近い色を選択＞ＯＫ。
こんな感じで、四方に影が出来ます。

この回答へのお礼

ありがとうございます。

また返事が大変ｎ遅くなり申し訳ございません・・・
光彩！忘れてました・・・
こちらで無事解決しました。

本当にありがとうございました。

お礼日時：2008/01/14 16:49

No.2 回答者： dezimac 回答日時： 2008/01/07 14:38

影ではなくぼかした黒フチを作ると考えて下さい。

影＝ドロップシャドウと考えていると作れません。

やり方はいくらでもあります。
Photoshopでの大雑把なやり方

・レイヤースタイルの境界線で塗りつぶしタイプにグラデーションを使う
-----
・新規レイヤーを作成（レイヤー1）
・影を付けたいオブジェクトの選択範囲を作成
・レイヤー1を黒で塗りつぶす
・ガウスぼかしフィルタを適用
・レイヤー1を下へ

どちらの方法も小さな写真とかに適用する分にはいいですが、
ページ全体の背景にとなると色々と不都合があります。
・ファイルサイズが大きい
・印刷物と違ってWebページは見る環境によってズレが生じる
等があるので。


単純なのは3×3のテーブルを使う方法です。
まずは背景色→黒のグラデーションの画像を上下左右、4隅の8枚用意します。
上下左右の画像は繰り返し並べるので、幅（高さ）は1ピクセルでも十分です。
それぞれの画像をテーブルのセルの背景に指定します。

↓参考に。
http://okwave.jp/qa3513961.html

参考にしたいページのソースを見ればある程度は判りますよ。
HTMLを少しでも理解しているという前提でですが。

この回答へのお礼

ありがとうございます。

早速参考サイトを拝見させていただいたのですが、、、実は完全にCSSで作成しており、テーブルは全く使用していません・・・

できればこのままテーブルを使用しないままで作成していきたいと考えていますが、今後の参考にさせていただきます。

本当にありがとうございました。

お礼日時：2008/01/08 18:28

No.1 回答者： marie88 回答日時： 2008/01/07 14:25

参考サイトを拝見しました。

うーん、これはフォトショやイラレというよりwebデザインのテクニックの様ですね、恐らくテーブルの周りにグラデーションのある画像を配置しているのだと思われます。

一応、Photoshopでこの様な画像の作り方を考えてみました。
ドロップシャドウを使うよりレイヤーを重ねた方が手っ取り早いと思います。
上になる画像のレイヤーと同じサイズの選択範囲を作り、それを黒で塗りつぶします。そしてその黒のレイヤーを下に下ろし、ぼかしフィルターをかけると同じ様な状態になります。
ご参考までに。

この回答へのお礼

ぼかしフィルターですか・・・

一度試してみます!本当にありがとうございました。

お礼日時：2008/01/08 18:25