Web用の角丸長方形の作成（ピクセル指定）

このページはwindows版photoshopCS3で制作しています。

ボタンや見出しの背景に使う角丸の矩形の作成。作成画像。幅200px高さ40px(角丸20px含む)

Web用に新規ファイルを作成します。

1. メニューバーのファイル→新規をクリックします。
2. プリセットからWebを選択

角丸長方形ツールで作成

1. ツールから角丸長方形を選択
2. シェイプレイヤーが選択されていることを確認します。
3. 幅高さ指定で作成するのでオプションをクリックし数値指定します。後ほど下の丸い部分（丸みで設定した20px分）を削除しますので丸み分を余分に指定しておきます。
   完成時の高さ40pxに削除する丸み部分20pxを加えて60pxを指定します。
   丸みに20px指定するのも忘れないようにします。
4. カンバス上でクリックすると角丸の長方形が描画されます。
5. パス選択ツールを選択します。
6. 角丸長方形のシェイプの外周あたりをパス選択ツールでクリックします。（わかりやすくするため塗りつぶしは白に変更しています。）
7. 白い四角(□)がいくつも表示されるのでそのうちのひとつ左下の四角をクリックします。クリックされた四角の色が少し変化します。
8. Delelteキーを押してセグメントのアンカーポイントを削除します。
9. 一度別のところをクリックし選択を解除して新たに右下のアンカーポイントを選択し削除します。
   このまま次の作業で構いませんがパスが閉じていないのが気になる場合はペンツールで両端をクリックしてパスを閉じます。以前の方向点が残っていて直線にならない場合はアンカーポイントの切り替えツールで両端をクリックします。
10. レイヤーパネルの該当レイヤーをダブルクリックするとレイヤースタイルが開くので任意に設定しておく。サンプルはベベルとエンボスとグラデーションオーバーレイを設定しました。
    グラデーションは既定にないもので自分で作成しました。
11. レイヤーパネルのベクターマスクのサムネイル部分（シェイプ1と書かれているすぐ左の画像）をCtrlキーを押しながらクリックします。カンバス内で先ほどから加工していた角丸長方形が選択されます。メニューバーの編集→結合部分をコピーをクリックします。
12. メニューバーのファイル→新規をクリックします。プリセットからクリップボードを選択します。
13. 新しく作成されたカンバスに張り付けます。メニューバーの編集→ペーストをクリックします。
14. レイヤーパネルの背景の表示非表示（目のマークのアイコン）をクリックし背景を非表示にします。（背景を透明にして透過GIFを作成する場合）
15. メニューバーのファイル→Webおよびデバイス用に保存をクリックします。保存形式を指定して保存します。

Copyright (C) 2009 ホームページ制作ねっとかんさい All Rights Reserved.