「画像の角を丸くしたい。」
デザインやWeb制作をしていると、こんな場面があります。
今回は、Photoshopを使って画像を角丸にする方法をご紹介します。画像そのものを加工するのではなく、角丸のシェイプを重ねてその形に切り抜く方法が一般的です。
この記事では、最もかんたんな「クリッピングマスク」という機能をご紹介します。
クリッピングマスクで角丸にする方法
最もかんたんなクリッピングマスクで角丸にする手順をご紹介します。以下の3ステップです。
- 対象の画像に長方形ツールを重ねる
- 長方形ツールの位置やサイズを調整
- 長方形ツールを角丸にして切り抜く
対象の画像に長方形ツールを重ねる
対象の画像を開いたら、長方形ツールをレイヤーとして重ねてください。
このとき、色はなんでもいいです。
長方形の位置やサイズを調整
続いて、長方形の位置やサイズを調整します。
サイズを変えずに、画像を角丸にしたいなら、上記のように元画像と同じ縦横サイズを入力して綺麗に重ねてください。
長方形を角丸にして切り抜く
長方形の角を丸く調整します。
角にカーソルを合わせると、角を丸めるための小さな青い丸（ハンドル）が表示されます。この青い丸をクリックしたままドラッグすると、角の丸みを自由に調整できます。
最後に、角丸に調整した長方形を画像の下のレイヤーに移動させます。
あとは、元画像を右クリックして、「クリッピングマスクを作成」を押せばOKです。
画像が角丸にくり抜かれるので、そのまま書き出せば完了です。
よくあるつまづきと対策
「長方形（シェイプ）を、画像の中央に配置したい。」
「長方形（シェイプ）と画像を同時にリサイズしたい。」
こんなときは、次の操作が便利です。
| 目的 | ショートカット / 方法 |
|---|---|
| 画像とシェイプをまとめて移動 | Shiftで両方のレイヤーを選択 → Vキーで移動 |
| 画像とシェイプを同時にリサイズ | Shiftで両方のレイヤーを選択 → Cmd/Ctrl + T Shiftを押しながらドラッグ |
| 綺麗に中央配置したい | Shift + Cmd/Ctrl + : でスナップを有効 Vキーで位置調整 |
ちょっとした操作ですが、コツとして覚えておくと編集しやすいです。
まとめ
Photoshopで画像の角を丸くするには、クリッピングマスクを使うのが最もかんたんです。ポイントは、角丸のシェイプを画像のサイズや位置に合わせて正しく配置することです。
各レイヤーをまとめて移動・リサイズしたり、スナップを活用して調整してみてください。切り抜いた画像は透過PNGで書き出すと、Webデザインや資料作成でもそのまま使いやすいです。
Photoshop関連のおすすめ記事
Webサイトのデザインデータは、PSDで共有されるのが主流ですが、そのままサイト上で使うことはできません。 「デザインデータを基に、Webサイトに画像を設置してみたい」ときなどは、PSDから画像ファイルのみを書き出して、それらをアップロードする必要があります。 というわけで今回は、PSD...
ブログのアイキャッチやSNS投稿用の画像など、複数の画像に同じ加工を行う場合、一枚一枚編集するのは効率が悪くて大変です。 同じ編集を繰り返す場合、PSDをテンプレート化しておくと次回から作業効率がアップします。 画像をドラッグ&ドロップするだけで加工内容を再利用できるわけ...
WEBで記事を書いていると、記事内で画像を使って解説することがあると思います。操作画面をキャプチャして分かりやすく見せたり、遷移先のページイメージを見せておいたりしますよね。 ただ、縦に長くなるような画像では、一部を省略した方が見やすいです。以下は当サイトのトップページの例ですが、ヘッダーとフ...
WordPressテーマ集
コメント