PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【Photoshop】 CSS Sprite用に縦並びのナビゲーションボタンを画像で作る。

縦並びのナビゲーションボタンを作ります。ひとつあたり150*40pxです。
今回はCSS Spritesを使って一つの画像に複数のボタンを詰め込みます。また、ホバー時のボタンも同時に作ります。

作り方

f:id:game-web-design:20140909151232p:plain

  1. ボタンを5個作るので、幅300px高さ400pxで新規ファイルを作ります。
  2. 長方形ツールを使い、150*40pxのオブジェクトを左上に一つ作ります。ボーダーは1pxで薄い色を使います。
  3. スタイルを使い、長方形の中を塗りつぶします。
  4. 文字ツールを使って、一番長い文字を書きます(上記の画像でいうとインフォメーション)。書式は中央揃え。
  5. レイヤーから、長方形と文字レイヤー両方を選択し、移動ツールに持ち替え整列ボタンで中央に整列させる。
  6. 整列させたレイヤー同士をグループにします。
  7. その下に4つそのグループを複製します。複製を移動させるときはShift+カーソルキーを使うと10pxごと動いて便利。
  8. 各グループのテキストレイヤーの文字を書き換えます。
  9. すべてのグループを選択し複製して、右へ移動させます。
  10. 先ほど移動させたグループの長方形レイヤーを選択し、別なスタイルに変えます。必要があれば文字の色も変えます。