初心者向け！Photoshopで画像を切り抜く方法と気をつけること

制作
2018-10-31
更新日: 2023-2-18
narumi.saito

Webデザイナーなら必ず経験する画像の切り抜き。
Photoshopで画像を切り抜くには様々な方法がありますが、初心者はどれを使えば良いのかわからないですよね…
今回はおすすめの切り抜き方と気をつけることを紹介します！
ショートカットキーはMac/Windowsで表記しています。

>>Webサイト制作成功へのプロセスが分かる。無料eBook公開中！

1 切り抜く時に気をつけること
- 1.1 スマートオブジェクトにするべし
- 1.2 マスクをかけるべし
2 切り抜き方法紹介
3 まとめ

切り抜く時に気をつけること

スマートオブジェクトにするべし

スマートオブジェクトにすることで元の画像を残したまま拡大縮小することができます。
これをしないまま縮小した後に拡大すると画像が荒れてしまうので気を付けましょう。
自由変形（ショートカットキー：command+T/ctrl+T）する時に元の画像から何％拡大縮小したのか、どれくらい傾けたのかがわかるのが便利です。
元画像からどれくらい拡大縮小してどれくらい傾けたのかわかるパネル

また、同じスマートオブジェクトが複数ある場合、1つのデータを編集して更新すれば全てに反映されます。

スマートオブジェクトにするには2つの方法があります。

レイヤーパネルの該当レイヤーを右クリックして「スマートオブジェクトに変換」
レイヤーパネルの画像

またはメニューバーのレイヤー＞スマートオブジェクト＞スマートオブジェクトに変換
メニューバーの「レイヤー」をプルダウンした画像

でできます。

残念ながらデフォルトでスマートオブジェクトに変換のショートカットキーはありません…
Macを使っている私は自分で「command+control+E」に設定しました。
スマートオブジェクトに変換するとレイヤーのサムネイル部分に紙のようなマークが現れます。
レイヤーのサムネイルにスマートオブジェクトになったマークがついている画像

マスクをかけるべし

「画像の切り抜き」と言いますが、本当に切り抜いてそれ以外のところを削除してしまうと後が大変です。
なぜなら「もっと引いた画像にしたいな」と言われることがあるからです。
マスクをかけることで元の画像を保持したまま切り抜きたいところだけ表示することが可能になるので、後から拡大縮小が簡単にできます。
表示エリアの大きさは同じで中の写真を拡大縮小した画像
マスクのかけ方は切り抜きたい形によって変わるので切り抜き方法と一緒に紹介します！

切り抜き方法紹介

簡単な図形なら長方形ツールや楕円形ツールで

楕円形ツールで切り抜かれた画像のビフォーアフター
長方形や楕円に切り抜きたい時は長方形ツールや楕円形ツールでシェイプを描いた後にクリッピングマスクまたはベクトルマスクで切り抜くのがおすすめです。
なぜなら切り抜いた形を後からパス選択ツール（ショートカットキー：A）で変形でき、直線の境界が綺麗にできるからです！
パス選択ツールで変形された画像

クリッピングマスク

長方形ツールや楕円形ツール（ショートカットキー:U（shift+Uで多角形ツールなどに変更できます））をシェイプに設定し、切り抜きたい形を描きます。
切り抜きたいレイヤーの下にシェイプを重ねて、2つのレイヤーの境目を「option+クリック」
またはショートカットキーcommand+option+G/ctrl+alt+G。

ベクトルマスク

マスクをかけたいレイヤーを選択します。
長方形ツールや楕円形ツールをパスに設定し切り抜きたい形を描きます。
マスクをクリック

文字の形にするならテキストをシェイプに変換

山と湖の写真が文字の形に切り抜かれるビフォーアフター

文字の形に切り抜きたい時は横書き文字ツール（ショートカットキー：T）で文字を打った後にシェイプに変換、クリッピングマスクで切り抜くのがおすすめです。
なぜなら図形と同様に切り抜いた形を後からパス選択ツール（ショートカットキー：A）で変形できるからです！

