• ベストアンサー

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

dezimacの回答

  • 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で作成しており、テーブルは全く使用していません・・・ できればこのままテーブルを使用しないままで作成していきたいと考えていますが、今後の参考にさせていただきます。 本当にありがとうございました。

関連するQ&A

  • ホームページの枠に影をつけたいのです。

    はじめまして。 現在ホームページを作成しています。 そこでよく見かけるホームページの枠にドロップシャドウのような影をつけたいのですがどうすればいいのでしょうか? 参考サイト http://www.plastiq.jp/ 画像を配置すればいい。という記述を見かけたのですが、どこにどのようにしてどのような画像を張ればいいのかわからず、困っています。 どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • フォントの下に影をつけたい

    全然使いこなせていませんが、イラストレーターCS3を使っています。 たまにHPなどでフォントの下に影ができているのを見かけます。 上から照明で照らされてできたような影で文字が反対のようになっていて透明な影です。 ぼかしやドロップシャドウのようなものではなく、そのような影をつくりたいのですがどのようにしたらよいのでしょうか? お願いします。

  • イラストレーターで写真に影をつけるのには・・。

    イラストレーター8.0で配置された写真に影をつけることは出来るのでしょうか?。 「イラスト」には「スタライズ」-「ドロップシャドウ」で出来るのですが写真には効果がありません。 フォトショップで予め「影」をつけておくしか方法はないのでしょうか?。 よろしくお願いいたします。

  • 印刷 グラデーションや影は分割したほうがいい?

    イラストレーターで、印刷用のデータを作成するときに、グラデーションや影またはその他のエフェクト、アピアランス等は「分割」したほうがよいのでしょうか? (文字を印刷用に分割するのは、基本だと思うのですが。) ・ グラデーションを「分割」すると、細かい線のようになります。 ・ 影(効果>スタイライズ>ドロップシャドウで作成した影)のエフェクトを「アピアランスで分割」すると画像になります。 イラストレーターのCS5を使用しています。印刷用データはイラストレータファイル(.ai)でだします。 宜しくお願いします。

  • ドロップシャドーの影の変更(PHOTOSHOP ELEMENTS)

    PHOTOSHOP ELEMENTS 2.0です。 文字などにドロップシャドー(ボヤボヤっとした影)をつける場合、 (1)影の色(普通は灰色の影になってしまいます)を変えることはできますか? (2)影の濃さを変えることはできますか? (3)影の位置を変えることはできますか? 一遍に沢山質問して申し訳ありませんがどなたかやり方をご存知の方がいたら 助けてください。 どうぞよろしくお願いします。

  • ボックスの両側にドロップシャドウ

    下記サイトのように、ボックスの両側にドロップシャドウをするにはどうしたらいいのでしょうか。 最初はシャドウを作ってy方向にリピートさせてあるのかなと思ったのですが、背景画像を見てみるとあらかじめドロップシャドウは作られていて、画像作成後にドロップシャドウを含めてスライスしてありました。 ドロップシャドウは一度では片側しかできないと思うのですが・・・。 illustrator,photoshopともにCS2です。 よろしくお願いいたします。 http://www.eprintonline.com.au/printing-products-services

  • イラストレーターでドロップシャドウ

    イラストレーターでweb素材を作っています。 ドロップシャドウについて教えてください。 四角い画像がありす。それにドロップシャドウをつけると、四角いままの影ができますよね。 これを一部変形させるのはどのようにしたらよいでしょう。 イメージとしては、紙をペロッとめくったようなイメージ(右下にシャドウを落としたし時、左下だけちょっと大きくなる)というものです。 ブレンドを使ってやってみようとしたのですが、どうもうまく出来ないです。 単に私が下手なだけだと思いますが、何か参考となるサイトなどあったら方法とともに教えてください。

  • photoshop7.0 両サイドが影のweb用背景画像をつくりたい

    中央寄せのホームページで、両サイドが少し影になっていて浮かび上がっているように見えるものがあると思うのですが、そういうものを作りたいです。 ソースなどから、横に細長い背景画像を繰り返し並べているのだということは分かりました。 そこで、photoshopでその背景画像を作る手順を教えていただきたくて質問させていただいています。 高さ5px×幅780pxの画像の両サイド10px分くらいをグレーから透明になるようなグラデーションをおく手順を作り方、保存方法など含めて分かるかたいらっしゃったらアドバイスをお願いいたします。 http://www.unouplus.com/uraunou/ こちらのサイトさんの右側みたいな感じで左右対称にしたいです。

  • 透明バナーの作成方法

    HPを作成しています。 TOPページのメイン画像の上に透明のバナーを貼り、 そこにリンクを貼って別のページに飛ばす、 と言うことをしたいと思っています。 そのときバナーは透明ですが、影で浮き上がらせているようにし 何か押下できるものがあるんだ、と言う感じにしたいです。 バナーはFireworks4で作成しています。 レイヤーの透過を0に近い数字に設定し、ドロップシャドウで影をつけてます。 そこまでは良いような気がしていたのですが、 いざ書き出してみると影の周りに白く縁ができ、下にある画像となじみません。 書き出しの時にインデックス透明カラーを設定しても同じです。 このような時、何か別の方法があるのでしょうか? ソフトはFireworksを使っていますが、photoshop・Illustratorもバージョンは古いですが持っています。 3つのいずれかのソフトでメイン画像がきれいに透けて見え、 影もけっこうはっきりついて浮いて見えるバナーの作り方を教えてください。

  • イラストレーター9.0 写真画像にぼやけた影をつけたい(ドロップシャドウ?)

    Winで、イラストレーター9.0を使用しています。 写真画像にぼやけた影をつけたいのですが、 「効果」⇒「スタライズ」⇒「ドロップシャドウ」で、 ぼやけた影をつけることはできるのしょうか。 写真画像は普通にリンクで配置しているだけです。 写真画像は普通の横長方形です。 お手数をお掛けしますが、どなたかお教えください。