Web 用に使用する写真や画像をフォトショで丸く切り抜く方法をいくつか紹介します。丸くと書きましたが、三角でも星型でも、好きな形でもほとんど同じやり方です！
選択範囲を使って切り抜く
一番、初歩的なやり方です！
まず、
加工したい写真を Photoshop に読み込ませます。今回はサクッとドラッグ&ドロップで！
STEP.1 「楕円形選択ツール」を選択
ツールパネルから「楕円形選択ツール」を選択します。表示されていない場合は、表示されている選択ツールをクリックで長押しすると各種選択ツールが出現します。
STEP.2 切り抜きたい部分を選択
切り抜きたい部分をドラッグして選択します。その際、正円にしたい場合は、[Shift]キーを押したままドラッグして選択します。
選択した後に、点線の内側をドラッグすることで選択範囲の位置を動かすことも可能です。切り抜いてしまったら、そのあとに外側の編集はできなくなるので、先にしっくりくる位置をキメちゃいましょう！
STEP.3 選択範囲を反転
メニューバーより「選択範囲(S)」>「選択範囲を反転(I)」をクリックします。
これにより、選択範囲が円の内側から外側に反転します。
反転した選択範囲は、写真の外側、カンバス全体に及んでいることは頭の片隅に入れておきましょう。
STEP.3 反転した選択範囲を削除
[Delete]キーを押して、切り抜きたい部分の外側の画像を削除すると画像を丸く切り抜くことができました！
切り抜いた後、まだ選択範囲が残っているので忘れずに選択の解除をしておきましょう！メニューバーより「選択範囲(S)」>「選択の解除(D)」をクリックします。
レイヤーマスクで切り抜く
先に、
この方法は本来の機能としては「切り抜き（クロッピング）」ではなく、「マスキング」だという点は頭に入れておいてください。マスキングとは、“覆い隠す”的な意味です。丸の外側を“隠して”丸に見せちゃえって感じです！隠しているだけなので、後からの編集もらくちんっていう寸法よっ！
STEP.1 「楕円形選択ツール」を選択
ツールパネルから「楕円形選択ツール」を選択します。表示されていない場合は、表示されている選択ツールをクリックで長押しすると各種選択ツールが出現します。
※STEP.1 は『選択範囲を使って切り抜く』と同じです。
STEP.2 切り抜きたい部分を選択
切り抜きたい部分をドラッグして選択します。その際、正円にしたい場合は、[Shift]キーを押したままドラッグして選択します。
※STEP.2 は『選択範囲を使って切り抜く』と同じです。
STEP.3 レイヤーマスクを追加
切り抜きたいレイヤーを選択した状態で、レイヤーパネルの下の方にある左から３つ目の日本国旗みたいなアイコン「レイヤーマスクを追加」をクリックします。
すると、
写真を切り抜くことができます。
「レイヤーマスク」が適用されると、「レイヤーマスクサムネール」というサムネールが写真レイヤーの右側に出現します。この状態を理解するのが初心者のうちはかなり難解だと思いますが、フォトショを使っていくうちに慣れると思うので、ぜひどんどん使ってみてください。
また、ここではあまり詳しくは触れませんが、「レイヤーマスクサムネール」の黒い部分がマスキングされている部分です。このサムネールを選択した状態でブラシツールなどを使い白や黒で塗ることで、マスクの適用範囲を編集したり、まわりをぼかしたりすることもできます。イラスト描いたりする人は、結構良く使うかもしれませんね！
クリッピングマスクで切り抜く
Web 用途の画像や写真レベルで、スピード重視ならこのやり方が個人的にはオススメです！こちらのやり方も「レイヤーマスク」と同様に本来の機能としては「マスキング」です。
STEP.1 「楕円形ツール」を選択
ツールパネルから「楕円形ツール」を選択します。表示されていない場合は、表示されている選択ツールをクリックで長押しすると各種選択ツールが出現します。
その際、Photoshop 上部のオプションバーの左の方が、「パス」ではなく「シェイプ」にしましょう。
※「ピクセル」でもできますが、今回は「シェイプ」で。
STEP.2 切り抜きたい部分に丸を作成
切り抜きたい部分の上に、ドラッグして“丸”を作成します。その際、正円にしたい場合は、[Shift]キーを押したままドラッグします。
“丸”の色はべつになんでもOK、気にしなくて大丈夫です。
STEP.3 丸レイヤーを写真レイヤーの下に
作成した丸（楕円形）レイヤーをドラッグ＆ドロップで写真レイヤーの下に移動します。
なお、丸レイヤーの位置は、写真レイヤーの真下でなければいけませんのでご注意を！
STEP.4 クリッピングマスクの作成
写真レイヤーを選択して右クリック、「クリッピングマスクを作成(C)」をクリックします。
すると、
写真を切り抜くことができました！
「クリッピングマスク」が適用されると、クリッピングされているレイヤーが少し右にズレ、クリッピングしているレイヤーへの矢印が表示されます。
また、この「クリッピングマスク」は、設定後の編集も容易に可能です。右クリックから「クリッピングマスクを解除」することで元に戻すこともできますし、「移動」ツールで写真の位置をズラしたり、「パス選択」ツールで丸の形を変えたりもできます！
すごく簡単な割に、結構拡張性もあるのです！
ベクトルマスクを使用する
さて、本記事のラスボスです。
このやり方の考え方は、初心者のうちはめちゃくちゃ混乱するかもしれません。まずは、こんなやり方があるんだと読み飛ばしてもらえたらと思います。
この「ベクトルマスク」は、「レイヤーマスク」の高精度版というイメージです。より高解像度の画像などを編集する場合はこちらの方法で切り抜く方が、クオリティを追求できるかもしれませんね。そしてクオリティという面だけ考えると Web 用途にはオーバースペックなのかもしれません。
STEP.1 「楕円形ツール」を選択し、「パス」に変更する
まず、
ツールパネルから「楕円形ツール」を選択します。表示されていない場合は、表示されている選択ツールをクリックで長押しすると各種選択ツールが出現します。
そして、
Photoshop 上部のオプションバーの左の方を、「パス」に変更します。
STEP.2 切り抜きたい部分に丸を作成
切り抜きたい部分の上に、ドラッグして“丸”を作成します。その際、正円にしたい場合は、[Shift]キーを押したままドラッグします。
すると、
何やら細い“線”で出来た丸が残りました。これが「パス」です。
「パス」はレイヤーウィンドウではなく、パスウィンドウに「作業用パス」という名前で爆誕しますす。パスウィンドウは、メニューバーより「ウインドウ(W)」>「パス」をクリックすることで表示させることができます。
この「作業用パス」は名前の通り作業用です。そのままでも進められますが、せっかくなので保存します。
保存するには、「作業用パス」をダブルクリック、またはメニューアイコンから「パスを保存」します。任意の名前を付けられます。ちなみに「作業用パス」は斜体で表示されますので、仮に『作業用パス』という名前の保存されたパスがあれば、それで見分けられますね。（そんないじわるする人はいないでしょうが。。。）
保存することで、なんかいろいろほかの作業してたらいつの間にか消えたりもしませんし、新しい作業用パスを作ることもできます。
STEP.3 ベクトルマスクを作成
楕円形ツール、切り抜きたい写真のレイヤー、切り抜きたい形のパス、この３つを選択した状態で、Photoshop 上部のオプションバーの「マスク」をクリックして、新規ベクトルマスクを作成します。
すると、
写真を切り抜くことができました！
「ベクトルマスク」が適用されると、パスウィンドウに「〇〇 ベクトルマスク」というものが出現し、レイヤーウィンドウでは「ベクトルマスクサムネール」というサムネールが写真レイヤーの右側に出現します。
見た目が「レイヤーマスクサムネール」と似ていますね。
このベクトルマスクもいろいろと細かい編集が可能ですのでいろいろと試してみてください。
また、発展形として、
この「パス」は、Web 用途ではなく印刷用のデータで「Illustrator」と連携して使うときに「クリッピングパス」という機能を使うためにも関わってきます。本記事では触れませんが、興味のある方は調べてみてはいかがでしょうか。
まとめ
今回は、4つの切り抜きの方法を紹介しました。
正しくは、「選択範囲」を使っての切り抜き方法と、「クリッピングマスク」、「レイヤーマスク」、「ベクトルマスク」のマスキング方法ですね。
どの方法もフォトショを使う上では超重要なスキルで、どれか一つ覚えおけばよいというわけではなく、将来的には適材適所で使い分けていくことになります。
似たような用語や、似たような見た目のアイコンがたくさん出てきましたので、初心者のうちは混乱すること必至ですが、使いまくってるうちに自然と身につくので、ぜひぜひいろいろと試してみてください！
ちなみに私は、Web 用途であれば「クリッピングマスク」での切り抜きが簡単スピーディでオススメです！
参考・出典
・Adobe. 「ベクトルマスクによるレイヤーのマスク」. https://helpx.adobe.com/jp/photoshop/using/masking-layers-vector-masks.html, 2024年9月28日閲覧。
