【Photoshop】角丸のナビゲーションボタンを作る

Photoshopを使い、角丸のナビゲーションボタンを作ります。

作り方

1. 750*80pxで新規ファイル。
2. 角丸長方形ツールで左上をクリックして、750*40pxの長方形を作る。
3. スタイルから、好きなスタイルを選択する。
4. 新規レイヤーを作る。
5. 鉛筆ツールを使い、Shiftキーを押しながらまっすぐな線を左端にあわせて書く（ボーダーになります）。
6. 移動ツールを選択して、Shiftを押しながら右カーソルを15回押す。（Shift押しながらだと10px動くため）。
7. 今選択しているレイヤーを複製して、1ピクセル右下にずらし、透明ピクセルをロックして白く塗りつぶす。これでひとつのボーダーができる。
8. ４～７で作った二つのレイヤーをグループにして、複製し、同じように150px右へ移動する。それを繰り返して計４本のボーダーを並べる。
9. ルーラーを使い１ボタン分の幅を囲う。
10. テキストツールで真ん中あたりをクリックして、中央揃え。■などのダミーテキストを打ち、幅いっぱいに文字を並べてから、テキストを移動ツールを使い真ん中へ移動させる。
11. １０で作ったテキストを複製し、それぞれ隣へ150px移動させる。それを繰り返して、全部のボタンの上にテキストを載せる。
12. それぞれのテキストを書き直す。
13. 今まで作ったレイヤーをすべてグループ化し、複製して、下へ40px移動させる。
14. 移動させたグループの長方形レイヤーを別なスタイルに置き換えたり、文字の色を変えるなどして、ホバー時の画像を作る。