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