• ベストアンサー

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

はじめまして。 現在、手探り状態ですが、ホームページを作成しております。 そこで、お聞きしたいのですが、よく見かけるホームページの背景、というわ枠を影をつけて自分のホームページにも作成したいと考えているのですが、画像の作り方がわかりません・・・ 参考サイト:http://www.maris-nail.com/top/index.html こちらの参考サイトなどは両サイドに影がついていると思うのですが、これはどのようにして作成しているのでしょうか? ドロップシャドウですと基本的には片面(4辺のうち2辺)しか影がつかないと思うのですが・・・ 使用ソフトはphotoshopとillustratorになります。 どうかよろしくお願いいたします。

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

  • ベストアンサー
  • hiroleta
  • ベストアンサー率64% (1114/1719)
回答No.3

イラストレーターなら。 効果>スタイライズ>光彩(外側)で出来ます。 例として。 背景用に100mm角程度の四角を長方形ツールで描く(塗り、薄目の茶色)>その中央に50mm角の四角を描く(塗り、白・線、なし)>効果>スタイライズ>光彩(外側)>描画モード、通常・不透明度、100・ぼかし、1mm・色の四角をクリックして、黒に近い色を選択>OK。 こんな感じで、四方に影が出来ます。

noname#52036
質問者

お礼

ありがとうございます。 また返事が大変n遅くなり申し訳ございません・・・ 光彩!忘れてました・・・ こちらで無事解決しました。 本当にありがとうございました。

その他の回答 (2)

  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.2

影ではなくぼかした黒フチを作ると考えて下さい。 影=ドロップシャドウと考えていると作れません。 やり方はいくらでもあります。 Photoshopでの大雑把なやり方 ・レイヤースタイルの境界線で塗りつぶしタイプにグラデーションを使う ----- ・新規レイヤーを作成(レイヤー1) ・影を付けたいオブジェクトの選択範囲を作成 ・レイヤー1を黒で塗りつぶす ・ガウスぼかしフィルタを適用 ・レイヤー1を下へ どちらの方法も小さな写真とかに適用する分にはいいですが、 ページ全体の背景にとなると色々と不都合があります。 ・ファイルサイズが大きい ・印刷物と違ってWebページは見る環境によってズレが生じる 等があるので。 単純なのは3×3のテーブルを使う方法です。 まずは背景色→黒のグラデーションの画像を上下左右、4隅の8枚用意します。 上下左右の画像は繰り返し並べるので、幅(高さ)は1ピクセルでも十分です。 それぞれの画像をテーブルのセルの背景に指定します。 ↓参考に。 http://okwave.jp/qa3513961.html 参考にしたいページのソースを見ればある程度は判りますよ。 HTMLを少しでも理解しているという前提でですが。

noname#52036
質問者

お礼

ありがとうございます。 早速参考サイトを拝見させていただいたのですが、、、実は完全にCSSで作成しており、テーブルは全く使用していません・・・ できればこのままテーブルを使用しないままで作成していきたいと考えていますが、今後の参考にさせていただきます。 本当にありがとうございました。

  • marie88
  • ベストアンサー率36% (14/38)
回答No.1

参考サイトを拝見しました。 うーん、これはフォトショやイラレというよりwebデザインのテクニックの様ですね、恐らくテーブルの周りにグラデーションのある画像を配置しているのだと思われます。 一応、Photoshopでこの様な画像の作り方を考えてみました。 ドロップシャドウを使うよりレイヤーを重ねた方が手っ取り早いと思います。 上になる画像のレイヤーと同じサイズの選択範囲を作り、それを黒で塗りつぶします。そしてその黒のレイヤーを下に下ろし、ぼかしフィルターをかけると同じ様な状態になります。 ご参考までに。

noname#52036
質問者

お礼

ぼかしフィルターですか・・・ 一度試してみます!本当にありがとうございました。