横書き文字ツール（ショートカットキー：T）で文字を打ちます。
文字のレイヤーを右クリックして「シェイプに変換」をクリック。
この時注意しなければならないのが、シェイプに変換した後に文字の変更ができないことです。変換する前に文字のレイヤーを複製するのがいいでしょう。
切り抜きたいレイヤーの下にシェイプを重ねて2つのレイヤーの境目を「option+クリック」。
またはショートカットキーcommand+option+G/ctrl+alt+G。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

複雑な図形ならペンツールで

色鉛筆をペンツールで切り抜く前後

長方形や楕円形より複雑な図形の時はペンツールの後でクリッピングマスクにするのがオススメです。

ペンツール（ショートカットキー:P）をシェイプに設定し、切り抜きたい形を描きます。
この時、ペンツールの塗りを好きな色に設定してレイヤーの不透明度を下げておくとどこが切り抜かれるかわかりやすくなりますよ。
切り抜きたいレイヤーの下にシェイプを重ねて、2つのレイヤーの境目を「option+クリック」
またはショートカットキーcommand+option+G/ctrl+alt+G。

ぼやけさせたいならグラデーションマスクかクリッピングマスクをぼかす

青い鳥の写真がぼかされながら切り抜かれるビフォーアフター

画像を背景にぼやけて溶け込ませたい時はどんな形にぼやけさせるかで変わってきます。

グラデーションマスク

1箇所をぼやけさせたい時はマスクにグラデーションをかけます。

マスクをかけたいレイヤーを選択してレイヤーパネルの1番下にあるマスクの追加ボタンをクリック。

マスクのサムネイルをクリック
グラデーションツール（ショートカットキー：G）で画像にグラデーションをかける

クリッピングマスクのシェイプをぼかす

円形や四角形にぼやけさせたい時はシェイプをぼかします。
この方法だとぼかした後の変形が簡単にできます。

長方形ツールや楕円形ツールでぼかしたい形を描く
メニューバーのフィルター＞ぼかし＞ぼかし（ガウス）をクリック
「ラスタライズするか、スマートオブジェクトに変換する必要があります。」と出てくるので「スマートオブジェクトに変換」をクリック
どれくらいぼかすか半径を調節して「OK」をクリック。
ぼかしたいレイヤーの下に配置して2つのレイヤーの境目を「option+クリック」
またはショートカットキーcommand+option+G/ctrl+alt+G。

選択範囲をぼかす

円形や四角形にぼやけさせたい時は選択範囲をぼかす方法もあります。

長方形選択ツールや楕円形ツール（ショートカットキー：M）にしてぼかしの数値を入力します。
切り抜きたいエリアを選択します。選択したところは点線に囲われます。
マスクをかけたいレイヤーを選択してレイヤーパネルの1番下にあるマスクの追加ボタンをクリック。

輪郭がはっきりしたものなら自動選択ツールが簡単

自動選択ツールで切り抜いたお皿に入っているレモン
輪郭がはっきりしたものは自動選択ツールが簡単にできます。

切り抜きたいレイヤーを選択します。
自動選択ツール（ショートカットキー：W）で切り抜きたい箇所をクリック。（shiftを押しながらクリックすると選択範囲を追加、option/altを押しながらクリックすると除外できますよ。）選択したところは点線に囲われます。
選択範囲の反転（ショートカットキー：shift+command+I /ctrl+shift+I）
レイヤーパネルの1番下にあるマスクの追加ボタンをクリック。

毛髪など複雑なものは選択とマスクで

犬の形に切り抜かれた写真のビフォーアフター
人物や動物を切り抜きたい時、面倒なのが毛の部分。
選択とマスクのワークスペースに移動すれば簡単にできます。

メニューバーの選択範囲＞選択とマスク（ショートカットキー：command+option+R/ctrl+alt+R）にしてワークスペースを変更します。
クイック選択ツール（ショートカットキー：W）にして大まかに選択します。
この時、表示モードが色々あるので画像に合わせて切り抜きやすい表示モードにしましょう。今回はオーバーレイでの表示です。
境界線調整ブラシツール（ショートカットキー：R）で毛のふわふわした部分を選択していきます。

この時に右の属性パネルにあるエッジの検出やグローバル調整の数値を調整すると綺麗に切り抜けます
属性パネルにある出力設定の出力先をレイヤーマスクにしてEnterキーを押したら完了です。