ページのトップへ戻る
トップ > ブログ > デザイン > Photoshopで画像を切り抜く簡単な方法

Photoshopで画像を切り抜く簡単な方法


ホームページで使う画像を用意する時、あっちの画像とこっちの画像を組み合わせたい、みたいなことがよくあると思います。単純な四角形で切り貼りできれば簡単ですが、画像の中にあるいびつな形のものや、背景と区別しにくいものの場合、どうすればいいでしょうか。

今回は、輪郭がはっきりしているもの、形がいびつなもの、背景と区別しにくいもの、という3つのパターンの画像をサンプルに、Photoshopを使った画像の切り抜き手順を詳しく解説したいと思います。

背景がほぼ単色で、輪郭がはっきりしている画像

ロゴ画像など、背景が単色で区別しやすい画像を切り抜いてみます。

画面1

1.

レイヤー一覧から切り抜きたい画像のレイヤー(「背景」など)をダブルクリックして「新規レイヤー」ダイアログを表示させ、そのまま「OK」ボタンを押します
画面2

2.

ツールから「自動選択ツール」を選びます
画面3

3.

画面上部などに表示されるオプション設定で、選択した箇所と同じ色として認識する「許容値」を決め、「アンチエイリアス」と「隣接」のチェックをオンにします
画面4

4.

選択したい箇所の外側をクリックすると範囲が自動選択されます。さらにShiftキーを押しながら、「D・e・g」の内部のグレー部分をクリックして、選択範囲を追加してください
画面5

5.

キーボードのDeleteキーを押して選択範囲の色を削除したら、「Ctrl+D」(Mac OSではCommand+D)で選択範囲を解除します
画面6

6.

メニューの「ファイル」から「Web 用に保存…」を選択し、背景部分の透明を維持できるよう、「PNG-24」を選んで「透明部分」をチェックした状態で保存すれば完了です
画面7

背景は単純だが形がいびつなもの

青空を背景にしたひまわりなど、背景はシンプルながらやや複雑な形をしたものを切り抜いてみます。
画面8

1.

メニューの「選択範囲」から「色域指定」を選びます
画面9

2.

ダイアログ内の一番左側のスポイトアイコンを選択し、プレビュー画像内の花の部分をクリックします。また、「許容量」のスライダーを調整して花全体の輪郭がある程度はっきり見えるようにします
画面10

3.

次に真ん中のスポイトアイコンに切り替え、プレビュー画像でひまわりの内側などにある黒く抜けている部分をクリックし、選択範囲として追加してから「OK」を押します
画面11

4.

ひまわりの中央付近などにまだ選択されていない部分がないか確認してください
画面12

5.

選択されていない部分があれば、メニューの「選択範囲」から今度は「近似色を選択」を選びます
画面13

6.

これでひまわり全体が選択されました
画面14

7.

「Ctrl+Shift+I」(Mac OSではCommand+Shift+I)で選択範囲を反転させ、背景が選択された状態にします
画面15

8.

キーボードのDeleteキーを押して背景部分を削除します。あとは同じようにファイル保存すればOKです
画面16

背景と区別がしにくいもの

やや複雑な背景から、複雑な輪郭の人物を切り抜いてみます。
画面17

1.

「マグネット選択ツール」を選びます
画面18

2.

画面上部などに表示されるオプション設定で、「アンチエイリアス」をオンにします。輪郭として検知する敏感さなどを、「幅」「コントラスト」「頻度」の値で調整してみてください
画面19

3.

切り抜きたい輪郭付近に沿ってマウスカーソルを動かし、輪郭と合う場所でクリックしてポイントを追加していきます。ポイントがずれてしまった場合はDeleteキーで削除できます
画面20

4.

ざっと輪郭を選択できたら、「Ctrl+Shift+I」(Mac OSではCommand+Shift+I)で選択範囲を反転させます
画面21

5.

ツールの一番下にある「クイックマスクモード」ボタンを押すと、画像の選択できていない部分が分かりやすくなります
画面22

6.

選択範囲を追加するため「ブラシツール」を選択します
画面23

7.

選択できていない部分を塗り足していきます。選択範囲にしたい箇所は黒で、そうでない箇所は白で塗ります
画面24

8.

このようにきれいに選択できました
画面25

9.

再び「クイックマスクモード」のボタンで元の見え方(画像描画モード)に戻します
画面26

10.

キーボードのDeleteキーを押して背景部分を削除します。あとは同じようにファイル保存すればOKです
画面27

まとめ

複雑な形や模様の画像だと、きれいに切り抜くのに特別なテクニックが必要なのではないかと思ってしまいますが、基本的な機能を使うだけで簡単に実現できました。

あとは切り抜いた画像を他の画像と組み合わせて、自由自在に合成画像を作り出してみてください。ホームページなどに使うちょっとした画像であれば、他の人の手を借りることなく、十分な品質に仕上げることができるはずです。


トップ > ブログ > デザイン > Photoshopで画像を切り抜く簡単な方法