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

質問

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

回答No.2

ohh-kunio · ベストアンサー

#1さんの方法は画像とグラデ版を後で重ねる方法ですが、PhotoShop上で全部完了させる方法。

１）必要サイズの新規画面を作成
２）使用する画像を左右のしかるべき場所に配置。
３）ツールパレット下の描画色設定を黒に
４）画像右側にグラデでぼかす部分だけ四角の選択範囲で囲む。
５）レイヤ→新規塗りつぶし→グラデーションで、角度を-180度にして適用
６）左側に４）同様に選択範囲作成
７）５）同様に今度は角度を0度に設定、適用。
８）レイヤを統べて統合。
９）Webで保存
※２）で配置した画像が左右いっぱいにない場合は、グラデの中ごろに画像のはじが透けて見えるようになりますから、その場合は３）以降の手順の前に白バック部分を黒に塗り、グラデをかける選択範囲は画像の外端から始める。
以上ですが、どうでしょう？（＾＾）

お礼

ご回答ありがとうございました。
２）は意味が理解し切れなかったのですが、うまくできました。
範囲を囲んでから塗りつぶし→グラデの部分が
わかっていなかったので、とても参考になりました。

回答No.1

noname#22328

参照サイトと同じ物でよければ、まず12px×50pxの画面を新規作成します。

レイヤー１に「描画色（黒）から透明になる」グラデーションで、左端から10pxのところまでグラデーションをかけます。濃度を50%くらいにします。

レイヤー２を新規作成して、左端1px幅で灰色の線を引きます。

（レイヤー３を作って、一番下に置き、背景色を入れます）

「WEB用に保存...」でGIF／JPEGで保存します。（仮に名前をleft.gifとします）

------
<table border="0" cellpadding="0" cellspacing="0" height="100">
<tr>
<td width="12"></td>
<td width="780">ここがテキストが入る部分</td>
<td width="12" backgroud="left.gif"><img src="left.gif" border="0"></td>
</tr>
</table>
------

以上のタグをコピーして、画像と同じ場所に保存して下さい。
そしてブラウザを開けば、左側にグラデーションが入っていることが分かります。
右側は、左側を作った書類を反転させれば出来ます。

テーブルを縦に３分割して、両側にシャドウを入れるやり方です。

サンプルでは[backgroud]属性で背景を指定しましたが、スタイルシードで書けば、
style="background-image:url(left.gif)"　となります。

参照サイトはブログなので、別のやり方で作ってるみたいですが、
テーブルを使ったやり方が一番シンプルで分かりやすいと思います。

お礼

早速のご回答ありがとうございます。
レイヤで分けて一番下に背景色を入れるというのが
参考になりました。
今回はテーブルは使わず、780×5の画像をスタイルシートで
background-image : url('bg02.gif');
background-repeat : repeat-y;
background-position : center;
と記述してうまくいきました。