ホームページで使う画像を用意する時、あっちの画像とこっちの画像を組み合わせたい、みたいなことがよくあると思います。単純な四角形で切り貼りできれば簡単ですが、画像の中にあるいびつな形のものや、背景と区別しにくいものの場合、どうすればいいでしょうか。
今回は、輪郭がはっきりしているもの、形がいびつなもの、背景と区別しにくいもの、という3つのパターンの画像をサンプルに、Photoshopを使った画像の切り抜き手順を詳しく解説したいと思います。
背景がほぼ単色で、輪郭がはっきりしている画像
ロゴ画像など、背景が単色で区別しやすい画像を切り抜いてみます。
1.
レイヤー一覧から切り抜きたい画像のレイヤー（「背景」など）をダブルクリックして「新規レイヤー」ダイアログを表示させ、そのまま「OK」ボタンを押します
2.
ツールから「自動選択ツール」を選びます
3.
画面上部などに表示されるオプション設定で、選択した箇所と同じ色として認識する「許容値」を決め、「アンチエイリアス」と「隣接」のチェックをオンにします
4.
選択したい箇所の外側をクリックすると範囲が自動選択されます。さらにShiftキーを押しながら、「D・e・g」の内部のグレー部分をクリックして、選択範囲を追加してください
5.
キーボードのDeleteキーを押して選択範囲の色を削除したら、「Ctrl＋D」（Mac OSではCommand＋D）で選択範囲を解除します
6.
メニューの「ファイル」から「Web 用に保存...」を選択し、背景部分の透明を維持できるよう、「PNG-24」を選んで「透明部分」をチェックした状態で保存すれば完了です
背景は単純だが形がいびつなもの
青空を背景にしたひまわりなど、背景はシンプルながらやや複雑な形をしたものを切り抜いてみます。
1.
メニューの「選択範囲」から「色域指定」を選びます
2.
ダイアログ内の一番左側のスポイトアイコンを選択し、プレビュー画像内の花の部分をクリックします。また、「許容量」のスライダーを調整して花全体の輪郭がある程度はっきり見えるようにします
3.
次に真ん中のスポイトアイコンに切り替え、プレビュー画像でひまわりの内側などにある黒く抜けている部分をクリックし、選択範囲として追加してから「OK」を押します
4.
ひまわりの中央付近などにまだ選択されていない部分がないか確認してください
5.
選択されていない部分があれば、メニューの「選択範囲」から今度は「近似色を選択」を選びます
6.
これでひまわり全体が選択されました
7.
「Ctrl＋Shift＋I」（Mac OSではCommand＋Shift＋I）で選択範囲を反転させ、背景が選択された状態にします
8.
キーボードのDeleteキーを押して背景部分を削除します。あとは同じようにファイル保存すればOKです
背景と区別がしにくいもの
やや複雑な背景から、複雑な輪郭の人物を切り抜いてみます。
1.
「マグネット選択ツール」を選びます
2.
画面上部などに表示されるオプション設定で、「アンチエイリアス」をオンにします。輪郭として検知する敏感さなどを、「幅」「コントラスト」「頻度」の値で調整してみてください
3.
切り抜きたい輪郭付近に沿ってマウスカーソルを動かし、輪郭と合う場所でクリックしてポイントを追加していきます。ポイントがずれてしまった場合はDeleteキーで削除できます
4.
ざっと輪郭を選択できたら、「Ctrl＋Shift＋I」（Mac OSではCommand＋Shift＋I）で選択範囲を反転させます
5.
ツールの一番下にある「クイックマスクモード」ボタンを押すと、画像の選択できていない部分が分かりやすくなります
6.
選択範囲を追加するため「ブラシツール」を選択します
7.
選択できていない部分を塗り足していきます。選択範囲にしたい箇所は黒で、そうでない箇所は白で塗ります
8.
このようにきれいに選択できました
9.
再び「クイックマスクモード」のボタンで元の見え方（画像描画モード）に戻します
10.
キーボードのDeleteキーを押して背景部分を削除します。あとは同じようにファイル保存すればOKです
まとめ
複雑な形や模様の画像だと、きれいに切り抜くのに特別なテクニックが必要なのではないかと思ってしまいますが、基本的な機能を使うだけで簡単に実現できました。
あとは切り抜いた画像を他の画像と組み合わせて、自由自在に合成画像を作り出してみてください。ホームページなどに使うちょっとした画像であれば、他の人の手を借りることなく、十分な品質に仕上げることができるはずです。
▼この記事もおすすめ
