ホームページの背景とコンテンツ部分の境目に影をつけたい

質問

ホームページの背景が白、真ん中のコンテンツ部分も白で、その境目に影をつけたいと思います。

イメージは、あまり大きな影じゃなくて、このぐらいの小さな影です。
http://www.misystem.jp/

画像を縦に並べるのかな？と思ったのですが、肝心な境目の影の画像をフォトショップでうまく作ることができません。

作り方がおわかりになるかた、作り方の参考になるサイトをご存知の方、よろしくお願いいたします！

回答No.2

steel_gray · ベストアンサー

角度を0°（光源を真上に）すると左右に均等な影が付きます。
（上のほうは影が完全についていないので上下方向の真ん中あたりを切り取って使います。）
ただ、角度0°の影の具合が気に入った状態でないようなら、
片方だけに好みの影がつくように調整したらそこでラスタライズし、
キリトリ、レイヤの複製、左右反転　などでもう片側が同じになるように編集するしかないですね。

お礼

ありがとうございます！
おかげさまで、うまくできました。(^^)

回答No.3

insider007

いろいろな方法がありますが、ドロップシャドウで検索してみましょう。
縦１ピクセル、横ページ幅の背景をＹ方向にリピートするのが一番簡単です。
難しいのは下と角。
縦の大きさが決まっているページはそう無いから、背景というわけに行かず、イメージを置くことになります。
あるいは<div>使って今度は横１ピクセルの背景をＸに並べるか。
角だけはどうしてもイメージしかない。
ドロップシャドウ使っているＷＥＢはみんな苦労・工夫していて千差万別です。
まずページ作ってから、そのレイアウトにあう方法を考えるなり似たＷＥＢ探すほうがいいですよ。
シャドウから先に作るとＷＥＢレイアウトに制限が出てしまいます。

お礼

ありがとうございます！
いろいろな方法があるんですね。
おかげさまで影をつくることはできましたけど、他の方法でも試してみますね！

回答No.1

steel_gray

白いキャンパスにコンテンツの幅で白い塗りつぶしレイヤーを作ってドロップシャドウを適用する。
角度や影のサイズを調整して出来上がった画像をラスタライズして切り取れば出来上がり・・かな。

ちなみに例で挙げられていたサイトの背景画像はこれ。
http://www.misystem.jp/images/bg.jpg
ほとんど真っ白だからわかりにくいけどお察しの通り小さな影が左右にちょこっとある細長い画像です。

補足

ありがとうございます！
ドロップシャドウやってみました。
影の色あいは良い感じでした。
ただ、色々と設定を変えてみても、なかなか左右に影がつきません。
白く塗りつぶした四角の右側と下側についたり、その部分の影が濃くなったり、ぼやけたり。。です。
左右同じような影をつけるというのもドロップシャドウでできるのでしょうか。