english

ブログ

2018.01.17

簡単に背景を切り抜いて、背景が透明な画像を作成する方法
簡単に背景を切り抜いて、背景が透明な画像を作成する方法

Web制作

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

そこで今回は、Photoshop(フォトショップ)を使用した加工の方法です。Photoshopにあまり触れた事がない、Photoshop初心者の方でも写真や画像の背景を簡単に切り抜くことができる方法を紹介させていただきます。
以前の私の記事で、人物画像の背景の切り抜き方をPhotoshop CS6を用いて解説をさせていただきました。その時に比べ切り抜く精度が高く、簡単に切り抜けるようになっています。
※今回使用するバージョンは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つ、もしくは言葉で完結してしまう時も来るでしょう。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