背景：ページを浮かばせる
ここでは背景に使うページを浮かばせるイメージを作成する方法を解説しています。
ファイルの新規作成
上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。
幅：320px 高さ：300px 解像度：72px カラーモード：RGBカラー カンバスカラー：透明とします。
今回の大きさの画像はたとえばの大きさです。幅などは各コンテンツページに合わせる必要があります。
グラデーションを使い立体的に作る。
まずコンテンツ部分のページサイズが重要となります。
コンテンツ部分の幅が500pxなら今回作成する背景画像はコンテンツ部分の500pxとグラデーション部分を足して計算する必要があるからです。
今回の場合はコンテンツ部分を300px。 そしてグラデーション部分を10pxとして計算し、グラデーション部分は左右に2箇所必要なので合計で20px。
最後に300px＋20pxで背景画像の幅は320pxと仮定しています。
まずはじめに白で塗りつぶします。
次に新規レイヤーを作成しそこにグラデーションを作ります。
上の画像は背景画像の一番左上の部分を大きくした画像となります。
長方形選択ツールを使い、左上から幅10px、高さ300pxを選択してグラデーションをかけます。
グラデーションの設定は上の画像のようにしています。
描写色が白で、背景色を淡い黒にし描写色から背景色へ変化させるグラデーションです。
ポイントは色を変化させるところを少なくしています。
次に右側にも同じものを作ります。
まず、グラデーションを作ったレイヤーをコピーします。
そしてコピーしたレイヤーをすべて選択し、上部メニューのイメージから回転→「選択肢を左右反転」を選び反転させます。すると左右対称のグラデーションができると思います。
ここまでのレイヤーです。わかりやすくレイヤー名を変更しています。
↓ここまでの完成画像
2重グラデーション
ここで2重グラデーションのテクニックを使いさらに立体的にさせます。
新規にレイヤーを作成し、下から上にかけて白から透明に変化するグラデーションをかけます。
これで完成となります。レイヤーは全部で4つできます。
↓完成画像