DTP・WEBデザイナーの方、Photoshopを使って作業を行っている方に質問です。

皆さんは、Photoshopで画像を切り抜く際どのように作業していますか？

さまざまな方法があると思いますが、その中でも従来主流であったパス（ペンツール）を駆使して作業しているケースが結構多いのではないでしょうか。簡単な描写の画像はキレイにそして素早く切り抜くことが出来ると思いますが、人物の髪の毛・背景の一部等、複雑な描写の画像はどうしても時間がかかってしまいます。

そこで今回は、PhotoshopCCの「選択とマスク」機能についてご紹介します。
従来の方法で作業するよりもきれいに切り抜くことができ、スピードアップが見込めます。
Photoshopを使い始めて間もない方も簡単に切り抜きすることができるので、ぜひ参考にしてください。

PhotoshopCCの「選択とマスク」機能について

手順・使用方法

手順・使用方法は以下の通りです。

それでは詳細をご説明します。

①「選択とマスク」機能を選択してワークスペースに切り替える

ワークスペースが起動します。

右側の属性パネルの「表示」をオーバーレイに設定してください。
元の画像に半透明の赤いカラーが被さった状態になります。

オーバーレイに設定する理由は半透明の色を重ねて切り抜き部分をわかりやすくするためです。
これで下準備の完了です。

※ワークスペースはescキーもしくは右下のキャンセルボタンで解除することができます。
※あくまでおすすめの設定ですので、表示・色・不透明度を調整して自分にあった設定で作業してください。

② 「クイック選択ツール」選択範囲を設定する

初めに一番上のクイック選択ツールを選択して切り抜きたい対象をなぞってください。
切り抜き対象部分の色が赤から元の色にもどります。

一度クリックするだけでも自動的に選択範囲を判別されるので選択範囲の対象をどんどんクリックもしくはなぞっていきましょう。
上のツールオプションでブラシの大きさが調整可能です。

③「境界線調整ブラシツール・ブラシツール」で細かい範囲を調整する

選択の範囲が甘い部分をズームツールで拡大し、二番目の境界線調整ブラシツールを使用してなぞりましょう。
対象が自由に細かく選択されます。
三番目のブラシツールは自動的に設定されないので自由にブラシで塗ることができます。

④ 出力先を設定して切り抜き完了

最後に右側の属性パネルの下側の出力先をレイヤーマスクに変更してOKボタンをおしてください。

ワークスペースが閉じ、レイヤーマスクが掛かった状態で表示されます。
※作業工程に応じて設定を変更してみてください。

以上で作業完了となります。

さらに効率とクオリティを上げるためには

より早く切り抜くコツ

切り抜く画像を複製して調整レイヤー（トーンカーブ等）で差がわかるように極端に補正し、複製した画像と調整レイヤーと統合してください。
そしてそれを「選択とマスク」機能を使って切り抜きすると元の画像と比べてスピードが上がります。
あとは、切り抜きが完了したら、切り抜かれた範囲を元画像に反映し、統合したデータを削除すれば完了です。

クオリティを高めるコツ

「選択とマスク」機能は細かい部分は得意ですが、パスのほうがくっきり切り抜くことが出来ます。
人物などの切り抜きは、体部分はパスをつかい、髪の毛や複雑な部分は「選択とマスク」機能を使用すればクオリティが上がります。

さいごに

今回はPhotoshopCCの「選択とマスク」機能について説明しました。
この機能を知らなかったPhotoshopCCユーザー、従来の方法を使用していた方、これを機に積極的に「選択とマスク」機能を活用してはいかがでしょうか。作業効率がアップすると思います。

現在PhotoshopCCが2018年1月22日にアップデートされ、新たに「被写体を選択」機能が登場しました。こちらは1クリックで被写体を選択出来る機能となります。
簡単な画像でしたら一回できれいに切り抜くことが可能ですが、複雑な描写の画像は精度が高くない場合もあります。
うまく切り抜けなかった場合は、今回紹介した「選択とマスク」機能のワークスペース内で微調整できますので二つの機能を上手に活用してみてください。

この記事を書いた人

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。

この執筆者の最新記事

この執筆者の記事一覧

• 2022年10月24日WEBGraphQLサーバを構築するためのGoライブラリ「gqlgen」を使ってGraphQLサーバーを構築してみる
• 2022年8月25日WEBGo WebAssemblyでブラウザ上でGoを実行する その3 Javascript側からGoの関数を呼び出す
• 2022年6月21日WEBGo WebAssemblyでブラウザ上でGoを実行する その2 Go側からJavascriptを操作する
• 2022年4月25日WEBGoのコードをWebAssenblyにコンパイルしてブラウザ上でGoを実行する