背景：浮かばせる背景

ここでは背景に使う浮かばせる背景を作成しています。基本的にはページを浮かばせるでおこなった幅の1px版です。

完成予想素材：

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅：320px　高さ：1px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

まずは左に浮かばせるポイントとなるグラデーションをかけます。
今回はわかりやすいように情報ウィンドウも一緒に表示しています。

点線で囲っている部分が幅が10ピクセルとなります。
情報ウィンドウでは右下のWが幅でHが高さとなります。
1ピクセルにこだわる場合は情報ウィンドウは必須となります。

では白から灰色に変化するグラデーションを上の画像のようにかけます。
これで左側は完成となります。

右側も同じものを作ります。レイヤーをコピーし同じものを作ります。そしてすべてを選択してメニューのイメージから回転→選択範囲を左右に反転を選びます。そうすることで左右対称のグラデーションが出来上がります。

↓完成画像：CSSで繰り返し表示させています

今度はグラデーションを反対にしてみます。
すると灰色が外側にくるため周りの背景色も同じ色で指定をしなければいけません。そして背景色を指定すると画像の透明の部分が背景色になってしまうので塗りつぶしツールを使い白で塗りつぶしています。
ぼやけた感じになりました。

↓完成画像：CSSで繰り返し表示させています