Webサイトデザイン制作におけるナビ用画像の作り方

Photoshopを使ったナビ用画像の制作手順

新規レイヤーを作り、レイヤー名をつける（レイヤー名：長方形上面）
カラーパレットまたはスポイトツールなどを使って長方形上面の描画色を設定する（描画色：黄緑）
作成したレイヤー上に長方形選択ツールで長方形を描く
新規レイヤーを作り、レイヤー名をつける（レイヤー名：長方形中面）
長方形中面の描画色を設定する（描画色：白）
長方形上面より一回り大きい長方形を描き、レイヤーの順番を長方形上面レイヤーの下にする
新規レイヤーを作り、レイヤー名をつける（レイヤー名：長方形下面）
長方形下面の描画色を設定する（描画色：グレー）
長方形中面より一回り大きい長方形を描き、レイヤーの順番を長方形中面レイヤーの下にする
長方形下面レイヤーにレイヤースタイル：グラデーションオーバーレイを適用する（グラデーションの色はグレーで、下から上に向かってほんの少し薄くなる程度）
長方形下面レイヤーにレイヤースタイル：ドロップシャドウを適用する（描画モード：乗算、色：真っ黒ではない黒、不透明度：40％くらい、距離：1〜2px程度、サイズ：2〜3px程度）
新規レイヤーを作り、レイヤー名をつける（レイヤー名：グラデ上半）
グラデ上半を選択した状態で、長方形上面の半分の高さの範囲を長方形選択ツールで選択する
グラデーションツールを選択し、白から透明へのグラデーションを設定し、選択範囲の下から上へと適用する
新規レイヤーを作る
作成したレイヤー上に文字ツールで文字を入力し、色やカーニングなどを調整する（文字：ナビ用画像）
上記で作成したレイヤーをすべてグループ化する
グループ化したものを複製する　※以下複製したグループに対しての処理
複製したグループを（選択した状態で、）複製元のグループの下に移動する
不要となるグラデ上半レイヤー（複製）を削除する
長方形上面レイヤー（複製）を選択し、長方形上面の上から2px程度を残して、それ以外を長方形ツールで選択する
選択した範囲を削除する
長方形中面レイヤー（複製）を選択する
レイヤースタイル：グラデーションオーバーレイを適用する（色は#d7dde3→#ffffffなどで、下から上へ）

制作時の注意

必要に応じてガイドを設定する
レイヤー名は後で分かり難くならないように、都度レイヤー内容が分かりやすい名前をつける
必要に応じてレイヤーをグループ化する
新たに図形や文字を加える場合は、後で編集・加工できるようにレイヤーを追加して、そのレイヤー上に配置する
グループを複製する際、複製元と複製先とで文字位置がズレないようにする
スライスする2つのグループの合計の画像高さは偶数になるようにする（ならないとおかしい）
スライス時に、ドロップシャドウが途中で切れないようにする