Photoshopで画像を角丸にする方法【初心者向け】現役Webデザイナーが解説

Photoshopで画像を【角丸】にする方法を初心者向けに解説した記事です。「長方形選択ツール」を使った方法で角を丸くしていきます。画像を15枚使って順番に紹介しているので、実践的に学ぶことができます。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

Photoshopは、選択範囲の機能を使って、写真の四隅を角丸に加工することが可能です。

今回は初心者向けに、角丸加工の方法を解説します。

 

目次

今回は下記の2つの方法でご紹介します。

※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。

 

選択範囲を使用した方法

今回はサンプルとして、こちらの画像を使用します。

ps_kado_1

 

まず、角丸にする加工を施す前に、対象のレイヤーが「通常のレイヤー」であるかを確認します。

すでに用意してある画像を加工する場合、画像レイヤーは「背景レイヤー」であることがほとんどです。

そこで、レイヤーパレット内で編集するレイヤーを右クリックし、「背景からレイヤーへ」を選択します。

ps_kado_2

 

レイヤー名を入力し、「OK」を押します。

ここでは最初から入力されている「レイヤー0」のままです。

このレイヤー名は必要に応じ、変更していただいて構いません。

(カラー・描画モード・不透明度などは変更する必要はありません。)

ps_kado_3

 

先ほど設定した名前の通常レイヤーに変換されます。

この作業をするのは、「背景レイヤー」のままだと画像の一部を切り抜いたときに、透過の処理ができないためです。

角丸に切り取った後のバックを白色にする場合は、背景レイヤーのままでOKです。

ps_kado_4

 

左のツールアイコンの選択範囲ツールを右クリックし、「長方形選択ツール」を選びます。

ps_kado_5

 

すべてを選択、あるいは角丸の形で切り抜きたい部分を選択します。

今回は以下の部分を選択しています。

上下左右の縁の幅を揃えたい場合は、グリッドを表示させると便利です。

ps_kado_6

 

上のメニューの「選択範囲」から「選択範囲を変更」→「滑らかに」を選びます。

ps_kado_7

 

「半径」の数値を入力します。

ここの数字が大きいほど角が丸くなり、小さいほど普通の直角に近くなります。

今回は10pixelと設定しましょう。

ps_kado_8

 

入力後「OK」を押すと、下のように選択範囲の形が変更されます。

四隅が角丸の形になっていることが確認できます。

ps_kado_9

 

田島悠介

選択範囲を見るとどんな形になってるかな?

大石ゆかり

ちゃんと角が丸くなってますね!

田島悠介

ここまできたら、あとはこの形に沿って切り抜くだけだね。

次の手順に移ってみよう。

 

「選択範囲」から「選択範囲を反転」をクリックします。

これで枠内以外の縁の部分が選択されることになります。

ps_kado_10

 

そのまま「編集」→「消去」を選択します。

ps_kado_11

 

このように四隅が角丸になった状態で、最初に選択した部分が切り抜かれます。

ps_kado_12

 

あとは「選択範囲」から「選択を解除」をクリックして完成です。

ps_kado_13

 

角丸で切り抜かれた部分以外の場所は、透過の状態(何も描かれていない状態)になります。

ps_kado_14

 

透過の部分は下にレイヤーを新規作成し、塗りつぶしや画像を入れると画像の後ろに反映されます。

ps_kado_15

 

田島悠介

設定する「半径」の数値によって形が変わるのを覚えておこう。

数値が大きければ大きいほど丸い形になるんだ。

大石ゆかり

形の関係上、どうしても透過の部分ができてしまいますね。

田島悠介

角丸の外を残したい場合は、選択範囲から切り抜きではなく塗りつぶしを使うこともできるからね。

大石ゆかり

なるほど、ありがとうございます!

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

クリッピングマスクを使用した方法

つづいて、クリッピングマスクを使って写真を角丸にする方法です。

今回はサンプルとして、こちらの画像を使用します。

 

選択範囲での加工処理と同じく、加工対象のレイヤーの種類を確認します。

角丸にする対象の画像が背景レイヤーの場合、通常のレイヤーに変換する必要があります。

レイヤーパレット内で編集するレイヤーを右クリックし、「背景からレイヤーへ」を選択します。

 

レイヤー名を入力し、「OK」を押します。

ここでは「レイヤー0」としています。

このレイヤー名は必要に応じ、変更していただいて構いません。
(カラー・描画モード・不透明度などは変更する必要はありません。)

 

先ほど設定した名前の通常レイヤーに変換されます。

 

次に、画面左のツールパレットから「角丸長方形ツール」を選択します。

 

ツールを選択した状態で、写真の上で切り抜きたいサイズにドラッグし、角丸長方形を作ります。

ドラッグすると属性ツールが開くので、角丸のサイズを4辺ともに「40px」に調整します。

 

次に、クリッピングマスクを作成するため、角丸長方形のレイヤーを写真レイヤーの下に移動します。

 

そして写真レイヤーの上で右クリックし、開いたメニューから「クリッピングマスクを作成」を選びます。

 

すると、写真が先ほど作成した角丸長方形の形に切り抜かれます。

 

背景は透過になっているので写真の後ろに塗りつぶしレイヤーや画像を配置して、自由に加工できます。

 

今回の記事は以上です。

 

田島悠介

選択範囲を使用した方法とクリッピングマスクを使用した方法、どちらの方法も使えるようになっておくといいよ。

大石ゆかり

どちらの方法で作業してもいいんですか〜?

田島悠介

いろいろなやり方があるから、自分に合うやり方を見つけていくのがいいと思うよ。

大石ゆかり

なるほど、ありがとうございます!

 

執筆してくれたメンター

mentor-s

専門学校卒業後、4年間ゲーム開発会社でプログラマーを担当。

現在は講師兼個人ゲーム開発者。

ゲーム開発ではプログラミングだけでなく、画像・音楽・モデリングなどすべて行う。

 

もっとPhotoshopを使いこなしたい場合は、Photoshopで画像を左右反転にする方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。