Photoshopで角丸四角形を描く方法をお探しですね。
広告
Photoshopでボタン用の角丸四角形を作る方法【後から丸みを変更できる】
Photoshopでボタン用の角丸四角形を作るとき、最初に気になるのが「あとから角の丸みを変えられるのかな？」という点ですよね。
結論から言うと、**角丸四角形ツールや長方形ツールを「シェイプ」として使えば、作ったあとでもプロパティパネルから角丸の大きさを自由に調整できます**。
この記事では、ボタンデザインに使いやすい角丸四角形の作り方から、あとから丸みを変える方法、角ごとに丸みを変えるテクニック、うまく調整できないときの対処法まで、初心者の方にも分かりやすく解説していきます。
1. Photoshopで角丸四角形を作る前に知っておきたいこと
Photoshopで角丸四角形を描く方法はいくつかありますが、**あとから丸みを調整したいなら「シェイプ」として作るのがポイント**です。
シェイプというのは、拡大・縮小しても画質が劣化しにくいベクター形式の図形のこと。
ボタンデザインでは、サイズ変更や色変更、角丸の微調整をあとから行うことが多いので、普通の塗りつぶし画像として作るより、シェイプで作っておいたほうが断然便利です。
特にWebボタンやバナー内のCTAボタンを作る場合、角丸の印象はデザイン全体の雰囲気を大きく左右します。
**角の丸みが小さいとシャープで信頼感のある印象に、丸みが大きいとやわらかくて親しみやすい印象になります**。
つまり、角丸四角形は単なる図形ではなく、ボタンの見た目やクリックしやすさを決める重要なパーツなんです。
Photoshopのバージョンによって表示名やパネルの位置が少し違うことがありますが、基本的にはツールバーの「長方形ツール」または「角丸長方形ツール」を使います。
最近のPhotoshopでは、長方形ツールで作った図形にも角丸の設定があって、プロパティパネルから角の半径を数値で変えられます。
作業を始める前に、**オプションバーで描画モードが「シェイプ」になっているか確認**しておきましょう。
これだけで、あとから編集しやすい角丸四角形が作れます。
2. ボタンデザイン用の角丸四角形を描く手順
まず、Photoshopで新規ドキュメントを作成したら、ツールバーから「長方形ツール」を選びます。
ツールアイコンが別の図形になっている場合は、アイコンを長押しすると長方形ツールや角丸長方形ツールが選べますよ。
画面上部のオプションバーで描画モードが「シェイプ」になっていることを確認して、塗りの色をボタンに使いたい色に設定します。
線は必要に応じて設定すればOKですが、シンプルなボタンを作るなら線なしでも大丈夫です。
次に、キャンバス上でドラッグして四角形を描きます。
正確なサイズで作りたいときは、ドラッグじゃなくてキャンバスをクリックして幅と高さを数値入力すると便利です。
たとえば、Webサイトのボタンなら幅240px、高さ56pxのように指定すると、あとでレイアウトに合わせやすくなります。
作った図形はレイヤーパネルにシェイプレイヤーとして追加されます。
普通の画像レイヤーとは違って、色や角丸をあとから自由に調整できるのが便利なポイントです。
**角丸を設定するには、作ったシェイプレイヤーを選んだ状態で「プロパティ」パネルを開きます**。
プロパティパネルの中に角の半径を入力する欄があるので、ここに数値を入れれば角丸の大きさを変えられます。
たとえば、半径を8pxにすると控えめな角丸、24pxにするとやわらかい印象のボタンになります。
高さが56pxのボタンなら、半径28px前後にすると左右がカプセル状に近い丸みになりますよ。
作業の流れを整理すると、こんな感じです。
1. 長方形ツールを選んで、描画モードを「シェイプ」にする
2. 塗り色や線の有無を設定して、キャンバス上に四角形を描く
3. シェイプレイヤーを選んで、プロパティパネルで角丸の半径を入力する
4. ボタンのサイズやテキストとのバランスを見ながら丸みを微調整する
この方法で作っておけば、ボタンの色を変えたいときも、角丸の大きさを変えたいときも、元の形を作り直す必要がありません。
デザイン制作では、「もう少し丸くして」「少しだけ角を立てたい」といった修正が入ることがよくあります。
そんなときでも、シェイプで作った角丸四角形なら数値を変えるだけでサクッと対応できます。
3. あとから丸みを調整する方法と角ごとの設定
角丸四角形をあとから調整するには、まず対象のシェイプレイヤーを選びます。
レイヤーパネルで該当する図形レイヤーをクリックして、画面上のプロパティパネルを確認しましょう。
プロパティパネルが表示されていない場合は、上部メニューの「ウィンドウ」から「プロパティ」を選ぶと表示できます。
角の半径を変更する欄に新しい数値を入力すると、キャンバス上の角丸四角形にすぐ反映されます。
Photoshopでは、四隅をまとめて同じ角丸にするだけじゃなくて、**角ごとに違う半径を設定することもできます**。
プロパティパネルの角丸設定には、四隅の数値を連動させるリンクアイコンが表示されることがあります。
リンクが有効な状態では、どれか1つの角の数値を変えると全部の角に同じ値が適用されます。
リンクを解除すると、左上、右上、右下、左下のように角ごとに違う丸みを指定できるんです。
角ごとに丸みを変える方法は、ボタンデザインでも応用できます。
たとえば、カード型UIの中で一部だけ角丸を合わせたい場合や、吹き出し風のボタンを作りたい場合に便利です。
ただ、普通のWebボタンでは四隅の丸みをそろえたほうが見やすくて統一感も保ちやすいです。
装飾目的で角ごとの丸みを変える場合でも、デザイン全体のルールから外れすぎないように気をつけましょう。
丸みを調整するときは、**数値だけで判断せず、実際の表示サイズで確認することも大切**です。
Photoshop上で拡大表示していると角丸が大きく見えたり、逆に縮小表示では細かな差が分かりにくかったりします。
Web用のボタンなら、100％表示に近い状態で確認して、テキストの大きさや余白とのバランスを見ながら調整すると失敗しにくいですよ。
角丸は数ピクセルの違いでも印象が変わるので、8px、12px、16px、24pxのように段階的に試すと比較しやすくなります。
4. 角丸が調整できないときの原因とボタンらしく仕上げるコツ
角丸をあとから調整できない場合、よくある原因は**シェイプじゃなくてピクセル画像として作っている**ことです。
描画モードが「ピクセル」になっている状態で四角形を描くと、普通の画像として作られるので、プロパティパネルから角丸の半径を変更できません。
また、シェイプレイヤーをラスタライズしている場合も要注意です。
ラスタライズというのは、ベクターの図形をピクセル画像に変換する処理のこと。
一度行うと角丸の数値編集ができなくなってしまいます。
もう一つの原因として、**選んでいるレイヤーが間違っている**ケースもあります。
プロパティパネルに角丸の項目が表示されないときは、レイヤーパネルでテキストレイヤーや画像レイヤーを選んでいないか確認してみてください。
角丸を調整できるのは、基本的に図形として作ったシェイプレイヤーだけです。
複数のレイヤーが重なっているデザインでは、目的のボタン背景を選べていないことがあるので、レイヤー名を「ボタン背景」などに変更しておくと管理しやすくなりますよ。
ボタンらしく仕上げるコツ
ボタンらしく仕上げるには、角丸だけじゃなくて、サイズ、余白、色、文字の配置も合わせて調整する必要があります。
角丸がきれいでも、テキストが中央からずれていたり、上下の余白が狭すぎたりすると、クリックしにくい印象になってしまいます。
**ボタン内の文字は中央揃えにして、左右の余白を十分に取る**と、安定感のある見た目になります。
背景色と文字色のコントラストも重要で、明るい背景には濃い文字、濃い背景には白い文字を使うと読みやすくなります。
角丸ボタンを自然に見せるための目安は、こんな感じで考えると分かりやすいです。
– **きちんとした印象にしたい場合**：半径4〜8px程度の控えめな角丸
– **親しみやすい印象にしたい場合**：半径12〜20px程度
– **丸みの強いCTAボタンにしたい場合**：高さの半分程度の半径に近づける
最後に、完成したボタンをWebやSNS用に使う場合は、書き出し前の確認も忘れずに。
シェイプレイヤーのままPSDデータを保存しておけば、あとから角丸や色を変更できます。
PNGやJPEGに書き出した画像は編集の自由度が下がるので、修正用の元データとしてPSDを残しておくことが大切です。
Photoshopで角丸四角形を描いて、あとから丸みを調整できる作り方を覚えておけば、ボタンデザインの修正やバリエーション作成がぐっとスムーズになりますよ。
広告
