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

PCゲーマーのWebデザインの勉強と備忘録。Webサイト制作系の職業訓練を受けてます。

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

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

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

作り方

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