• ベストアンサー

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

ホームページの背景が白、真ん中のコンテンツ部分も白で、その境目に影をつけたいと思います。 イメージは、あまり大きな影じゃなくて、このぐらいの小さな影です。 http://www.misystem.jp/ 画像を縦に並べるのかな?と思ったのですが、肝心な境目の影の画像をフォトショップでうまく作ることができません。 作り方がおわかりになるかた、作り方の参考になるサイトをご存知の方、よろしくお願いいたします!

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

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

kirara_88
質問者

お礼

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

その他の回答 (2)

回答No.3

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

kirara_88
質問者

お礼

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

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

白いキャンパスにコンテンツの幅で白い塗りつぶしレイヤーを作ってドロップシャドウを適用する。 角度や影のサイズを調整して出来上がった画像をラスタライズして切り取れば出来上がり・・かな。 ちなみに例で挙げられていたサイトの背景画像はこれ。 http://www.misystem.jp/images/bg.jpg ほとんど真っ白だからわかりにくいけどお察しの通り小さな影が左右にちょこっとある細長い画像です。

kirara_88
質問者

補足

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

関連するQ&A

専門家に質問してみよう