悩めるWEB担当者様のための最新ノウハウをお届け

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

pexels-photo

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

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

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

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

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

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

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

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

でできます。

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

マスクをかけるべし

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

切り抜き方法紹介

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

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

クリッピングマスク

  1. 長方形ツールや楕円形ツール(ショートカットキー:U(shift+Uで多角形ツールなどに変更できます))をシェイプに設定し、切り抜きたい形を描きます。
    お皿の形に合わせて楕円形ツールで円を描いた画像
  2. 切り抜きたいレイヤーの下にシェイプを重ねて、2つのレイヤーの境目を「option+クリック」
    またはショートカットキーcommand+option+G/ctrl+alt+G。
    クリッピングマスクが行われたレイヤーパネル

ベクトルマスク

  1. マスクをかけたいレイヤーを選択します。
    選択されたレイヤーはレイヤーパネルで少し明るく表示される
  2. 長方形ツールや楕円形ツールをパスに設定し切り抜きたい形を描きます。
    お皿に合わせて円が描かれている
  3. マスクをクリック
    メニューバーの下にある「マスク」をクリック

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

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

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

  1. 横書き文字ツール(ショートカットキー:T)で文字を打ちます。
    横書き文字ツールで写真の上に文字が打ち込まれる
  2. 文字のレイヤーを右クリックして「シェイプに変換」をクリック。
    この時注意しなければならないのが、シェイプに変換した後に文字の変更ができないことです。変換する前に文字のレイヤーを複製するのがいいでしょう。
    複製した文字のレイヤーをレイヤーパネルで「シェイプに変換」をクリックしている
  3. 切り抜きたいレイヤーの下にシェイプを重ねて2つのレイヤーの境目を「option+クリック」。
    またはショートカットキーcommand+option+G/ctrl+alt+G。
    クリッピングマスクで切り抜く

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

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

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

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

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

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

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

グラデーションマスク

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

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

  2. マスクのサムネイルをクリック
    マスクのサムネイルをクリック
  3. グラデーションツール(ショートカットキー:G)で画像にグラデーションをかける
    グラデーションツールで画像にグラデーションをかける

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

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

  1. 長方形ツールや楕円形ツールでぼかしたい形を描く
    写真の上に円を描く
  2. メニューバーのフィルター>ぼかし>ぼかし(ガウス)をクリック
    メニューバーの「フィルター」がプルダウンされた画像
  3. 「ラスタライズするか、スマートオブジェクトに変換する必要があります。」と出てくるので「スマートオブジェクトに変換」をクリック
    ポップアップの画像
  4. どれくらいぼかすか半径を調節して「OK」をクリック。
    ぼかす半径の調整をするポップアップの画像
  5. ぼかしたいレイヤーの下に配置して2つのレイヤーの境目を「option+クリック」
    またはショートカットキーcommand+option+G/ctrl+alt+G。
    レイヤーパネルで写真の下に円を移動してクリッピングマスクをかける

選択範囲をぼかす

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

  1. 長方形選択ツールや楕円形ツール(ショートカットキー:M)にしてぼかしの数値を入力します。
    ツールバーで長方形選択ツールにしてぼかしの数値を30に設定
  2. 切り抜きたいエリアを選択します。選択したところは点線に囲われます。
    画像の上で角が丸くなった長方形に選択
  3. マスクをかけたいレイヤーを選択してレイヤーパネルの1番下にあるマスクの追加ボタンをクリック。
    レイヤーパネルの1番下にあるマスクの追加ボタンをクリック

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

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

  1. 切り抜きたいレイヤーを選択します。
    レイヤーパネルで切り抜きたいレイヤーをクリック
  2. 自動選択ツール(ショートカットキー:W)で切り抜きたい箇所をクリック。(shiftを押しながらクリックすると選択範囲を追加、option/altを押しながらクリックすると除外できますよ。)選択したところは点線に囲われます。
    写真の選択した範囲は点線で囲われている画像
  3. 選択範囲の反転(ショートカットキー:shift+command+I /ctrl+shift+I)
    メニューバーの「選択範囲」をプルダウンした画像
  4. レイヤーパネルの1番下にあるマスクの追加ボタンをクリック。
    レイヤーパネルの下にある「マスクの追加」をクリック

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

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

  1. メニューバーの選択範囲>選択とマスク(ショートカットキー:command+option+R/ctrl+alt+R)にしてワークスペースを変更します。
    メニューバーの「選択範囲」をプルダウンした画像
  2. クイック選択ツール(ショートカットキー:W)にして大まかに選択します。
    この時、表示モードが色々あるので画像に合わせて切り抜きやすい表示モードにしましょう。今回はオーバーレイでの表示です。
    選択されていないところは半透明の赤で塗り潰されている
  3. 境界線調整ブラシツール(ショートカットキー:R)で毛のふわふわした部分を選択していきます。
    毛のフサフサした部分を大まかになぞって選択していく
    この時に右の属性パネルにあるエッジの検出やグローバル調整の数値を調整すると綺麗に切り抜けます
    属性パネルの画像。エッジの検出は半径の調整、グローバル調整は滑らかに・ぼかし・コントラスト・エッジをシフトで調整できる
  4. 属性パネルにある出力設定の出力先をレイヤーマスクにしてEnterキーを押したら完了です。
    出力設定の出力先はプルダウンで変更できる。「レイヤーマスク」に設定する

まとめ

切り抜きたい画像にあった方法は見つかりましたか?
切り抜く時は画像をスマートオブジェクトに変換、マスクをかけることを心がけてくださいね。

おすすめの切り抜き方は、

  • 簡単な形ならシェイプで
  • 文字はシェイプに変換
  • 複雑な図形はペンツールで
  • ぼやけさせたい時はグラデーションマスクやシェイプ、選択範囲をぼかす
  • 輪郭がはっきりしたものは自動選択ツール
  • 複雑なものはクイック選択ツールの後に選択とマスクで調整

様々な方法がありますが、切り抜きたいものに合わせて使い分けてくださいね。


DIでは画像作成を始め、CVへの誘導を意識した設計・デザインのコンサルティングをご提供しています。
webサイトのコンバージョン率を改善したい方、動線に改善余地が無いか気になる方、お気兼ねなくお問い合わせください!

関連記事