photoshopで背景を切り抜き、背景が透明な画像を作成する方法

ホームページやバナー広告を制作する際に画像を組み合わせて合成をさせています。デザインを活かすためにも背景を切り抜くことが必要となります。人や商品の背景を切り抜いて背景が無い透明（透過）の状態にしますが、人の背景や動物の背景を切り抜く際には、髪の毛が綺麗に透明で抜けているか抜いてないかで、画像の印象が大きく変わってきます。

そこで今回は、Photoshop（フォトショップ）を使用した加工の方法です。Photoshopにあまり触れた事がない、Photoshop初心者の方でも写真や画像の背景を簡単に切り抜くことができる方法を紹介します。

※今回使用するバージョンはAdobe Photoshop CC 2018です。

Photoshopを起動させて、背景を切り抜きたい画像を読み込ませます。画像のレイヤーを見ると「背景」になっているので、右側の鍵マークをクリックして、レイヤーのロックを解除します。

アプリケーションメニューの「選択範囲」をクリックして、「選択とマスク」を選択します。
ショートカットキーがあるので参考までに↓
【Mac】command+option+R　【Windows】Alt+Ctrl+R

「選択とマスク」の画面に切り替わり、「表示モード」を選択しますと、どのように選択されているのかを確認することができます。まずは、選択されている箇所が分かりやすいように、「オーバーレイ」を選択します。
こちらの表示モードは「F」キーを押すと順番に切り替えることができます。

選択されている「クイック選択ツール」で、表示させたい箇所をドラッグして選択していきます。

全体的大まかに選択をして、先程説明した「表示モード」を切り替えながら選択をしていきますと、スムーズに選択ができます。大まかに選択ができたのが下記の画像です。
表示モードですが、詳細がこちらです。

• オニオンスキン（オニオンスキンスキームとして選択範囲を可視化）
• 点線（選択範囲の境界線を点線で可視化）
• オーバーレイ（透明なオーバーレイとして選択範囲を可視化）
• 黒地（選択範囲を黒の背景上に配置）
• 白地（選択範囲を白の背景上に配置）
• 白黒（選択範囲を白黒のマスクとして可視化）
• レイヤー上（選択範囲を透明な領域で囲む）

続いて、髪の毛です。「ツールバー」の「境界線ブラシツール」を選択後、ブラシサイズを調整してから背景と髪の毛の境目をなぞっていきます。

「境界線ブラシツール」で選択後、「表示モード」を「白黒」にしてみます。下記の画像のように髪の毛が細かいところまで選択できていることが分かります。

選択が完了したら、出力設定です。私の場合、もともとあった画像のレイヤーを残しておきたいので、「新規レイヤー（レイヤーマスクあり）」で出力をしています。あとは「OK」を押すと、ワークスペースは自動に閉じます。

レイヤーを見てみると先程、選択した範囲がマスクとなって、新規にレイヤーが追加されている状態になっています。

 

まとめ

今回はAdobe Photoshop CC 2018を用いて私が、人物画像の背景を切り抜く方法を紹介させていただきました。Photoshopには切り抜き方法が「選択とマスク」以外にもたくさんあります。髪の毛といった細かい箇所の選択となると「選択とマスク」が最適なのではないかと思います。

この「選択とマスク」を使用すれば、あまりPhotoshopに触れたことのない、初心者の方でも、簡単に背景を切り抜いた画像を作成することができるので、デザインの幅も広がるかと思います。

また、2017年11月に行われた、Adobe MAX Japan 2017では次世代のPhotoshopが紹介されていました。今後はこの背景を切り抜く作業もボタン1つ、もしくは言葉で完結してしまう時も来るでしょう。

 

他にも画像加工の方法を紹介していますので、よろしければご覧ください。

参照：Photoshopで写り込んで欲しくない人や不要な物を消す方法

参照：ECサイトで使う商品写真をphotoshopでレタッチする４つの手順

参照：Photoshopで背景を透明にし、別の背景と組み合わせる方法

参照：Photoshopの使い方：部分的に色を置き換える方法

 

本記事に関する提供サービス
・ホームページ制作