画像に影付画像を背景に設定、影を上手に表現するコツ
ホームページに影付きの画像を使用したく、
下記サイトを参考に作成しました。
All About form「画像を加工せず、複数の画像に「影」を付加」
http://allabout.co.jp/gm/gc/23995/
イラストレーターで影を作り、
フォトショップで画像化しました。
質問したいことは下記（１）～（３）です。
（１）
サンプルの画像ですが、
左側の影のみが背景用に使用した画像で
右側がFirefoxで実際に表示した結果です。
左側のピンク色は、影の周りの余白の多さを
見せたかったから付けました。
かなり余白が多い気がします。
それを切り取ろうとしても
影がどこで終わっているのか分からず、
下手に手を出せませんでした。
この余白は気にする必要はないですか？
（２）
サンプル画像を見て頂くと、左側＝右側、
とはならず影の形も濃さも変わってしまっています。
＝にするコツがあれば教えて頂きたいです。
（３）
上記の参考サイト内で
「影の部分は、右側が幅7ピクセル、下側が高さ8ピクセル」
と、正確に寸法を把握しているのですが、
どのようにすれば分かるのでしょうか？
自分は、1px単位で何度も何度も微調整しましたが、
把握する方法があればとても助かります。
お願いします。
～～～ 入力したソース ～～～
<style type="text/css"><!--
#shadow{
margin-left: 100px;
margin-top: 100px;
}
#shadow img{
background-image: url("shadow_image.jpg");
background-repeat: no-repeat;
background-position: right bottom;
padding: 0px 60px 60px 0px;
}
--></style>
<div id="shadow"><img src="sample.jpg" width="600" height="399"></div>
お礼
ありがとうございました。